WebGL全称为Web Graphics Library，是一套运行在浏览器环境中的JavaScript API，它基于OpenGL ES标准实现，能够直接调用设备的图形处理器GPU来完成2D和3D图形的渲染工作，不需要用户安装任何额外的插件，只要浏览器支持该特性就可以运行。
WebGL的核心基础概念
要使用WebGL实现渲染，首先需要理解几个核心的组成部分，这些部分共同构成了WebGL的工作流程。
画布与上下文
WebGL的渲染内容需要挂载在HTML的<canvas>元素上，首先需要通过JavaScript获取<canvas>元素，然后调用它的getContext方法，传入参数webgl来创建WebGL上下文，后续所有的渲染操作都会通过这个上下文完成。
// 获取canvas元素
const canvas = document.getElementById('webgl-canvas');
// 创建WebGL上下文，兼容性处理
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) {
console.log('当前浏览器不支持WebGL');
}
着色器程序
WebGL的渲染逻辑需要通过着色器来实现，着色器是运行在GPU上的小程序，分为两种类型：
- 顶点着色器：负责处理每个顶点的位置、颜色等属性，把3D坐标转换为屏幕上的2D坐标。
- 片元着色器：负责处理每个像素的颜色，决定最终渲染出来的每个点的显示效果。
着色器使用GLSL ES语言编写，这是一种类C的语言，专门用来编写GPU程序。
缓冲区与顶点数据
3D模型的顶点数据需要存储在缓冲区中，再传递给GPU处理。常见的缓冲区类型有顶点缓冲区，用来存储顶点的位置、纹理坐标、法向量等信息。
WebGL实现3D图形渲染的完整流程
使用WebGL渲染一个简单的3D图形，通常需要按照以下步骤完成：
第一步：准备着色器程序
首先需要编写顶点着色器和片元着色器的代码，然后编译、链接成可执行的着色器程序，再告诉WebGL使用这个程序。
// 顶点着色器代码
const vertexShaderSource = `
attribute vec4 a_position;
void main() {
// 直接输出顶点位置，不做额外变换
gl_Position = a_position;
}
`;
// 片元着色器代码
const fragmentShaderSource = `
precision mediump float;
void main() {
// 设置所有像素为红色
gl_FragColor = vec4(1.0, 0.0, 0.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.log('着色器编译失败：' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// 创建着色器程序
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
const vertexShader = compileShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
// 检查链接是否成功
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.log('程序链接失败：' + gl.getProgramInfoLog(program));
return null;
}
return program;
}
// 使用创建好的程序
const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
gl.useProgram(program);
第二步：传递顶点数据到GPU
我们需要定义要渲染的图形的顶点数据，比如渲染一个三角形，需要三个顶点的坐标，然后把数据存入缓冲区，再关联到着色器的属性上。
// 定义三角形的三个顶点，坐标范围在-1到1之间
const positions = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
// 创建顶点缓冲区
const positionBuffer = gl.createBuffer();
// 绑定缓冲区到ARRAY_BUFFER目标
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// 把顶点数据写入缓冲区
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 获取着色器中a_position属性的位置
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
// 启用该属性
gl.enableVertexAttribArray(positionAttributeLocation);
// 告诉属性怎么从缓冲区中读取数据
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
第三步：执行绘制命令
所有准备工作完成后，就可以调用绘制命令让WebGL渲染图形了。首先需要设置视口大小，然后清除画布，最后调用drawArrays方法绘制。
// 设置视口为canvas的整个大小 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // 清除画布，设置清除颜色为黑色 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形，从第一个顶点开始，绘制3个顶点 gl.drawArrays(gl.TRIANGLES, 0, 3);
WebGL 3D渲染的进阶说明
上面的示例只是渲染了一个2D的三角形，要实现真正的3D渲染，还需要额外处理投影变换、模型变换、光照计算等内容。比如需要通过矩阵运算把3D空间的坐标转换到屏幕的2D坐标，还需要给着色器传递更多的参数，比如模型矩阵、视图矩阵、投影矩阵等，才能实现旋转、缩放、平移等3D效果。
另外WebGL本身是一套比较底层的API，直接使用起来代码量比较大，实际开发中通常会使用Three.js这类封装好的库来简化开发流程，但理解WebGL的底层渲染原理，能够帮助我们更好地使用这些上层库，也能在需要优化性能的时候找到合适的方向。
WebGLJavaScript3D图形渲染着色器修改时间：2026-06-30 13:21:35