如何将HTML5 Canvas用作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. 是否有更好的方法可以在视频内存中保留“进位”纹理以进行多通道处理（其中均匀值必须在通道之间发生变化，与标准着色器多通道处理不同）？ < / p>

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。