BabylonJS - Mesh SolidParticles

SolidParticle System is updated on a mesh. All the properties that we have seen on a mesh can be used on the solid particle.

In the demo given below, we have created standard material and assigned it to box and sphere.

To create the solid particle system, execute the following command −

var SPS = new BABYLON.SolidParticleSystem('SPS', scene);
SPS.addShape(sphere, 500);
SPS.addShape(box, 500);
var mesh = SPS.buildMesh();

To add particles to the system, use the addShape method. It takes parameters like the shape, i.e., the mesh to be added and how many.

In the demo link, we will add the sphere and the box. The count is 500 which means 500 spheres and boxes.

sphere.dispose();  // free memory
box.dispose();

The dispose () method helps to free the memory which is done as shown above.

Particles property

Let us now see how the particle property works −

var speed = 1.5;
var gravity = -0.01;

We are using the following methods on particle system in our demo −

initParticles − This method helps to initialize the particles. SPS.nbParticles gives the all the particles available.
recycleParticle − You can recycle the particle using this method.IT contains details of a single particle.
updateParticle − Allows to update the particle properties.

Play around with the demo provided and you can change the properties and see the output.

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3( .1, .2, .4);
            
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 50, -300));
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
            light.intensity = 0.9;
            
            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
            pl.diffuse = new BABYLON.Color3(1, 1, 1);
            pl.specular = new BABYLON.Color3(0.2, 0.2, 0.8);
            pl.intensity = 0.75;

            // texture and material
            var url = "images/gem1.jpg";
            var mat = new BABYLON.StandardMaterial("mat1", scene);
            var texture = new BABYLON.Texture(url, scene);
            mat.diffuseTexture = texture;

            // SPS creation
            var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 2, scene);		
            var box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
            var SPS = new BABYLON.SolidParticleSystem('SPS', scene);
            SPS.addShape(sphere, 500);
            SPS.addShape(box, 500);
            var mesh = SPS.buildMesh();
            mesh.material = mat;
            mesh.position.y = -50;
            sphere.dispose();  // free memory
            box.dispose();		

            // SPS behavior definition
            var speed = 1.5;
            var gravity = -0.01;

            // init
            SPS.initParticles = function() {
               // just recycle everything
               for (var p = 0; p < this.nbParticles; p++) {
                  this.recycleParticle(this.particles[p]);
               }
            };

            // recycle
            SPS.recycleParticle = function(particle) {
               particle.position.x = 0;
               particle.position.y = 0;
               particle.position.z = 0;
               particle.velocity.x = (Math.random() - 0.5) * speed;
               particle.velocity.y = Math.random() * speed;
               particle.velocity.z = (Math.random() - 0.5) * speed;
               
               var scale = Math.random() +0.5;
               particle.scale.x = scale;
               particle.scale.y = scale;
               particle.scale.z = scale;
               particle.rotation.x = Math.random() * 3.5;
               particle.rotation.y = Math.random() * 3.5;
               particle.rotation.z = Math.random() * 3.5;
               
               particle.color.r = Math.random() * 0.6 + 0.5;
               particle.color.g = Math.random() * 0.6 + 0.5;
               particle.color.b = Math.random() * 0.6 + 0.5;
               particle.color.a = Math.random() * 0.6 + 0.5;
            };

            // update : will be called by setParticles()
            SPS.updateParticle = function(particle) {  
               // some physics here 
               if (particle.position.y < 0) {
                  this.recycleParticle(particle);
               }
               particle.velocity.y += gravity; // apply gravity to y
               (particle.position).addInPlace(particle.velocity);  // update particle new position
               particle.position.y += speed / 2;

               var sign = (particle.idx % 2 == 0) ? 1 : -1;  // rotation sign and new value
               particle.rotation.z += 0.1 * sign;
               particle.rotation.x += 0.05 * sign;
               particle.rotation.y += 0.008 * sign;
            };

            // init all particle values and set them once to apply textures, colors, etc
            SPS.initParticles();
            SPS.setParticles();

            // Tuning : 
            SPS.computeParticleColor = false;
            SPS.computeParticleTexture = false;

            //scene.debugLayer.show();
            // animation
            scene.registerBeforeRender(function() {
               SPS.setParticles();
               pl.position = camera.position;
               SPS.mesh.rotation.y += 0.01;
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code generates the following output −

In this demo, we have used image gem1.jpg. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any image of your choice and use in the demo link.

images/gem1.jpg

babylonjs_mesh.htm