Question

我使用Pointjouds使用threejs渲染大约2 000 000个点。我想让每一点都动起来。为此，我有起始位置和结束位置。

所以，我正在寻找最好的方法。并提出了三个想法：

执行自定义着色器，在此处修改此函数后每个顶点的位置：f（t）=开始*（1-t）+结束* t。 t从0变为1。但是我无法向着色器发送如此大的数组（2百万vec3以便知道最终位置）。 每个顶点是否可以发送特定的结束vec3？所以我会：统一的vec3结束，而不是统一的vec3结束[2097152]。
预先计算位置并将结果发送到着色器。
使用网络工作者预先计算位置，然后将结果发送到着色器。

有没有人知道如何制作动画？

我是所有着色器的新手，我还不完全了解网络工作者。所以我说的可能是错的。不要犹豫让我意识到这一点：P

谢谢！

编辑：不知道为什么，但stackoverflow不希望我在消息的开头说Hi。嗨！

editV2：在主线程上执行移动代码。

    var moving = setInterval(function() 
    { 
        var time = t;
        var iTime = 1-time;

        for(var i = 0; i < 2097152;i++)
        {
            scene.children[1].geometry.attributes.position.array[i*3] = before[i].x*iTime+after[i].x*time;
            scene.children[1].geometry.attributes.position.array[i*3+1] = before[i].y*iTime+after[i].y*time;
            scene.children[1].geometry.attributes.position.array[i*3+2] = before[i].z*iTime+after[i].z*time;
        }
        scene.children[1].geometry.attributes.position.needsUpdate = true;
        t+=1/60;
        if(t>1)
        {
            clearInterval(moving);
        }
    },5);

editV3：

WestLangley解释说，我需要使用属性，所以我的代码看起来像这样：顶点着色器：

        uniform float size;
        uniform float t;
        attribute vec3 endPosition;

        void main() {

            vec4 mvPosition = modelViewMatrix * vec4( position*(1.0-t)+endPosition*t, 1.0 );

            gl_PointSize = size / length( mvPosition.xyz );

            gl_Position = projectionMatrix * mvPosition;

        }

我使用BufferGeometry添加属性：

geometry.addAttribute('position' , new THREE.BufferAttribute( positionArray, 3 ));
geometry.addAttribute('endPosition' , new THREE.BufferAttribute( endPositionArray, 3 ));

它在移动，但它变得越来越小。对于顶点着色器，似乎endPosition * t等于0。我的功能有误吗？还是我错过了endPosition的声明？我很确定endPosition不能是vec3，而是缓冲区，但目前我没有找到它。

感谢您的帮助：）

EditV4：好的，我找到了问题所在，我需要指定我想要添加的shaderMaterial：

var attributes = {
    endPosition: { type:'v3', value:null }
}

由于职位已经存在且正在发挥作用，我没有注意到这一事实。

谢谢大家！祝你今天愉快。

移动大量积分的最佳方式是什么？

0 个答案: