|
| 1 | +# 粒子动画 |
| 2 | + |
| 3 | +Oasis 3D 的 **GPU 粒子系统** [GPUParticleSystem]({{book.api}}classes/core.gpuparticlesystem.html) 内部将会根据配置参数，自动生成几何体和材质，不需要手动创建和添加。所以，使用粒子系统，我们唯一需要关注的是配置参数。 |
| 4 | + |
| 5 | +```typescript |
| 6 | +let particleComp = obj.addComponent(GPUParticleSystem); |
| 7 | + |
| 8 | +// 初始化 |
| 9 | +particleComp.initialize({ |
| 10 | + maxCount: 1000, |
| 11 | + spawnCount: 100, |
| 12 | + once: true, |
| 13 | + options: { |
| 14 | + velocity: [0.2, 0.2, 0.2], |
| 15 | + acceleration: [0, -0.02, 0], |
| 16 | + color: 0x125570, |
| 17 | + lifetime: 5, |
| 18 | + size:20, |
| 19 | + } |
| 20 | +}); |
| 21 | + |
| 22 | +// 发射粒子 |
| 23 | +particleComp.start(); |
| 24 | + |
| 25 | +// 停止发射 |
| 26 | +particleComp.stop(); |
| 27 | + |
| 28 | +// 发射过程中调整发射参数 |
| 29 | +particleComp.setOptions({ |
| 30 | + velocity: [0, 0, 0], |
| 31 | + lifetime: 10, |
| 32 | +}); |
| 33 | +``` |
| 34 | + |
| 35 | + |
| 36 | +## 参数 |
| 37 | + |
| 38 | + |
| 39 | +粒子参数需要在初始化（[GPUParticleSystem.initialize]({{book.api}}classes/core.gpuparticlesystem.html#initialize)）时配置，不同粒子参数生成的粒子效果有千百种，在使用时，需要分析想要实现的特效的物理特性，例如：初始位置、初速度、加速度和这些参数的随机范围等。。初始化参数很多，但是都有默认值，在查看之前，你最好对每个参数的含义都有简单的认识： |
| 40 | + |
| 41 | + |
| 42 | +- [`maxCount`]({{book.api}}classes/core.gpuparticlesystem.html#maxcount) ：最大粒子数，决定所占内存的大小，需要合理分配。 |
| 43 | +- [`once`]({{book.api}}classes/core.gpuparticlesystem.html#once) ：是否只发射一次，默认 `false` （循环发射）。 |
| 44 | +- [`blendFunc`]({{book.api}}classes/core.gpuparticlesystem.html#blendfunc) : 支持传入 webgl 混合因子，下图左为透明度混合，下图右为柔和相加混合，默认透明度混合 `[gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA]` 。 |
| 45 | + |
| 46 | +  |
| 47 | + |
| 48 | +- [`particleTex`]({{book.api}}classes/core.gpuparticlesystem.html#particletex) ： 粒子形状贴图。 |
| 49 | +- [`maskTexture`]({{book.api}}classes/core.gpuparticlesystem.html#particlemasktex) ：粒子遮罩贴图，遮罩用于在粒子上叠加特定透明度的发光效果，使用遮罩前后对比： |
| 50 | + |
| 51 | +  |
| 52 | + |
| 53 | + |
| 54 | +- [`useOriginColor`]({{book.api}}classes/core.gpuparticlesystem.html#useorigincolor) ：是否使用图片原色，为 `true` 时使用图片原色，为 `false` 时，图片原色混合用户配置的颜色，可以在原图的基础上混合出任意的颜色： |
| 55 | + |
| 56 | +  |
| 57 | + |
| 58 | + |
| 59 | +- [`rotateToVelocity`]({{book.api}}classes/core.gpuparticlesystem.html#rotatetovelocity) ：是否跟随粒子运动速度的方向，默认 `false`，为 `true` 时，将粒子贴图的单位向量旋转至粒子运动速度的方向，例如烟花： |
| 60 | + |
| 61 | +  |
| 62 | + |
| 63 | + |
| 64 | + 为 `false` 时，无旋转，适用于方向一致的场景，例如孔明灯： |
| 65 | + |
| 66 | +  |
| 67 | + |
| 68 | + |
| 69 | +- [`isScaleByLifetime`]({{book.api}}classes/core.gpuparticlesystem.html#isscalebylifetime) ：是否随生命周期缩小至消失。为 `true` 时粒子会越来越小，为 `false` 时粒子大小保持不变，只有透明度会降低，可用于制作淡出消失的效果： |
| 70 | + |
| 71 | +  | |
| 72 | + |
| 73 | + |
| 74 | +- [`fadeIn`]({{book.api}}classes/core.gpuparticlesystem.html#fadein) ：是否添加淡入效果，可用于制作烟雾效果： |
| 75 | + |
| 76 | +  | |
| 77 | + |
| 78 | + |
| 79 | +- [`getOptions`]({{book.api}}classes/core.gpuparticlesystem.html#getoptions) : 获取更新参数的回调函数，常用于按照曲线公式更新粒子初始位置，效果为粒子按照曲线的轨迹运动，用法示例如下： |
| 80 | + |
| 81 | + ```typescript |
| 82 | + const getPosition = (tick) => { |
| 83 | + let r = Math.acos(Math.sin(tick)); |
| 84 | + let x = r * Math.cos(tick); |
| 85 | + let y = r * Math.sin(tick); |
| 86 | + return [x, y, 0]; |
| 87 | + } |
| 88 | + |
| 89 | + const options = { |
| 90 | + velocityRandomness: [0.2, 0.2, 0.2], |
| 91 | + acceleration: [0, -0.02, 0], |
| 92 | + color: 0x125570, |
| 93 | + colorRandomness: 0.5, |
| 94 | + lifetime: 5, |
| 95 | + size:30, |
| 96 | + }; |
| 97 | + |
| 98 | + particleComp.init({ |
| 99 | + maxCount: 10000, |
| 100 | + spawnCount: 20, |
| 101 | + once: false, |
| 102 | + useOriginColor:false, |
| 103 | + getOptions: function(time) { // time 为累计运行时间，单位秒 |
| 104 | + var position = getPosition(time); |
| 105 | + if(position) { |
| 106 | + options.position = position; |
| 107 | + } |
| 108 | + return options; |
| 109 | + } |
| 110 | + }); |
| 111 | + ``` |
| 112 | + |
| 113 | +- [`options`]({{book.api}}classes/core.gpuparticlesystem.html#options) ： 粒子属性控制参数集，包含粒子发射位置、速度、加速度、旋转角度、颜色、大小、初始旋转角度、自转角速率、生命周期长度和相应随机因子的配置。随机因子用于控制参数生成的随机范围。 |
| 114 | + |
| 115 | + |
| 116 | + - **大小随机因子**，取值在 0~1 之间，例如：大小为 50，随机因子为 0，则生成的粒子大小均为 50，随机因子为 0.5，则生成的粒子大小范围在 25~75 之间随机，随机因子为 1，则生成粒子大小范围在 0~100 之间随机： |
| 117 | + |
| 118 | + ```typescript |
| 119 | + size = size + (Math.random() - 0.5）* 2 * sizeRandomness * size |
| 120 | + ``` |
| 121 | +
|
| 122 | +
|
| 123 | + - **颜色随机因子**，取值在0~1之间，颜色的 R、G、B通道的色值会分别在随机因子范围内取一个随机值，然后截取在 0~1 范围内： |
| 124 | +
|
| 125 | + ```typescript |
| 126 | + color[i] = color[i] + (Math.random() - 0.5) * colorRandomness |
| 127 | + ``` |
| 128 | +
|
| 129 | + - **初始旋转角度随机因子**，取值在 0~1 之间，例如：rotate 为 0，随机因子为 0，则生成的粒子角度均为 0，随机因子为 1，则生成的角度在 -PI~PI 之间随机： |
| 130 | +
|
| 131 | + ```typescript |
| 132 | + startAngle = startAngle + (Math.random() - 0.5) * Math.PI * startAngleRandomness * 2 |
| 133 | + ``` |
0 commit comments