WebGL着色器编译正常但无法绘制三角形，求问题排查方向

直接可验证的修复点 #

你代码中存在3个可直接修改验证的问题：

1. 绘制模式配置错误
   你当前调用的绘制函数为gl.drawArrays(gl.LINES, 0, 3)：gl.LINES模式要求每2个顶点绘制一条独立线段，3个顶点仅能绘制顶点0到顶点1的单条线段，剩余顶点2会被直接丢弃，自然无法显示完整三角形。
   按需修改为对应模式即可：

   • 绘制填充三角形：gl.drawArrays(gl.TRIANGLES, 0, 3)
   • 绘制线框三角形：gl.drawArrays(gl.LINE_LOOP, 0, 3)

2. 缺少画布清空逻辑
   未主动清空画布时，画布初始内容可能为透明/不可预期值，导致绘制内容和背景重合无法识别，建议在绘制前添加清空逻辑：

   gl.clearColor(0, 0, 0, 1) // 把画布背景设置为不透明黑色
   gl.clear(gl.COLOR_BUFFER_BIT)
   

3. 顶点属性声明一致性问题（可选，不影响运行但建议修改）
   顶点着色器中position属性声明为vec3类型，但你传入的顶点数据为2分量，虽然WebGL会自动补全缺失的z分量为0不影响运行，但建议保持声明和输入一致，可把顶点着色器的属性声明改为attribute vec2 position;。

通用WebGL绘制无内容排查思路 #

遇到类似问题可以按以下顺序排查：

• 确认绘制模式和顶点数量匹配：gl.TRIANGLES要求顶点数为3的倍数，gl.LINES要求顶点数为2的倍数，不符合的情况下多余顶点会被丢弃
• 确认gl.vertexAttribPointer的分量数、数据类型、步长、偏移参数和缓冲区存储的顶点数据格式完全匹配
• 确认着色器输出的gl_Position坐标落在裁剪空间范围内（x、y、z三个分量的取值都在[-1,1]区间），超出范围的几何会被裁剪无法显示
• 如果开启了面剔除gl.enable(gl.CULL_FACE)，确认三角形顶点的环绕顺序和当前正面设置匹配，也可以临时关闭面剔除gl.disable(gl.CULL_FACE)验证是否是该问题导致
• 确认片元着色器输出的颜色和画布背景色有明显对比度，避免同色导致看不到绘制内容
• 可以临时切换到gl.LINE_LOOP模式绘制线框，验证顶点数据和坐标是否正确，再切换回填充模式调试

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