WebGL 开发手册

约 2107 字大约 7 分钟

WebGL图形编程3D

2020-05-09

WebGL 让浏览器具备了原生 3D 渲染能力，无需插件即可实现复杂的可视化效果。本文从基础概念到实战开发，帮助你快速掌握 WebGL 核心技术。

为什么选择 WebGL？

WebGL（Web Graphics Library）是基于 OpenGL ES 2.0 的 JavaScript API，允许在浏览器中渲染高性能的 2D 和 3D 图形。

核心优势：

跨平台：只需浏览器，无需安装插件
GPU 加速：直接调用显卡渲染，性能接近原生应用
生态丰富：Three.js、Babylon.js 等成熟框架降低开发门槛
应用广泛：游戏、数据可视化、虚拟现实、产品展示

适用场景：

3D 游戏开发
大规模数据可视化
建筑和产品展示
艺术创作和交互体验

核心概念

渲染管线

WebGL 采用可编程渲染管线，主要流程如下：

关键阶段说明：

顶点着色器：处理每个顶点的位置、颜色、法线等属性
光栅化：将几何图元转换为片元（像素候选）
片元着色器：计算每个像素的最终颜色

着色器语言 GLSL

WebGL 使用 GLSL（OpenGL Shading Language）编写着色器。

顶点着色器示例：

// 顶点着色器
attribute vec3 aPosition;  // 顶点位置
attribute vec3 aColor;     // 顶点颜色

uniform mat4 uModelMatrix;   // 模型矩阵
uniform mat4 uViewMatrix;    // 视图矩阵
uniform mat4 uProjectionMatrix; // 投影矩阵

varying vec3 vColor;  // 传递给片元着色器

void main() {
    gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition, 1.0);
    vColor = aColor;
}

片元着色器示例：

// 片元着色器
precision mediump float;  // 精度限定

varying vec3 vColor;  // 从顶点着色器接收

void main() {
    gl_FragColor = vec4(vColor, 1.0);  // 输出像素颜色
}

缓冲区与数据传输

WebGL 通过缓冲区将 JavaScript 数据传输到 GPU。

常用缓冲区类型：

类型	用途	绑定点
ARRAY_BUFFER	顶点属性数据（位置、颜色）	gl.bindBuffer()
ELEMENT_ARRAY_BUFFER	索引数据	gl.bindBuffer()

数据传输示例：

// 创建缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 传输顶点数据（类型化数组）
const positions = new Float32Array([
    -0.5, -0.5, 0.0,  // 顶点1
     0.5, -0.5, 0.0,  // 顶点2
     0.0,  0.5, 0.0   // 顶点3
]);

gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

基础语法

初始化 WebGL 上下文

<!DOCTYPE html>
<html>
<head>
    <title>WebGL 基础示例</title>
</head>
<body>
    <canvas id="glCanvas" width="640" height="480"></canvas>

    <script>
        // 获取 WebGL 上下文
        const canvas = document.getElementById('glCanvas');
        const gl = canvas.getContext('webgl');

        if (!gl) {
            console.error('浏览器不支持 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);
    </script>
</body>
</html>

编译着色器程序

// 创建着色器
function createShader(gl, type, source) {
    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, vertexShader, fragmentShader) {
    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 vsSource = `
    attribute vec4 aPosition;
    void main() {
        gl_Position = aPosition;
    }
`;

// 片元着色器源码
const fsSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // 红色
    }
`;

// 初始化着色器程序
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
const program = createProgram(gl, vertexShader, fragmentShader);

// 准备顶点数据
const positions = new Float32Array([
    0.0,  0.5,   // 顶点1
   -0.5, -0.5,   // 顶点2
    0.5, -0.5    // 顶点3
]);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// 设置属性指针
const aPosition = gl.getAttribLocation(program, 'aPosition');
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

// 绘制
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

常用框架

直接使用 WebGL API 开发较为复杂，推荐使用以下框架提升效率。

Three.js

特点：最流行的 WebGL 框架，API 友好，文档丰富。

安装：

npm install three

基础示例：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);
camera.position.z = 5;

// 添加轨道控制
const controls = new OrbitControls(camera, renderer.domElement);

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    controls.update();
    renderer.render(scene, camera);
}

animate();

Babylon.js

特点：微软出品，功能全面，适合游戏开发。

安装：

npm install @babylonjs/core @babylonjs/loaders

基础示例：

import { Engine, Scene, ArcRotateCamera, HemisphericLight, MeshBuilder } from '@babylonjs/core';

// 创建引擎和场景
const canvas = document.getElementById('renderCanvas');
const engine = new Engine(canvas, true);
const scene = new Scene(engine);

// 创建相机和灯光
const camera = new ArcRotateCamera('camera', Math.PI / 2, Math.PI / 4, 4, Vector3.Zero(), scene);
camera.attachControl(canvas, true);

const light = new HemisphericLight('light', new Vector3(1, 1, 0), scene);

// 创建球体
const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);

// 渲染循环
engine.runRenderLoop(() => {
    scene.render();
});

// 窗口大小变化响应
window.addEventListener('resize', () => {
    engine.resize();
});

框架对比

框架	学习曲线	性能	适用场景	文档质量
Three.js	中等	优秀	通用 3D 应用	优秀
Babylon.js	中等	优秀	游戏开发	优秀
A-Frame	简单	良好	WebVR	良好
PixiJS	简单	优秀	2D 图形	优秀

选择建议：

Three.js：通用首选，生态最完善
Babylon.js：游戏项目，需要完整游戏引擎功能
PixiJS：纯 2D 场景，性能优先
原生 WebGL：需要极致性能或定制渲染管线

性能优化

减少绘制调用

每次 gl.drawArrays() 或 gl.drawElements() 都会产生开销。

优化方法：

合并网格：将多个小物体合并为一个 BufferGeometry
实例化渲染：gl.drawArraysInstanced() 绘制大量相同物体
LOD（Level of Detail）：根据距离使用不同精度模型

实例化渲染示例（Three.js）：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const count = 10000;
const mesh = new THREE.InstancedMesh(geometry, material, count);

// 设置每个实例的变换矩阵
const matrix = new THREE.Matrix4();
for (let i = 0; i < count; i++) {
    matrix.setPosition(
        Math.random() * 100 - 50,
        Math.random() * 100 - 50,
        Math.random() * 100 - 50
    );
    mesh.setMatrixAt(i, matrix);
}

scene.add(mesh);

纹理优化

// 生成 Mipmap
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.generateMipmap(gl.TEXTURE_2D);

// 设置合适的过滤方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

纹理建议：

使用压缩纹理格式（如 KTX、Basis）
纹理尺寸使用 2 的幂次（256、512、1024）
合并小纹理为图集

着色器优化

避免在片元着色器中计算：

// 不好的做法
varying vec3 vNormal;
void main() {
    vec3 normal = normalize(vNormal);  // 每个像素都要归一化
    // ...
}

// 好的做法
attribute vec3 aNormal;
void main() {
    vNormal = normalize(normalMatrix * aNormal);  // 在顶点着色器中归一化
    gl_Position = projectionMatrix * modelViewMatrix * vec4(aPosition, 1.0);
}

其他优化技巧：

避免在循环中使用 if 分支
使用内置函数替代自定义计算
减少纹理采样次数

常见问题

着色器编译失败

现象：物体不显示，控制台无报错。

排查方法：

// 编译后检查状态
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('编译错误:', gl.getShaderInfoLog(shader));
}

常见原因：

变量名拼写错误
缺少精度声明（片元着色器）
语法错误

坐标系问题

WebGL 默认使用右手坐标系，但 Three.js 使用 Y 轴向上。

Three.js 坐标转换：

import * as THREE from 'three';

// 设置 Z 轴向上
scene.rotation.x = -Math.PI / 2;

纹理无法显示

检查清单：

图片是否已加载完成？
纹理尺寸是否为 2 的幂？
跨域问题是否解决？

解决方案：

// 等待图片加载
const texture = new THREE.TextureLoader().load('texture.jpg', () => {
    renderer.render(scene, camera);
});

// 跨域处理
texture.crossOrigin = 'anonymous';

性能问题诊断

使用浏览器开发者工具分析：

// Three.js 渲染信息
console.log(renderer.info);

// 输出示例
// {
//   memory: { geometries: 1, textures: 2 },
//   render: { calls: 1, triangles: 12 }
// }

总结

核心要点：

WebGL 基于 GPU 渲染管线，需要理解顶点着色器和片元着色器
GLSL 是着色器编程语言，需要掌握数据类型和内置函数
Three.js 是最推荐的入门框架，大幅降低开发门槛
性能优化关键在于减少绘制调用、优化纹理和着色器

学习路径建议：

掌握 Three.js 基础 API
理解材质、光源、相机
学习 GLSL 着色器编程
深入 WebGL 原生 API
性能优化与高级渲染技术

下一步：

学习 Three.js 官方示例
实践小型 3D 项目
研究 Shader 编程
探索物理引擎集成