如何将HTML5画布用作WebGL纹理

Question

我想要：

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

我正在尝试创建一个计算着色器，并需要在每次渲染通道中携带每个像素（片元）的值。一个简单的例子是在每个渲染调用中增加像素的蓝色值。

例如：

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

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

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

- Adrian Seeley

Answer 1

简短的回答是你不能

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

1. 将画布复制到纹理中

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

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

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

   在这种情况下，您需要将纹理设置为帧缓冲区的附件，并将其渲染到画布上（假设您想要看到结果而不仅仅是进行计算）。这里有个例子和这里。

- gman