Create waves effect with buffer geometry

Questions
, ,
1

Hello, I’ve tried to create a simple waves effect with buffer geometry without success. I have this code working with geometry.

function waves( plane, waveSize, magnitude ){
	const theTime =  performance.now() * .001 ;
	    var center = new THREE.Vector2(0,0);
	    var vLength = plane.geometry.vertices.length;
	    for (var i = 0; i < vLength; i++) {
	      var v = plane.geometry.vertices[i];
	      var dist = new THREE.Vector2(v.x, v.y).sub(center);
	      v.z = Math.sin(dist.length()/- waveSize + (theTime)) * magnitude;
	    }
	    plane.geometry.verticesNeedUpdate = true;
}

I have used as reference the example ‘how to update things’ . I don’t have clear the concept. I tried to put each vector in its position like previous example.

function wavesBuffer( planeBuffer, waveSize, magnitude ){

  const theTime =  performance.now() * .001 ;
  var positions = planeBuffer.geometry.attributes.position.array;

  var x, y, z, index;
  x = y = z = index = 0;

  let center = new THREE.Vector2(0,0);

  for ( var i = 0, l = planeBuffer.geometry.attributes.position.array.length; i < l; i ++ ) {

	var dist = new THREE.Vector2(x, y).sub(center);

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += dist.x;
    y += dist.v;
    z += Math.sin( dist.length()/- waveSize + (theTime)) * magnitude;

  }

  planeBuffer.geometry.attributes.position.needsUpdate = true

}

Does anybody know if is there a basic example of this?
Here a jsfiddle

2

Hi!
Try it this conceptual way:

var pos = planeBuffer.geometry.attributes.position;
let center = new THREE.Vector3(0,0,0);
var vec3 = new THREE.Vector3(); // for re-use

function wavesBuffer( waveSize, magnitude ){

  const theTime = performance.now() * .001;
  for ( var i = 0, l = pos.count; i < l; i ++ ) {

    vec3.fromBufferAttribute(pos, i);
    vec3.sub(center);
    
    var z = Math.sin( vec3.length() /- waveSize + (theTime)) * magnitude;
    
    pos.setZ(i, z);

  }

  pos.needsUpdate = true

}

Here is your slightly changed fiddle:
https://jsfiddle.net/prisoner849/yxb8j7Lf/

6 Likes
3

Hi prisoner849, I going to check your code.
Thank you so much!!!