With the following code:
// where gl is WebGL2RenderingContext, but I tried WebGLRenderingContext as well.
gl.drawArrays(gl.POINTS, 0, points.length / 2);
#version 300 es
in vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
My canvas isn’t rendering any of the points on the canvas whatsoever. However, when mode, the first argument, is gl.LINES, the interconnected points render just fine. I also noticed this issue only happens in hardware acceleration mode in browsers for certain GPUs—it worked fine on Linux but not on Windows.
How can I render the points correctly?
You need to modify your shader to include setting gl_PointSize:
#version 300 es
in vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
gl_PointSize = 1.0;
}
In the gl_PointSize docs:
The value of gl_PointSize (or the gl_PointSize member of the gl_out[] array, in the case of the tessellation control shader) is undefined after the vertex, tessellation control, and tessellation evaluation shading stages if the corresponding shader executable does not write to gl_PointSize
gl_PointSize is undefined, and is thus left up to the implementor’s defaults for the value. On some GPUs, the default is 1.0, but the default is also 0.0 on some GPUs and causes the points not to render.