Jump to content

Explode Modifier?


lagauche
 Share

Recommended Posts

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;

};

 

 

Link to comment
Share on other sites

3 hours ago, JohnK said:

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?

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...