16 位 canvas 与 WebGL 1

Question

我知道可以根据 this 使用 WebGL 创建 16 位图像。
我用 WebGL1 创建了这样的示例，但是当我尝试从 canvas 保存图像时，我得到每个通道图像 8 位。
所以，我不确定这个图像是否真的是每通道 16 位，是否可以从 canvas 获得 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]);

提前感谢您的帮助。

Answer 1

canvas 本身目前只能是每通道 8 位。 WebGL 可以创建具有正确扩展名的 16 位纹理。 WebGL2也可以。可以使用 gl.readPixels 读取该数据，但您可以使用 JavaScript 或创建 16 位 PNG 的 WASM 编写的一些代码将其保存为 PNG。

有针对 16 位浮点数的新提案 canvases，因为现在有一些显示器和电视支持超过 8 位的输入。

https://github.com/WICG/canvas-color-space/blob/master/CanvasColorSpaceProposal.md

16 位 canvas 与 WebGL 1

16bit canvas with WebGL 1

html

webgl