Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebGL Heightmap from array?

Tags:

three.js

webgl

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

like image 907
Charlie Avatar asked Oct 26 '25 03:10

Charlie


1 Answers

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.

like image 50
Wilt Avatar answered Oct 29 '25 07:10

Wilt