【发布时间】：2023-04-07 02:11:01
【问题描述】：
我知道可以根据this 使用 WebGL 创建 16 位图像。
我使用 WebGL1 创建了这样的示例，但是当我尝试从画布保存图像时，我得到每个通道图像 8 位。
所以，我不确定这张图片是否真的是每通道 16 位，是否可以从画布中获取 16 位 PNG？ WebGL 1 真的可以吗？
这是着色器示例：
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision highp float;
precision highp sampler2D;
// our textures
uniform sampler2D u_image0;
uniform sampler2D u_image1;
// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;
void main() {
highp vec4 color0 = texture2D(u_image0, v_texCoord);
highp vec4 color1 = texture2D(u_image1, v_texCoord);
gl_FragColor = color0 * (256.0 / 257.0) + color1 * (1.0 / 257.0);
}
</script>
我如何绑定纹理的示例：
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// Set the parameters so we can render any size image.
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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.FLOAT, images[ii]);
提前感谢您的帮助。
【问题讨论】：
-
链接问题的症结在于当前的 WebGL 实现不支持 16 位通道。发布的解决方案是一种将 16 位图像作为两个 8 位图像读取到 WebGL 上下文中的解决方法。
-
@MTCoster hm.. 可能是我弄错了。但我认为仅仅在着色器中“读取”是没有意义的，因为着色器用于处理某些内容并显示结果，因此，链接问题中的示例看起来像可以将 16 位图像提供到画布中的着色器示例。
-
它不是在着色器中读取，而是在将纹理图像读取到着色器中。但你是对的，我确实部分错了。着色器本身可以处理 16 位通道，但不能处理 16 位图像。