New Monkey Demo: 3D Heightmapped terrainSubmitted by Earok on Sat, 09/17/2011 - 18:49
New HTML5 Monkey Demo - 3D Heightmapped terrain! Try it here, use cursor keys to move, A/Z to move up and down, Plus/Minus to change detail level, and L to set the terrain as infinitely looping. The source code has already been bundled into the Earok's Monkey Demos pack.
This was a fun one to do, certainly not as painful as I had thought it was going to be. The inspiration was the "Voxel" terrain engine from the Novalogic Comanche games, though frankly I find the term "Voxel" to be misleading as it's really a raycaster. The way it works is that rays are casted from each Vertical line across the screen, detecting where the map is hit and drawing to the height of the hit part of the map. The ray travels into the distance until it either hits the maximum distance, or what's already been drawn extends past the top of the screen.
The unfortunate weakness with doing a terrain render this way is that you're limited to four degrees of freedom - meaning you can move freely forward/back, left/right and up/down, but you can only rotate left/right (pitch and roll rotations can be faked to a degree though).
I'm pretty sure that this is a first for Monkey, it may even be a first for HTML5 in general. Unfortunately the framerate slows to a crawl on the higher detail levels (It's fine in the C++ export). I think the big slow down is simply drawing the pixels to the screen, if someone can think of a way to make the demo run much faster, I'd love to hear from you!
(Edit: For bonus points - where did I get the terrain for this demo from?)