Fragment Shader: wrong color value from texture

Question

I'm re-using the simple example from http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/webgl/webgl-2d-image.html to load a 16*16 png, which is completely black, except one point in there, which I set the RGB value to 0,0,202 using paint.

In the above example, I've also changed the fragment shader to

vec4 x=floor(texture2D(u_image,v_texCoord).rgba*255.0);

            if(x==vec4(48.0,0.0,220.0,255))
            {    gl_FragColor   = vec4(1.0,vec2(0.0),1.0);}
            else
            {    gl_FragColor   = vec4(vec3(x),1.0);}

For some reasons I'm getting RGB=48,0,220 instead of 0,0,202 as initially expected?

here is my png you can save locally... enter image description here

RogerLePatissier RogerLePatissier · Accepted Answer · 2015-07-19T12:12:08

I found the problem on my own.

WebGL does use pre-multiplied alpha values and also apply some color space conversion.

Pre-multiplied alpha can be disabled using: gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);

Color space conversions can be disabled using: gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);

You need to call both of those functions before you upload your texture.

Thanks to this post http://games.greggman.com/game/webgl-image-processing/

Fragment Shader: wrong color value from texture

1 Answers