Three.js 更改顶点位置的最高效方法是什么？

Question

我是 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);
}

谢谢

Answer 1

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

就性能而言，最好的方法是更新顶点着色器中的位置。这是因为您的几何图形的 position 属性只上传到 GPU 一次。此外，与 CPU.

相比，并行计算 sin() 可以提高性能，这在 GPU 中速度超快

Three.js 更改顶点位置的最高效方法是什么？

Three.js what is the most performant way of changing a vertex position?

three.js

glsl

shader

webgl

vertex-shader