gre / deprecated-glsl.js Goto Github PK

I have recently started using glsl.js, and I am very happy about this great tool. Most of my game is created using the PIXI.js framework, but to handle the shaders elegantly, I decided to use glsl.js .

However, PIXI.js renders all objects to a canvas using WebGL. When I then try to pass this canvas to the shader to be put in a Sampler2d object, it does not seem to work.
To be exact, it seems to work for one frame, that is I see it 'flicker' once and then the texture isn't shown anymore.

When I use the native canvas renderer of PIXI.js, it works fine, albeit far slower of course.

You can check my current test code with all canvases visible here: http://wmmusic.nl/codexamples/pixijs/glslwebgltest/smuv2.html

and how it looks with the canvas renderer:http://wmmusic.nl/codexamples/pixijs/v14/smuv2.html

http://www.reddit.com/r/programming/comments/18r0rb/glsljs_a_javascript_glsl_library_dry_efficient/c8hjbsc

today the binding is always using {x, y, z, w}:

{x, y} => vec2(x,y)
{x, y, z} => vec3(x,y,z)
{x, y, z, w} => vec4(x,y,z,w)

{r, g, b, a} and {s, t, p, q} binding should also work (introspection?).

Also a raw array type should work for these vec* types :

e.g.: Float32Array(4) => vec4(arr[0], arr[1], arr[2], arr[3])

Hey there,

Love the library! I wanted to use it to copy a full screen canvas into a shader (as demonstrated in your snake game), but this was very slow.

I modified the library so it does not have to allocate the texture each time, thus speeding it up.

This:

        var texture;
        texture = this.textureForTextureUnit[textureUnit];
        if (texture) {
            gl.deleteTexture(texture);
        }

        texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, value);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.uniform1i(loc, textureUnit);
        this.textureForTextureUnit[textureUnit] = texture;

becomes this:

        var texture;
        texture = this.textureForTextureUnit[textureUnit];
        if (texture)
        {
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, value);
        }
        else
        {
            texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, value);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
            gl.uniform1i(loc, textureUnit);
            this.textureForTextureUnit[textureUnit] = texture;
        }

Now I get nice speedy full screen canvas copies. 👍

John

It'd be nice if this was on NPM so that it could be integrated with Browserify more easily.

This seemed to be only briefly mentioned in your blog post. I could see the benefit of having this same Uniform/Attribute access layer being able to support Model Matrix, Camera, Perspective for 3d models through vertex shaders. Could you expound upon the reason to only use fragment shaders?

If would be nice if glsl.js would automatically fall back to its standard no-WebGL canvas version when WebGL is not supported.
In doing so glsl.js could be used to spice up canvas animations on browsers that support WebGL while still offering a plain canvas animation for other browsers.

http://greweb.fr/glsl.js/examples/canvas-text/ seems to leak on Android when you wait like 1 minute.

https://npmjs.org/search?q=glsl

cool stuff out there :)

The mario_sprites example seems not to work for a lot of people, have to investigate this.

I hope it's a solvable issue and not something linked to the graphic card.

Mario example is here: http://greweb.fr/glsl.js/examples/mario_sprites/

If you experiment the issue too, please copy/paste the result of these tests:
http://www.browserleaks.com/webgl

Here is mine (macbookpro):

WebGL Context Info
Context Name    experimental-webgl
GL Version  WebGL 1.0 (OpenGL ES 2.0 Chromium)
Shading Language Version    WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor  WebKit
Renderer    WebKit WebGL
Vertex Shader
Max Vertex Attributes   16
Max Vertex Uniform Vectors  1024
Max Vertex Texture Image Units  16
Max Varying Vectors 31
Rasterizer
Aliased Line Width Range    [1, 10]
Aliased Point Size Range    [1, 63]
Fragment Shader
Max Fragment Uniform Vectors    1024
Max Texture Image Units 16
Framebuffer
RGBA Bits   [8, 8, 8, 8]
Depth / Stencil Bits:   [24, 8]
Max Render Buffer Size  16384
Max Viewport Dimensions [16384, 16384]
Textures
Max Texture Size    16384
Max Cube Map Texture Size   16384
Max Combined Texture Image Units    16
Supported WebGL Extensions
OES_texture_float
OES_standard_derivatives
WEBKIT_EXT_texture_filter_anisotropic
OES_vertex_array_object
OES_element_index_uint
WEBKIT_WEBGL_lose_context
WEBKIT_WEBGL_compressed_texture_s3tc
WEBKIT_WEBGL_depth_texture