2

I am trying to transition between 3+ 3D models with some nice perlin noise based on user input, just like this:

http://experience.mausoleodiaugusto.it/en/

http://na.leagueoflegends.com/en/featured/skins/project-2016

I can easily transition between two models in my vertex shader, passing down a u_morphFactor uniform variable, which I tween between 0 and 1 (0 = first model, 1 = second model). My question is how should I do it with 3 or more models.

Here is how I handle my geometry:

class CustomGeometry extends THREE.BufferGeometry {
    // pass down the two models' reference geometries
    constructor (geo1, geo2) {
        super()

        let { count } = geo1.attributes.position
        let timeArray = new Float32Array(count)
        let targetArray = new Float32Array(count)
        for (let i = 0; i < count; i += 3) {

           // assign next model's vertex position to the current one.
           // if there are is no corresponding vertex, simply move to vec3(0, 0, 0)

           targetArray[i + 0] = geo2.attributes.position.array[i + 0] || 0
           targetArray[i + 1] = geo2.attributes.position.array[i + 1] || 0
           targetArray[i + 2] = geo2.attributes.position.array[i + 2] || 0
        }

        // assign position AND targetPosition as attributes, so we can transition between them
        this.addAttribute('a_targetPosition', new THREE.BufferAttribute(targetArray, 3))
        this.addAttribute('position', geo1.attributes.position)
    }
}

Now with the two models' vertices uploaded to the GPU, I can pass down the uniform and make my transition:

let uniforms = {
   u_time: { value: 0 },
   u_morphFactor: { value: 0 } // show first model by default
}

And the GLSL is:

vec3 new_position = mix(position, a_targetPosition, u_morphFactor);

However, I still can't wrap my head around how should I approach this same technique with 3 or more models. I guess I have to mess with the shader math that handles u_morphFactor..

TL;DR: I know how to map vertices from one 3D model to the next, simply going from 0 to 1 in my shaders. How do I do this with 3 or more models?

gman
  • 100,619
  • 31
  • 269
  • 393
Georgi B. Nikolov
  • 976
  • 2
  • 13
  • 24
  • I think you can apply the same technique from [this](https://stackoverflow.com/a/44770446/4045502) @pailhead 's answer – prisoner849 Jul 27 '17 at 11:02

0 Answers0