WebGL是一套基于OpenGL ES标准的浏览器端3D图形渲染接口，它可以直接调用显卡的GPU资源，在HTML的canvas元素上绘制3D图形，不需要用户安装任何额外的插件。开发者只需要掌握基础的JavaScript和图形学概念，就能通过WebGL实现丰富的3D视觉效果。
WebGL渲染的基础流程
WebGL的渲染流程可以分为几个核心步骤，理解这些步骤是入门的关键：
- 获取canvas元素的WebGL上下文，这是所有操作的基础入口
- 编写顶点着色器和片元着色器，定义图形的顶点处理逻辑和像素颜色计算逻辑
- 创建顶点缓冲对象，将3D模型的顶点数据传递给GPU
- 配置着色器中的变量，将缓冲数据和着色器属性关联起来
- 执行绘制命令，让GPU按照设定逻辑渲染出最终画面
获取WebGL上下文
首先需要在HTML页面中创建canvas元素，然后通过canvas的getContext方法获取WebGL上下文，不同浏览器可能有不同的上下文名称，需要做兼容处理。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>WebGL入门示例</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="glCanvas" width="800" height="600"></canvas>
<script src="main.js"></script>
</body>
</html>
对应的JavaScript获取上下文代码如下：
function initWebGLContext(canvas) {
// 尝试获取标准WebGL上下文，兼容实验性上下文
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) {
console.error('当前浏览器不支持WebGL');
return null;
}
return gl;
}
// 初始化上下文
const canvas = document.getElementById('glCanvas');
const gl = initWebGLContext(canvas);
if (!gl) {
throw new Error('WebGL上下文初始化失败');
}
编写着色器程序
WebGL使用GLSL语言编写着色器，分为顶点着色器和片元着色器两种。顶点着色器负责处理每个顶点的位置信息，片元着色器负责计算每个像素的最终颜色。
顶点着色器示例
下面的顶点着色器定义了一个顶点位置属性，直接将传入的坐标作为裁剪空间坐标输出：
// 顶点着色器代码
const vertexShaderSource = `
// 顶点位置属性，从外部传入
attribute vec4 a_position;
void main() {
// 直接将顶点位置作为裁剪空间输出
gl_Position = a_position;
}
`;
片元着色器示例
片元着色器设置所有像素为固定的蓝色：
// 片元着色器代码
const fragmentShaderSource = `
// 精度声明，WebGL中片元着色器需要指定浮点精度
precision mediump float;
void main() {
// 设置输出颜色为蓝色，rgba格式，每个分量范围0-1
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
编译和链接着色器
编写完着色器源码后，需要将其编译为着色器对象，再链接为可执行的程序对象：
// 编译着色器
function compileShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
// 检查编译状态
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('着色器编译失败:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// 创建着色器程序
function createProgram(gl, vertexSource, fragmentSource) {
const vertexShader = compileShader(gl, vertexSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fragmentSource, gl.FRAGMENT_SHADER);
if (!vertexShader || !fragmentShader) {
return null;
}
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// 检查链接状态
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('程序链接失败:', gl.getProgramInfoLog(program));
gl.deleteProgram(program);
return null;
}
return program;
}
// 创建程序
const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
if (!program) {
throw new Error('着色器程序创建失败');
}
gl.useProgram(program);
传递顶点数据
要绘制3D图形，需要将模型的顶点数据传递给GPU。这里以绘制一个三角形为例，定义三个顶点的坐标：
// 三角形顶点数据，每个顶点包含x,y,z,w四个分量，w通常为1
const vertices = new Float32Array([
0.0, 0.5, 0.0, 1.0, // 上顶点
-0.5, -0.5, 0.0, 1.0, // 左顶点
0.5, -0.5, 0.0, 1.0 // 右顶点
]);
// 创建顶点缓冲对象
const vertexBuffer = gl.createBuffer();
// 绑定缓冲到ARRAY_BUFFER目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// 将顶点数据写入缓冲
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 获取着色器中a_position属性的位置
const positionLocation = gl.getAttribLocation(program, 'a_position');
// 启用该属性
gl.enableVertexAttribArray(positionLocation);
// 设置属性如何从缓冲中读取数据
gl.vertexAttribPointer(
positionLocation, // 属性位置
4, // 每个顶点包含4个分量
gl.FLOAT, // 数据类型为浮点型
false, // 不归一化
0, // 步长，0表示紧密排列
0 // 偏移量
);
执行绘制命令
完成所有配置后，只需要调用绘制命令就能在canvas上看到渲染结果：
// 设置清除颜色为白色 gl.clearColor(1.0, 1.0, 1.0, 1.0); // 清除画布 gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形，从0号顶点开始，绘制3个顶点 gl.drawArrays(gl.TRIANGLES, 0, 3);
常见问题说明
入门阶段可能会遇到一些常见问题：
- 如果canvas显示黑色，首先检查WebGL上下文是否获取成功，着色器是否编译通过
- GLSL语言的语法和JavaScript不同，需要注意分号、变量类型声明等细节
- 顶点坐标的范围是裁剪空间-1到1，超出这个范围的部分不会被显示
- 如果修改了着色器代码，需要重新编译链接程序才能生效
掌握以上基础步骤后，就可以进一步学习3D变换、纹理映射、光照计算等更复杂的WebGL功能，实现更丰富的3D渲染效果。