Search the Community

Hi guys, A babylon noobie here ,I am trying to get a simple burst particle effect like this https://phaser.io/examples/v2/particles/click-burst. But sadly i could only do this much .https://www.babylonjs-playground.com/#5EGWMF#51(on colliding with first cube ,i should get the effect like above link).There are so many params for particle system to tweak. Thanks.

Please try this playground, when you click on the balls, they will pop, and in the mean while a particle system will emit particles. This is working fine with Edge, but in chrome the particle system cannot restart for the 3rd click and so forth. And both the _started and _stop properties are set to "true", this is strange. : https://www.babylonjs-playground.com/#7149G4#19 playground code: var createScene = function () { var scene = new BABYLON.Scene(engine); scene.clearColor = BABYLON.Color3.Purple(); var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -20), scene); camera.attachControl(canvas, true); camera.checkCollisions = true; camera.applyGravity = true; camera.setTarget(new BABYLON.Vector3(0, 0, 0)); var light = new BABYLON.DirectionalLight("dir02", new BABYLON.Vector3(0.2, -1, 0), scene); light.position = new BABYLON.Vector3(0, 80, 0); // Shadows var shadowGenerator = new BABYLON.ShadowGenerator(2048, light); // Physics scene.enablePhysics(null, new BABYLON.CannonJSPlugin()); scene.enablePhysics(null, new BABYLON.OimoJSPlugin()); var fountain = BABYLON.Mesh.CreateBox("foutain", 0.01, scene); fountain.visibility = 0.1; var createNewSystem = function(newPosition) { var particleSystem; if (BABYLON.GPUParticleSystem.IsSupported) { console.log("GPU supported!") particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene); particleSystem.activeParticleCount = 200000; } else { particleSystem = new BABYLON.ParticleSystem("particles", 50000 , scene); } particleSystem.emitRate = 10000; particleSystem.particleEmitterType = new BABYLON.SphereParticleEmitter(1); particleSystem.particleTexture = new BABYLON.Texture("/textures/flare.png", scene); particleSystem.maxLifeTime = 10; particleSystem.minSize = 0.01; particleSystem.maxSize = 0.1; particleSystem.emitter = fountain; //fountain.position = newPosition; particleSystem.disposeOnStop = false; particleSystem.targetStopDuration = 1; return particleSystem;; } particleSystem = createNewSystem(); var materialAmiga = new BABYLON.StandardMaterial("amiga", scene); materialAmiga.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene); materialAmiga.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5); materialAmiga.diffuseTexture.uScale = 5; materialAmiga.diffuseTexture.vScale = 5; var materialAmiga2 = new BABYLON.StandardMaterial("amiga", scene); materialAmiga2.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene); materialAmiga2.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5); // Spheres var y = 0; var particleSystems = {}; for (var index = 0; index < 100; index++) { // Material var sphere = BABYLON.Mesh.CreateSphere("Sphere" + index, 16, 3, scene); sphere.material = materialAmiga; sphere.position = new BABYLON.Vector3(Math.random() * 20 - 10, y, Math.random() * 10 - 5); shadowGenerator.addShadowCaster(sphere); sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1 }, scene); var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Red(), 1000, null, true); var popAction = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, () => { createNewSystem() }); sphere.actionManager = new BABYLON.ActionManager(scene); sphere.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, (evt) => { evt.source.dispose(); fountain.position = evt.source.absolutePosition; //console.log(particleSystem); particleSystem.start(); })); sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, sphere, "scaling", new BABYLON.Vector3(1, 1, 1), 150)); sphere.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, sphere, "scaling", new BABYLON.Vector3(1.1, 1.1, 1.1), 150)); y += 2; } // Link var spheres = []; for (index = 0; index < 10; index++) { sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 1, scene); spheres.push(sphere); sphere.material = materialAmiga2; sphere.position = new BABYLON.Vector3(Math.random() * 20 - 10, y, Math.random() * 10 - 5); shadowGenerator.addShadowCaster(sphere); sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1 }, scene); } for (index = 0; index < 9; index++) { spheres[index].setPhysicsLinkWith(spheres[index + 1], new BABYLON.Vector3(0, 0.5, 0), new BABYLON.Vector3(0, -0.5, 0)); } // Box var box0 = BABYLON.Mesh.CreateBox("Box0", 3, scene); box0.position = new BABYLON.Vector3(3, 30, 0); var materialWood = new BABYLON.StandardMaterial("wood", scene); materialWood.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene); materialWood.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5); box0.material = materialWood; shadowGenerator.addShadowCaster(box0); // Compound var part0 = BABYLON.Mesh.CreateBox("part0", 3, scene); part0.position = new BABYLON.Vector3(3, 30, 0); part0.material = materialWood; var part1 = BABYLON.Mesh.CreateBox("part1", 3, scene); part1.parent = part0; // We need a hierarchy for compound objects part1.position = new BABYLON.Vector3(0, 3, 0); part1.material = materialWood; shadowGenerator.addShadowCaster(part0); shadowGenerator.addShadowCaster(part1); shadowGenerator.useBlurExponentialShadowMap = true; shadowGenerator.useKernelBlur = true; shadowGenerator.blurKernel = 32; // Playground var ground = BABYLON.Mesh.CreateBox("Ground", 1, scene); ground.scaling = new BABYLON.Vector3(100, 1, 100); ground.position.y = -5.0; ground.checkCollisions = true; var border0 = BABYLON.Mesh.CreateBox("border0", 1, scene); border0.scaling = new BABYLON.Vector3(1, 100, 100); border0.position.y = -5.0; border0.position.x = -50.0; border0.checkCollisions = true; var border1 = BABYLON.Mesh.CreateBox("border1", 1, scene); border1.scaling = new BABYLON.Vector3(1, 100, 100); border1.position.y = -5.0; border1.position.x = 50.0; border1.checkCollisions = true; var border2 = BABYLON.Mesh.CreateBox("border2", 1, scene); border2.scaling = new BABYLON.Vector3(100, 100, 1); border2.position.y = -5.0; border2.position.z = 50.0; border2.checkCollisions = true; var border3 = BABYLON.Mesh.CreateBox("border3", 1, scene); border3.scaling = new BABYLON.Vector3(100, 100, 1); border3.position.y = -5.0; border3.position.z = -50.0; border3.checkCollisions = true; var groundMat = new BABYLON.StandardMaterial("groundMat", scene); groundMat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); groundMat.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2); groundMat.backFaceCulling = false; ground.material = groundMat; border0.material = groundMat; border1.material = groundMat; border2.material = groundMat; border3.material = groundMat; ground.receiveShadows = true; // Physics box0.physicsImpostor = new BABYLON.PhysicsImpostor(box0, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 2, friction: 0.4, restitution: 0.3 }, scene); ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.7 }, scene); border0.physicsImpostor = new BABYLON.PhysicsImpostor(border0, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene); border1.physicsImpostor = new BABYLON.PhysicsImpostor(border1, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene); border2.physicsImpostor = new BABYLON.PhysicsImpostor(border2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene); border3.physicsImpostor = new BABYLON.PhysicsImpostor(border3, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0 }, scene); part0.physicsImpostor = new BABYLON.PhysicsImpostor(part0, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 2, friction: 0.4, restitution: 0.3 }, scene); return scene; }

I created a particle system and am facing the following behaviour: When using BABYLON.ParticleSystem.BLENDMODE_STANDARD the particles get a slight border or outline (see first screenshot attached). When using BABYLON.ParticleSystem.BLENDMODE_ONEONE all particle borders get rendered perfectly, however the particles are semi transparent causing a very unsaturated color, when any color beside white is applied (see second shreenshot attached). I have tried to set alpha, max/min lifetime of the particles - no luck I am trying to make a particle system, consisting of two different colord particles (blue and white). Anybody got an idea on what approach I have to follow to get fully colored particles without a border? btw: I am super noob, tried to find a solution to this all day and am very happy for any help - thanks in advance

Hi I'm a newbie of BJS, when i try the particle system, after set the particle texture, how to animation it? I used the texture as below: Thanks for any assistance!

Hi peeps, I've already published a similar topic not a while ago, but we couldn't really reach any conclusion: http://www.html5gamedevs.com/topic/32079-sprite-occlusion-for-performance/ I have this demo: http://devel.arinnova.com/tests/3dmaps/babylon_demo/ I'm trying to get a similar forest to this three.js scene: https://www.piste.io/#!/cortina . Notice how the forest is really dense and the FPS are really good. What I've already tried without success: 1) Loading meshes instead of sprites and applying LOD mechanism resulted in very low FPS. 2) Using mesh instances instead of sprites, still very low FPS 2) Temechon kindly helped me and coded a LOD function for sprites, but unfortunately it was more or less the same FPS as without the LOD. 4) Showing all the 54k trees, but using a particle system instead of sprites, which helped to reduce the draw calls, but the FPS were still low. 5) I've implemented a "poor man's LOD". I separated the 54k trees into 9 chunks, each chunk corresponding to a specific area. Then at every frame I calculated the distance from the camera to the central point of each area. If it was close enough to the camera, I showed the area trees and if not, I removed them. This way at each frame I had to calculate distances to only 9 points instead of 54k points, which helped but visually it was not pretty at all. Even applying a brown texture on the terrain underneath the trees, the chunks of trees appearing and disappearing all at once are very noticeable. 6) I also reduced the tree image size to 128x128, just in case, but I'm not sure it had an effect on FPS. Using an image of a pine tree or a leafy tree would create much more perception of a dense forest, but unfortunately I can't use those. The scene is a winter map of a specific real-world area with leafless trees and I'm trying to be as realistic as possible. A silly idea I've also tried was using an image of a group of trees instead of an image of a single tree. It obviously looked fake, especially when rotating the camera. Some other ideas that I've had but have not tried: Solid Particle System -> as it has more effect on performance than a simple particle system and I've already tried that. Octrees -> could this help me? I've read the tutorial but I'm not sure I understand how could I apply it to sprites. I don't know how camera.maxZ works internally, but is there possibly any way to apply it only to sprites, so the nearest sprites only are visible? Could I implement my own camera that does this? tldr; I'd like to show ~200.000 trees in my scene with minimal performance drawback. Thanks a lot in advance!

I am trying o figure out a way of doing bursting in a particle system... what I mean is I wanna one-shot or burst an amount of particles (but not end or stop playing the particles from the the previous burst) and one-shot or burst another amount of particles right behind the first set at a specified delay in milli secs or whatever... think of Indian Smoke Signals type effect. Yo @Deltakosh or @Sebavan or ANYBODY else know how to make this happen... of even modify the BABYLON.ParticleSystem to support BURST instead of just a one-shot then you die type deal I know 'maualEmitCount' gives you a one-shot then die type deal... but I need something like that but be able to one-shot multiple and a given delay ALSO... Can anybody tell me for sure exactly what ParticleSystem.emitRate is that how many particles PER SECOND... so and emitRate of 1 would emit 1 particle per second (if emitPower min/max ratio set to 1.0) ???

Hi, I am try to use particles in my code. so i have registered it like this "me.pool.register("droplet", game.dropletParticle, true);" and in my entity.js i have written "game.dropletParticle = me.SpriteObject.extend({ init: function(x, y) { // class constructor this.parent(x, y, me.loader.getImage("droplet")); }, game.startEmitter = function(x, y, count) { // add count particles in the game, all at once! for (var i = 0; i < count; i++) // add the particle in the game, using the mouse coordinates and game layer 5 // use the objects pool for better performance! me.game.world.addChild(me.pool.pull("droplet", x, y), 5); };" i have mentioned the image in resources.js as well but I am getting the following error ---me.Error: Cannot register object 'droplet', invalid class--- all my other images i have used tmx file. Can someone help me here!!!

It seems that preventAutoStart no longer has any effect... I have babylon scene with preventAutoStart set to true but they still auto start. Anybody else having this issue?

@Deltakosh or @Sebavan or @RaananW Anybody got any idea how i make jet flame particle system ... I have a texture for the flame... But i have no idea what NUMBERS (all the babylon particle system properties like emit boxes and min and max start, etc...) to use to make a flame for a a space ship jet flame. Is there some CYOS type deal for particle system...??? Is there some examples for different kind a particle system that can be created with "Specified Settings"... ??? Or anything that show a beginner how to make various particle system... What is the rhyme and reason to the setting the particle system numbers ???

I have the following particle system serialized into the scene... works great except for that fact that they always auto start the particles... What if i don't want some to start at scene load, but ill start them later... Is there some kinda of 'autoStart' flag we can add to deserialization that will only start a deserialized particle system if autostart is set to true, other you will have to call particles.start() in code. Here is the following son i have for the particle system but see any kind of 'started' flags that be set: { "emitterId" : "1d03dbd4-f86a-4ee3-b11a-1e99606bf25a", "gravity" : [ 0, -9.81, 0 ], "direction1" : [ -7, 8, 3 ], "direction2" : [ 7, 8, -3 ], "minEmitBox" : [ -1, 0, 0 ], "maxEmitBox" : [ 1, 0, 0 ], "color1" : [ 0.8161765, 0.390084326, 0.390084326, 1 ], "color2" : [ 0.06893382, 0.375, 0.134368643, 1 ], "colorDead" : [ 0.350237876, 0.399548054, 0.5808823, 1 ], "deadAlpha" : 0, "emitRate" : 1000, "updateSpeed" : 0.01, "targetStopFrame" : 5, "minEmitPower" : 1, "maxEmitPower" : 3, "minLifeTime" : 0.3, "maxLifeTime" : 1.5, "minSize" : 0.1, "maxSize" : 0.5, "minAngularSpeed" : 0, "maxAngularSpeed" : 3.14, "textureName" : "Flare.png", "blendMode" : 0, "capacity" : 500, "textureMask" : [ 0, 0, 0, 0 ], "linkToEmitter" : true, "name" : "solo1" }

Hi everybody! I was wondering about which properties of particle systems are most resource-consuming and how we can optimize particle systems in general? Thanks...

Hi guys, I'm trying to add particle system in Phaser now and I have a software called Particle Designer, which I use a lot when I develop in other 2d game engines. But I couldn't find any resources to do it since all example are using emitter to set the property manually and it's hard to see the effect right away. And the reason why I ask this because I found that the developer said Phaser is going to support this software long time ago, so I just wanna make sure is there a way to make it work with Particle Designer. Thanks a lot.

I wanted to add physics to the emitted particles for fluid simulation but I don't think Babylonjs has that kind of capability as of now. Is there any workaround for this? Basically, I want to simulate a waterfall, and the particles emitted would strike the stationary pond/water. I figured, using the meshes for this approach would hamper the performance too much. So, manipulating the vertex array for this might be a better option I think. How do I simulate this effect?

Hi again. I'm working with particle systems at the moment and have a specific effect that I need. Essentially it is a sun that has been created with one particle system inside of a nebula which is another particle system. The problem is that they are not depth sorted in anyway, so particles from one system will always be drawn in front of the other system. The order is determined by the particle system creation order; the last system is always drawn over the previous system. Does anyone know if BabylonJS has the ability to specify sorting for particles? I can't find anythin in the particle system code, but thought there might be something more generic elsewhere, or will I need to add support for that myself?

Please recommend flexible particle system engine. That can easily use with custom visualization. Plan to use with game engine https://github.com/darlingjs/darlingjs