如何将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. 有没有更好的方法在视频存储器中保持"进位"纹理以进行多通道处理(与标准着色器内多路处理不同,均匀值必须在通道之间改变)？

Answer 1

简短的回答是你不能

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

1. 将画布复制到纹理

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

   将画布的当前内容复制到textxure中.

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

   在这种情况下,您将渲染到一个纹理,该纹理被设置为帧缓冲的附件,然后将该纹理渲染到画布(假设您想要查看结果而不是仅仅进行数学运算).这里和这里有一个例子.