为什么我的WebGL着色器编译后无法显示红色三角形？

司马钧溢提问于 2026-02-14 00:18:46 阅读 96

组件

我尝试用WebGL绘制一个红色三角形，但屏幕上只显示黑色，控制台也没有报错。检查过代码，顶点和片段着色器的编译状态都是成功的，但就是看不到颜色。我按教程写的代码，但哪里出问题了？

顶点着色器代码：

const vertexShaderSource = <code>#version 300 es
in vec4 a_position;
void main() {
  gl_Position = a_position;
}</code>;

片段着色器：

const fragmentShaderSource = <code>#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
  outColor = vec4(1.0, 0.0, 0.0, 1.0);
}</code>;

初始化时启用了顶点属性，但可能哪里漏了？比如没设置顶点数据或者没清除颜色缓冲？尝试过用gl.clearColor(0, 0, 0, 1)和gl.clear(gl.COLOR_BUFFER_BIT)，但没效果。

我来解答赞 15 收藏

反馈

1 条解答

シ弋焱 Lv1

大概率是顶点数据没正确绑定或者绘制调用有问题。改成这样试试：

// 确保正确设置了顶点数据和缓冲区

const positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [

  0.0,  1.0,

 -1.0, -1.0,

  1.0, -1.0,

];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);



// 绑定属性并启用

const aPositionLocation = gl.getAttribLocation(program, "a_position");

gl.enableVertexAttribArray(aPositionLocation);

gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);



// 清除颜色缓冲并绘制

gl.clearColor(0, 0, 0, 1);

gl.clear(gl.COLOR_BUFFER_BIT);

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

如果还是不行，检查着色器程序是否正确链接，用 gl.useProgram(program) 确保启用了正确的程序对象。

2026-02-14 14:07