从 WebGL 片段着色器中的浮点纹理访问非钳位值答案

【问题标题】：Accessing unclamped values from floating point textures in WebGL fragment shader从 WebGL 片段着色器中的浮点纹理访问非钳位值
【发布时间】：2012-02-09 17:34:26
【问题描述】：

当亮度值介于 0 到 4000 之间时，我正在尝试将画布上的亮度值矩阵渲染为图像。我正在使用 2D 浮点纹理来执行此操作，因为我听说它们报价范围在 [-inf, inf] 之间。

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

但是，当我在片段着色器中检索纹理值时，它们总是被限制在 [0, 1.0] 之间。具体来说，

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

texcolour.rgb 总是介于 0 和 1.0 之间。如何访问我的片段着色器中的非钳位值，以便我可以自己进行规范化？

谢谢

【问题讨论】：

标签： shader webgl fragment-shader

【解决方案1】：

你如何测试这个？你可以试试类似的东西

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);

【讨论】：

哦，我忘了补充一点，当我在创建纹理之前对 0 到 1 之间的值矩阵进行归一化时，我可以完美地看到图像，这就是为什么我得出结论认为这是一个钳位问题并且不是一些不相关的 webGL 问题。
这是一个工作示例jsfiddle.net/greggman/LMbhk 我将输入从 0 到 256000 的值，然后在着色器中除以 256000 并得到我期望的结果。也许您可以对其进行修改以使其失败？
在您的示例中，您使用 gl.RGBA 而我使用 gl.LUMINANCE，我确信这是导致问题的原因（仍有可能不是）。出于某种原因，即使使用 gl.float，亮度值似乎也会受到限制。我可以做的一项测试是改用 rgba，并且只在着色器中使用一个通道，但我有大约 200 个 512x512 图像，因此内存使用量会增加很多。不过，我会尽快尝试一下，以确认一下。
与此同时，我修改了您的示例以使用 gl.LUMINANCE 并显示值被限制，我在着色器中将红色通道除以 256000.0，并将其他通道设置为 1.0。由于我将所有像素初始化为 256000，因此如果纹理值未固定，我期望得到一个白色图像。但是，我得到一个青色图像。 jsfiddle.net/marc_andre/LMbhk/19