粒子系统

简介

1 .用来模拟难以重现的现象,例如火,烟,水,或者抽象的视觉效果,例如魔术闪光和仙尘
2 .实质就是从一个区域发射非常多的粒子云来完成
3 .停止粒子系统将阻止创建新的粒子,但是现有粒子将继续,如果要将系统重置为空状态,还必须particleSystem.reset()
4 .

预先开启

1 .可以提前渲染,以便让我们在需要让他显示的时候第一时间出现
2 .system.preWarmCycles:在首次渲染前必须执行多少周期。默认是0,没有预热
3 .system.preWarmStepOffset:指示在预热模式下使用的时间步长倍数。
4 .

粒子纹理

1 .可以将纹理应用于粒子
2 .要在场景中使用多个纹理,需要使用多个粒子系统
3 .

粒子发射器

1 .vector3定位发射器
2 .网格定位发射器

1 .如果发射器是网格的话,并且particleSystem.isLocal=true
2 .那么所有的粒子都将生成到网格局部空间中去

3 .

世界偏移

1 .particleSystem.worldOffset = new BABYLON.Vector3(100, 20, -453);
2 .这个可以用来为粒子设置世界偏移
3 .

位置

1 .发射器的粒子散布在一个盒子内进行,该盒子的大小是通过设置下左前角和上右后角来确定的
2 .也可以是一个轴方向上折叠为一条线
3 .

微调粒子系统

1 .粒子生命周期:在给定范围内随机生成
2 .粒子大小:在给定范围内随机变化

1 .如果想要将径粒改为非正方形,使用minScaleX,minScaleY来定义
2 .默认缩放是从粒子的中心开始的,如果需要从顶部或者底部改变缩放比例,调用 particleSystem.translationPivot = new BABYLON.Vector2(0, -0.5)

3 .粒子颜色

1 .两种在粒子的生命周期内进行混合
2 .第三种在粒子消失之前呈现
3 .定义颜色渐变

4 .颜色混合:这个有点看不懂
5 .粒子发射速度

1 .emitRate 确定每秒发射的粒子数量,数值越大,发出的粒子云越密集
2 .当粒子死亡时,他们被循环在排放,如果设置的存活时间足够长,发射速度很快,总数设置的发射完了,这个时候粒子发射可能会出现空隙

6 .方向

1 .可以指定两个方向,如果仅指定一个方向,则粒子将沿着给定的大致方向随机传播
2 .当给出两个方向时,粒子通常会在两个方向内进行
3 .particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3)

7 .重力

1 .可以使用重力值,如果在Y方向上为负,则粒子会做自由落体运动
2 .particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);

8 .回转

1 .定义粒子围绕z轴的粒子角速度范围
2 .这个怎么调他的参数也是没发现有啥变化。。。这个参数到底是干啥的,看翻译到是能理解,就是跟理解的实际效果不一样

9 .粒子系统运动的时间量

1 .particleSystem.targetStopDuration = 5;

10 .速度

1 .发射出粒子的速度
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
速度大小范围
particleSystem.updateSpeed = 0.005;
//整体更新速度,更新速度越快,动画速度越快
//这俩属性使用一个就可以了
2 .随时间变化的速度:使用梯度定义了随时间变化的速度
particleSystem.addVelocityGradient(0, 3, 5);
particleSystem.addVelocityGradient(1.0, -5, -10);
//注意这里是负值,也即是速度在最后会变成复制,有一个回弹效果

particleSystem.addVelocityGradient(0, 0.5, 0.8);
//可以为每隔梯度提供两个

particleSystem.removeVelocityGradient(0.5)
//删除渐变

3 .随时间限制速度:使用梯度定义随时间变化的速度极限,此限制将用于检测粒子的当前速度,如果达到该限制,将会减速
particleSystem.addLimitVelocityGradient(1.0, 3, 4);

particleSystem.removeLimitVelocityGradient(0.5)
//删除渐变

11 .阻力系数

1 .可以使用渐变定义随时间变化的拖动因子。通过将阻力因子应用于粒子方向,可以模拟空气摩擦
2 .particleSystem.addDragGradient(0, 0.5)
3 .定义渐变的阻力
particleSystem.addDragGradient(0, 0.5, 0.8);
4 .删除渐变
particleSystem.removeDragGradient(0.5)

12 .发射率随时间变化

1 .使用渐变定义粒子的发射速率,随着时间的推移,system.emitRate属性值将被覆盖
2 .particleSystem.addEmitRateGradient(1.0, 800, 1000);
3 .发射速率梯度仅在系统具有确定的使用寿命时才起作用,这意味着您必须定义system.targetStopDuration属性
4 .particleSystem.removeEmitRateGradient(0.5) 删除渐变

13 .随着时间推移开始大小

1 .起始大小渐变仅在系统具有确定的使用寿命时才起作用,这意味着您必须定义system.targetStopDuration属性
2 .particleSystem.addStartSizeGradient(0, 5, 10);
3 .删除渐变particleSystem.removeStartSizeGradient(0.5)。

14 .alpha 渐变,这个功能很强大,但是现在好像看不懂
15 .对准

形状发射器

1 .点发射器

var light0 = new BABYLON.PointLight("omni", new BABYLON.Vector3(-20, 30, 10), scene);
            var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 1.25, 50, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            var particleSystem=new BABYLON.ParticleSystem('particles',2000,scene)
            particleSystem.particleTexture=new BABYLON.Texture('https://www.babylonjs-playground.com/textures/flare.png')
            
            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            particleSystem.emitRate = 1000;
            particleSystem.minSize = 0.1;
            particleSystem.maxSize = 0.5;

            particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 1.5;

            particleSystem.addVelocityGradient(0, 3, 5);
            particleSystem.addVelocityGradient(1.0, -5, -10);

            // particleSystem.createPointEmitter(new BABYLON.Vector3(-7,8,3),new BABYLON.Vector3(7,8,-3))
            // 点状发射器

            // 箱式发射器
            // particleSystem.createBoxEmitter(new BABYLON.Vector3(-7,8,3),new BABYLON.Vector3(7,8,-3),new BABYLON.Vector3(-1, 0, 0), new BABYLON.Vector3(1, 0, 0))
            // var box=new BABYLON.MeshBuilder.CreateBox("box",{width:2,height:4,depth:5},scene)
            // box.material=new BABYLON.StandardMaterial('mat',scene)
            // box.material.wireframe=true


            // 球形发射器
            // var sphereEmitter=particleSystem.createSphereEmitter(15)
            // sphereEmitter.radiusRange=0
            // sphereEmitter.radius=15


            // var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:4, segments: 8}, scene);
            // sphere.material = new BABYLON.StandardMaterial("mat", scene);
            // sphere.material.wireframe = true;
            // 粒子沿着表面法线发射

            // 具有方向的球形发射器
            // var sphereEmitter=particleSystem.createDirectedSphereEmitter(2, new BABYLON.Vector3(-0.5, 1, -0.5), new BABYLON.Vector3(0.5, 1, 0.5));
        

            // 半球发射器
            // var hemisphericEmitter=particleSystem.createHemisphericEmitter(1.2)
            // hemisphericEmitter.radiusRange=0;

            // 圆柱体发射器
            // 从圆柱体向外表面法线方向发射
            // var yuanzhu=particleSystem.createCylinderEmitter(1,1,1,0)
            // 半径,高度,
            // 沿半径应发射粒子的位置
            // 随机粒子方向的大小

            // 有方向的圆柱发射器
            // particleSystem.particleEmitterType = new BABYLON.CylinderDirectedParticleEmitter(1,1,1, new BABYLON.Vector3(1,0,0),new BABYLON.Vector3(1,0,0))

            // 锥形发射器
            // var radius = 2;
            // var angle = Math.PI / 3;
            // var height = radius / Math.tan(angle / 2);
            // var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterBottom:0, diameterTop: 2 * radius, height: height}, scene);
            // cone.position.y = height / 2;
            // cone.material = new BABYLON.StandardMaterial("mat", scene);
            // cone.material.wireframe = true;

            // var coneEmitter = particleSystem.createConeEmitter(radius,angle)
            // 半径
            // 弧度
            // coneEmitter.radiusRange=1
            // coneEmitter.heightRange=1

            // 网格发射器
            // 从网格表面发射粒子,粒子的方向将是网格表面的法线
            // var box=BABYLON.MeshBuilder.CreateBox({width:100,height:100,depth:100},scene)
            // var meshEmitter = new BABYLON.MeshParticleEmitter(box)

            // meshEmitter.useMeshNormalsForDirection = false;
            // // 关闭默认设置,自定义方向
            // meshEmitter.direction1 = new BABYLON.Vector3(0, 1, 0);
            // meshEmitter.direction2 = new BABYLON.Vector3(0, -1, 0);

            // 自定义发射器
            // 

            var customEmitter = new BABYLON.CustomParticleEmitter();

            let id = 0;
            customEmitter.particlePositionGenerator = (index, particle, out) => {
                out.x = Math.cos(id) * 5;
                out.y = Math.sin(id) * 5;
                out.z = 1;
                id += 0.01;
                // 每一秒点的位置,从这个点发射出粒子
            }

            customEmitter.particleDestinationGenerator = (index, particle, out) => {
                out.x = Math.cos(id);
                out.y = 10;
                out.z = 10;
                // 注意是对应上面每个粒子的最终位置
            }
            // 自定义需要申明一下发射
            particleSystem.particleEmitterType=customEmitter

            // particleSystem.minEmitPower=1
            // particleSystem.maxEmitPower=3;
            // particleSystem.updateSpeed=0.005
            particleSystem.minSize=0.1
            particleSystem.maxSize=0.3
            // particleSystem.minLifeTime = 0.3;
            particleSystem.maxLifeTime = 15;

            particleSystem.start()

噪声纹理

1 .噪波纹理“扰动”粒子的位置,改变粒子的方向,实现更加随机的运动方式
2 .brightness:0-1最关键的参数,0-0.5,现在运动的反方向,0.5,不施加运动,0.5-1,规定运动的正方向

1 .上面的理解好像不对,需要查下api
2 .octaves:
3 .persistence:

3 .speed:影响的速度,值越大,发射粒子的速度越快
4 .noise strength.x,y,z:定义干扰的方向
5 .

GPU粒子

1 .可以使用GPU粒子,通过webGL2,你可以生成的粒子数量级别是几千万个,通常的是几十万
2 .GPU粒子不支持的地方

1 .不支持子发射器
2 .不支持自定义效果
3 .每隔梯度只有两个值,不能随机范围内选择值
4 .不支持发射率梯度
5 .不支持起始尺寸渐变
6 .不支持网格发射器
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容