3.4 动画和交互 (Animation and Interaction)

3.4 动画和交互 (Animation and Interaction)

第三章：WebGL 高级技术领域 - 3.4 动画和交互 (Animation and Interaction) 详解

WebGL 的魅力不仅仅在于静态的 3D 模型渲染，更在于其能够创造生动、可交互的动态场景。动画和交互是现代 WebGL 应用不可或缺的组成部分，它们赋予应用生命力，提升用户体验，并开启了无限的可能性，从游戏、虚拟现实到数据可视化和艺术创作，都离不开精巧的动画和自然的交互设计。

3.4.1 动画 (Animation)

动画的本质是在短时间内连续快速地显示一系列静态图像，从而产生运动的错觉。在 WebGL 中，我们通过不断更新场景中的对象属性（例如位置、旋转、颜色、形状等）并重新渲染画面来实现动画效果。

3.4.1.1 动画循环 (Animation Loop)

WebGL 动画的核心是动画循环。这是一个不断重复执行的函数，负责更新场景状态并重新绘制画面。标准的 WebGL 动画循环通常包含以下几个步骤：

1. 更新 (Update): 根据时间或其他条件，更新场景中对象的状态。例如，改变物体的位置、旋转角度、颜色等。

2. 渲染 (Render): 使用 WebGL API 绘制更新后的场景。这通常涉及到设置视口、清除画布、设置着色器、绑定缓冲区、绘制几何体等步骤。

3. 循环 (Loop): 安排下一次动画帧的执行。通常使用 requestAnimationFrame API 来实现高效且流畅的动画循环。

// 获取 canvas 元素和 WebGL 上下文
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
// 初始化 WebGL (例如，设置着色器、缓冲区等 - 略)
// ... 初始化代码 ...
// 渲染函数
function render() {
  // 1. 更新 (Update) - 例如，旋转角度
  rotationAngle += 0.01; // 每次更新角度
  // 2. 渲染 (Render)
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // 清除画布
  // 设置模型矩阵 (Model Matrix) - 应用旋转变换
  mat4.identity(modelMatrix);
  mat4.rotate(modelMatrix, modelMatrix, rotationAngle, [0, 1, 0]); // 绕 Y 轴旋转
  // ... 其他渲染步骤 (设置 uniform 变量, 绘制) ...
  // ... gl.uniformMatrix4fv(...);
  // ... gl.drawArrays(...);
  // 3. 循环 (Loop) - 请求下一帧动画
  requestAnimationFrame(render);
}
// 初始调用渲染函数，启动动画循环
render();
​

代码解释:

• render() 函数是动画循环的核心。

• rotationAngle += 0.01; 在每次循环中更新 rotationAngle，从而实现旋转动画。

• mat4.rotate(modelMatrix, modelMatrix, rotationAngle, [0, 1, 0]); 使用矩阵变换来应用旋转效果。

• requestAnimationFrame(render); 安排浏览器在下一次重绘之前调用 render() 函数，实现循环动画。

Mermaid 图表 - 动画循环流程:

图表解释:

动画循环从“开始动画循环”开始，进入循环体，依次执行“更新场景状态”、“渲染场景”和 “requestAnimationFrame(render)”。 requestAnimationFrame 保证了循环的持续运行，直到动画结束 (可以设置条件来停止循环)。

3.4.1.2 基于时间的动画 (Time-Based Animation)

简单的角度递增动画可能在不同性能的设备上运行速度不一致。为了实现更平滑和一致的动画效果，我们需要使用基于时间的动画。

核心思想: 动画的更新速度应该与时间间隔 (deltaTime) 相关，而不是与帧率 (frames per second, FPS) 相关。

步骤:

1. 记录上一帧的时间: 在动画循环的开始记录上一帧的时间戳 (timestamp)。

2. 计算时间间隔 (deltaTime): 在每一帧中，计算当前帧时间戳与上一帧时间戳的差值，得到 deltaTime。

3. 基于 deltaTime 更新动画属性: 将动画属性的更新量乘以 deltaTime，使其与时间流逝成正比。

let lastTime = 0; // 记录上一帧时间
function render(currentTime) { // currentTime 由 requestAnimationFrame 传入
  currentTime *= 0.001; // 转换为秒 (毫秒 -> 秒)
  const deltaTime = currentTime - lastTime; // 计算时间间隔
  lastTime = currentTime; // 更新上一帧时间
  // 1. 更新 (Update) - 基于 deltaTime 更新旋转角度
  rotationAngle += 0.5 * deltaTime; // 旋转速度为每秒 0.5 弧度
  // 2. 渲染 (Render) - 保持不变
  // ... 渲染代码 ...
  // 3. 循环 (Loop)
  requestAnimationFrame(render);
}
render(0); // 初始调用，传入初始时间 0
​

代码解释:

• render(currentTime) 函数接收 requestAnimationFrame 传入的当前时间戳 currentTime (毫秒)。

• deltaTime = currentTime - lastTime; 计算当前帧与上一帧的时间间隔 (秒)。

• rotationAngle += 0.5 * deltaTime; 旋转角度的更新量与 deltaTime 成正比，确保在不同帧率下，物体每秒旋转的角度基本一致。

优点:

• 帧率独立性 (Frame Rate Independence): 动画速度不再依赖于帧率，在不同性能的设备上表现更一致。

• 平滑性: 即使帧率波动，动画也能保持相对平滑。

3.4.1.3 变换动画 (Transformation Animation)

WebGL 中最常见的动画方式之一是通过变换矩阵来实现。我们可以通过修改模型矩阵 (Model Matrix)、视图矩阵 (View Matrix) 或投影矩阵 (Projection Matrix) 来实现各种动画效果。

• 模型矩阵动画: 控制模型在世界坐标系中的位置、旋转和缩放，实现物体自身的运动动画 (例如，旋转、平移、缩放)。

• 视图矩阵动画: 控制摄像机的位置和朝向，实现摄像机运动动画 (例如，环绕观察、第一人称视角移动)。

• 投影矩阵动画: 控制投影方式和视锥体，可以实现一些特殊效果 (例如，透视效果变化、景深模拟)。

示例 - 模型矩阵旋转动画 (与之前的例子相同，使用了模型矩阵旋转):

// ... WebGL 初始化 ...
let modelMatrix = mat4.create(); // 创建模型矩阵
let rotationAngle = 0;
function render(currentTime) {
  // ... 时间计算 ...
  // 更新模型矩阵 - 旋转
  mat4.identity(modelMatrix); // 重置为单位矩阵
  mat4.rotate(modelMatrix, modelMatrix, rotationAngle, [0, 1, 0]);
  // 设置 uniform 模型矩阵
  gl.uniformMatrix4fv(modelMatrixUniformLocation, false, modelMatrix);
  // ... 渲染 ...
  requestAnimationFrame(render);
}
render(0);
​

示例 - 视图矩阵平移动画 (模拟摄像机平移):

// ... WebGL 初始化 ...
let viewMatrix = mat4.create(); // 创建视图矩阵
let cameraPosition = [0, 0, 5]; // 初始摄像机位置
let cameraSpeed = 1.0; // 摄像机移动速度
function render(currentTime) {
  // ... 时间计算 ...
  // 更新摄像机位置 - 向左平移
  cameraPosition[0] -= cameraSpeed * deltaTime;
  // 更新视图矩阵 - 反向平移摄像机
  mat4.identity(viewMatrix);
  mat4.translate(viewMatrix, viewMatrix, [-cameraPosition[0], -cameraPosition[1], -cameraPosition[2]]); // 注意方向取反
  // 设置 uniform 视图矩阵
  gl.uniformMatrix4fv(viewMatrixUniformLocation, false, viewMatrix);
  // ... 渲染 ...
  requestAnimationFrame(render);
}
render(0);
​

3.4.1.4 着色器动画 (Shader Animation)

对于更高级和复杂的动画效果，我们可以直接在顶点着色器 (Vertex Shader) 和 片元着色器 (Fragment Shader) 中进行动画计算。

顶点着色器动画: 在顶点着色器中修改顶点的位置、法线等属性，可以实现模型变形、粒子效果、流体模拟等动画。

片元着色器动画: 在片元着色器中修改颜色、纹理坐标等属性，可以实现颜色闪烁、纹理动画、水波纹效果等动画。

示例 - 顶点着色器波浪动画:

顶点着色器 (vertexShader.glsl):

#version 300 es
in vec4 a_position;
uniform mat4 u_modelMatrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_projectionMatrix;
uniform float u_time; // 动画时间
void main() {
  vec4 position = a_position;
  // 基于时间和顶点 Y 坐标生成波浪效果
  position.x += sin(position.y * 5.0 + u_time) * 0.5;
  position.z += cos(position.y * 5.0 + u_time) * 0.5;
  gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * position;
}
​

JavaScript 代码:

// ... WebGL 初始化 (着色器编译、程序链接、缓冲区设置等) ...
let timeUniformLocation = gl.getUniformLocation(program, "u_time");
let startTime = performance.now(); // 记录动画开始时间
function render(currentTime) {
  // ... 时间计算 ...
  let elapsedTime = (currentTime - startTime) * 0.001; // 计算动画经过时间 (秒)
  // 设置 uniform 动画时间
  gl.uniform1f(timeUniformLocation, elapsedTime);
  // ... 渲染 ...
  requestAnimationFrame(render);
}
render(performance.now()); // 初始调用，传入当前时间
​

代码解释:

• 顶点着色器:

  • uniform float u_time; 接收 JavaScript 传入的动画时间。

  • position.x += sin(position.y * 5.0 + u_time) * 0.5; 和 position.z += cos(position.y * 5.0 + u_time) * 0.5; 根据顶点 Y 坐标和时间 u_time 计算偏移量，实现波浪效果。

• JavaScript 代码:

  • let timeUniformLocation = gl.getUniformLocation(program, "u_time"); 获取 uniform 变量 u_time 的位置。

  • gl.uniform1f(timeUniformLocation, elapsedTime); 在每一帧更新 u_time 的值，传递给顶点着色器。

优点:

• 高性能: 动画计算在 GPU 上进行，效率更高。

• 复杂效果: 可以实现更复杂和精细的动画效果，例如粒子系统、流体模拟、程序化纹理动画等。

3.4.1.5 关键帧动画 (Keyframe Animation)

对于更复杂的动画序列，例如角色动画，通常使用关键帧动画。

核心思想: 在时间轴上设置一系列关键帧，每个关键帧定义了对象在特定时间点的状态 (例如，骨骼姿势、模型属性)。在关键帧之间，通过插值算法 (例如，线性插值、样条插值) 计算中间帧的状态，从而生成平滑的动画过渡。

步骤 (简化描述):

1. 定义关键帧: 为动画序列的关键时间点 (例如，开始、中间、结束) 定义对象的状态 (例如，骨骼角度、模型位置)。

2. 插值计算: 在动画运行时，根据当前时间在关键帧之间进行插值计算，得到当前帧的对象状态。

3. 应用状态: 将插值计算得到的状态应用到 WebGL 场景中的对象，并进行渲染。

关键帧动画涉及更复杂的数据结构和插值算法，通常需要使用动画库或引擎来辅助实现。 例如，Three.js 等 WebGL 框架提供了强大的关键帧动画支持。

3.4.2 交互 (Interaction)

WebGL 的交互性使得用户能够与 3D 场景进行互动，从而创造更加沉浸式和参与式的体验。WebGL 交互主要通过事件处理和场景对象拾取 (picking) 来实现。

3.4.2.1 事件处理 (Event Handling)

WebGL 交互的基础是事件处理。我们需要监听用户的输入事件 (例如，鼠标事件、键盘事件、触摸事件) 并根据事件类型和事件信息做出相应的响应。

常见的交互事件:

• 鼠标事件:

  • mousedown: 鼠标按钮按下

  • mouseup: 鼠标按钮释放

  • mousemove: 鼠标移动

  • click: 鼠标单击

  • dblclick: 鼠标双击

  • wheel: 鼠标滚轮滚动

• 键盘事件:

  • keydown: 键盘按键按下

  • keyup: 键盘按键释放

  • keypress: 键盘按键按下并释放 (字符输入)

• 触摸事件 (移动设备):

  • touchstart: 触摸开始

  • touchmove: 触摸移动

  • touchend: 触摸结束

  • touchcancel: 触摸取消

事件监听和处理步骤:

1. 获取 canvas 元素: const canvas = document.getElementById('webglCanvas');

2. 添加事件监听器: 使用 canvas.addEventListener(eventType, eventHandler); 为 canvas 元素添加事件监听器，监听特定类型的事件 (例如，'mousedown', 'mousemove', 'keydown')。

3. 编写事件处理函数 (eventHandler): 在事件处理函数中，获取事件对象 (event) 的信息 (例如，鼠标坐标、键盘按键) 并根据这些信息执行相应的操作 (例如，改变模型位置、旋转摄像机、触发动画)。

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
// ... WebGL 初始化 ...
let isDragging = false; // 标记是否正在拖拽
let lastMouseX = 0;
let lastMouseY = 0;
canvas.addEventListener('mousedown', (event) => {
  isDragging = true;
  lastMouseX = event.clientX;
  lastMouseY = event.clientY;
});
canvas.addEventListener('mouseup', (event) => {
  isDragging = false;
});
canvas.addEventListener('mousemove', (event) => {
  if (!isDragging) return;
  const deltaX = event.clientX - lastMouseX;
  const deltaY = event.clientY - lastMouseY;
  rotationAngleX += deltaY * 0.01; // 垂直旋转
  rotationAngleY += deltaX * 0.01; // 水平旋转
  lastMouseX = event.clientX;
  lastMouseY = event.clientY;
});
// ... 渲染循环 (render 函数) - 使用 rotationAngleX 和 rotationAngleY 更新模型矩阵旋转 ...
​

代码解释:

• mousedown 事件监听器: 当鼠标按下时，设置 isDragging 为 true，并记录鼠标按下时的坐标。

• mouseup 事件监听器: 当鼠标释放时，设置 isDragging 为 false。

• mousemove 事件监听器: 当鼠标移动时，如果 isDragging 为 true，则计算鼠标移动的距离 deltaX 和 deltaY，并根据 deltaX 和 deltaY 更新旋转角度 rotationAngleX 和 rotationAngleY。

Mermaid 图表 - 事件处理流程:

图表解释:

用户输入事件 (例如鼠标点击) 被 Canvas 的事件监听器捕获，触发相应的事件处理函数。事件处理函数获取事件信息 (例如鼠标位置)，根据信息执行交互操作 (例如旋转物体)，最后触发场景的重新渲染，从而呈现交互效果。

3.4.2.2 场景对象拾取 (Picking / Raycasting)

场景对象拾取 (Picking) 是指确定用户在 2D 屏幕坐标系中点击或选择了 3D 场景中的哪个对象。这通常通过光线投射 (Raycasting) 技术来实现。

Raycasting 步骤:

1. 获取鼠标屏幕坐标: 从鼠标事件对象 (例如 event.clientX, event.clientY) 获取鼠标在 canvas 上的 2D 坐标。

2. 将屏幕坐标转换为裁剪空间坐标 (Clip Space Coordinates): 将鼠标屏幕坐标归一化到 [-1, 1] 范围，并考虑 canvas 的尺寸和像素比例。

3. 将裁剪空间坐标转换为世界空间坐标 (World Space Coordinates): 通过逆投影矩阵 (Inverse Projection Matrix) 和 逆视图矩阵 (Inverse View Matrix) 将裁剪空间坐标转换为世界空间中的射线起点和方向。

4. 光线与物体相交检测 (Ray-Object Intersection Test): 将世界空间射线与场景中的每个物体进行相交检测。常用的相交检测算法包括：

   • 射线与包围盒 (Bounding Box) 相交: 快速初步筛选。

   • 射线与三角形 (Triangle) 相交: 精确检测，例如 Moller-Trumbore 算法。

5. 确定拾取对象: 如果射线与多个物体相交，则选择最近的相交物体作为拾取对象。

简化代码示例 (概念性代码，并非完整可运行代码):

function pickObject(event) {
  const canvasRect = canvas.getBoundingClientRect();
  const mouseX = event.clientX - canvasRect.left;
  const mouseY = event.clientY - canvasRect.top;
  // 1. 获取鼠标屏幕坐标 (mouseX, mouseY)
  // 2. 转换为裁剪空间坐标 (clipX, clipY)
  const clipX = (mouseX / canvas.width) * 2 - 1;
  const clipY = -(mouseY / canvas.height) * 2 + 1;
  // 3. 构建射线 (rayOrigin, rayDirection) - 需要逆投影矩阵和逆视图矩阵
  const rayOrigin = vec3.create(); // 射线起点 (摄像机位置)
  const rayDirection = vec3.create(); // 射线方向
  // ... 计算逆投影矩阵 (inverseProjectionMatrix) 和 逆视图矩阵 (inverseViewMatrix) ...
  // ... 使用 inverseProjectionMatrix 和 inverseViewMatrix 将 clipX, clipY 转换为世界空间射线 ...
  // 4. 光线与物体相交检测 (Ray-Object Intersection)
  let closestIntersectionDistance = Infinity;
  let pickedObject = null;
  for (const object of sceneObjects) { // 遍历场景中的物体
    const intersectionDistance = rayIntersectObject(rayOrigin, rayDirection, object); // 射线与物体相交检测 (假设有 rayIntersectObject 函数)
    if (intersectionDistance !== null && intersectionDistance < closestIntersectionDistance) {
      closestIntersectionDistance = intersectionDistance;
      pickedObject = object;
    }
  }
  if (pickedObject) {
    console.log("拾取到物体:", pickedObject.name);
    // 执行拾取后的操作 (例如，选中物体、显示物体信息)
  } else {
    console.log("未拾取到物体");
  }
}
canvas.addEventListener('click', pickObject); // 监听鼠标点击事件
​

Mermaid 图表 - Raycasting 流程:

图表解释:

Raycasting 流程从鼠标点击事件开始，经过坐标转换、射线构建、相交检测等步骤，最终确定是否拾取到场景中的物体。如果拾取到物体，则执行相应的拾取操作，并重新渲染场景以反映交互结果。

3.4.2.3 摄像机控制 (Camera Control)

交互式 WebGL 应用通常需要提供摄像机控制功能，允许用户自由地调整视角，观察场景。常见的摄像机控制方式包括：

• 轨道控制 (Orbit Control / Arcball Control): 围绕场景中心旋转、缩放和平移摄像机，常用于模型展示和场景浏览。

• 第一人称控制 (First-Person Control / Fly Control): 模拟第一人称视角，允许用户在场景中自由行走和观察，常用于游戏和虚拟现实应用。

• 飞行控制 (Flight Control): 类似于飞行模拟器，允许用户控制摄像机在 3D 空间中自由飞行。

实现摄像机控制通常需要:

• 事件监听: 监听鼠标和键盘事件 (例如，鼠标拖拽、滚轮滚动、键盘按键)。

• 摄像机参数更新: 根据事件信息更新摄像机的参数 (例如，位置、目标点、旋转角度)。

• 视图矩阵更新: 根据更新后的摄像机参数重新计算视图矩阵，并传递给 WebGL 着色器。

可以使用现有的 WebGL 摄像机控制库来简化开发，例如:

• Three.js OrbitControls: Three.js 框架提供的轨道控制器。

• gl-matrix lookAt: gl-matrix 库提供的 mat4.lookAt 函数可以方便地创建视图矩阵，配合事件处理可以实现简单的摄像机控制。

3.4.3 动画与交互的结合

动画和交互并非孤立的技术，它们可以相互结合，创造更加丰富和动态的 WebGL 应用。

常见的结合方式:

• 交互触发动画: 用户操作 (例如，点击按钮、鼠标悬停) 触发动画的播放或停止。

• 动画驱动交互: 动画的播放过程影响用户的交互行为 (例如，动画中的物体移动到特定位置时触发交互事件)。

• 交互控制动画参数: 用户可以通过交互操作实时调整动画的参数 (例如，拖拽滑块控制动画速度、旋转角度)。

示例 - 点击按钮播放/暂停动画:

const playButton = document.getElementById('playButton');
let isAnimating = true; // 初始状态为播放动画
playButton.addEventListener('click', () => {
  isAnimating = !isAnimating; // 切换动画状态
  if (isAnimating) {
    playButton.textContent = "暂停动画";
    requestAnimationFrame(render); // 继续动画循环
  } else {
    playButton.textContent = "播放动画";
    // 停止动画循环 (不再调用 requestAnimationFrame)
  }
});
function render(currentTime) {
  if (!isAnimating) return; // 如果动画暂停，则退出渲染函数
  // ... 动画更新和渲染代码 ...
  requestAnimationFrame(render); // 继续动画循环
}
render(0); // 启动初始动画循环
​

代码解释:

• playButton 事件监听器: 点击按钮时，切换 isAnimating 状态，并根据状态更新按钮文本和动画循环的启动/停止。

• render 函数: 在动画循环的开始检查 isAnimating 状态，如果为 false，则直接退出渲染函数，停止动画。

3.4.4 总结

WebGL 的动画和交互是构建生动、引人入胜的 Web 应用的关键。本文详细介绍了 WebGL 动画的几种核心技术，包括动画循环、基于时间的动画、变换动画、着色器动画和关键帧动画，并深入探讨了 WebGL 交互的事件处理和场景对象拾取技术，以及摄像机控制的基本概念。最后，我们讨论了如何将动画和交互结合起来，创造更丰富的用户体验。

掌握这些技术，你将能够充分利用 WebGL 的强大功能，构建各种令人惊叹的动态和交互式 3D 应用，从游戏、可视化到虚拟现实，释放你的创造力，探索 WebGL 的无限可能。

代码实践建议:

• 从简单动画开始: 先尝试简单的旋转、平移动画，理解动画循环和时间控制的概念。

• 逐步深入: 学习变换动画、着色器动画等更高级的动画技术。

• 尝试交互功能: 从简单的事件监听和鼠标交互开始，逐步实现场景对象拾取和摄像机控制。

• 利用现有库: 学习并使用 Three.js 等 WebGL 框架和库，可以大大简化开发流程，并提供更多高级功能。

• 不断实践和探索: 通过不断地实践和尝试，深入理解 WebGL 动画和交互的原理和技巧，才能真正掌握这些强大的工具。