WEBKT

Babylon.js 粒子系统实战：玩转火焰、烟雾、爆炸等炫酷特效

2 0 0 0

什么是粒子系统？

为什么选择 Babylon.js 的粒子系统？

实战演练：打造你的第一个粒子系统

1. 准备工作

2. 创建粒子系统

3. 调整粒子属性

4. 其他效果

进阶技巧：让你的粒子系统更上一层楼

1. 使用自定义函数

2. 使用噪声纹理

3. 使用 GPU 粒子系统

4. 与模型交互

常见问题解答

总结

“哇，这个 3D 场景里的火焰效果太逼真了！”

“还有这烟雾，简直跟真的一样！”

“爆炸效果也很震撼，是怎么做到的？”

作为一名前端开发，你是否也曾被网页中那些炫酷的 3D 特效所吸引？今天，咱们就来聊聊 Babylon.js 中的粒子系统，教你如何用它来实现火焰、烟雾、爆炸等各种令人惊叹的视觉效果。别担心，即便你是刚接触 Babylon.js 的新手，也能轻松上手。

什么是粒子系统？

想象一下，你正在放烟花。每一个闪耀的火花，都是一个“粒子”。粒子系统，顾名思义，就是由大量独立的小粒子组成的系统。在 Babylon.js 中，这些粒子可以是简单的点、线，也可以是复杂的形状、纹理。通过控制粒子的属性（如位置、速度、颜色、大小、生命周期等），我们就可以模拟出各种各样的自然现象和视觉特效。

为什么选择 Babylon.js 的粒子系统？

Babylon.js 的粒子系统具有以下优点：

  • 易于使用：Babylon.js 提供了简洁的 API，让你能够轻松创建和控制粒子系统。
  • 功能强大：支持各种粒子属性的自定义，可以实现丰富的效果。
  • 性能优秀：Babylon.js 的粒子系统经过优化，即使在大量粒子的情况下也能保持良好的性能。
  • 高度可定制：你可以根据自己的需求，调整粒子的外观、行为和交互方式。

实战演练：打造你的第一个粒子系统

说了这么多，不如动手试试。咱们先来创建一个简单的火焰效果。

1. 准备工作

首先，你需要创建一个基本的 Babylon.js 场景。如果你还不熟悉 Babylon.js 的基本用法，可以参考官方文档或者我之前写的 Babylon.js 入门教程。

<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js 粒子系统</title>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        // 在这里编写 Babylon.js 代码
    </script>
</body>
</html>

2. 创建粒子系统

接下来，我们在场景中创建一个粒子系统。

// 创建引擎和场景
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
 
// 创建相机
var camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
 
// 创建光源
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
 
// 创建粒子系统
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
 
// 设置粒子纹理
particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene); // 替换成你的火焰纹理
 
// 设置粒子发射器位置
particleSystem.emitter = new BABYLON.Vector3(0, 0, 0); // 粒子从场景中心发射
 
// 启动粒子系统
particleSystem.start();
 
// 运行渲染循环
engine.runRenderLoop(function () {
    scene.render();
});
 
// 监听窗口大小变化
window.addEventListener("resize", function () {
    engine.resize();
});

这段代码创建了一个包含 2000 个粒子的粒子系统，并使用了一张名为 flare.png 的火焰纹理。你可以将 flare.png 替换成你自己的火焰纹理图片。

3. 调整粒子属性

现在，我们已经创建了一个基本的粒子系统，但它看起来还不太像火焰。接下来，我们需要调整一些粒子属性，让它更逼真。

// 设置粒子发射器形状
particleSystem.emitter = new BABYLON.Vector3(0, 0, 0); // 粒子从场景中心发射
particleSystem.minEmitBox = new BABYLON.Vector3(-0.5, 0, -0.5); // 发射器最小边界
particleSystem.maxEmitBox = new BABYLON.Vector3(0.5, 0, 0.5); // 发射器最大边界
 
// 设置粒子颜色
particleSystem.color1 = new BABYLON.Color4(1, 0.5, 0, 1); // 火焰底部颜色
particleSystem.color2 = new BABYLON.Color4(1, 0, 0, 1); // 火焰顶部颜色
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 0); // 粒子消失时的颜色
 
// 设置粒子大小
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
 
// 设置粒子生命周期
particleSystem.minLifeTime = 0.2;
particleSystem.maxLifeTime = 1;
 
// 设置粒子发射速率
particleSystem.emitRate = 1000;
 
// 设置粒子速度
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.01;
 
// 设置重力
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
 
// 其他设置
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; // 混合模式

通过调整这些属性，你可以控制火焰的大小、形状、颜色、运动速度等。尽情发挥你的创意，尝试不同的参数组合，创造出独一无二的火焰效果。

4. 其他效果

除了火焰，你还可以用粒子系统实现其他各种效果。例如：

  • 烟雾：使用灰色或黑色的纹理，调整粒子的透明度、大小和运动速度，可以模拟出烟雾效果。
  • 爆炸：使用爆炸纹理，设置粒子的初始速度和加速度，可以模拟出爆炸效果。
  • 雨雪：使用雨滴或雪花纹理，调整粒子的下落速度和方向，可以模拟出雨雪效果。
  • 星空：使用星星纹理，设置粒子的位置和闪烁效果，可以模拟出星空效果。

进阶技巧：让你的粒子系统更上一层楼

掌握了基本用法后，你还可以进一步探索粒子系统的高级功能，让你的特效更加炫酷。

1. 使用自定义函数

Babylon.js 允许你使用自定义函数来控制粒子的行为。例如，你可以编写一个函数来改变粒子的颜色、大小或速度，使其随着时间变化。

particleSystem.updateFunction = function(particles) {
    for (var index = 0; index < particles.length; index++) {
        var particle = particles[index];
        particle.age += this._scaledUpdateSpeed;
 
        // 改变粒子颜色
        particle.color = new BABYLON.Color4(
            particle.color.r,
            particle.color.g - 0.01 * this._scaledUpdateSpeed,
            particle.color.b,
            particle.color.a
        );
 
        // ... 其他自定义逻辑 ...
    }
};

2. 使用噪声纹理

噪声纹理可以为粒子系统增加随机性，使其看起来更自然。你可以使用 Babylon.js 内置的噪声纹理，也可以自己创建。

// 创建噪声纹理
var noiseTexture = new BABYLON.NoiseProceduralTexture("perlin", 256, scene);
 
// 将噪声纹理应用到粒子系统
particleSystem.noiseTexture = noiseTexture;
particleSystem.noiseStrength = new BABYLON.Vector3(10, 10, 10);

3. 使用 GPU 粒子系统

如果你的场景中需要大量的粒子，可以考虑使用 GPU 粒子系统。GPU 粒子系统利用 GPU 的并行计算能力，可以大幅提高性能。

var gpuParticleSystem = new BABYLON.GPUParticleSystem("particles", { capacity: 100000 }, scene);

4. 与模型交互

粒子系统可以与场景中的其他模型进行交互。例如，你可以让粒子在碰到模型时反弹，或者让模型发射粒子。

// 创建一个球体
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
 
// 让粒子在碰到球体时反弹
particleSystem.startDirectionFunction = (emitPower, worldMatrix, directionToUpdate, particle) => {
    BABYLON.Vector3.TransformNormalFromFloatsToRef(
        particle.direction.x * emitPower, 
        particle.direction.y * emitPower, 
        particle.direction.z * emitPower, 
        worldMatrix, directionToUpdate
    );
    
    let sphereWorldPosition = sphere.getAbsolutePosition();
 
    if(BABYLON.Vector3.Distance(particle.position, sphereWorldPosition) < 1){
        directionToUpdate.scaleInPlace(-1);
    }
}

常见问题解答

  1. 粒子系统性能优化有哪些技巧？

    • 减少粒子数量。
    • 使用 GPU 粒子系统。
    • 使用较低分辨率的纹理。
    • 减少粒子系统的更新频率。
    • 使用公告板模式（billboard mode）。
    • 使用LOD(Level of Detail)

  2. 如何创建自定义形状的粒子？

    可以使用 CustomParticle 类创建自定义形状的粒子。你可以定义粒子的顶点、法线、UV 等属性。

  3. 如何让粒子跟随模型运动？
    可以将粒子系统的发射器设置为模型的子节点，或者在 updateFunction 中更新粒子的位置。

总结

Babylon.js 的粒子系统是一个强大而灵活的工具，可以帮助你创建各种令人惊叹的视觉特效。希望本文能帮助你入门粒子系统，并在你的项目中创造出更多精彩的效果。如果你有任何问题或想法，欢迎在评论区留言，我们一起交流学习！

记住，实践出真知。赶快动手试试吧！

技术宅老王 Babylon.js粒子系统3D特效

评论点评

打赏赞助
sponsor

感谢您的支持让我们更好的前行

分享

QRcode

https://www.webkt.com/article/8288