3

This is my first post here; please excuse me if it seems like I'm lost, because I am.

I'm working on implementing a large terrain in WebGL and three.js using a heightmap. I can do everything I want to (so far) with a regular PlaneGeometry - setting up the plane, reading and assigning altitude values from the heightmap, reading and interpolating inter-vertex altitudes from just the heightmap so that the player can walk smoothly along the terrain without having to refer to the geometry, and assigning textures and lights.

Problem is that I seem to be limited to around a 513x513 vertex plane; any higher than that and everything starts to either chug or crash. I understand that the solution to this is to use buffergeometry and shaders to offload the heavy lifting to the GPU, and I've figured out how to read altitudes into an array and then hand that array off to the GPU to do the displacement, but now I've lost lighting information, and I don't know how to get it back. I suppose I could add in my own lights, but I'm pretty sure there's a way to tell the shader to use the scene's lights. I think that the solution has something to do with ShaderLib and/or UniformUtils, but I don't know how to use those, and all the examples I've found online are broken.

So I guess my question is this: how do I take parts of existing shaders (phong, lambert) and add to them my own code?

icannotfly
  • 31
  • 1
  • Hi - if you have an example of how you tried to solve this, along with details of the specific error caused, then it would prove helpful to include it in the question detail :) – robjohncox Aug 15 '13 at 18:14
  • Well, there isn't any error message, just that I don't know how to add lighting information from scene lights. – icannotfly Aug 15 '13 at 18:19
  • You are creating a terrain from a height map which is static? Well then use bufferGeometry because it is fast and exactly what you would want, especially for static terrain. See the three.js examples for this. What I would like to ask is what " but now I've lost lighting information" means? I am also not sure if it makes sense to offload the displacement to the GPU as this task is only done once at initialization and maybe sending stuff to the GPU is slower than just calculating in jAvascript. Anyway, also do a "computeVertexNormals" after displacement for correct lighting. show some code :) – GuyGood Aug 15 '13 at 20:45
  • Alright, here's the relevant code in the html: http://pastebin.com/qfrHRZpq and here's the js: http://pastebin.com/f7iVeBnJ The lighting problem is this: the plane that's created and height-adjusted in the object that contains populateHeightfield looks like this: http://i.imgur.com/eMVMfsc.jpg but the terrain (called "sphere" in the code) that's done with shaders looks like this: http://i.imgur.com/GXieZvS.jpg – icannotfly Aug 16 '13 at 00:27
  • Yes, as you can see yourself, your vertex-shader modified terrain looks FLAT. This is because the vertex normals are still like it is a simple flat plane. You have to call "computeVertexNormals" in order to get correct lighting. And as I said, it does not make sense to use a shader if you are generating this terrain only once because the vertex shader cannot easily figure out the vertex normals himself, he takes the ones from three.js as stated in your shader code. And those normals " vNormal = normal;" are from the flat planeGeometry. – GuyGood Aug 19 '13 at 20:00
  • http://forum.unity3d.com/threads/169871-Calculate-Vertex-Normals-in-shader-from-heightmap see this page if you want to calculate the vertex normal in your shader instead of doing this in javascript ONCE at startup – GuyGood Aug 19 '13 at 20:05

0 Answers0