canvas - 如何使用 HTML5 Canvas 作为 WebGL 纹理

Question

我想要:

1. 为情况 i 设置统一值。
2. 将案例 i 的计算着色器渲染为 HTML5 <canvas>标签。
3. 使用<canvas>内容(在我渲染输出的情况下)作为下一个渲染 channel 中的纹理。
4. 对所有情况重复上述操作。
5. 从颜色数据中将答案提取到 JS 中。

我正在尝试制作一个计算着色器，并且需要在每个渲染 channel 上携带每个像素(片段)的值。一个简单的示例是在每次渲染调用时增加像素的蓝色值。

即

pass 1: b=1
pass 2: b=2
pass 2: b=3
etc.

1. 这种着色器循环可能吗？

2. 是否有更好的方法在视频内存中保留“进位”纹理以进行多 channel 处理(与标准的着色器内多 channel 处理不同，统一值必须在 channel 之间更改)？

Answer 1

简短的回答是你不能

您当前无法将 Canvas 作为纹理访问。其他一些解决方案

1. 将 Canvas 复制到纹理

   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gl.canvas);
   

   将 Canvas 的当前内容复制到纹理中。

2. 通过将纹理附加到帧缓冲区来渲染到您自己的纹理。

   在这种情况下，您将渲染到设置为帧缓冲区附件的纹理，然后将该纹理渲染到 Canvas (假设您想要查看结果而不仅仅是进行数学运算)。 There's an example here和 here .