lagauche Posted November 26, 2017 Share Posted November 26, 2017 Is there any kind of explode modifier to separate all faces of a mesh and animate them? I'm used to using Three.js's ExplodeModifier and wondering if there is anything similar. It's a simple function, but I don't have enough experience w Babylon.js to go about recreating it yet: THREE.ExplodeModifier = function () { }; THREE.ExplodeModifier.prototype.modify = function ( geometry ) { var vertices = []; for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) { var n = vertices.length; var face = geometry.faces[ i ]; var a = face.a; var b = face.b; var c = face.c; var va = geometry.vertices[ a ]; var vb = geometry.vertices[ b ]; var vc = geometry.vertices[ c ]; vertices.push( va.clone() ); vertices.push( vb.clone() ); vertices.push( vc.clone() ); face.a = n; face.b = n + 1; face.c = n + 2; } geometry.vertices = vertices; }; Quote Link to comment Share on other sites More sharing options...
JohnK Posted November 26, 2017 Share Posted November 26, 2017 This may be close to what you need http://doc.babylonjs.com/how_to/solid_particle_system#digest-a-mesh Wingnut and jerome 2 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted November 26, 2017 Share Posted November 26, 2017 http://www.babylonjs-playground.com/#NCY1Q#21 jerome 1 Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 26, 2017 Author Share Posted November 26, 2017 3 hours ago, JohnK said: This may be close to what you need http://doc.babylonjs.com/how_to/solid_particle_system#digest-a-mesh With a few tweaks, it's exactly what I was looking for! Really cool! https://www.babylonjs-playground.com/#HDHQN#46 Is it possible to reverse time on this so that after exploding it comes back together? Any ideas? Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 27, 2017 Share Posted November 27, 2017 ping @jerome who likes this a lot :-) Quote Link to comment Share on other sites More sharing options...
dbawel Posted November 27, 2017 Share Posted November 27, 2017 @Sebavan- Simply push your mesh positions into an array, and at any time step backward through the array and apply to your mesh. I do this all the time with canvas position and practically anything. Here's a sample script for drawing undo/redo on an HTML canvas: Push to your array: var cPushArray = new Array(); var cStep = -1; var ctx; // ctx = document.getElementById('myCanvas').getContext("2d"); function cPush() { cStep++; if (cStep < cPushArray.length) { cPushArray.length = cStep; } cPushArray.push(document.getElementById('myCanvas').toDataURL()); } Undo: function cUndo() { if (cStep > 0) { cStep--; var canvasPic = new Image(); canvasPic.src = cPushArray[cStep]; canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); } } } Redo: function cRedo() { if (cStep < cPushArray.length-1) { cStep++; var canvasPic = new Image(); canvasPic.src = cPushArray[cStep]; canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); } } } DB Quote Link to comment Share on other sites More sharing options...
jerome Posted November 27, 2017 Share Posted November 27, 2017 If you want to reset the sphere parts in the orginal positions, just copy them (as well for the part rotations) just after the SPS is built (lines 51 to 68) in this example, the SPS is reset every 500 frames : https://www.babylonjs-playground.com/#HDHQN#48 If you want to play back the whole animation, you will have to store the particle positions at a given frequency and reset them back then according to this storage. Or ... more complex : animate them along the same math function in the reverse order (have fun) NasimiAsl, Sebavan and dbawel 2 1 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted November 27, 2017 Share Posted November 27, 2017 I have an implode animation (the reverse of your case), and use morphing. I prefer this over the SPS, simply because I do not want to HAVE TO have an SPS solely for this. It can be limiting, if say the mesh also has a skeleton, multiple materials, other morph targets, coming in via .babylon, etc. A morph would not interfere with anything else. You can ditch if no longer needed. Make a morph target with vertices in their exploded state, then morph to it. Sebavan 1 Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 27, 2017 Author Share Posted November 27, 2017 Thank you all! I'm going to try everything you all have said, and I will post results or have follow up questions : ) Thanks for being so helpful everyone. Quote Link to comment Share on other sites More sharing options...
lagauche Posted November 27, 2017 Author Share Posted November 27, 2017 1 hour ago, JCPalmer said: I have an implode animation (the reverse of your case), and use morphing. I prefer this over the SPS, simply because I do not want to HAVE TO have an SPS solely for this. It can be limiting, if say the mesh also has a skeleton, multiple materials, other morph targets, coming in via .babylon, etc. A morph would not interfere with anything else. You can ditch if no longer needed. Make a morph target with vertices in their exploded state, then morph to it. Could you share that animation in any form so I can get a better sense? link, video etc : ) Do you break apart the faces using morph targets? I see what you're saying about using SPS for just this one thing so I am open to all options! Quote Link to comment Share on other sites More sharing options...
Gijs Posted November 27, 2017 Share Posted November 27, 2017 From the Three.js demo: https://threejs.org/examples/#webgl_modifier_tessellation I took the vertex shader from the source: https://github.com/mrdoob/three.js/blob/master/examples/webgl_modifier_tessellation.html Put it in CYOS, downloaded it, then put it in this playground: https://www.babylonjs-playground.com/#72A98G I don't know how to do this properly, but it's something. Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 27, 2017 Share Posted November 27, 2017 This is equivalent to use a morph target as it simply offset the positions: https://www.babylonjs-playground.com/#HPV2TZ#13 Gijs 1 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 27, 2017 Share Posted November 27, 2017 And for fun with real assets: https://www.babylonjs-playground.com/#10D6YT#53 With the real link as I forgot to save the PG: https://www.babylonjs-playground.com/#10D6YT#54 JohnK 1 Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 28, 2017 Share Posted November 28, 2017 By the way @Wingnut you might like the PG above: https://www.babylonjs-playground.com/#10D6YT#54 Wingnut and NasimiAsl 2 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted November 28, 2017 Share Posted November 28, 2017 That is SO SO friggin' nice! OMG. Alright! Well done! Bookmarked 100 times. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.