Web-GL:每个程序有多个片段着色器

Question

有谁知道是否有可能在一个Web-GL"程序"中串行运行多个片段着色器？我正在尝试使用着色器效果复制我在WPF中编写的一些代码.在WPF程序中,我将包装具有多个边框的图像,并且每个边框将附加效果(允许多个效果在同一图像上串行运行).

Answer 1

我担心你可能不得不稍微澄清一下你的问题,但无论如何我都会采取措施回答:

WebGL可以有效地支持您想要的许多不同着色器.(当然有可用的内存这样的实际限制,但你必须通过创建太多的着色器来努力碰到它们.)事实上,大多数"真实世界"的WebGL/OpenGL应用程序将使用许多不同的组合着色器生成渲染到屏幕的最终场景.(一个简单的例子:水通常会使用与其周围环境的其他环境不同的着色器或着色器组渲染.)

调度渲染命令时,一次只能有一个着色器程序处于活动状态.通过调用指定当前活动的程序,gl.useProgram(shaderProgram);之后将使用该程序呈现绘制的任何几何体.如果要渲染需要多个不同着色器的效果,则需要按着色器对它们进行分组并分别绘制每个批处理:

 gl.useProgram(shader1);
 // Setup shader1 uniforms, bind the appropriate buffers, etc.
 gl.drawElements(gl.TRIANGLES, shader1VertexCount, gl.UNSIGNED_SHORT, 0); // Draw geometry that uses shader1

 gl.useProgram(shader2);
 // Setup shader2 uniforms, bind the appropriate buffers, etc.
 gl.drawElements(gl.TRIANGLES, shader2VertexCount, gl.UNSIGNED_SHORT, 0); // Draw geometry that uses shader2

 // And so on...

Answer 2

其他答案都在正确的轨道上。您要么需要动态创建着色器，将所有效果应用到一个着色器或帧缓冲区中，然后一次应用一个效果。这里有一个稍后的例子

WebGL 图像处理（续）