如何使用 HTML5 画布作为 WebGL 纹理

Question

我想：

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

我正在尝试制作一个计算着色器，并且需要在每个渲染过程中为每个像素（片段）携带一个值。一个简单的例子是在每次渲染调用时增加一个像素的蓝色值。

即

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

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

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

Answer 1

简短的回答是你不能

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

1. 将画布复制到纹理

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

   将画布的当前内容复制到一个textxure中。

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

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