Question

我正在尝试根据用户输入在3 + 3D模型之间转换一些漂亮的perlin噪声，就像这样：

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

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

我可以轻松地在我的顶点着色器中的两个模型之间进行转换，传递一个u_morphFactor均匀变量，该变量介于0和1之间（0 =第一个模型，1 =第二个模型）。我的问题是我应该如何使用3个或更多模型。

以下是我处理几何体的方法：

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)
    }
}

现在将两个模型的顶点上传到GPU，我可以传递制服并进行转换：

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

GLSL是：

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

然而，我仍然无法理解我应该如何使用3个或更多模型来处理相同的技术。我想我必须处理处理u_morphFactor的着色器数学。

TL; DR：我知道如何将顶点从一个3D模型映射到下一个3D模型，只需在我的着色器中从0到1。如何使用3个或更多型号进行此操作？

使用three.js在多个3d模型之间变形顶点的位置

0 个答案: