WebGL - Textured terrain with heightmap


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 various wrapper libraries (like SpiderGL and Three.js), but I can't find a sutable example, and if I do (like in Three.js) the code is not documented and I can't figure out how to do it.

Can anyone give me a good tutorial or example?

There is an example at Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html which is almost what I want. The problem is that they create the colour of the mountains and the height values randomly. I want to read these values from 2 different image files.

Any help would be appriciated. Thanks


Depending on your GLSL skills, you can write a GLSL vertex shader, assign the texture to one of your texture channels, and read the value in the vertex shader (I believe you need a modern card to read textures in a vertex shader but that may just be me showing my age :P )

In the vertex shader, translate the z value of the vertex based on the value read from the texture.

By : beiller

You may be interested in my blog post on the topic: http://www.pheelicks.com/2014/03/rendering-large-terrains/

I focus on how to efficiently create your terrain geometry such that you get an adequate level of detail in the near field as well as far away.

You can view a demo of the result here: http://felixpalmer.github.io/lod-terrain/ and all the code is up on github: https://github.com/felixpalmer/lod-terrain

To apply a texture to the terrain, you need to do a texture lookup in the fragment shader, mapping the location in space to a position in your texture. E.g.

vec2 st = vPosition.xy / 1024.0;
vec3 color = texture2D(uColorTexture, st)
By : pheelicks

Two methods that I can think of:

  1. Create your landscape vertices as a flat grid. Use Vertex Texture Lookups to query your heightmap and modulate the height (probably your Y component) of each point. This would probably be the easiest, but I don't think browser support for it is very good right now. (In fact, I can't find any examples)
  2. Load the image, render it to a canvas, and use that to read back the height values. Build a static mesh based on that. This will probably be faster to render, since the shaders are doing less work. It requires more code to build the mesh, however.

For an example of reading image data, you can check out this SO question.

By : Toji

This video can help you solving your question :)
By: admin