WebGL着色器中如何判断是否传入了vTranslate属性？

首先得明确：WebGL的顶点着色器没有内置机制可以直接判断某个attribute是否绑定了缓冲区或被启用，所以咱们得换些思路来实现你想要的“避免管线数据浪费”的目标。下面是几个实用的方案：

方案1：用Uniform开关控制+动态启用/禁用属性 #

这个方案最直接，通过一个uniform变量告诉着色器是否要应用平移，同时配合启用/禁用vTranslate属性来避免不必要的数据读取。

顶点着色器修改： #

attribute vec3 aPosition;
attribute vec3 vTranslate;
uniform bool uUseTranslate; // 控制是否启用平移

void main() {
    vec3 pos = aPosition;
    if (uUseTranslate) {
        pos += vTranslate;
    }
    gl_Position = vec4(pos, 1.0);
}

JS端逻辑： #

• 绘制不需要平移的三角形时：

  1. 将uUseTranslate设为false：gl.uniform1i(uUseTranslateLocation, false)
  2. 禁用vTranslate属性：gl.disableVertexAttribArray(vTranslateLocation)
     这样WebGL管线就不会尝试从缓冲区读取vTranslate的数据，完全避免浪费。

• 绘制需要平移的三角形时：

  1. 将uUseTranslate设为true：gl.uniform1i(uUseTranslateLocation, true)
  2. 启用vTranslate属性并绑定对应的缓冲区：gl.enableVertexAttribArray(vTranslateLocation) + 常规的gl.vertexAttribPointer配置

方案2：使用VAO分批次绘制 #

如果你的可平移和不可平移三角形可以分成独立的批次，用顶点数组对象（VAO）来管理不同的属性配置是更优雅的方式：

1. 为不可平移三角形创建VAO：只绑定aPosition等必要属性，完全不配置vTranslate。
2. 为可平移三角形创建另一个VAO：同时绑定aPosition和vTranslate属性。

绘制时只需要切换对应的VAO，WebGL会自动应用对应的属性配置，不需要每次都手动启用/禁用属性。这种方式代码更整洁，也能确保每个批次的顶点数据只包含需要的属性，没有冗余。

示例伪代码： #

// 创建不可平移的VAO
const noTranslateVAO = gl.createVertexArray();
gl.bindVertexArray(noTranslateVAO);
// 绑定aPosition缓冲区...
gl.enableVertexAttribArray(aPositionLocation);
gl.vertexAttribPointer(aPositionLocation, 3, gl.FLOAT, false, 0, 0);
// 不处理vTranslate，直接解绑VAO
gl.bindVertexArray(null);

// 创建可平移的VAO
const translateVAO = gl.createVertexArray();
gl.bindVertexArray(translateVAO);
// 绑定aPosition缓冲区...
gl.enableVertexAttribArray(aPositionLocation);
gl.vertexAttribPointer(aPositionLocation, 3, gl.FLOAT, false, 0, 0);
// 绑定vTranslate缓冲区...
gl.enableVertexAttribArray(vTranslateLocation);
gl.vertexAttribPointer(vTranslateLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindVertexArray(null);

// 绘制时切换VAO
// 绘制不可平移三角形
gl.bindVertexArray(noTranslateVAO);
gl.drawArrays(gl.TRIANGLES, 0, noTranslateTriangleCount);

// 绘制可平移三角形
gl.bindVertexArray(translateVAO);
gl.drawArrays(gl.TRIANGLES, 0, translateTriangleCount);

方案3：利用属性默认值（极简版） #

如果你不想加uniform开关，也可以利用WebGL属性的默认值特性：

1. 在JS端初始化时，将vTranslate的默认值设为[0, 0, 0]：gl.vertexAttrib3f(vTranslateLocation, 0, 0, 0)
2. 顶点着色器里直接相加，不需要判断：gl_Position = vec4(aPosition + vTranslate, 1.0)

当你需要平移时，启用vTranslate属性并绑定缓冲区；不需要平移时，禁用该属性，此时着色器会自动使用你设置的[0,0,0]默认值，而且不会读取缓冲区数据，同样避免了浪费。这个方案代码最简洁，适合逻辑简单的场景。

内容的提问来源于stack exchange，提问作者Mooseman