创建高效的早期实例剪辑WebGL2文本着色器

Question

丢弃顶点着色器中的实例

我正在使用实例化的几何图形来使用webGL2显示内容。作为该过程的一部分，每个实例都有一个颜色分量，对于某些实例，它的alpha值可能为零。

而不是将其传递给片段着色器以进行丢弃，而是在文本着色器中检查Alpha。如果为零，则将每个顶点输出为vec4(-2)，以将其放置在片段之外，或者最糟糕的是将其作为1像素点。

我找不到有关渲染管道如何处理的信息。

这是从管道中删除实例的最佳策略吗？

[替代方法是从缓冲区中删除实例，在处理1000个实例时，在JS中这是CPU密集型操作。

着色器

const vertexSrc = `#version 300 es
    #define alphaCut 0.0
    in vec2 verts;
    in vec2 pos;       
    in vec2 scale;     
    in vec2 offset;    
    in float rotate;   
    in float zIdx;     // z index for zBuf clip only 
    in vec4 color;     // RGBA to color.a == 0.0 to remove not render
    in uint spriteIdx; 
    uniform vec4 sheetLayout[128];
    uniform vec2 sheetSize;     
    uniform mat2 view;              
    uniform vec2 origin;  
    out vec2 spr;
    out vec4 col;
    void main() {
        if (color.a <= alphaCut) { 
            gl_Position = vec4(-2); // put this instance outside clip
            return; 
        }
        col = color;
        vec4 sprite = sheetLayout[spriteIdx];
        spr = sprite.xy + verts * sprite.zw / sheetSize;
        vec2 loc = (verts - offset) * scale * sprite.zw;
        float xdx = cos(rotate);
        float xdy = sin(rotate);
        loc = view * (vec2(loc.x * xdx - loc.y * xdy, loc.x * xdy + loc.y * xdx) + pos - origin);
        gl_Position =  vec4(loc, zIdx, 1);
    }`;

const fragmentSrc = `#version 300 es
    precision mediump float;
    uniform sampler2D tex;
    #define alphaCut 0.0;
    in vec2 spr;
    in vec4 col;
    out vec4 pixel;
    void main() {
        pixel = texture(tex, spr) * col;
        if (pixel.a <= alphaCut) { discard; }
    }`;