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.