CODEWITHSUNDEEP
three.js
bryan wong
bryan wong

Reputation: 239

Morphing a THREE.Points object over a period of time

I have a THREE.Points object that I'm trying to morph into another shape. If I simply set the geometry of the object to a new geometry, the vertices will automatically update to their new positions:

object.geometry = new THREE.SphereGeometry();

However, I want the vertices to "travel" to their new positions instead of simply appearing there instantly. I considered using Tweenjs to create a new tween for every vertex. This seems to work, but is really laggy when you have thousands of vertices to manipulate:

function morph(){
    var newGeom = new THREE.SphereGeometry(2.5, 64, 64);
    var curGeom = box.mesh.geometry;

    var targetVertices = newGeom.vertices;
    var curVertices = curGeom.vertices;
    var less = targetVertices.length < curVertices.length ?targetVertices : curVertices;

    var tween;
    var cur, target;
    for (var i=0; i<curVertices.length; i++){
        cur = curVertices[i];
        target = targetVertices[i];

        tween = new TWEEN.Tween(cur).to(target, 1000);
        tween.start();
        box.mesh.geometry.verticesNeedUpdate = true;
    }
}

Does anyone have a better solution? I've also tried using morph targets, but I don't think THREE.Points supports them.

Upvotes: 4

Views: 898

Answers (1)

M -
M -

Reputation: 28462

You're experiencing lag because updating the position of thousands of vertices 60 times per second gets to be very heavy on your CPU. What you need to do is defer all those calculations to the GPU, since your graphics card was made to handle large quantities of calculations per frame.

I recommend you take a look at this example, since it performs a similar function to what you're trying to achieve, without lag (except instead of changing the size of each point, you'll be changing their positions). Here is the source code you should read carefully.

Once you have a proper understanding of what this example does, I recommend you change your scene as follows:

  1. Take the BufferGeometry and assign the position attribute to whatever positions you'd like as starting point.
  2. Add a new custom attribute customPosition to the BufferGeometry, which will have all the ending positions.
  3. Declare a uniform in the ShaderMaterial that ranges from 0 - 1, which will be a "slider" that controls the animation between starting and ending position.

Once your geometry attributes and shader uniforms have been set up, you can go to the section labeled id="vertexshader" and you can play with the position and customPosition attributes (remember to add attribute vec3 customPosition; to the top, otherwise it won't understand what customPosition means!).

Just like that, you'll be writing your own custom vertex shader in GLSL! GLSL is the language WebGL uses to communicate with your GPU.

I highly recommend you read http://thebookofshaders.com/ to get an even more in-depth understanding of shaders.

Upvotes: 4

Related Questions