从WebGL迁移至WebGL2着色器无几何输出问题咨询

移植WebGL几何图形到WebGL2时，不需要额外的WebGL2专属调用就能完成基础渲染，你的问题出在顶点着色器的关键错误上。

核心问题分析 #

你的顶点着色器里只定义了自定义输出outPosition，但没有给WebGL的**内置顶点位置变量gl_Position**赋值。gl_Position是顶点着色器必须输出的裁剪空间坐标，GPU依赖这个值来确定顶点在屏幕上的位置。缺失这个赋值，GPU无法知道该把几何图形画在哪里，自然看不到任何输出。

修正后的顶点着色器 #

把顶点着色器里的输出逻辑调整为给gl_Position赋值即可：

#version 300 es

in vec3 a_position;

void main() {
    gl_Position = vec4(a_position, 1.0);
}

如果确实需要将位置数据传递到片元着色器，可以保留自定义输出变量，但必须同时赋值gl_Position：

#version 300 es

in vec3 a_position;
out vec4 outPosition;

void main() {
    gl_Position = vec4(a_position, 1.0);
    outPosition = gl_Position;
}

其他验证点（已确认无问题） #

• 你的几何坐标处于裁剪空间范围内（x/y/z值在[-1,1]区间），符合渲染要求
• 深度测试开启后，图形z值0.5处于默认深度缓冲范围[0,1]内，不会被剔除
• 顶点缓冲区、索引缓冲区的创建与绑定逻辑正确，gl.drawElements的参数也无错误

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