时间戳

首页 > 解决方案 > Three.js 改变顶点位置最高效的方法是什么？

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

  1. 使用顶点着色器：
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 );
}
  1. 使用 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);
}

谢谢

标签： three.jsglslshaderwebglvertex-shader

解决方案

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

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

推荐阅读