
Terrain rendering in fewer than 20 lines of code - blaze33
https://github.com/s-macke/VoxelSpace
======
blaze33
I 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 :)

~~~
aptwebapps
Pretty 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
The 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.

------
phkahler
Yeah, 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
is 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
One 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
Behind 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!

------
tehsauce
That 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)

~~~
s-macke
Author 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
Shadertoy 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.

------
mratzloff
Just 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
C++ in high school in the 90s? We had Turing taught by our gym teacher ;(

~~~
sbarre
We 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
+1 TP by math teacher. Without him, I'd never have become a real programmer.

~~~
nurettin
I only had TP7 back in the 90s. No math teacher needed. The help file teaches
itself.

------
bluetomcat
Flashbacks 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
Oh, 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
I 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 :-(

------
jahnu
Reminds 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
The 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).

~~~
userbinator
IMHO 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)

~~~
Cyberdog
These dudes doin' mountains and oceans and music in 4K and yet it takes
LinkedIn and the like like 9MB worth of assets to show me a bit of text.

------
feiss
Neat, 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..)

------
namuol
Here'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
what would you say is the best resource for learning about building one from
scratch in JS?

~~~
s-macke
The 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
Loading .obj files is pretty easy, and basic triangle rasterization isn't too
hard either. Still probably a bit harder than height maps.

------
itwy
Firefox Quantum gives me better FPS than Chrome for the provided demo :)

~~~
scarlac
And Safari seems to give me better FPS than both Chrome or Firefox Q.

------
Aardwolf
I 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
In Comanche rolling is a skew, not a rotation. You never tilt too much so it's
ok.

~~~
moron4hire
Two skews can also make a rotation in a 2D plane.

~~~
Jare
Yeah but the vertical skew came practically for free (just an offset before
you start working on each column), which was very important for performance.

------
lostgame
This 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.

------
davrosthedalek
Reminds 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
When 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 .

------
frik
Hasn'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
We 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)

------
johng
Spent so many hours playing this game on my 386....

[https://www.youtube.com/watch?v=sdqCjPsBeog](https://www.youtube.com/watch?v=sdqCjPsBeog)

------
git-pull
Would 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.

------
edwinyzh
Very well and concisely explained, kind of an eyeopener for someone who has
never done any game/3D programming.

------
leeoniya
fond 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)

------
everdev
Where's the 20 lines of code? The code base is small, but looks like hundreds
of lines, not dozens.

~~~
sowbug
I 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.

------
eru
The difference between Comanche and Game Gunship 2000 is remarkable. Very good
write-up of the techniques.

------
hellofunk
My 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.

------
laurent123456
It 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
Sorry, 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)

------
zerotolerance
Perfect 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)

------
phreda4
traslate 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)

------
skierscott
Wow, great demo. Even works on mobile!

------
AncoraImparo
there are literally thousands of lines of code in this repo. This is bull
shit.

~~~
s-macke
The 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.

------
godwiner
looks well

