Accessing unclamped values from floating point textures in WebGL fragment shader

Question

I'm trying to render a matrix of luminance values on a canvas as an image, when the luminance values are between 0 and 4000. I'm using a 2D floating point texture to do so, because I had heard that they offer ranges between [-inf, inf].

gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, ct.columns, ct.rows, 0, gl.LUMINANCE, gl.FLOAT, new Float32Array(ct.grid[i]));

However, when I go and retrieve the texture values in my fragment shader, they are always clamped between [0, 1.0]. Specifically,

vec4 texcolour = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));

texcolour.rgb will always be between 0 and 1.0. How can I access unclamped values inside my fragment shader, so that I may do the normalizing myself?

Thank you

Frax · Accepted Answer · 2025-02-01 12:14:29Z

1

How are you testing this? Can you try something like

vec4 texcolour = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = texcolour.x > 3000.0 ? vec4(0,1,0,1) : vec4(1,0,0,1);

Update: The issue for OP turned out to be a bug in Chromium in handling LUMINANCE and depth textures (it's been fixed since).

edited Feb 1 at 12:14

Frax

6,0702 gold badges21 silver badges25 bronze badges

answered Feb 10, 2012 at 19:00

user128511

Sign up to request clarification or add additional context in comments.

9 Comments

Marc Over a year ago

I was testing it by seeing that my entire image was white (because I do my own filtering based on windowing and level values), but after running your code I get a pure red block.

Marc Over a year ago

Oh and I forgot to add that when I normalize my matrix of values between 0 and 1 before creating my textures, then I see the image perfectly, which is why I concluded that it was a clamping problem and not some unrelated webGL problem.

user128511 Over a year ago

Here's a working sample jsfiddle.net/greggman/LMbhk I'm putting in values from 0 to 256000 and then dividing by 256000 in the shader and getting what I expect. Maybe you can modify it to make it fail?

Marc Over a year ago

In your example, you use gl.RGBA whereas I use gl.LUMINANCE, I've convinced myself that this is what's causing the problem (there's still a chance it might not be). For some reason luminance values seem to get clamped even with gl.float. One test I could do is use rgba instead and only use one channel in the shader, but I have ~200 512x512 images so the memory usage would go up quite a bit. I'm going to try it as soon as I have time though, just to confirm.

Marc Over a year ago

In the meantime, I've modified your example to use gl.LUMINANCE and to show that values get clamped, I divided the red channel by 256000.0 in the shader, and put the other channels at 1.0. Since I initialized all my pixels at 256000, I am expecting a white image if the texture values are unclamped. However, I get a cyan image. jsfiddle.net/marc_andre/LMbhk/19

|

Collectives™ on Stack Overflow

Accessing unclamped values from floating point textures in WebGL fragment shader

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related