线段图元的三种类型

WebGL提供了三种不同的线段绘制模式，每种都有其独特的用途和特点：

1. 基本线段（LINES）

每条线段都需要明确指定两个端点，线段之间相互独立。

// 每两个点构成一条独立线段
// [v1, v2] 构成第一条线段
// [v3, v4] 构成第二条线段
gl.drawArrays(gl.LINES, 0, 4); // 绘制2条线段

特点： 每次需要2个顶点来绘制1条线段，线段之间不相连。

2. 带状线段（LINE_STRIP）

线段首尾相连，形成连续的线条。

// [v1, v2] 第一条线段
// [v2, v3] 第二条线段（使用前一线段的终点作为起点）
// [v3, v4] 第三条线段
gl.drawArrays(gl.LINE_STRIP, 0, 4); // 绘制3条相连的线段

特点： 除了第一条线段需要2个点，后续每个点都会与前一个点形成新线段。

3. 环状线段（LINE_LOOP）

在带状线段的基础上，自动连接最后一个点和第一个点。

// [v1, v2], [v2, v3], [v3, v4], [v4, v1] 形成闭合环
gl.drawArrays(gl.LINE_LOOP, 0, 4); // 绘制闭合的四边形边框

特点： 形成闭合的环状线条，非常适合绘制轮廓。

交互式线段绘制实现

让我们通过一个鼠标点击绘制线段的示例来理解这些概念：

JavaScript交互代码

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

// 监听鼠标点击事件
canvas.addEventListener('mouseup', function(e) {
    var x = e.offsetX;  // 获取相对于canvas的X坐标
    var y = e.offsetY;  // 获取相对于canvas的Y坐标
    
    // 将点击坐标添加到数组
    positions.push(x);
    positions.push(y);
    
    // 更新缓冲区数据
    gl.bufferData(
        gl.ARRAY_BUFFER,
        new Float32Array(positions),
        gl.DYNAMIC_DRAW
    );
    
    // 重新绘制
    render();
});

// 渲染函数
function render() {
    // 清空画布
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    // 根据需要选择不同的线段模式
    // 绘制基本线段（每次需要2个点绘制1条线）
    gl.drawArrays(gl.LINES, 0, positions.length / 2);
    
    // 或绘制带状线段（连续连接所有点）
    // gl.drawArrays(gl.LINE_STRIP, 0, positions.length / 2);
    
    // 或绘制环状线段（连接所有点并闭合）
    // gl.drawArrays(gl.LINE_LOOP, 0, positions.length / 2);
}

着色器程序

顶点着色器和片元着色器与之前三角形的例子类似，只是处理的顶点数据用于绘制线段：

// 顶点着色器
precision mediump float;
attribute vec2 a_Position;
attribute vec2 a_Screen_Size;

void main() {
    // 将屏幕坐标转换为WebGL坐标系统
    vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
    position.y = -position.y; // 翻转Y轴
    gl_Position = vec4(position, 0.0, 1.0);
}

// 片元着色器
precision mediump float;
uniform vec4 u_Color;

void main() {
    gl_FragColor = u_Color;
}

三种线段模式的实际应用

基本线段（LINES）适用场景

• 绘制独立的直线段
• 连接特定的点对
• 路径规划中的独立路段

带状线段（LINE_STRIP）适用场景

• 绘制连续的路径
• 手写轨迹绘制
• 曲线轮廓绘制

环状线段（LINE_LOOP）适用场景

• 绘制封闭图形的边框
• 凸多边形轮廓
• 环形路径

性能考虑

// 使用STATIC_DRAW适用于不经常改变的数据
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

// 使用DYNAMIC_DRAW适用于经常改变的数据
gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);

• STATIC_DRAW：数据只设置一次，多次使用
• DYNAMIC_DRAW：数据多次更新，多次使用
• STREAM_DRAW：数据少量修改，少量使用

实践建议

1. LINES模式：每次点击两个点后才能看到一条线段，适合绘制独立的线段对
2. LINE_STRIP模式：每次点击都会延续之前的线条，适合连续绘制
3. LINE_LOOP模式：在LINE_STRIP基础上自动闭合，适合绘制封闭形状

掌握了这三种线段绘制模式，你就可以创建各种线条效果，从简单的几何图形到复杂的路径可视化都能轻松实现！

三角形图元的三种类型

在WebGL中，三角形是最基本的图元之一，但你知道吗？三角形有三种不同的绘制模式，每种都有其独特用途：

1. 基本三角形（TRIANGLES）

这是最常用的三角形绘制方式。每3个顶点构成一个独立的三角形，互不干扰。

// 6个顶点绘制2个三角形
// [v1, v2, v3] 构成第一个三角形
// [v4, v5, v6] 构成第二个三角形
gl.drawArrays(gl.TRIANGLES, 0, 6); // 绘制2个三角形

绘制三角形数量 = 顶点数 ÷ 3

2. 三角带（TRIANGLE_STRIP）

相邻的三角形共享边，效率更高。

// 6个顶点可以绘制4个三角形
// [v1, v2, v3], [v3, v2, v4], [v3, v4, v5], [v5, v4, v6]
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6); // 绘制4个三角形

绘制三角形数量 = 顶点数 - 2

3. 三角扇（TRIANGLE_FAN）

所有三角形都以第一个顶点为公共顶点。

// 适用于绘制扇形或圆形
gl.drawArrays(gl.TRIANGLE_FAN, 0, 6); // 绘制4个三角形

绘制三角形数量 = 顶点数 - 2

绘制固定三角形

让我们从最简单的固定三角形开始：

着色器程序

顶点着色器：

// 设置浮点数据类型为中级精度
precision mediump float;
// 接收顶点坐标 (x, y)
attribute vec2 a_Position;

void main(){
   gl_Position = vec4(a_Position, 0, 1);
}

片元着色器：

// 设置浮点数据类型为中级精度
precision mediump float;
// 接收 JavaScript 传过来的颜色值（rgba）
uniform vec4 u_Color;

void main(){
   vec4 color = u_Color / vec4(255, 255, 255, 1);
   gl_FragColor = color;
}

JavaScript核心代码

// 定义三角形的三个顶点（右下角、左上角、左下角）
var positions = [1, 0, 0, 1, 0, 0]; // 每两个数字代表一个顶点的x、y坐标

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

// 创建缓冲区
var buffer = gl.createBuffer();

// 绑定缓冲区为当前操作对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// 将顶点数据写入缓冲区
// 注意：必须使用类型化数组(Float32Array)传递给WebGL
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 启用顶点属性
gl.enableVertexAttribArray(a_Position);

// 配置顶点属性如何从缓冲区读取数据
var size = 2;        // 每次读取2个数据(x, y)
var type = gl.FLOAT; // 数据类型为浮点型
var normalize = false; // 不需要标准化
var stride = 0;      // 步长为0，表示数据连续存放
var offset = 0;      // 从缓冲区开始位置读取
gl.vertexAttribPointer(a_Position, size, type, normalize, stride, offset);

// 设置颜色并绘制
gl.uniform4f(u_Color, 255, 0, 0, 255); // 设置为红色

// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制3个顶点，即1个三角形

缓冲区操作详解

WebGL中的缓冲区是向GPU传递数据的关键工具，以下是其工作流程：

1. 创建和绑定缓冲区

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

// 将缓冲区绑定到ARRAY_BUFFER目标
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

2. 向缓冲区写入数据

// 使用类型化数组确保数据格式正确
var typedArray = new Float32Array([x1, y1, x2, y2, x3, y3]);
gl.bufferData(gl.ARRAY_BUFFER, typedArray, gl.STATIC_DRAW);

3. 配置顶点属性指针

gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(
    attributeLocation, // attribute变量位置
    size,              // 每个顶点包含的分量数(2=x,y; 3=x,y,z)
    type,              // 数据类型
    normalize,         // 是否标准化
    stride,            // 步长
    offset             // 偏移量
);

重要提示： WebGL要求强类型数据，JavaScript中的普通数组必须转换为类型化数组（如Float32Array）才能传递给GPU。

动态绘制三角形

现在让我们实现一个交互式功能：点击三次鼠标绘制一个三角形。

增强版顶点着色器

// 设置浮点数精度为中等精度
precision mediump float;
// 接收顶点坐标 (x, y)
attribute vec2 a_Position;
// 接收 canvas 的尺寸(width, height)
attribute vec2 a_Screen_Size;

void main(){
    // 将canvas坐标转换为NDC坐标(-1到1的范围)
    vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
    position = position * vec2(1.0, -1.0); // 翻转Y轴
    gl_Position = vec4(position, 0, 1);
}

交互式JavaScript实现

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

// 绑定鼠标点击事件
canvas.addEventListener('mouseup', function(e) {
    var x = e.offsetX; // 相对于canvas的X坐标
    var y = e.offsetHeight - e.offsetY; // 转换Y坐标系统
    positions.push(x, y);
    
    // 当顶点数是6的倍数时（即3个点），绘制一个三角形
    if (positions.length % 6 === 0) {
        // 更新缓冲区数据
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW);
        
        // 重新绘制所有三角形
        redraw();
    }
});

function redraw() {
    // 清空画布
    gl.clearColor(0, 0, 0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    // 绘制所有三角形
    gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2);
}

核心概念总结

缓冲区操作流程

1. gl.createBuffer() - 创建缓冲区对象
2. gl.bindBuffer() - 绑定为当前操作缓冲区
3. gl.bufferData() - 向缓冲区写入数据
4. gl.enableVertexAttribArray() - 启用顶点属性
5. gl.vertexAttribPointer() - 配置属性读取方式
6. gl.drawArrays() - 执行绘制

类型化数组的重要性

• JavaScript普通数组无法直接传递给WebGL
• 必须使用Float32Array等类型化数组
• 确保数据格式与GPU要求一致

坐标转换

• Canvas坐标系：左上角(0,0)，Y轴向下
• WebGL坐标系：中心(0,0)，Y轴向上
• 需要进行坐标转换才能正确显示

掌握了三角形绘制和缓冲区操作，你就迈出了WebGL高级渲染的第一步！接下来可以尝试绘制更多有趣的图形。

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之旅吧！