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

I'm new to Three.js and I ended up with 2 ways of moving the vertices of a plane. I was wondering which one of the two ways should I use in terms of performance or simply in terms of best practices.

In the first function, I update the vertices position with a vertexShader, and the second one I update the position of the vertices by using the bufferGeometry position attribute of the THREE.mesh.

demo: https://olivierlarose.github.io/Threejs-Wave-Animation/

code: https://github.com/olivierlarose/Threejs-Wave-Animation

1. Using the vertexShader:

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

2. Using the bufferGeometry attribute position:

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

Thank you

https://stackoverflow.com/questions/67341803/three-js-what-is-the-most-performant-way-of-changing-a-vertex-position May 01, 2021 at 08:14AM