Well, I get started learning 3D concepts/coding, so this is all new for me. I’ve done a first try to build an application that runs in WebGL-enabled browsers. After spending some days on it, I finally have something fit to be seen.
This post deals with how I’ve made that little random terrain generation application using the Three.js framework and the diamond-square algorithm. Obviously, this works with the new generation of web-browsers (with WebGL support). I have tested it on Firefox 9, 10 and Chrome 16, 17. Sorry for Internet Explorer fans, that app doesn’t support because it uses the WebGL context (perhaps switching in canvas rendering would work, I haven’t tested yet).
Go to the live demo page
You can run the live demo at this address. As always, you can find the source code on my GitHub profile.
Here are some screenshots of what the app can do but not only:
Of course, the application gives us more features than applying a texture or showing a mesh. I invite you to discover and to play with it. By the way, I would really appreciate your feedback. :-)
- The diamond-square algorithm
- The scene
- Working with shapes, vertices, meshes and textures
- The camera
- The rendering
- Changeable parameters
- Bottom line