WebGL - Textured terrain with heightmap

Question

I\'m trying to create a 3D terrain using WebGL. I have a jpg with the texture for the terrain, and another jpg with the height values (-1 to 1).

I\'ve looked at vari

Answer 1

Babylon.js makes this extremely easy to implement. You can see an example at: Heightmap Playground

They've even implemented the Cannon.js physics engine with it, so you can handle collisions: Heightmap with collisions

Note: as of this writing it only works with the cannon.js physics plugin, and friction doesn't work (must be set to 0). Also, make sure you set the location of a mesh/impostor BEFORE you set the physics state, or you'll get weird behavior.