WebGL多个着色器

Question

我已经阅读了有关此问题的先前StackOverflow帖子，但在使两个不同的着色器集在一个WebGL程序中正常工作时仍然存在问题。

下面是代码的框架。 我有两组独立的着色器，它们具有不同的变量名，以防止交叉污染。 我创建了两个initShader（）函数，每个着色器集一个，然后调用initBuffers（）和draw（）函数。 结果是尽管着色器是在drawscene（）中单独标识和调用的，但只有第二个着色器才生效，并且仅显示使用此着色器绘制的项目。

任何有关如何解决此问题的建议将不胜感激。

Declare: vertexShaderA
Declare: fragmentShaderA
Declare: vertexShaderB (use distinct variable names to that of vertexShaderA)
Declare: fragmentShaderB (use distinct variable names to that of fragmentShaderA)

// main script

initShadersA(){
…
    gl.useProgram(shaderProgramA);
…
}
initShadersB(){
…
    gl.useProgram(shaderProgramB);
…
}
…
setMatrixUniformsA();
setMatrixUniformsB();

function initBuffers(){
…
}

function drawScene(){
…
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.vertexAttribPointer(shaderProgramA.vertexPositionAttributeA, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
…
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
 gl.uniform1i(shaderProgramA.samplerUniform, 0);
 setMatrixUniformsA();
 gl.drawElements(gl.TRIANGLES, vertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

…

gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.vertexAttribPointer(shaderProgramB.vertexPositionAttributeB, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
…
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
gl.uniform1i(shaderProgramB.samplerUniform, 0);
setMatrixUniformsB();
gl.drawElements(gl.TRIANGLES, vertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}

 function draw() {
        requestAnimFrame(draw);
        animate(); 
        drawScene();
    }       
function animate() { 
    …
} 
function webGLStart() {
        initGL(canvas);
        initShadersA();
        initShadersB();
        initBuffers();
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.enable(gl.DEPTH_TEST);
        draw();
    }

Answer 1

gl.useProgram(shaderProgram); 基本上说：“好的，从这一刻起，我将使用这种材料来遮蔽对象”。

就是说，您在webGLStart()中所做的是：initGL，使用A材质，使用B材质，创建对象，使用当前材质绘制对象（即材质B）。

OpenGL / webGL用作状态机。 当您尝试渲染某些内容时，将使用当前设置的该状态机的参数进行绘制。 例如，您说要在OpenGL上draw ，但是该方法正在寻找绑定到状态机的缓冲区，它也在寻找当前使用的材质（着色器）...等等。因此，您进行了所有设置并启动了一些操作。

因此，如果要使用两个不同的着色器渲染两个对象，则应绑定一个对象（实际上是缓冲区），使用第一个材质（ gl.useProgram(shaderProgramA) ）并分派绘制。 然后绑定第二个对象，设置第二个材质（ gl.useProgram(shaderProgramB) ）并调度另一个调用。 这就是OpenGL / WebGL的工作方式。

还有，一个建议。 尝试以其他方式命名函数。 initShadersA应该执行以下操作：获取源字符串，创建顶点和片段着色器，创建程序并链接所有内容，而诸如useShadersA功能应将当前材质设置为精确的着色器程序。

我希望这有帮助！