PlaneBufferGeometry Grid

So I use a heightmap to alter a PlaneBufferGeometry to create terrain. The terrain is based on a 128 x 128 grid so I create the terrain plane geometry like so:

var geo = new THREE.PlaneBufferGeometry(1000,1000,128,128);

I previously used a 128 x 128 png for the height map back when quads were still a thing, but ever since they were removed I needed to use a 129 x 129 png to match up with the geometry created above. (I still do not understand this and I’ve investigated it for an embarrassingly long time lol).

So while the heightmap is 129x129, the rest of my “maps” are still based on the 128x128 format (which I assume still work since the geometry was created with 128 for both width and height segment parameters, plus everything looks ok at least).

The question: How do I iterate through the position attribute of this created geometry in a way that allows me to access which segment I am currently accessing in relation to the 128 x 128 segments? Where the first value in the loop would be 0 and the last would be 16,383 (128x128 -1).

What I am trying to accomplish here is setting a color for each face of the terrain based on a value from a 128 x 128 png.

What am I missing here?

TL;DR

I’m trying to iterate through the buffer geometry position attribute (such as in the fiddle below) in a way that goes through each square grid section left to right and top to bottom. I’m having issues as described above.

I previously used a 128 x 128 png for the height map back when quads were still a thing, but ever since they were removed I needed to use a 129 x 129 png to match up with the geometry created above. (I still do not understand this and I’ve investigated it for an embarrassingly long time lol).

If you’re adjusting the vertex positions to create your heightmap from a 128x128 image you need a plane with 128 vertices in each dimension. new PlaneBufferGeometry(1000,1000,128,128); will yield a plane with 129 vertices in each dimension. It might be better to think about the segment numbers as representing the number of strips of triangles that make up the plane. By default both width and height are set to 1 which gives a basic plane made up of two triangles (one strip of triangles) but of course you get 2 vertices across each edge.

Try playing with the example viewer on the PlaneBufferGeometry docs page to see how the number of vertices on the plane changes as you adjust the width and height segments arguments.

1 Like