WebGL深究：动画与交互 —— 赋予虚拟世界生命与灵魂

妍思码匠

于 2024-10-02 09:15:00 发布

阅读量835

点赞数 18

分类专栏：妍思码匠的前端乐园文章标签： webgl 动画交互粒子系统物理模拟

本文链接：https://blog.csdn.net/wjs0406/article/details/142452545

版权

妍思码匠的前端乐园专栏收录该内容

30 篇文章 0 订阅

订阅专栏

引言

想象你正在观看一场电影，主角的一举一动都是那么流畅自然，让人信以为真。这种效果的背后，是动画师们精心设计的动作捕捉和关键帧设置的结果。在WebGL的世界里，我们也可以通过类似的方法，为3D模型添加动态效果，使其能够响应用户的操作，展现出生命力。

动画与交互是什么？

在WebGL中，动画可以通过更新模型的顶点或关节位置来实现。交互则是指基于用户输入（鼠标点击、键盘事件）做出反应的能力。两者结合，可以使3D场景更具吸引力和互动性。

如何在WebGL中制作动画与实现交互？

动画：利用JavaScript定时器（requestAnimationFrame），周期性更新顶点缓冲区的数据。
交互：监听DOM事件，如mousedown, mousemove, mouseup，并在这些事件触发时调用相应的WebGL逻辑。

代码示例

以下是一个简易旋转动画的例子：

let angle = 0; // 动画角速度初始化为0，用于追踪旋转的角度累积。

function animate() {
    requestAnimationFrame(animate); // 请求浏览器在下次重绘之前调用此函数，实现连续动画效果。
    
    angle += 0.02; // 每次调用时，角速度增加0.02弧度，累积旋转角度。
    if (angle > Math.PI * 2) angle -= Math.PI * 2; // 角度超过360°时，重置回初始值避免溢出。

    mat4.rotate(rotationMatrix, rotationMatrix, angle, [0, 1, 0]); // 更新旋转矩阵，绕Y轴旋转angle弧度。
    gl.uniformMatrix4fv(matrixUniformLocation, false, rotationMatrix); // 向OpenGL发送旋转矩阵，用于更新顶点位置。

    // 清除屏幕和深度缓存，准备绘制新帧。
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, numberOfVertices); // 绘制场景三角形，使用最新的顶点数据。
}

粒子系统：构建微观世界的大观园

虽然在上一节我们讨知道了如何通过动画和交互让WebGL作品跃然屏幕之上，但真正的视听盛宴还远未结束。粒子系统和物理模拟是创造壮观视觉效果的关键工具，无论是爆炸的火花、飘落的雪花还是流动的水体，都可以通过它们得以呈现。让我们一起潜入这片未知的水域，发掘其中隐藏的无限创意。

想象一个宁静的夜晚，漫天繁星闪烁，流星划过天际，留下一道道耀眼的轨迹。在WebGL的世界里，粒子系统就是那把钥匙，开启通往无数星辰大海的门户。它通过模拟大量独立移动的小元素（即粒子），创造出各种自然现象和社会活动的仿真效果。

粒子系统的构成要素：

发射器：控制粒子生成的速度、位置和方向。
粒子行为：定义粒子的生命期、运动路径、大小和颜色的变化规律。
力场：如风力、引力等，会影响粒子的运动状态。

代码示例

为了展示粒子系统，我们可以创建一个简单的烟花爆炸效果：

class ParticleSystem {
    constructor(position) {
        this.particles = []; // 存储粒子数组
        
        // 持续产生粒子
        setInterval(() => {
            let particle = new Particle(position); // 创建新粒子
            this.particles.push(particle); // 加入到粒子列表
            
            // 设置粒子生命周期结束后自动删除自身
            setTimeout(() => {
                const index = this.particles.indexOf(particle);
                if (index !== -1) this.particles.splice(index, 1);
            }, particle.lifetime);
        }, 100); // 每隔100ms生成一次新粒子
    }
}


class Particle {
    constructor(startPos) {
        this.position = startPos.clone(); // 初始位置复制自粒子系统的起点
        this.velocity = new THREE.Vector3().setRandomDirection().multiplyScalar(Math.random() * 10 + 20); // 随机方向与速度
        this.lifetime = Math.random() * 1000 + 500; // 生存时间，介于500到1500ms间
    }

    update(deltaTime) {
        this.position.addScaledVector(this.velocity, deltaTime); // 更新位置
        this.velocity.multiplyScalar(0.99); // 逐渐减速
    }
}

物理模拟：让虚拟触碰真实

如果说粒子系统是描绘宏观景象的油画笔，那么物理模拟则更像是勾勒微观力学的细毫。它能精确地重现碰撞、弹性变形、流体力学等现象，使WebGL场景中的物体遵循物理法则运动，增加可信度和沉浸感。

物理模拟的核心概念：

刚体动力学：适用于非可变形物体，如箱子、球等。
软体动力学：模拟布料、绳索等可变形物体的行为。
流体动力学：研究液体和气体的运动特征。

代码示例

使用三文鱼引擎（Three.js）内置的Cannon.js物理库创建一个简单的刚体碰撞测试：

import { BoxGeometry } from "three"; // 导入BoxGeometry模块，用于创建立方体网格
import { CannonJSRigidBody, CannonJSCollisionWorld } from "three/examples/jsm/collisions/Cannon"; // 导入Cannon.js相关的物理组件

const boxGeometry = new BoxGeometry(1, 1, 1); // 创建1x1x1的立方体几何体
const boxMaterial = new MeshStandardMaterial({ color: 0xff0000 }); // 设置材料属性
const box = new Mesh(boxGeometry, boxMaterial); // 创建Mesh对象，结合几何体和材料

// 添加物理属性
box.castShadow = true; // 开启投射阴影
box.receiveShadow = true; // 开启接受阴影
box.physicsBody = new CannonJSRigidBody({ // 附加物理身体属性
    mass: 1, // 设定质量
    shape: new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)), // 设置物理形状，此处为1/2单位的立方体
});
scene.add(box); // 将带有物理特性的立方体添加到场景中

结语

本章学习了WebGL开发中常见的三大技术：动画循环、粒子系统以及物理模拟，通过掌握动画循环技术，我们的WebGL作品不再是静态的画面，而成为了一个活生生的舞台，等待观众的参与和探索。就像一部好的戏剧需要演员的精湛演技和观众的情感共鸣，一个成功的WebGL项目也需要精致的动画和巧妙的交互设计。同时通过掌握粒子系统和物理模拟，我们已经具备了创造惊人视听体验的强大能力。无论是宏大的战争场面，还是细腻的日常瞬间，WebGL都为我们提供了无限的可能性。继续实验，不断探索，你会发现自己的创造力远比你想象的要广阔得多。