WebGL是基于OpenGL ES的JavaScript API，可在网页canvas中渲染2D/3D图形，利用GPU加速，无需插件。它通过顶点和片元着色器（用GLSL编写）控制渲染流程，核心步骤包括获取上下文、编译着色器、链接程序、传入顶点数据并绘制。示例中绘制红色三角形需设置顶点位置、颜色，并调用drawArrays。attribute传递顶点数据，uniform传全局参数，varying用于着色器间通信。尽管Three.js等库简化开发，掌握原生WebGL有助于性能优化与调试。
WebGL 让你能在网页上直接绘制高性能的 2D 和 3D 图形，而 JavaScript 是驱动它的核心语言。它不依赖插件，直接利用 GPU 加速，适合做可视化、游戏、动画等图形密集型应用。
WebGL 是什么？
WebGL（Web Graphics Library） 是一套基于 OpenGL ES 的 JavaScript API，可以在 canvas 元素中渲染交互式 3D 和 2D 图形。目前主流浏览器都支持 WebGL 1.0 和 WebGL 2.0。
它通过着色器（Shader）控制图形渲染流程，使用 GLSL（OpenGL Shading Language）编写顶点和片元着色器代码。
基本使用步骤
要在页面中使用 WebGL，需要几个关键步骤：
立即学习“Java免费学习笔记（深入）”；
- 获取 canvas 元素并创建 WebGL 上下文
- 编写顶点着色器和片元着色器代码
- 编译着色器并链接成程序（program）
- 准备顶点数据并传入 GPU
- 指定着色器如何读取数据
- 调用 draw 方法渲染
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('WebGL not supported');
}
// 顶点着色器源码
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// 片元着色器源码
const fsSource = `
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.error('Shader compile error:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
// 初始化 shader 程序
const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('Program link error:', gl.getProgramInfoLog(shaderProgram));
}
gl.useProgram(shaderProgram);
// 创建顶点数据缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// 三个顶点（x, y）
const positions = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 获取着色器中 attribute 变量的位置
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
// 启用 attribute 并配置读取方式
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// 清除画布并绘制
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
着色器编程要点
WebGL 渲染管线依赖两个主要着色器：
- 顶点着色器：处理每个顶点的位置变换，输出 gl_Position
- 片元着色器：决定每个像素的颜色，输出 gl_FragColor
attribute 变量用于顶点数据输入，uniform 用于传递全局参数（如时间、矩阵），varying 用于在两个着色器之间传递数据。
常见工具与库
原生 WebGL 写起来较繁琐，实际项目中常使用封装库：
- Three.js：最流行的 3D 库，简化模型、光照、相机管理
- Babylon.js：功能完整的游戏级引擎
- PlayCanvas：支持在线编辑和实时协作
- Regl：轻量函数式 WebGL 封装，适合数据可视化
掌握原生 WebGL 有助于理解图形底层机制，即使使用高级库也能更好地优化性能和调试问题。
基本上就这些。从三角形开始，逐步加入变换、纹理、光照，就能构建出复杂的视觉效果。
