WebGL - 绘制点

WebGL 是一种Web标准，它基于 OpenGL ES 2.0 API，并为Web开发者提供了一种可编程、高性能的图形渲染方式。这意味着，我们可以使用WebGL实现高效的 3D 和 2D 应用，包括复杂的动画和游戏。

在WebGL中，我们可以使用 GL_POINTS 原始类型来绘制点。GL_POINTS 会把每个顶点都绘制为一个点，即使它们很接近也不会合并。下面是一个简单的WebGL程序，它绘制了一个点。

// 获取canvas
var canvas = document.getElementById('myCanvas');

// 获取WebGL上下文
var gl = canvas.getContext('webgl');

// 定义顶点着色器
var vertexShaderCode = `
attribute vec2 position;

void main() {
  gl_PointSize = 10.0;
  gl_Position = vec4(position, 0, 1);
}`;

// 定义片元着色器
var fragmentShaderCode = `
void main() {
  gl_FragColor = vec4(1, 0, 0, 1);
}`;

// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderCode);
gl.compileShader(vertexShader);

// 创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderCode);
gl.compileShader(fragmentShader);

// 创建着色器程序对象
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 设置顶点属性并开启
var positionLocation = gl.getAttribLocation(shaderProgram, 'position');
gl.enableVertexAttribArray(positionLocation);

// 创建点坐标数组
var pointVertices = new Float32Array([
  0.0, 0.0
]);

// 创建点数据缓冲区对象
var pointBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
gl.bufferData(gl.ARRAY_BUFFER, pointVertices, gl.STATIC_DRAW);

// 绑定数据到attribute
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

// 清除画布
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制点
gl.drawArrays(gl.POINTS, 0, 1);

在这个程序中，我们首先获取了 WebGL 上下文，并定义了一个顶点着色器和一个片元着色器。然后，我们编译着色器、创建着色器程序对象，以及获取并开启顶点属性。接着，我们创建点的数据和缓冲区，并将数据绑定到 attribute 上。最后，我们清除并绘制点。

在绘制点时，我们使用了 gl.POINTS 原始类型。这个类型会把每个顶点都绘制为一个点，即使它们很接近也不会合并。如果我们想合并相邻的点，可以使用 gl.LINE_STRIP 或 gl.LINE_LOOP 原始类型。

总之，WebGL 是一个非常强大的图形渲染工具。通过它，我们可以实现各种各样的图形效果，包括绘制点、线、三角形、纹理等等。如果您想深入学习 WebGL，可以参考 MDN web docs 上的 WebGL 教程。