在WebGL中切换着色器程序 [英] Switch shader program in WebGL

问题描述

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

I have an existing WebGL renderer (too much code to be useful to share) which used to be very simple: it only had one vertex shader, one fragment shader, and one shader program with both. It was for rendering quads.

我正在尝试扩展它，使其具有第二个着色器程序，该程序可以与该着色器程序相互切换，以渲染点精灵.它具有自己的顶点属性数组，还有第二个顶点着色器，片段着色器和着色器程序.

I'm trying to extend it to have a second shader program it switches to and from, for rendering point sprites. It has its own vertex attribute array, and a second vertex shader, fragment shader and shader program.

我似乎无法在两者之间正确切换:我不断出现显示故障，随机消失的物体等.这是我必须在它们之间切换的两个功能.知道我想念什么吗?

I can't seem to switch between the two properly: I keep getting display glitches, randomly disappearing objects and such. Here's the two functions I have to switch between them. Any idea what I'm missing?

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);
};

推荐答案

要很难分辨出这段代码是什么问题，但让我提出一些建议以尝试帮助您找到问题所在

It's going to be difficult to tell what the problem is from that piece of code, but let me throw some suggestions out there to try and help you find the problem.

首先，您不必在每次切换着色器时都担心执行disableVertexAttribArray.启用/禁用阵列是与着色器关联的状态，因此更改绑定程序将使您先前启用的阵列无效.

First off, you don't need to worry too much about doing disableVertexAttribArray every time you switch shaders. The enabled/disabled arrays are state that is associated with the shader, and as such changing the bound program invalidates your previously enabled arrays anyway.

(实际上，有人知道有这样的引用吗，我试图找到一个，但目前无法找到.)

(Actually, does anyone know of a decent citation for that, I was trying to find one and can't at the moment.)

请记住，您可以将上面的代码简化为:

With that in mind you could simplify your above code to:

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);
};

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

I'm curious about the issue that you mentioned with "display glitches", though. I can't think of any reason why switching shaders would cause objects to randomly stop and start rendering. Try rendering only the geometry using one shader first, then switch and render only geometry that uses the other. If either of them have the issue then you know it's not the shader switching that is causing your problem. If the problem only appears when rendering both sets of geometry together, there may be some error in the state management between the two.

这篇关于在WebGL中切换着色器程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！