当gl.getAttribLocation返回-1时，表明着色器中对应attribute变量未被实际使用，已被编译器优化移除，导致后续vertexAttribPointer和enableVertexAttribArray调用失败。根本原因在于变量声明错误或数据流中断，而非绑定顺序或上下文问题。
当`gl.getattriblocation`返回-1时，表明着色器中对应attribute变量未被实际使用，已被编译器优化移除，导致后续`vertexattribpointer`和`enablevertexattribarray`调用失败。根本原因在于变量声明错误或数据流中断，而非绑定顺序或上下文问题。
在WebGL（尤其是WebGL 2.0 + GLSL ES 3.0）中，gl.getAttribLocation(program, 'aNormal') 返回 -1 并非偶然错误，而是一个明确的信号：该 attribute 在着色器程序中未被活跃使用（active unused）。浏览器的GLSL编译器会严格执行死代码消除（Dead Code Elimination），只要某个 in 变量从未参与任何计算、未赋值给任何 out 或 uniform，它就会被完全剔除——此时 getAttribLocation 必然返回 -1，后续对其调用 vertexAttribPointer 或 enableVertexAttribArray 将触发 INVALID_VALUE: index out of range 错误。
观察问题中的两个片段，关键差异在于顶点着色器中对 aNormal 的处理方式：
✅ 第一片段（正常工作）：
in vec3 aNormal; // ... vec4 NN = vec4(aNormal, 0); vec3 N = normalize((uModelViewMatrix * NN).xyz); // ← aNormal 被读取并参与计算 vColor = ambient + diffuse + specular; // ← N 参与光照计算并输出到 vColor
此处 aNormal 被显式读取 → 转换为 NN → 参与矩阵变换与归一化 → 最终影响 vColor 输出。整个数据流完整，aNormal 是活跃属性。
❌ 第二片段（报错）：
in vec3 aNormal; // ... vec4 NN = vec4(aNormal, 0.0); vec3 N = normalize((uModelViewMatrix * NN).xyz); // ❌ 错误：声明了新局部变量 N vec3 L = normalize(light - pos); // ❌ 同样：新局部变量 L vec3 V = normalize(uViewerPosition).xyz; // ❌ 新局部变量 V
这三行代码中，vec3 N = ...、vec3 L = ...、vec3 V = ... 均重新声明了同名局部变量，覆盖了 out vec3 N, L, V; 的语义。结果是：
- aNormal 虽被读入 NN，但 NN 后续未被使用；
- N, L, V 作为局部变量被计算后即丢弃，未赋值给 out 变量；
- 编译器检测到 aNormal 的值未流向任何 out 或 uniform，判定其为无用输入，直接移除；
- 因此 getAttribLocation('aNormal') 返回 -1。
? 验证方法：可在着色器末尾添加调试语句强制保留 aNormal：
// 临时调试：确保 aNormal 被视为活跃 float dummy = aNormal.x + aNormal.y + aNormal.z;
若此时 normalLoc 变为非 -1 值，即可确认是死代码优化所致。
✅ 正确修复方式（只需修改顶点着色器）：
删除 vec3 类型声明，直接赋值给 out 变量：
#version 300 es
in vec4 aPosition;
in vec3 aNormal; // ← 输入仍存在
out vec3 N, L, V; // ← 输出接口
void main() {
vec3 pos = (uModelViewMatrix * aPosition).xyz;
vec3 light = uLightPosition.xyz;
vec4 NN = vec4(aNormal, 0.0);
N = normalize((uModelViewMatrix * NN).xyz); // ✅ 直接赋值给 out N
L = normalize(light - pos); // ✅ 直接赋值给 out L
V = normalize(uViewerPosition).xyz; // ✅ 直接赋值给 out V
gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition;
}? 关键注意事项：
- WebGL着色器中 in/out 变量名必须精确匹配 JavaScript 中 getAttribLocation 的字符串参数（区分大小写、空格、下划线）；
- 即使变量已声明为 in，若其值未被“消费”（即未参与任何运算或未赋值给 out/uniform），编译器仍会移除；
- console.log('normalLoc', normalLoc) 返回 -1 是诊断起点，而非终点；应立即检查着色器中该变量的数据流向；
- 此类问题在迁移代码、重构着色器或复制粘贴时高频出现，建议在开发中启用 gl.getProgramParameter(program, gl.LINK_STATUS) 和 gl.getProgramInfoLog(program) 进行链接日志检查。
掌握这一机制，不仅能快速定位 index out of range 错误，更能深入理解WebGL管线中着色器编译与优化的本质——GPU驱动层的极致效率追求，要求开发者写出“可证明有用”的每一条语句。
