Texture map morphing

I am doing 3D code archeology. My original code, written > 10 years ago in OpenGL + XMLisp did a nice morph of Mona Lisa with only about 30 lines of code. The code is in Lisp and will probably not help much (in this google code grave). But at the core is a mesh tessellating the image including two vertices that are controlled through a "happiness" variable:

This works really well but I like to rewrite this in three.js without rolling my own shader. As I have looked through the documentation I just don't know where to even start. I just need a triangle mesh keeping the xt, yt texture coordinates constant but changing the x, y to morph the image. I can't imagine this should be much larger in three.js

In case you wonder what this is really used for. We used this technique to create a nice simulation of a human anatomy in real time morphing illustrations from Gray's Anatomy: Sadly, only low res youtube video left: https://www.youtube.com/watch?v=39NJJC1Vt18

Any pointers would be greatly appreciated.



answered 4 months ago manthrax #1

Sounds pretty straightforward.

You make

var plane = new THREE.Mesh(new THREE.PlaneGeometry(),new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("YourImage.png")}));

add it to your scene... then get plane.geometry.vertices and warp them manually, and then do a plane.geometry.verticesNeedUpdate = true to get your changes to reflect back onto the GPU.

If you want some 1 on 1 help, feel free to join our three.js slack channel and post something in #general :)



answered 4 months ago Ben West #2

I think you're looking for the basic Geometry class. Make some triangles:

var geometry = new THREE.Geometry();
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 1, 0, 0 ),
    new THREE.Vector3( 0, 1, 0 )
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faceVertexUvs[ 0 ].push(
    new THREE.Vector2( 0, 0 ),
    new THREE.Vector2( 1, 0 ),
    new THREE.Vector2( 0, 1 )

Then morph it:

geometry.vertices[ 0 ].set( 2, -1, 400 );
geometry.verticesNeedUpdate = true;

comments powered by Disqus