WebGL本地服务器（WSL+VSCode）渲染异常及警告问题求助

问题情况 #

学习WebGL基础时编写了绘制三角形的代码，控制台出现如下警告，且通过WSL搭建的Node.js+Express本地服务器运行时，页面仅显示HTML元素，看不到WebGL绘制的图形（使用Firefox浏览器）：

webGL warning: enableVertexAttribArray: -1 is not a valid index. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.
WebGL warning: vertexAttribI?Pointer: index (4294967295) must be < MAX_VERTEX_ATTRIBS.

相关代码 #

main.js #

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

if (!gl) {
  throw new Error("webgl not supported");
}

alert(`Everything is working`);


const vertexData = [0, 1, 0, 1, -1, 0, -1, -1, 0];

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);

// VERTEX SHADER
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(
  vertexShader,
  `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`
);
gl.compileShader(vertexShader);

// FRAGMENT SHADER
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(
  fragmentShader,
  `
void main (){
  gl_FragColor= vec4(1, 0, 0, 1);
}
`
);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

const positionLocation = gl.getAttribLocation(
  program,
  `
position`
);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

HTML文件 #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="main.js" defer></script>
    <title>Document</title>
  </head>
  <body>
    <h1>hello webGL!!</h1>
    <canvas></canvas>
  </body>

  <!-- async run the script but runin particular order of run
  advantage you dont have to use DOM contect in js file -->
</html>

问题原因 #

1. Attribute名称不匹配：控制台警告的核心原因是getAttribLocation返回了-1——你传入的属性名是带换行符的\nposition，而顶点着色器中定义的属性名是position，两者不一致导致WebGL找不到对应的属性变量。后续调用enableVertexAttribArray和vertexAttribPointer时使用了无效索引（-1），引发第二个警告，最终无法正确读取顶点数据绘制图形。
2. Canvas默认尺寸问题：canvas元素默认宽高很小（通常300x150），即使修复上述问题，也可能因为尺寸太小而难以注意到绘制的三角形。

解决方案 #

1. 修正Attribute名称匹配问题 #

将getAttribLocation的第二个参数改为不带换行符的position：

const positionLocation = gl.getAttribLocation(program, 'position');

2. 给Canvas设置明确尺寸 #

在HTML中直接设置canvas的宽高属性（区别于CSS样式，这会定义WebGL的绘制分辨率）：

<canvas width="400" height="300" style="border: 1px solid black;"></canvas>

3. 添加错误检查（可选但推荐） #

为着色器编译和程序链接添加错误检查，方便后续排查问题：

// 检查顶点着色器编译状态
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error('顶点着色器编译失败:', gl.getShaderInfoLog(vertexShader));
}

// 检查片段着色器编译状态
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error('片段着色器编译失败:', gl.getShaderInfoLog(fragmentShader));
}

// 检查程序链接状态
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error('程序链接失败:', gl.getProgramInfoLog(program));
}

修正后的完整main.js示例 #

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

if (!gl) {
  throw new Error("webgl not supported");
}

const vertexData = [0, 1, 0, 1, -1, 0, -1, -1, 0];

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);

// VERTEX SHADER
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(
  vertexShader,
  `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`
);
gl.compileShader(vertexShader);

// 检查顶点着色器编译错误
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error('顶点着色器编译失败:', gl.getShaderInfoLog(vertexShader));
}

// FRAGMENT SHADER
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(
  fragmentShader,
  `
void main (){
  gl_FragColor= vec4(1, 0, 0, 1);
}
`
);
gl.compileShader(fragmentShader);

// 检查片段着色器编译错误
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error('片段着色器编译失败:', gl.getShaderInfoLog(fragmentShader));
}

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 检查程序链接错误
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error('程序链接失败:', gl.getProgramInfoLog(program));
}

const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

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