Search the Community

Hi, People usually love the Solid Particle System (aka SPS). Some of them sometimes ask for new features like the ability to extend it once created (coming soon) or for some extra speed by the ability to disable some computations. I made some study about how things could get faster. The short answer is : go to a lower lever in the implementation (replace the arrays of objects by typed arrays of floats, for instance), then use if possible other processes (GPU or workers). Well, here are the current status of my prototypes, so you can compare on your computer and browser the differences. The SPS of reference is really big, filled with 40K (yes, 40, 000 !) boxes and tetrahedrons. It's far more than we usually ask to a SPS with animated solid particles in the PG examples you could find in the forum posts. So your browser may suffer a bit ... Reference legacy SPS : http://jerome.bousquie.fr/BJS/test/spsReference.html Then comes the lighter typed array based version : http://jerome.bousquie.fr/BJS/test/spsBuffer.html As you can notice, it's a bit faster. Not only because of the usage of buffers/typed arrays, but also because it has less features than the legacy SPS for now. Let's go on... [EDIT] (from here, your need to have a browser with sharedArrayBuffer enabled) Here comes his new friend, the worker based SPS : http://jerome.bousquie.fr/BJS/test/spsProtoWorker.html This one is really faster. In this version, the particle logic (what the user want them to do) is still in the main thread and the worker only computes the transformations (the final vertex coordinates from the particle rotations, positions, scaling values, etc). At last, here's the second worker version : http://jerome.bousquie.fr/BJS/test/spsProtoWorker2.html It looks faster ... at least on my browsers. In this last version, the particle logic is deported in the worker. The main thread only carries for updating the mesh from the vertex buffers. In both worker versions, the worker computations are decoupled from the render loop. This means that the worker computes, then answers the main thread it has finished and this one just orders it to compute again, whatever the render loop is currently doing at this moment. The render loop just reads the data currently updated by the worker in a shared buffer (shared between the worker and the main thread) Next study step to come (not soon) : the GPU based SPS Please wait for a while until the frame counter stabilizes to the current average value if you run the tests.

When I create a hexagonal prism for SPS, it does not seem to recognize the rotation. I have been rotating the particles en masse after creation, but I gotta believe I am just doing it wrong. https://www.babylonjs-playground.com/#YI6D05#2 The "shapes" have no color. The particles are colored. To save memory, I must have "updatable" set to false. This makes my work-around harder. Advice requested.

Hi Folks, Here's a SPS new feature : the particle parenting. Simple to understand : once a particle has a parent, all its rotation, position and pivot are then expressed in the parent particle local space. Simple to use : sps.initParticles = function() { for (var i = 1; i < sps.nbParticles; i++) { // declare each previous particle as the parent of the current one sps.particles[i].parentId = i - 1; } }; sps.updateParticle = function(p) { // each particle will rotate for +0.001 in the already rotated parent space particle.rotation.z += 0.001; } examples : the green box is parented to the translating red one, it also rotates around a local pivot http://jerome.bousquie.fr/BJS/test/spsParenting.html 600 boxes, parented per groups (stems) of 10, each rotating around its pivot : http://jerome.bousquie.fr/BJS/test/spsParenting2.html

Hi! first of all, sorry if ive posted in the wrong section, but i wasnt sure if this was a bug or user error! http://www.babylonjs-playground.com/#825NJL#1 here is a playground of what im trying to do for work, please excuse the eye as i am unable to use the actual texture. its basically a wake for a boat. in the above playground the wake grows in the y axis. but I additionally need it to grow in the x axis but the buttom two verts at a faster rate than the top two. I created a updateParticleVertex function which worked perfectly using Babylon version 3.0 unfortunately I had to update to 3.1.1 (and have also tried 3.2.0-alpha2) which now when i uncomment line 48 - localScene.SPS.computeParticleVertex = true; - it throws the following error - SCRIPT5007: Unable to get property 'length' of undefined or null reference. which points to a minified piece of code even though i downloaded the un minified option ( this is the line it is pointing to if this helps - babylon.custom.js (17,29530)) I am using IE11 (unfortunately) due to customer request. is this a bug or can anyone tell me where my user error is? thanks and please do ask me a question if i am being unclear in any way! Thanks again, John.

Hi all, I am revisiting Babylonjs after a long gap. Things have changed drastically in the last year (for good ) and hence I have a newbie question, I am trying to utilise Babylonjs to give visual feedback to the user on his choice of designs. This involves creating a few hole patterns on flat plates based on an algorithm. After going through a few different approaches, I have stumbled upon the solid particle system where I could create cylinders to represent my pattern and display to the users. The cylinder locations are calculated using an external algorithm returned via ajax call and typically ends up creating 40,000 cylinders. Once the creation is completed, the performance is very good with 60fps. The help I need is in keeping the interactiveness ongoing while the SPS is being added in the background and progress displayed to the user. Somehow not much webgl interaction is possible, while the SPS Mesh is being constructed and the initparticles loop is running in my ajax call. I have tried to break it down into smaller batches, but not much luck. Any suggestions would be much appreciated. Regards, Balu --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Here is the code I am using. pointsData is an array of X and Y values and has ~1000 points in each bach - totalling around 40,000 $.ajax({ ... ... }, success: function(pointsData) { var holeMesh = BABYLON.MeshBuilder.CreateCylinder("Hole", { diameterTop: holeDia, diameterBottom: holeDia, height: thickness + 0.001 }, sc); var SPS = new BABYLON.SolidParticleSystem('SPS' , sc, { updatable: false }); SPS.billboard = false; SPS.computeParticleRotation = false; SPS.computeParticleColor = false; SPS.computeParticleTexture = false; SPS.computeBoundingBox = true; SPS.addShape(holeMesh, pointsData.length); var SPSMesh = SPS.buildMesh(); SPSMesh.material = ml; holeMesh.dispose(); SPSMesh.position = new BABYLON.Vector3.Zero(); SPS.initParticles = function () { for (var h = 0; h < pointsData.length; h++) { var holePosn = pointsData[h]; this.particles[h].position = new BABYLON.Vector3(holePosn.X / 1000, -thickness / 2, holePosn.Y / 1000); } } SPS.initParticles(); SPS.setParticles(); SPSMesh.parent = parent; }

Hello All, Is it possible to use the EdgesRenderer with the Solid Particle System? I cannot get it to work with a simple box. I'm able to create a box with edges, and a SPS with lots of boxes, but not both at the same time. Any pointers would be appreciated. Here is a small section of my code. The boxes show but without any edges. var box = BABYLON.MeshBuilder.CreateBox("b", options, scene); box.enableEdgesRendering(); box.edgesWidth = 10.0; box.edgesColor = new BABYLON.Color4(0, 0, 1, 1); var mat = new BABYLON.StandardMaterial("mat1", scene); box.material = mat; // SPS creation ========================================================== var sps = new BABYLON.SolidParticleSystem("sps1", scene); sps.addShape(box, nb); box.dispose();

Hi folks, Here's a new light feature in the SPS : Solid Particle Pivot It's just a Vector3 (defaut Zero) associated to each solid particle in the SPS. You can set a different value to translate the current particle from its initial local position, then the particle is still rotated around this original point but no longer set on it when rotated. This is the same notion than the Translation Matrix what you could use when defining a Pivot Matrix. Example : http://jerome.bousquie.fr/BJS/test/spsPivot.html 4000 orbiting tetrahedrons around 4000 rotating boxes ... the whole system also rotating around Y, everything with no complex maths at all, just the usual .rotation properties PG and documentation coming soon ...

As you know, the SPS is a standard mesh. Applying the transparency to a standard mesh leads to well-known issues ... not when visualizing other opaque or transparent meshes through this current transparent mesh, but when visualizing some parts of this transparent mesh through itself. Indeed, when passing the mesh geometry to the GPU, this one draws the mesh in the order the mesh facets are sorted in the indices array : first triangle, second one, etc ... whatever the position of the camera. The shader only respects the geometry order and this geometry is fixed. As the SPS is a standard mesh, it has the same issue when dealing with transparent particles (rotate the camera) : http://playground.babylonjs.com/#EPBTB7#3 A new feature allows now to sort the internal mesh geometry live according to the current camera position : http://playground.babylonjs.com/#EPBTB7#2 It sorts the SPS particles only, not all the facets, for performance reasons. To enable it, just create your SPS with the parameter enableDepthSort to true. By default, each next call to setParticles() will sort the particles according to the camera global position. If for some reasons (immobile camera and sps), you want to stop (or reactivate) the sort on the next calls to setParticles(), just set the property sps.depthSortParticles to false (or true to reactivate it) // create a particle depth sort enabled SPS var sps = new BABYLON.SolidParticleSystem("sps", scene, {enableDepthSort: true}); // then later, only do ... sps.setParticles(); // and the particle are depth sorted each call // We can skip the sorting at any time (or reactive it) : sps and camera not moving anymore sps.depthSortParticles = false; // true by default when enableDepthSort is set to true initial post : Documentation coming soon ...

Hi, I have a question about an SPS where not all of the particles are in use. That is, suppose the SPS has 10,000 particles in total, but at the moment only 5,000 of them are visible, and the other 5,000 are inactive, ready to be emitted. At first glance, since setParticles takes "start, end" parameters, it looks like one can save performance by keeping the 5,000 dead particles at the end of the particles array. That way you can call "setParticles(0, 5000)" and the update loop won't have to visit the dead particles. However, if I understand SPS correctly, it doesn't have any mechanism to skip rendering dead particles - it renders them, but if they're invisible it scales them down and moves them inside the camera frustum, right? And since that happens inside setParticles, this means that setParticles needs to be called even on invisible particles, right? So is there any way to tell the SPS to skip unneeded particles? Or do you just need to mark them invisible but still include them in the setParticles loop so that they get moved to places where they don't render?

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 have a question about using an SPS to manage merged scenery - i.e. trees and bushes and whatnot. To start with, let's say that my scene has 50 trees and 50 bushes. They are all static, so rather than use instances I want to merge them all into one big "scenery" mesh. I'd like to use SPS for this, for convenience so that I don't have to manually mess with vertex lists, etc. So, I create an SPS, call "addShape(tree, 50); addShape(bush, 50);", and then I set each particle position, and I call "buildMesh()". Once created, the scenery is essentially static, so there's no need for any update functions, particle recycling, etc. Now, my question: Suppose that later on I need to add a flower to this scenery mesh, or I need more trees beyond my initial number. Is it possible to add new shapes to the SPS after creation like this, or do I need to dispose and recreate the SPS? Follow up: if it is possible, would it make sense in my situation? If there is a performance benefit to having the SPS be immutable, I'd rather have it perform faster in the general case even if there's a cost to re-creating it. But if there's no performance benefit I'd rather update it incrementally. Thanks!

Hi team, @jerome @Wingnut I have an question relative to solid particle system (SPS). I need to create a SPS composed with different buildings (.obj files). This is my code but i only can add one of them. How can I solve it? var models = function(edificios_texto) { var t = 0; var loader = new BABYLON.AssetsManager(scene); edificios_texto.forEach(function() { if(edificios_texto[t].length!=2){ return; } var edificio = loader.addMeshTask(t, "","<?=$url?>assets/modelos/",edificios_texto[t]+".obj"); var nM; //mesh of building edificio.onSuccess = function (task) { task.loadedMeshes.forEach(function(b) { b.scaling = new BABYLON.Vector3(2.65, 2.65, 2.65); b.rotation.y = Math.PI; b.computeWorldMatrix(true); var vertex_data = BABYLON.VertexData.ExtractFromMesh(b); for (var i = 0; i < vertex_data.normals.length; i+=3) { vertex_data.positions[i] *= -1; } vertex_data.applyToMesh(b); }); nM = BABYLON.Mesh.MergeMeshes(task.loadedMeshes); for (var i = 0; i < edificios.length; i++) { if(edificios[i].descripcion == edificios_texto[edificio.name]){ var myPositionFunction = function(particle, s) { var utmPlaceX = edificios[i].x; var utmPlaceZ = edificios[i].z; var utmPlaceXFromCentre = utmPlaceX - mapCentreX; var utmPlaceZFromCentre = utmPlaceZ - mapCentreZ; var x = utmPlaceXFromCentre/scaleX; var z = utmPlaceZFromCentre/scaleZ; particle.position.x = x; particle.position.z = z; particle.position.y = alturas[ edificios_texto[edificio.name]]; particle.color = new BABYLON.Color4(0, 0, 1,0.5); }; spsEdificios.addShape(nM, 1, {positionFunction: myPositionFunction}); nM.dispose(); break; } } var buildings = spsEdificios.buildMesh(); spsEdificios.mesh.hasVertexAlpha = true; } t++; }); loader.load(); }; Thanks!

Hello, Looking into the particle system, http://doc.babylonjs.com/overviews/solid_particle_system, Wondering... Can particles be detected with raycast? When trying this: var hitInfo = ray.intersectsMeshes(particleArray); Gets error: i.getWorldMatrix is not a function, and I see why... Tried: {isPickable: true}, same result. Guess: attempting to draw a line and use intersectsMesh()... Would that be a good approach, or other suggestions? UPDATE: drawLines(), dispose() and intersectsMesh() did work. Still open to other ideas.

Hi, In my example, I'm creating 1000 spheres (so it may take some seconds to build up): http://www.babylonjs-playground.com/#F0HDSP#1 Now turn the camera to the right ... whoops - balls are away It seems like the "isInFrustrum" function doesn't know the whole mesh but only the left row of the balls. The reason could be that I'm not only building one SPS but two of them where the first SPS is used as a mesh for the second SPS. Or are there any other reasons for that behavior?

Just having a play around with sps, wanted to see if I could come up with a simple collision system from scratch. Only designed to work with spheres. http://www.babylonjs-playground.com/#1C2HFL http://www.babylonjs-playground.com/#1C2HFL#1 less segments http://www.babylonjs-playground.com/#1C2HFL#2 Have a play around with number of particles, size of particles and max speed. Max speed should be less than radius, too big and the particles escape.

Hi all, Some weeks ago i needed to make a large tiled ground, i tried the build-in createTiledGround, but at "just" 50 x 50 tiles (2500), it starts to struggle a bit, even on a rather high-end PC. http://www.babylonjs-playground.com/#1XBLWB#168 So using the SPS and a spritesheet, i created my own; It takes a second to load, but at 500 x 500 tiles, (250.000) it runs smoothly and with 59 / 60 fps on the same PC. tile indexing example, 5x5 (25) tiles; Cols_> 0 1 2 3 4 Rows_V 4 20 21 22 23 24 3 15 16 17 18 19 2 10 11 12 13 14 1 05 06 07 08 09 0 00 01 02 03 04 other important stuff should be commented in the PG. (50 x 50) http://www.babylonjs-playground.com/#1ALQPZ#4 (500 x 500) http://www.babylonjs-playground.com/#1ALQPZ#5 Cheers.

Hello! New Babylon user here--also new to 3D graphics and visual programming in general. I'm making a 3D visualization in Babylon and am a little stuck. Searched this forum for relevant topics but wasn't really even sure what to look for, tbh. WHAT I HAVE SO FAR A very simple visualization that uses the Solid Particle System. I add 1,000 shapes to it (flat triangles) and arrange them into 10 flat 10x10 (x, z) grids, all at the same initial y coordinate, and all initially invisible. Every few seconds, I take an invisible 10x10 grid make all 100 of its particles visible. My `SPS.updateParticle` just tests if `isVisible` is true, and if so, rotates it a little bit, and moves it down a little bit (decreases `position.y`). It also tests if the particle's y position is below a certain threshold--if it is, it calls `recycleParticle` on it, which simply makes it invisible again and sets its y position back to original starting height. It thus looks like an infinite series of 10x10 grids of flat triangles, appearing in thin air at a particular location, falling downwards, and then disappearing. At any given point there are maybe 6 or 7 grids visible simultaneously, all falling within the imaginary 3D rectangular prism defined by their (x, z) borders and their downward y motion. WHAT I HAVEN'T BEEN ABLE TO FIGURE OUT: I want to project a video onto the visible particles, like a moving, shifting projector screen. The projector could be at a fixed position, or it could be behind the camera, whatever's easiest at this point. My instinct was to make each particle translucent, and just place the video on the opposite side of the particles from the camera such that it plays "through" the translucent particles. But I can't figure out a way to have the video ONLY be visible through the particles, and not just look like a TV screen with a bunch of triangles in front of it. Let me know if any of that is unclear. Trying to get a playground up at some point but it's simple enough I thought I'd just ask. Thanks in advance for all your help, and for building such an awesome tool! I've had a lot of fun learning how to use it!

Hi all, @jerome I have done a SPS whose some particles have a little transparency and others not. However, I have a problem with particles that I dont want to apply alpha because now they are not solid cube!!. When I enable alpha chanel: #spsArquetas.mesh.hasVertexAlpha = true; for the solid particle I get this result: The result that I want to get is the follow: Thanks!

Hello, Is it possible to use collision detection to have an SPS avoid an area in the scene? Either this, or perhaps a large # of sprites? And @Wingnut - as I mentioned, I have a couple of simple solutions to the dynamic texture text post from more than a wekk ago, but I'm only back on the forum after a stay in the hospital at death's door with salmonella poisioning( as I waited too long for treatment - thank God my Wife is smarter than I am.) I'm pretty much recovered now, however I pretty much wish I were dead for a few days while in treatment. So I expect to finally build a scene tomorrow which I hope meets your expectations of "simple." But as for collisions, I need to use sprites or meshes which I can attach a videoTexture to their material and animate (possibly flock) at least 200+ meshes or sprites, etc. and have them avoid an area in the scene - perhaps using a spherical bounding object to define the area they must avoid - not bounce off from a collision necessarily. So I don't necessarily require collision detection, but need to avoid a defined area in the scene. Any thoughts on the best method to accomplish all of the above? Thanks, DB EDIT - actually, the client just changed the specs of the project at the last minute, and I now require collision detections and reactions (changes in translation and velocity from collisions) between the SPS meshes, sprites, or whatever objects can poulate an area with 200+ objects such as in the SPS demos with a good FPS, but also can each have material channels for textures (not necessarily videoTextures, as I'll most likely use multiple 32 bit textures and alpha channel transparencies) and animate the textures such as translation and scale to make them all apear unique. So each object must utilize collision detection, and also detect and react to at least 2 spherical bounding objects which can move with the user's fingrs when they touch the screen - and the collision spheres (two or three) must also not intersect as they need to also avoid collision suing collision detection, but these are invisible to the user, so I'm less concerned about this - but concerned about populating the screen with 200+ textured meshes capable of avoiding collisions with each other as well as the 2 0r 3 invisible spheres which I'll scale when the screen is touched by the user for the 200+ translating objects (SPS meshes?) to react to colliding with these as well. As I believe @jerome was instrumental in developing the SPS, perhaps he might read this and let me know how screwed I might be - but I would guess he might also have the answer to my potential dilemma.

This topic is only for further research in the forum purpose. Just a link to this post :

Hi beloved Babylonians, Well, I'm not that young compared to many of you and I'm coming straight from the 8-bit era. During this wonderful (to me) period, I spend so many hours playing on Atari Star Raiders and so many money on Star Wars arcade game (note that I could now pilot any space fighter after so much time in learning ). So I wanted to code a playabe BJS demo as a tribute to these fantastic old video games with some constraints : - must be runable in the PG : so the less external assets and only one createScene() method with plenty of comments - must run near 60 FPS on most of the computers - must be playable Although ever improvable, it's almost done. Stay tuned [EDIT] WIP here : https://github.com/jbousquie/Starfighter

Hi, I've ever been wondering if there were a way to implement easily some trailing solid particles. Well, here's a first attempt : http://www.babylonjs-playground.com/#1AGPB1 Of course, we can change the particle model : http://www.babylonjs-playground.com/#1AGPB1#1 This would be probably better done with a shader... but, you know, I'm lazy ... [EDIT] and as usual, some sinus fun : http://www.babylonjs-playground.com/#1AGPB1#3 [EDIT 2] reptilian http://www.babylonjs-playground.com/#1AGPB1#4

Hey guys, I'm looking for some help with my scene, specifically the grass that I am trying to create using the SPS. An example can be found here: https://roberthucks.com/3D/tests/test5/test5.html As you can see, when you move the camera (arrow keys) the grass does not face the camera despite these settings: grassSPS.billboard = true; grassSPS.isAlwaysVisible = true; grassSPS.computeParticleRotation = false; grassSPS.computeParticleColor = false; grassSPS.computeParticleTexture = false; I have an idea as to why, it being that the way in which this project it set up the world is generated before the player so when the grass gets made there isn't a camera for it to face. Atleast thats my working theory. So my question is, is there a way for me to change which camera the particles billboard to or is there any other methods I can use to produce the effect I am after. ps. I would make a playground but I don't know how to import textures. =)

Little fun for the week-end : http://www.babylonjs-playground.com/#1MURF7 A dynamic texture applied on a SPS composed with many little planes stuck together. Press "SPACE" then ... BOOM The same with an opaque texture to better understand : http://www.babylonjs-playground.com/#1MURF7#1 From the line 32, you can change some parameters. example : http://www.babylonjs-playground.com/#1MURF7#2 or something more dynamic : http://www.babylonjs-playground.com/#1MURF7#4 much more : http://www.babylonjs-playground.com/#1MURF7#5 Just make sure that your mouse pointer is NOT in the editor part, but in the scene part, else you can have some funny effect by pressing SPACE (or keeping it pressed)

I have some problems with the z-Values of the faces of a cube when using the "hasVertexAlpha" on the mesh of the SPS. The bottom shows even if alpha is set to 1.0. and the other faces dont seem to be correct too. I created a material for the sps mesh and set backface culling to false. I recreated it in the playground : http://www.babylonjs-playground.com/#1WP9KY#1. Is this a bug? or am I just doing something wrong?