WebGL 是一种在 web 上实现硬件加速 2D 和 3D 图形渲染的技术。它允许开发者使用 WebGL API 基于图形硬件进行高性能的渲染，并且可以与 HTML5 的 Canvas 元素无缝整合。在本篇博客中，我们将学习使用 Canvas 绘制 WebGL 图形的基本步骤。
1. 创建 Canvas 元素
首先，我们需要在 HTML 文档中创建一个 Canvas 元素，用于显示我们绘制的 WebGL 图形。在 HTML 中添加以下代码片段：
<canvas id="canvas" width="800" height="600"></canvas>
这将创建一个宽度为 800 像素、高度为 600 像素的 Canvas 元素。我们将使用 JavaScript 获取并操作这个元素。
2. 获取 WebGL 上下文
接下来，我们需要获取到 Canvas 的 WebGL 上下文，以便进行绘制操作。在 JavaScript 文件中添加以下代码片段：
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
这将获取到一个名为 "gl" 的 WebGL 上下文对象，我们将使用它来执行 WebGL 相关的操作。
3. 编写顶点着色器和片元着色器
在 WebGL 中，我们使用顶点着色器和片元着色器来定义我们要绘制的图形的外观。顶点着色器负责处理顶点的位置，片元着色器负责处理像素的颜色。
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
`;
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;
上面的代码定义了一个简单的顶点着色器和片元着色器。顶点着色器接受一个名为 "a_position" 的属性，该属性代表每个顶点的位置。顶点着色器只需将位置传递给内建变量 "gl_Position" 即可，我们将在这里简单地将位置设置为 gl_Position。
片元着色器使用内建变量 "gl_FragColor" 设置每个像素的颜色。在这里，我们将颜色设置为红色。
4. 创建并编译着色器程序
下一步是创建和编译我们的顶点着色器和片元着色器。在 JavaScript 文件中添加以下代码片段：
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 program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
上面的代码将创建顶点着色器和片元着色器的 WebGL 着色器对象，并将着色器源代码分配给它们。然后，我们将着色器附加到一个 WebGL 程序对象上，并链接这个程序。最后，我们使用这个程序进行后续的渲染操作。
5. 绘制图形
现在，我们已经准备好绘制我们的 WebGL 图形了。在 JavaScript 文件中添加以下代码片段：
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
上面的代码将获取到顶点着色器中的 "a_position" 属性的位置，并创建一个缓冲区对象来存储要绘制的顶点位置数据。然后，我们将数据绑定到缓冲区对象，并启动顶点属性数组。
接下来，我们将清空画布，并使用 gl.drawArrays 方法绘制图形。在这里，我们使用 gl.TRIANGLES 参数告诉 WebGL 绘制三角形形状，3 表示绘制 3 个顶点。
总结
在本篇博客中，我们学习了使用 Canvas 绘制 WebGL 图形的基本步骤。我们创建了一个 Canvas 元素并获取了 WebGL 上下文；编写了顶点着色器和片元着色器，并创建并编译了着色器程序；最后，我们绘制了一个简单的三角形形状。这只是 WebGL 的基础知识，你可以进一步探索，实现更复杂的图形和效果。
评论 (0)