javascript - WebGL 中的切换着色器程序

Question

我有一个现有的 WebGL 渲染器(代码太多，无法共享)曾经非常简单:它只有一个顶点着色器、一个片段着色器和一个包含两者的着色器程序。它用于渲染四边形。

我正在尝试扩展它以拥有第二个它来回切换的着色器程序，用于渲染点 Sprite 。它有自己的顶点属性数组，以及第二个顶点着色器、片段着色器和着色器程序。

我似乎无法在两者之间正确切换:我不断遇到显示故障、随机消失的对象等问题。这是我必须在它们之间切换的两个功能。知道我错过了什么吗？

GLWrapProto.switchQuadProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgramPoint);

    gl.disableVertexAttribArray(this.locAPosPoint);

    gl.useProgram(this.shaderProgram);

    gl.enableVertexAttribArray(this.locAPos);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    gl.vertexAttribPointer(this.locAPos, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(this.locATex);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
    gl.vertexAttribPointer(this.locATex, 2, gl.FLOAT, false, 0, 0);
};

GLWrapProto.switchPointProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgram);

    gl.disableVertexAttribArray(this.locAPos);
    gl.disableVertexAttribArray(this.locATex);

    gl.useProgram(this.shaderProgramPoint);

    gl.enableVertexAttribArray(this.locAPosPoint);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.pointBuffer);
    gl.vertexAttribPointer(this.locAPosPoint, 4, gl.FLOAT, false, 0, 0);
};

Answer 1

很难从那段代码中判断出问题所在，但让我提出一些建议来尝试帮助您找到问题。

首先，您不必担心每次切换着色器时都执行 disableVertexAttribArray。启用/禁用数组是与着色器关联的状态，因此更改绑定(bind)程序会使您之前启用的数组无效。

(实际上，有没有人知道一个像样的引文，我正试图找到一个但目前找不到。)

考虑到这一点，您可以将上述代码简化为:

GLWrapProto.switchQuadProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgram);

    gl.enableVertexAttribArray(this.locAPos);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
    gl.vertexAttribPointer(this.locAPos, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(this.locATex);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.texcoordBuffer);
    gl.vertexAttribPointer(this.locATex, 2, gl.FLOAT, false, 0, 0);
};

GLWrapProto.switchPointProgram = function ()
{
    var gl = this.gl;

    gl.useProgram(this.shaderProgramPoint);

    gl.enableVertexAttribArray(this.locAPosPoint);
    gl.bindBuffer(gl.ARRAY_BUFFER, this.pointBuffer);
    gl.vertexAttribPointer(this.locAPosPoint, 4, gl.FLOAT, false, 0, 0);
};

不过，我对您提到的“显示故障”问题很好奇。我想不出切换着色器会导致对象随机停止和开始渲染的任何原因。尝试首先使用一个着色器仅渲染几何体，然后切换并仅渲染使用另一个着色器的几何体。如果它们中的任何一个有问题，那么您就知道不是着色器切换导致了您的问题。如果问题仅在同时渲染两组几何体时出现，则两者之间的状态管理可能存在一些错误。