WebGL中drawArrays的POINTS模式无渲染，其他模式正常的解决咨询

问题重现 #

使用WebGL（包括WebGL1和WebGL2）调用gl.drawArrays(gl.POINTS, 0, count)时，画布完全没有渲染出点，但切换为gl.LINES模式时线条能正常显示。该问题仅出现在Windows系统浏览器硬件加速模式下的特定GPU，Linux环境下无异常。

相关代码片段：
JavaScript部分：

// gl为WebGL2RenderingContext或WebGLRenderingContext
gl.drawArrays(gl.POINTS, 0, points.length / 2);

顶点着色器：

#version 300 es

in vec2 position;

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

解决方案 #

1. 显式设置点大小（最有效解决方法）

大部分情况下，问题根源是Windows下部分GPU驱动在硬件加速模式下会忽略默认点大小。WebGL规范中默认点大小为1.0，但部分驱动会将其处理为0或极小值，导致点不可见。

修改顶点着色器，显式指定gl_PointSize：

#version 300 es

in vec2 position;

void main() {
    gl_Position = vec4(position, 0.0, 1.0);
    gl_PointSize = 4.0; // 根据需求调整大小，确保大于0
}

如果需要动态控制点大小，可以将其设为uniform变量，在JavaScript中传递值。

2. 验证裁剪空间坐标

虽然gl.LINES能正常渲染，但部分GPU对点的裁剪逻辑更严格。确认你的position坐标完全处于WebGL标准裁剪空间（x、y值范围为[-1.0, 1.0]），避免点的中心落在裁剪区域外导致被剔除。

3. 检查驱动与浏览器设置（临时 workaround）

如果是特定GPU驱动的bug：

• 尝试更新GPU驱动到最新版本
• 临时禁用浏览器的硬件加速（仅用于验证问题根源，不推荐作为长期解决方案）

4. 确认WebGL上下文配置

创建WebGL上下文时，避免设置可能影响点渲染的非标准参数，比如关闭不必要的抗锯齿选项，使用默认配置创建上下文：

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl2', {
  antialias: false, // 可尝试关闭抗锯齿
  preserveDrawingBuffer: true
});

内容的提问来源于stack exchange，提问作者Tristan F.-R.