WebGL快速入门

文章索引

WebGL（Web Graphics Library）是一个 JavaScript API，用于在 HTML5 <canvas> 元素中渲染高性能的 2D 和 3D 图形，无需插件，底层基于 OpenGL ES。

下面是一个快速入门指南，帮你快速理解 WebGL 的基本使用方式：

🚀 一、环境准备

只需要一个支持 WebGL 的浏览器（如 Chrome、Firefox）和一段 HTML/JS 代码，无需额外安装。

🧱 二、基本结构

下面是一个最简单的 WebGL 示例，清空一个 canvas 为红色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebGL Quick Start</title>
  <style> canvas { width: 100%; height: 100%; } </style>
</head>
<body>
  <canvas id="glCanvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('glCanvas');
    const gl = canvas.getContext('webgl'); // 获取 WebGL 上下文

    if (!gl) {
      alert("你的浏览器不支持WebGL");
    }

    // 设置清屏颜色为红色 (RGBA)
    gl.clearColor(1.0, 0.0, 0.0, 1.0);

    // 清除颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT);
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>WebGL Quick Start</title>

</head>

<body>

const canvas = document.getElementById('glCanvas');

const gl = canvas.getContext('webgl'); // 获取 WebGL 上下文

if (!gl) {

alert("你的浏览器不支持WebGL");

}

// 设置清屏颜色为红色 (RGBA)

gl.clearColor(1.0, 0.0, 0.0, 1.0);

// 清除颜色缓冲区

gl.clear(gl.COLOR_BUFFER_BIT);

</script>

</body>

</html>

🧠 三、核心概念快速扫盲

名称	作用
Canvas	HTML 渲染画布
WebGL Context	WebGL 绘图上下文对象
Shader（着色器）	GPU 上运行的小程序，分为顶点着色器和片元着色器
Buffer	存储顶点等数据的缓冲区
Attribute / Uniform	向 Shader 传递数据
Texture	贴图
Program	WebGL 程序（组合了着色器）

🟢 四、绘制一个三角形

这是 WebGL 的“Hello Triangle”示例：

<script>
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

const vertexShaderSource = `
  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // 绿色
  }
`;

// 创建着色器函数
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

// 创建程序函数
function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  return program;
}

// 创建着色器
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);

// 定义三角形顶点
const vertices = new Float32Array([
  0, 0.5,
  -0.5, -0.5,
  0.5, -0.5,
]);

// 创建缓冲区并传入数据
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 使用程序并绑定属性
gl.useProgram(program);
const positionLoc = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

// 设置背景色并绘制
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

const canvas = document.getElementById("glCanvas");

const gl = canvas.getContext("webgl");

const vertexShaderSource = `

attribute vec2 a_position;

void main() {

gl_Position = vec4(a_position, 0.0, 1.0);

}

const fragmentShaderSource = `

void main() {

gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // 绿色

}

// 创建着色器函数

function createShader(gl, type, source) {

const shader = gl.createShader(type);

gl.shaderSource(shader, source);

gl.compileShader(shader);

return shader;

}

// 创建程序函数

function createProgram(gl, vertexShader, fragmentShader) {

const program = gl.createProgram();

gl.attachShader(program, vertexShader);

gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

return program;

}

// 创建着色器

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);

const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

const program = createProgram(gl, vertexShader, fragmentShader);

// 定义三角形顶点

const vertices = new Float32Array([

0, 0.5,

-0.5, -0.5,

0.5, -0.5,

]);

// 创建缓冲区并传入数据

const buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

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

// 使用程序并绑定属性

gl.useProgram(program);

const positionLoc = gl.getAttribLocation(program, "a_position");

gl.enableVertexAttribArray(positionLoc);

gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

// 设置背景色并绘制

gl.clearColor(0, 0, 0, 1);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES, 0, 3);

</script>

📚 五、推荐学习路线

基础概念
- WebGL 渲染管线（顶点着色器 → 光栅化 → 片元着色器）
- 坐标系统（NDC、视口）
动手练习
- 绘制点、线、三角形
- 使用颜色、位置数据
深入进阶
- 加载图片贴图
- 加入矩阵变换（平移、旋转、缩放）
- 与 3D 模型结合
推荐框架（加速开发）
- Three.js（WebGL 封装库）
- regl、twgl.js（函数式封装）

🎁 六、学习资源

官方文档：WebGL Fundamentals
三维封装库：Three.js 快速上手教程（适合快速开发大屏可视化）
中文社区教程：WebGL 中文教程