# Create waves effect with buffer geometry

**URL:** <https://discourse.threejs.org/t/create-waves-effect-with-buffer-geometry/10694>\
**Category:** Questions\
**Tags:** buffergeometry, waves, plane\
**Created:** [November 7, 2019, 1:44pm UTC](https://discourse.threejs.org/t/create-waves-effect-with-buffer-geometry/10694 "2019-11-07T13:44:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanprieto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sanprieto/32/11581_2.png) [@sanprieto](https://discourse.threejs.org/u/sanprieto)\
**Post date:** [November 7, 2019, 1:44pm UTC](https://discourse.threejs.org/t/create-waves-effect-with-buffer-geometry/10694/1 "2019-11-07T13:44:31Z")

</div>

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](https://jsfiddle.net/sanprieto/de7Lxba9/34/)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 7, 2019, 2:21pm UTC](https://discourse.threejs.org/t/create-waves-effect-with-buffer-geometry/10694/2 "2019-11-07T14:21:08Z")

</div>

Hi!  
Try it this conceptual way:

```auto
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/](https://jsfiddle.net/prisoner849/yxb8j7Lf/)

---

<div class="post-metadata">

**Author:** ![sanprieto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sanprieto/32/11581_2.png) [@sanprieto](https://discourse.threejs.org/u/sanprieto)\
**Post date:** [November 7, 2019, 2:45pm UTC](https://discourse.threejs.org/t/create-waves-effect-with-buffer-geometry/10694/3 "2019-11-07T14:45:51Z")

</div>

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