3
votes

Anyone happen to know of an example or can point me in the right direction on rendering a heightmap/terrain in WebGL from a three dimensional array? Basically I have an array that contains data relevant to x and y coordinates and a 'height' (z axis).

Everything I've found (like in the threejs world) shows how to create one dynamically or from a 2d image. Ideally I'd like to have the color of the pixel/particle related to the height. Basically looking to do something like below but in WebGL:

enter image description here

1
Are the points/vertices in your array in a particular order or structure? - Wilt

1 Answers

3
votes

There are many examples on how to do this already available.
You can search for three.js + heigthmap. Or try three.js + 3d graph.

Here is something called a "Graphulus-Function" that looks pretty much exactly like what you need.

Here you can find another interesting reference.

Without more details on your data it is hard to say if these examples suit your needs...

Check also this three.js issue 1003 on GitHub: "Terrain from Heightmap" where there is a discussion about this topic and lots of great examples are mentioned.