开启WebGL之旅：绘制一个点

2024-02-13 12:40:28

WebGL入门指南（一）：绘制点元素

亲爱的读者，踏上WebGL的奇幻旅程，在这个神奇的领域里，我们将探寻三维图形在网络世界的精彩呈现。今天，我们将从一个不起眼的起点开始——绘制一个点。

什么是WebGL？

WebGL（Web Graphics Library）是一种基于浏览器的高级图形库，它赋予了网页绘制和渲染三维模型的能力。通过与HTML5和JavaScript的强强联合，WebGL让三维交互成为网页上的现实。

绘制一个点

绘制一个点是WebGL之旅的第一步。让我们深入代码，看看如何实现：

// 创建 WebGL 上下文
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');

// 创建着色器程序
const vertexShaderSource = ...;
const fragmentShaderSource = ...;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 创建缓冲区对象（VBO）
const vertices = [-1.0, 1.0, 0.0];
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 启用顶点属性
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 1, gl.FLOAT, false, 0, 0);

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

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