HTML5 WebGL 入门指南（一）
WebGL（Web Graphics Library）是一个 JavaScript API，用于在任何兼容的网页浏览器中渲染 2D 和 3D 图形，而无需使用插件。它基于 OpenGL ES（用于嵌入式系统的 OpenGL），使得开发者能够在网页上创建复杂的图形效果。本文将介绍 WebGL 的基本概念，并通过简单的代码示例，帮助你快速上手。
基本概念
在使用 WebGL 之前，首先我们需要了解几个关键的概念：
-
上下文（Context）：WebGL 的核心是通过获取一个绘图上下文来进行图形渲染。我们通常从一个 HTML
<canvas>元素中获取这个上下文。 -
着色器（Shader）：着色器是运行在 GPU 上的小程序，用于控制渲染图形的过程。WebGL 使用两种类型的着色器：顶点着色器和片段着色器。
-
缓冲区（Buffer）：用于存储顶点数据的对象，比如顶点坐标、颜色等信息。
-
绘制调用（Draw Call）：通过调用绘制函数，将定义好的图形绘制到画布上。
创建第一个 WebGL 程序
下面的代码示例展示了如何使用 HTML5 和 WebGL 绘制一个简单的三角形。
HTML 代码
首先，我们需要在 HTML 文件中创建一个 <canvas> 元素：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL 三角形示例</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script src="main.js"></script>
</body>
</html>
JavaScript 代码
接下来，我们需要在 main.js 文件中编写 JavaScript 代码，以初始化 WebGL 上下文并绘制三角形：
// 获取画布元素
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置清除颜色为黑色
gl.clear(gl.COLOR_BUFFER_BIT); // 清除画布
// 定义三角形的顶点
const vertices = new Float32Array([
0.0, 0.5, // 顶点1 (x1, y1)
-0.5, -0.5, // 顶点2 (x2, y2)
0.5, -0.5 // 顶点3 (x3, y3)
]);
// 创建缓冲区并绑定数据
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 创建顶点着色器
const vertexShaderSource = `
attribute vec2 a_position;
void main(void) {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// 创建片段着色器
const fragmentShaderSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
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);
// 指定属性
const positionLocation = gl.getAttribLocation(shaderProgram, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
总结
到此为止，我们已经完成了一个简单的 WebGL 程序，它在画布上绘制了一个红色的三角形。通过这个示例，我们展示了 WebGL 的基本使用流程，包括创建上下文、设置图形数据、编写着色器、并最终绘制图形。
在下一篇文章中，我们将深入探讨 WebGL 的更多特性，比如纹理映射和动画效果。希望这篇文章能对你学习 WebGL 的旅程有所帮助！
