solved Explode Modifier?

[lagauche]

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;

};

 

 

[JohnK]

This may be close to what you need http://doc.babylonjs.com/how_to/solid_particle_system#digest-a-mesh

[NasimiAsl]

http://www.babylonjs-playground.com/#NCY1Q#21

[lagauche]

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?

[Sebavan]

ping @jerome who likes this a lot :-)

[dbawel]

@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

[jerome]

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)

 

[JCPalmer]

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.

[lagauche]

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.

[lagauche]

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!

[Gijs]

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.

[Sebavan]

This is equivalent to use a morph target as it simply offset the positions:

https://www.babylonjs-playground.com/#HPV2TZ#13

 

[Sebavan]

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

[Sebavan]

By the way @Wingnut you might like the PG above: https://www.babylonjs-playground.com/#10D6YT#54

[Wingnut]

That is SO SO friggin' nice!  OMG.  Alright!  Well done!  Bookmarked 100 times.