Three.js 改变顶点位置的最佳方式是什么？

如何解决Three.js 改变顶点位置的最佳方式是什么？

我是 Three.js 的新手，我最终得到了 2 种移动平面顶点的方法。我想知道在性能方面或仅在最佳实践方面我应该使用这两种方法中的哪一种。

在第一个函数中，我使用 vertexShader 更新顶点位置，第二个函数使用 THREE.mesh 的 bufferGeometry 位置属性更新顶点位置。

演示：https://olivierlarose.github.io/Threejs-Wave-Animation/

代码：https://github.com/olivierlarose/Threejs-Wave-Animation

使用顶点着色器：

void main() {
  vUv = uv;
  float calc = height * sin(position.x * 10.0 + time);   
  vec3 newPosition = position;
  newPosition.z = newPosition.z + calc; 
                    
  gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition,1.0 );
}

使用 bufferGeometry 属性位置：

animate(){
    const time = this.clock.getelapsedtime() * 3;
    const position = this.cube.geometry.attributes.position;

    for(let i = 0 ; i < position.count ; i++){
        const calc = this.height * Math.sin(position.getX(i) * 10 + time);     
        position.setZ(i,calc);
        position.needsUpdate = true; 
    }

    requestAnimationFrame(this.animate.bind(this));
    this.renderer.render(this.scene,this.camera);
}

谢谢

解决方法

如果您在 JavaScript 中重新计算位置，则需要在每个新帧上将这些新位置上传到 GPU，这会随着顶点数的增加而产生很大的瓶颈。此外，您需要对每个顶点执行一次 Math.sin()，当您有成千上万个顶点时，这可能会在单个线程中变得昂贵。

就性能而言，最好的方法是更新顶点着色器中的位置。这是因为您的几何图形的 position 属性只会上传到 GPU 一次。此外，您还可以通过并行计算 sin() 获得性能提升，与 CPU 相比，这在 GPU 中速度非常快。