Question

我已经阅读了有关此问题的上一篇StackOverflow帖子，并且仍然遇到让两个不同的着色器集在一个WebGL程序中正常工作的问题。

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

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

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);基本上说：＆＃34;好的，从这一刻开始，我将使用这种材料遮挡物体＆＃34;。

话虽如此，你正在做的是webGLStart()：initGL，使用A材质，使用B材质，创建对象，用当前材质绘制对象（这是材料B）。

OpenGL / webGL作为状态机工作。当您尝试渲染某些内容时，会使用当前设置的状态机参数绘制它。例如，您对OpenGL说draw，但该方法正在寻找绑定到状态机的缓冲区，它还查找当前使用的材质（着色器）......等等。所以你设置了一切，启动一些行动。

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

另外，一个建议。尝试以不同方式命名函数。 initShadersA应该做一些事情，比如获取源字符串，创建顶点和片段着色器，创建程序和链接所有内容，而像useShadersA这样的函数应该将当前材质设置为精确着色器程序。

我希望这有帮助！

WebGL多个着色器

1 个答案: