10 ms·
Terrain rendering in fewer than 20 lines of code
- deleted 9y ago[deleted]
- eru 9y agoThe difference between Comanche and Game Gunship 2000 is remarkable. Very good write-up of the techniques.
- bluetomcat 9y agoFlashbacks to playing Delta Force in the 1990s as a kid. Looking through the binoculars at a long open distance (say 3500 metres), only to realise that the same hill repeats 3 times :-) Delta Force 2, released in 1999, still used a voxel engine which could already be hardware-accelerated, supporting "stretched voxels" which were able to simulate high grass.
- jrobn 9y agoOh, the memories! Delta Force 2 over multiplayer, with, I think, 30 players or more, on 56K was surprisingly fun! Advanced voxel engines are quite impressive.
- bluetomcat 9y agoI played both (1 and 2) almost exclusively in single player, completing every mission. SP missions in DF2 were much, much harder by comparison. Unlike the helicopters in DF1, the MIL Mi-24 Hind helicopters in DF2 were able to shoot at you and you were only able to eliminate them either with an anti-tank missile or with the grenade launcher. No matter how many magazines you emptied at a vehicle, it stayed there and didn't explode :-(
- efrafa 9y agoOh I so loved delta force. We had some russian version where whole menu was cyrillic and I had no idea what it means but it was still great.
- jawngee 9y agoCame to say the same thing. DF and DF 2 are still some of the best multiplayer experiences I've had.
- lostgame 9y agoThis is fantastic! I really enjoyed playing with the web demo. Thanks for open-sourcing it, and for the excellent explanation! I have a bit of a fetish for old-school 3D tricks, I'm currently working on a 3D project for the Sega Saturn using jo-engine.
- leeoniya 9y agofond DOS memories of https://en.wikipedia.org/wiki/F29_Retaliator https://en.wikipedia.org/wiki/F29_Retaliator https://www.youtube.com/watch?v=qwJmlWdmP2M https://www.youtube.com/watch?v=qwJmlWdmP2M
- blaze33 9y agoI stumbled upon this very good explanation (and demo) of the Comanche Voxel 2.5D engine reimplemented in JS and thought it might interest some HNers. I did not had the pleasure to play Comanche though I have fond memories of playing Apache in 1996. I've been investigating the terrain generation / rendering quite a bit for the past ten days and have started to play with https://threejs.org/ https://threejs.org/, webgl and shaders, the current result (https://twitter.com/maxmre/status/933860624773283842 https://twitter.com/maxmre/status/933860624773283842) is quite humbling when I see how nicely the Comanche engine works :)
- s-macke 9y agoWell, the magic of this algorithm lies in the prerendered color map. Use the height maps and color maps from this engine and your result will also look much better.
- huskyr 9y agoThanks, the gifs displayed in the 'Basic algorithm' section are really good.
- aptwebapps 9y agoPretty neat, but I'm confused. You say it's in JS, and the demo certainly is, but the repo is in Python plus some extractors written in C, a few shell scripts, and Markdown docs. No JS in sight. At the same time, Github claims the project is 100% HTML ... I don't know what or who to believe!
- s-macke 9y agoThe project is originally a fan page about the game Comanche and the Voxel Space engine. The web demo is just one part and contains mainly JavaScript. The tools directory contain the code which was used to generate the gif animations and the tools to extract the maps from the Comanche games. So you can ignore the python and shell scripts.
- djellybeans 9y agoI'm gonna try this out for myself. I love graphics projects like these and the algorithm is straightforward to implement. Most of the additional work is boilerplate, setting up canvas and resource management of images.
- jahnu 9y agoReminds me of this classic 4k demo which blew my mind back in 1993 http://www.pouet.net/prod.php?which=4662 http://www.pouet.net/prod.php?which=4662 https://www.youtube.com/watch?v=_zSjpIyMt0k https://www.youtube.com/watch?v=_zSjpIyMt0k
- Cyph0n 9y agoThe demoscene is still pumping out amazing stuff. Check out this ~5 minute 64K demo (2016): https://www.youtube.com/watch?v=gX7ESVZ7T6Y https://www.youtube.com/watch?v=gX7ESVZ7T6Y.
- lloeki 9y agoThere was a superb demo I can't seem to find again, one of the scenes was a giant spaceship floating in the distance above a desert, and some silhouette people were walking atop a dune along with goats or some other animal. I seem to remember there was some article from the author about the implementation. If anyone can throw some link in my general direction then I'll throw back some <3 in theirs :)
- heyitsguay 9y agoGuberniya? https://www.youtube.com/watch?v=yei3mJm33SQ https://www.youtube.com/watch?v=yei3mJm33SQ
- lloeki 9y agoThat's it! The specific scene is at 1:14[0], and the article, is titled "How a 64k intro is made"[1]. <3 <3 <3 [0]: https://youtu.be/yei3mJm33SQ?t=1m14s https://youtu.be/yei3mJm33SQ?t=1m14s [1]: http://www.lofibucket.com/articles/64k_intro.html http://www.lofibucket.com/articles/64k_intro.html
- userbinator 9y agoIMHO not very many 64Ks have reached the amazingness of this 11 minute one from 2000: https://www.youtube.com/watch?v=Y3n3c_8Nn2Y https://www.youtube.com/watch?v=Y3n3c_8Nn2Y ...and for 4K, this one from 2009: https://www.youtube.com/watch?v=jB0vBmiTr6o https://www.youtube.com/watch?v=jB0vBmiTr6o
- phkahler 9y agoYeah, but imagine doing fractal landscapes on an 8-bit 6502 in 1984: https://www.youtube.com/watch?v=FbZ-chrOgGg https://www.youtube.com/watch?v=FbZ-chrOgGg
- mgkimsal 9y agois this going to be 'rescue on fractalus'? EDIT: It is! Had the commodore version - fun memories :) c64: https://www.youtube.com/watch?v=fjR33K_wuD8 https://www.youtube.com/watch?v=fjR33K_wuD8
- metaobject 9y agoOne of my all time favorite games, without a doubt. I used to play it on the Atari 800XL, but it had a different name, I believe. "Behind Jaggi Lines", I want to say. Edit: fixed game name
- scottymac 9y agoBehind Jaggi Lines! was actually a development version that was pirated heavily amongst Atari owners. I played it on my Atari 800. It was the first game that actually made me jump out of my chair, scaring me. I can remember the moment vividly. Great game!
- johng 9y agoSpent so many hours playing this game on my 386.... https://www.youtube.com/watch?v=sdqCjPsBeog https://www.youtube.com/watch?v=sdqCjPsBeog
- mratzloff 9y agoJust a few years after Comanche was released I was sitting in a high school C++ class, content to explore the language with text adventures and RPGs. 3D graphics seemed vaguely mystical to me. Next to me, however, was someone who seemed light years ahead of me. He had programmed his own voxel terrain rendering just like this. I had no earthly idea at the time how that was even possible. In retrospect, he was not so much farther along, but he was passionate enough about game development to read books about these techniques and work out the details. I've always wondered what happened to him, and if he ever followed his passion to become a game developer...
- jgh 9y agoC++ in high school in the 90s? We had Turing taught by our gym teacher ;(
- sbarre 9y agoWe had Turbo Pascal taught by a math teacher, who read to us straight from a course binder and admitted to literally drawing the short straw in the teacher's lounge when they were figuring out who had to teach the computer class..
- glonq 9y ago+1 TP by math teacher. Without him, I'd never have become a real programmer.
- skierscott 9y agoWow, great demo. Even works on mobile!
- tehsauce 9y agoThat is not 20 lines, that's 300+! Here is terrain rendered in 30 lines, with no textures either. https://www.shadertoy.com/view/lslBz7 https://www.shadertoy.com/view/lslBz7
- likelynew 9y agoShadertoys' authors never fail to amaze me.
- monocasa 9y agoTo be fair that seems to originally be a piece of the 4k demo elevated.
- s-macke 9y agoAuthor here The main algorithm fits easily in 20 lines. However, the JavaScript code is optimized and contains also the initializing routines and input device logic. It is also a little bit unfair to compare this with shadertoy. He doesn't have to include the render algorithm but relies on a GPU. The Voxel Space engine just draws vertical lines and doesn't need a GPU.
- otaviogood 9y agoShadertoy shaders _do_ include the render algorithm. That shader is completely ray-traced, so the only real input that is used for that shader is the x, y coordinates and time. It's not using any of the GPU's polygon rasterization. It's stateless and is generating the terrain while it ray-traces it.
- deleted 9y ago[deleted]
- lucideer 9y agoFirstly - this is really nice. I don't want to derogate the work itself in any way (and I don't think the gp did either) - I'm just really quite curious about what exactly the post title is referring to. If I extract the code and delete what I can see might be extraneous setup boilerplate (event handling, camera navigation, init function, image download helper utility, various config object initialisations), it still comes in at around 150-200 lines. The render function alone is 38 lines, not including the external dependencies of that function (DrawVerticalLine, screen, camera). Again, not a criticism of the work, just querying the title.
- davrosthedalek 9y agoReminds me of Tim Clarke's Mars demo: https://www.pouet.net/prod.php?which=4662 https://www.pouet.net/prod.php?which=4662
- s-macke 9y agoWhen I saw the demo decades ago I was also totally amazed by it. And only 4k. I reverse engineered it with the Turbo Debugger under DOS. Found that most of the code was repetitive to prevent a slow loop construct. So it would have fitted easily into a 1k executable .
- itwy 9y agoFirefox Quantum gives me better FPS than Chrome for the provided demo :)
- namuol 9y agoHere's my (old) take on a terrain renderer (more than 20 LOC, oh well): http://lou.wtf/earf-html5/ http://lou.wtf/earf-html5/ For anyone who wants a refreshing/fun code project, strongly recommend implementing some kind of software renderer. A raytracer or raycasting engine like this one, or something more fundamental like a polygon renderer.
- antjanus 9y agowhat would you say is the best resource for learning about building one from scratch in JS?
- s-macke 9y agoThe simplest techniques for 3D rendering without relying on a GPU and WebGL are indeed (2.5D) raycasting engines (such as this Voxel Space engine). A short google search reveals for example: http://www.playfuljs.com/a-first-person-engine-in-265-lines/ http://www.playfuljs.com/a-first-person-engine-in-265-lines/ Also read the readme file of this Voxel Space engine. Maybe this is already enough to understand the principle.
- phkahler 9y agoLoading .obj files is pretty easy, and basic triangle rasterization isn't too hard either. Still probably a bit harder than height maps.
- namuol 9y agoI followed Inigo Quilez's article on terrain marching: http://iquilezles.org/www/articles/terrainmarching/terrainmarching.htm http://iquilezles.org/www/articles/terrainmarching/terrainma... Be sure to browse his other articles: http://iquilezles.org/www/index.htm http://iquilezles.org/www/index.htm and his awesome video tutorials (which tend to be more about the math than the code): https://www.youtube.com/user/mari1234mari https://www.youtube.com/user/mari1234mari Enjoy!
- zerotolerance 9y agoPerfect for an easter egg. I'm having higher-definition Excel 97 flashbacks... https://www.youtube.com/watch?v=-gYb5GUs0dM https://www.youtube.com/watch?v=-gYb5GUs0dM
- laurent123456 9y agoIt wouldn't load Map Comanche 3 - it's trying to load a non-existent image for it - https://s-macke.github.io/VoxelSpace/maps/undefined.png https://s-macke.github.io/VoxelSpace/maps/undefined.png
- s-macke 9y agoSorry, this in an error. The Comanche 3 map is not part of the Github archive. Try the outdated website if you want to see how a Comanche 3 map looks: http://simulationcorner.net/index.php?page=comanche http://simulationcorner.net/index.php?page=comanche
- s-macke 9y agoI removed the map in the dropdown menu.
- feiss 9y agoNeat, great readme. Everyone seems to be in flashback mode, so I'll add mine: I remember getting a good grade in my multiprocessing class by making a voxel terrain generator using mpi and with the same technique, but also with clouds (just think of upside down white mountains). But I just randomly generate them, without any lighting. The color of the voxels were determined by their height. Using (nice) color and height textures adds a lot indeed! It's a shame I didn't know that trick on that time, I remember playing with vistapro[1] or terragen[2]. [1] http://www.creative-3d.net/images/vistaprointerface.jpg http://www.creative-3d.net/images/vistaprointerface.jpg (I had an older, ms-dos based version) [2] http://planetside.co.uk/ http://planetside.co.uk/ (It's great to see that it's still alive after so many years..)
- Aardwolf 9y agoI love it! How's the rolling in comanche done? The lines are no longer vertical then, so seems trickier. Roll means the horizon is no longer horizontal by the way, what is labeled roll in the demo is actually pitch :)
- Jare 9y agoIn Comanche rolling is a skew, not a rotation. You never tilt too much so it's ok.
- moron4hire 9y agoTwo skews can also make a rotation in a 2D plane.
- Jare 9y agoYeah but the vertical skew came practically for free (just an offset before you start working on each column), which was very important for performance.
- s-macke 9y agoYou can't look up and down using this technique. However, you can move the horizon line up and down. You don't recognize the difference for small angles.
- git-pull 9y agoWould love to see a C++ implementation of this of this code, whether it's a test project or an example already available in open source. This would also be a cool thing to give an example of across programming languages. Sort of like how https://github.com/drujensen/fib https://github.com/drujensen/fib does it.
- phreda4 9y agotraslate to :r4 in 95 lines of code (all) https://github.com/phreda4/reda4/blob/master/r4/Dev/vox.txt https://github.com/phreda4/reda4/blob/master/r4/Dev/vox.txt
- godwiner 9y agolooks well
- edwinyzh 9y agoVery well and concisely explained, kind of an eyeopener for someone who has never done any game/3D programming.
- everdev 9y agoWhere's the 20 lines of code? The code base is small, but looks like hundreds of lines, not dozens.
- s-macke 9y agoWhat you look at, is the whole engine and not just the rendering part. This contains, HTML, CSS, loading and initialization of the maps, clear and flip screen code and especially input device logic. The rendering part in the JavaScript is still rather small. However, the code is optimized and therefore larger. For example the drawing of the vertical line is done manually. Read the explanation of this algorithm and you will see how the 20 lines are meant.
- sowbug 9y agoI counted 20 in the body of the README's Render function. I count it as one line if the block is a single line that uses a simple test to execute conditionally (for/if). Once you understand the algorithm, it's conceptually even simpler than 20 lines.
- hellofunk 9y agoMy only problem with this demo is that it is almost too realistic. It makes me uncomfortable to view something like this and not be able to decide if I'm looking at a computer render or if I'm actually in an airplane flying over real terrain.
- frik 9y agoHasn't Outcast (1999) used the same/similar techniques for terrain rendering. The re-released it on GOG last year, and remade it this year with a Unity engine (all polygons now).
- wiz21c 9y agoWe had interpolation to "blur" the rendering + some other optimizations (mostly stemming from the fact that the engine inner loops where super heavily optimized (think VTune level optimizations)) (note that I didn't work on the voxel engine, it was a colleague; I just worked on optimizing the 3D triangle pipeline) (edited for more clarity and info)
- s-macke 9y agoIndeed, Outcast used the same technique. However, not as simple as this algorithm. They included interpolation for the terrain and polygon rendering for the parts, which are not terrain.
- AncoraImparo 9y agothere are literally thousands of lines of code in this repo. This is bull shit.
- s-macke 9y agoThe 20 lines refer to the pure rendering algorithm. Please read the description of the algorithm. The repo contains also the scripts, to generate the GIF animations on the start page and the tools to extract the maps from the Comanche computer games.