WebGL API总览

WebGL提供了丰富的API来控制GPU进行3D图形渲染。这些API可以按功能分为几大类，每一类都承担着不同的职责，共同协作完成从数据输入到图像输出的整个渲染流程。

上下文和状态管理API

在开始绘制之前，我们首先需要获取WebGL的绘图上下文，并管理绘图状态。

获取WebGL上下文

// 从canvas元素获取WebGL绘图环境
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

视口设置

// 设置渲染区域的大小和位置（通常是整个canvas）
gl.viewport(0, 0, canvas.width, canvas.height);

清空缓冲区

// 设置清空颜色（这里是黑色）
gl.clearColor(0.0, 0.0, 0.0, 1.0);

// 清空颜色缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);

// 如果启用了深度测试，还需清空深度缓冲区
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

功能开关

// 启用深度测试
gl.enable(gl.DEPTH_TEST);

// 启用面剔除
gl.enable(gl.CULL_FACE);

// 启用混合（透明度处理）
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

// 禁用功能
gl.disable(gl.DEPTH_TEST);

着色器相关API

着色器是WebGL的灵魂，这些API负责创建、编译和管理着色器程序。

创建和编译顶点着色器

// 创建顶点着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);

// 设置着色器源代码
const vertexShaderSource = `
attribute vec4 a_position;
void main() {
  gl_Position = a_position;
}
`;
gl.shaderSource(vertexShader, vertexShaderSource);

// 编译着色器
gl.compileShader(vertexShader);

// 检查编译是否成功
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error('顶点着色器编译失败:', gl.getShaderInfoLog(vertexShader));
}

创建和编译片元着色器

// 创建片元着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 设置着色器源代码
const fragmentShaderSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
  gl_FragColor = u_color;
}
`;
gl.shaderSource(fragmentShader, fragmentShaderSource);

// 编译着色器
gl.compileShader(fragmentShader);

// 检查编译是否成功
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error('片元着色器编译失败:', gl.getShaderInfoLog(fragmentShader));
}

程序相关API

程序对象是顶点着色器和片元着色器的组合，这些API负责管理和链接着色器。

创建和链接程序

// 创建程序对象
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.useProgram(program);

变量定位和赋值API

这些API用于在JavaScript和着色器之间传递数据，是实现动态渲染的关键。

获取变量位置

// 获取attribute变量位置（顶点着色器中的变量）
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

给attribute变量赋值

// 给attribute变量赋值（1-4个浮点数）
gl.vertexAttrib1f(location, value);  // 1个浮点数
gl.vertexAttrib2f(location, x, y);  // 2个浮点数
gl.vertexAttrib3f(location, x, y, z);  // 3个浮点数
gl.vertexAttrib4f(location, x, y, z, w);  // 4个浮点数

给uniform变量赋值

// 给uniform变量赋值（浮点数）
gl.uniform1f(colorUniformLocation, value);  // 1个浮点数
gl.uniform2f(colorUniformLocation, x, y);  // 2个浮点数
gl.uniform3f(colorUniformLocation, r, g, b);  // 3个浮点数
gl.uniform4f(colorUniformLocation, r, g, b, a);  // 4个浮点数

// 给uniform变量赋值（整数）
gl.uniform1i(textureUniformLocation, textureUnit);  // 1个整数

// 给矩阵uniform变量赋值
const matrix = new Float32Array([
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
]);
gl.uniformMatrix4fv(matrixUniformLocation, false, matrix);

缓冲区相关API

缓冲区用于高效地向GPU传输大量顶点数据，是高性能渲染的基础。

创建和绑定缓冲区

// 创建缓冲区对象
const buffer = gl.createBuffer();

// 绑定缓冲区（指定缓冲区类型）
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);  // 顶点数据
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);  // 索引数据

向缓冲区写入数据

// 创建顶点数据
const vertices = new Float32Array([
  -0.5, -0.5,  // 第一个点
   0.5, -0.5,  // 第二个点
   0.0,  0.5   // 第三个点
]);

// 向当前绑定的缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// STATIC_DRAW: 数据一次性写入，多次使用
// DYNAMIC_DRAW: 数据频繁更改
// STREAM_DRAW: 数据偶尔更改

配置顶点属性指针

// 启用顶点属性数组
gl.enableVertexAttribArray(positionAttributeLocation);

// 配置顶点属性
gl.vertexAttribPointer(
  positionAttributeLocation, // attribute变量位置
  2,                         // 每个顶点包含2个分量(x, y)
  gl.FLOAT,                  // 数据类型为浮点数
  false,                     // 不标准化
  0,                         // 步长(0表示紧密排列)
  0                          // 偏移量
);

绘制相关API

这些API触发GPU执行渲染操作。

绘制图元

// 使用顶点数组绘制
gl.drawArrays(
  gl.TRIANGLES,  // 图元类型
  0,             // 起始顶点索引
  3              // 顶点数量
);

// 使用索引数组绘制
const indices = new Uint16Array([0, 1, 2]);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
gl.drawElements(
  gl.TRIANGLES,  // 图元类型
  3,             // 要绘制的索引数量
  gl.UNSIGNED_SHORT, // 索引数据类型
  0               // 偏移量
);

纹理相关API

纹理用于为3D模型添加细节和真实感。

创建和配置纹理

// 创建纹理对象
const texture = gl.createTexture();

// 绑定纹理
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理图像
gl.texImage2D(
  gl.TEXTURE_2D,    // 纹理目标
  0,                // 纹理级别
  gl.RGBA,          // 内部格式
  gl.RGBA,          // 源格式
  gl.UNSIGNED_BYTE, // 源数据类型
  imageData         // 图像数据
);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 激活纹理单元
gl.activeTexture(gl.TEXTURE0);  // 激活纹理单元0

混合和深度测试API

这些API控制像素的混合方式和深度测试行为。

混合设置

// 启用混合
gl.enable(gl.BLEND);

// 设置混合函数
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);  // 标准alpha混合

深度测试设置

// 启用深度测试
gl.enable(gl.DEPTH_TEST);

// 设置深度测试函数
gl.depthFunc(gl.LEQUAL);  // 小于等于时通过测试

// 设置深度缓冲写入掩码
gl.depthMask(true);  // 允许写入深度缓冲

常用常量参考

着色器类型

• gl.VERTEX_SHADER - 顶点着色器
• gl.FRAGMENT_SHADER - 片元着色器

缓冲区类型

• gl.ARRAY_BUFFER - 顶点数据缓冲区
• gl.ELEMENT_ARRAY_BUFFER - 索引数据缓冲区

缓冲区使用方式

• gl.STATIC_DRAW - 静态数据，一次性写入
• gl.DYNAMIC_DRAW - 动态数据，频繁更改
• gl.STREAM_DRAW - 流数据，偶尔更改

绘制模式

• gl.POINTS - 点
• gl.LINES - 线段
• gl.TRIANGLES - 三角形

数据类型

• gl.FLOAT - 浮点数
• gl.UNSIGNED_BYTE - 无符号字节

纹理类型

• gl.TEXTURE_2D - 2D纹理
• gl.TEXTURE_CUBE_MAP - 立方体贴图

缓冲区位

• gl.COLOR_BUFFER_BIT - 颜色缓冲区
• gl.DEPTH_BUFFER_BIT - 深度缓冲区

实际应用示例

回顾我们在前一节中使用的API：

// 使用着色器程序
gl.useProgram(program);

// 获取变量位置
const positionLocation = gl.getAttribLocation(program, 'a_Position');
const colorLocation = gl.getUniformLocation(program, 'u_Color');

// 给attribute变量赋值
gl.vertexAttrib2f(sizeLocation, canvas.width, canvas.height);

// 给uniform变量赋值
gl.uniform4f(colorLocation, r, g, b, a);

// 执行绘制
gl.drawArrays(gl.POINTS, 0, 1);

// 设置清空颜色
gl.clearColor(r, g, b, a);

// 清空缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);

掌握了这些基础API，你就能构建各种复杂的3D图形应用了。这些API看似繁多，但它们都有明确的职责分工，一旦熟悉了它们的作用，WebGL编程就会变得清晰明了。

WebGL程序的两大核心组件

WebGL程序就像一台精密的机器，需要两个关键部件协同工作才能正常运行：

JavaScript程序 - 负责控制和数据处理

着色器程序 - 负责图形渲染

这两个部分缺一不可，就像汽车需要发动机和方向盘一样。

从最简单的红点开始

我们的第一个目标很明确：在屏幕中心绘制一个红色的点，大小为10像素。

顶点着色器：告诉GPU在哪里画点

void main(){
    // 告诉GPU在裁剪坐标系原点画点
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    // 设置点的大小为10像素
    gl_PointSize = 10.0;
}

这里用到了GLSL语言的几个重要概念：

• gl_Position是内置变量，用来设置顶点位置
• gl_PointSize专门控制点的大小
• vec4是包含4个浮点数的向量容器

片元着色器：告诉GPU用什么颜色画

void main(){
    // 设置像素颜色为红色
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
}

注意颜色值的表示方法：

• WebGL中颜色分量范围是0-1，不是0-255
• 红色表示为(1.0, 0.0, 0.0, 1.0)
• 对应CSS中的rgb(255, 0, 0)

完整的HTML结构

<body>
    <!-- 顶点着色器源码 -->
    <script type="shader-source" id="vertexShader">
     void main(){
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
    </script>
    
    <!-- 片元着色器源码 -->
    <script type="shader-source" id="fragmentShader">
     void main(){
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
    }
    </script>
    
    <canvas id="canvas"></canvas>
</body>

JavaScript核心代码实现

第一步：获取WebGL绘图环境

// 获取canvas元素
var canvas = document.querySelector('#canvas');
// 获取WebGL上下文（兼容处理）
var gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl");

第二步：创建和编译着色器

// 获取顶点着色器源码
var vertexShaderSource = document.querySelector('#vertexShader').innerHTML;
// 创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 将源码分配给着色器对象
gl.shaderSource(vertexShader, vertexShaderSource);
// 编译顶点着色器程序
gl.compileShader(vertexShader);

// 片元着色器创建过程类似
var fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

第三步：创建和链接着色器程序

// 创建着色器程序
var program = gl.createProgram();
// 将顶点着色器挂载到程序上
gl.attachShader(program, vertexShader); 
// 将片元着色器挂载到程序上
gl.attachShader(program, fragmentShader);
// 链接着色器程序
gl.linkProgram(program);
// 启用着色器程序
gl.useProgram(program);

第四步：执行绘制操作

// 设置清空画布颜色为黑色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 用设置的颜色清空画布
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制点图元
gl.drawArrays(gl.POINTS, 0, 1);

让点动起来：交互式绘制

静态点不够有趣，让我们实现点击画布就在点击位置绘制彩色点的功能。

改进的着色器程序

// 顶点着色器 - 接收外部数据
precision mediump float;
// 接收点在canvas坐标系上的坐标
attribute vec2 a_Position;
// 接收canvas的宽高尺寸
attribute vec2 a_Screen_Size;

void main(){
    // 将屏幕坐标转换为裁剪坐标
    vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0; 
    position = position * vec2(1.0, -1.0);
    gl_Position = vec4(position, 0, 1);
    gl_PointSize = 10.0;
}

// 片元着色器 - 接收颜色数据
precision mediump float;
// 接收JavaScript传过来的颜色值
uniform vec4 u_Color;

void main(){
    // 将颜色值转换为WebGL格式
    vec4 color = u_Color / vec4(255, 255, 255, 1);
    gl_FragColor = color; 
}

交互式JavaScript实现

// 获取着色器变量位置
var a_Position = gl.getAttribLocation(program, 'a_Position');
var a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
var u_Color = gl.getUniformLocation(program, 'u_Color');

// 传递canvas尺寸信息
gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height);

// 存储点击位置的数组
var points = [];

// 绑定点击事件
canvas.addEventListener('click', e => {
    var x = e.pageX;
    var y = e.pageY;
    var color = {r: Math.random()*255, g: Math.random()*255, b: Math.random()*255, a: 255};
    points.push({ x: x, y: y, color: color });
    
    // 清空画布并重新绘制所有点
    gl.clearColor(0, 0, 0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    for (let i = 0; i < points.length; i++) {
        // 传递颜色数据
        gl.uniform4f(u_Color, points[i].color.r, points[i].color.g, points[i].color.b, points[i].color.a);
        // 传递位置数据
        gl.vertexAttrib2f(a_Position, points[i].x, points[i].y);
        // 绘制点
        gl.drawArrays(gl.POINTS, 0, 1);
    }
});

核心知识点总结

GLSL语言基础

• attribute变量：只能在顶点着色器中使用，接收顶点数据
• uniform变量：可在顶点和片元着色器中使用，接收全局数据
• varying变量：在顶点着色器和片元着色器间传递插值数据
• 向量运算：vec2、vec3、vec4等容器类型的运算规则

WebGL API核心方法

• createShader()：创建着色器对象
• shaderSource()：提供着色器源码
• compileShader()：编译着色器
• createProgram()：创建着色器程序
• attachShader()：绑定着色器到程序
• linkProgram()：链接着色器程序
• useProgram()：启用着色器程序
• drawArrays()：执行绘制操作

坐标系转换

从canvas坐标系到裁剪坐标系的转换公式：

position = (canvas_position / canvas_size) * 2.0 - 1.0

这个转换将浏览器坐标映射到WebGL的标准化设备坐标系(NDC)，其中x、y坐标范围都是[-1, 1]。

性能优化提示

直接使用gl.vertexAttrib2f逐个传递数据效率较低。后续章节我们会学习使用缓冲区(Buffer)来批量传递顶点数据，这能显著提升渲染性能。

现在你已经掌握了WebGL的基础绘制技能，准备好迎接更复杂的三角形绘制挑战了吗？

WebGL的前世今生：从插件时代到开放标准

还记得那些年我们用过的Flash吗？在WebGL出现之前，如果想在网页上展示3D效果，我们不得不依赖Adobe Flash、微软SilverLight这些浏览器插件。就像过去我们想要听音乐必须安装专门的播放器一样，这些插件就像一道门槛，限制了3D网页的发展。

但是，聪明的程序员们不甘于此！他们联手打造了一个开放标准——WebGL，让我们的浏览器原生支持3D图形渲染，再也不需要额外安装任何插件了。

WebGL到底是什么？用最简单的话说清楚

想象一下，你正在玩一个3D游戏，那些栩栩如生的场景、流畅的角色动作，背后都是GPU（显卡）在默默工作。WebGL就是一座桥梁，让你可以用JavaScript直接和GPU对话，告诉它"嘿，帮我渲染一个红色的三角形"或者"给我一个旋转的立方体"。

简单来说：

• WebGL是一套3D图形API（应用程序接口）
• 它让你的JavaScript代码可以直接控制GPU
• 你可以用它创建3D图表、网页游戏、3D地图、虚拟现实等精彩应用

WebGL的工作原理：就像工厂的流水线

想象一下汽车制造厂的流水线：

1. 工人准备好零件（顶点数据）
2. 每个工位对零件进行加工（顶点着色器）
3. 零件被组装成车门（图元装配）
4. 车门表面涂漆（光栅化）
5. 最后贴上标志（片元着色器）

WebGL的渲染过程也是这样：

// 这是JavaScript部分，准备数据
const vertices = [
  -0.5, -0.5,  // 三角形左下角
   0.5, -0.5,  // 三角形右下角
   0.0,  0.5   // 三角形顶部
];

// 这是顶点着色器，告诉GPU如何放置顶点
const vertexShaderSource = `
attribute vec2 a_position;  // 接收顶点位置
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);  // 设置顶点位置
}
`;

// 这是片元着色器，告诉GPU如何上色
const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // 设置为红色
}
`;

渲染管线的四个关键步骤：

1. 顶点着色器：处理每个顶点的位置
2. 图元装配：把顶点连成三角形
3. 光栅化：把三角形变成像素
4. 片元着色器：给每个像素上色

WebGL开发需要掌握的技能

如果你已经会HTML、CSS、JavaScript，那么恭喜你，你已经完成了80%的准备工作！WebGL开发还需要：

1. HTML基础（你已经有了）

只需要知道怎么使用<canvas>标签就够了：

<canvas id="webgl-canvas" width="800" height="600"></canvas>

2. JavaScript（你已经精通了）

负责：

• 获取WebGL上下文
• 处理顶点数据（坐标、颜色、法向量等）
• 将数据传递给GPU
• 加载和解析模型文件

3. GLSL着色器语言（新的挑战）

这是运行在GPU上的小程序，语法类似C语言，但专门为图形处理设计：

// 顶点着色器示例
attribute vec4 position;
uniform mat4 u_matrix;
void main() {
  gl_Position = u_matrix * position;  // 矩阵变换
}

4. 3D数学知识（最重要的基础）

• 向量：表示方向和距离
• 矩阵：进行坐标变换（平移、旋转、缩放）
• 这是WebGL的核心，理解了数学原理，你就掌握了3D世界的钥匙

着色器程序：让GPU听懂你的话

WebGL中有两种着色器：

顶点着色器（Vertex Shader）

• 处理每个顶点的位置信息
• 执行坐标变换（移动、旋转、缩放等）

片元着色器（Fragment Shader）

• 决定每个像素的颜色
• 处理光照、纹理等效果

// 完整的简单示例
function initWebGL() {
  const canvas = document.getElementById('webgl-canvas');
  const gl = canvas.getContext('webgl');
  
  if (!gl) {
    alert('你的浏览器不支持WebGL');
    return;
  }
  
  // 创建着色器程序...
  // 绘制图形...
}

WebGL的魅力在哪里？

想象一下你能做到的事情：

• 创建震撼的3D数据可视化
• 开发浏览器内的3D游戏
• 构建虚拟现实体验
• 实现复杂的图像处理效果
• 优化传统2D应用性能

总结：开启3D世界的大门

WebGL不仅仅是技术，更是创造力的延伸。它让你有能力：

• 用JavaScript控制GPU的强大计算能力
• 将数学知识转化为视觉艺术
• 为用户提供沉浸式的3D体验
• 在浏览器中实现以前不可能的效果

记住，WebGL的学习曲线虽然陡峭，但一旦掌握，你就能创造出令人惊叹的视觉效果。让我们一起踏上这段精彩的3D之旅吧！