Procedurally generated 3D world in WebGL

I always wanted to create a whole 3D world by programming. Procedurally generating everything has a nice touch: You can build whole worlds with unlimited details, and by adjusting just a few parameters change everything easily. Because the work on my side-project game Darkness Springs has stopped (as reported on this blog), I needed another side project, so I started this a few weekends ago. I decided to write everything in JavaScript, using WebGL, and thus also be able to use it as test area for my WebGL JavaScript library, while also improving the WebGL backend of CopperCube as side effect.
For now, it only does some very basic 3D world generation, and it looks like this:

It generates simple terrain, buildings with a real floor plan, streets and trees. Nothing too exciting yet, but it is a start. I also found time to set up a small website for it, write down what the game will be about and setup a preorder button, so that if people like the game idea, they can pay something in order to speed up its development (That way I maybe can outsource some more work). The game will be named EndTime at Home and will be set in a post-apocalyptic world, where you walk around to gather food, hunt, and survive on your own. For simplicity, it is set in the universe of my book, just a few years before the story happening in that book. There is a playable demo of the 3D engine in action, try it out, if you like. It doesn't have that much content yet, but it shows that everything runs smoothly, even if it is only written using JavaScript.

eleven comments, already:

Wow Niko! That was an awesome experience.
I felt like I was walking for ever! How did you do it? When can we get the tech in Coppercube! Just pre-ordered BTW.
mrmdesign () - 18 09 13 - 09:24

Cool :)
erik - 18 09 13 - 10:10

Please consider handling non QWERTY keyboards: almost all WebGL demos, forces us to use the WASD keys to move around which is really bad to really enjoy it. I know I can use the arrow keys but I don’t do that in FPS games.
john - 18 09 13 - 11:03

Hm, it’s more a procedural approach, where in CopperCube, you need to create the content by 3D artists. But it could be an idea to make a plugin for the editor from it, maybe.
Thanks for preordering :)

About QWERTY: ah, itneresting. What keyboard are you using, DVORAK?
niko - 18 09 13 - 12:00

A large cavern of what I’m about to ramble about may be unintentional, but I will still give the deserved praise for it.

The art of this demo. You have used a brown and green colour scheme (without layering on things like horrible ‘generic brown FPS’ post filters) that really gives a sense of atmosphere, without ruining contrast or immersion. This style makes this little demo unique. It’s not a re-run of concepts and art ideas already run through by many other people before.

You could spend hours adding various other similar assets into the same generation logic but in consequence detract from the fun of the game. Or you could make the game itself more interesting by working on the dimensions of player interaction, including exploration. Some game devs go for the former in sequels or after their pets (cough Minecraft) become successful, focusing on furthering what is already successful (gaining little returns after a certain point) rather than ever expanding their ideas just as they did in the first place to capture people’s imaginations.

Do what you want with YOUR game. Not what other people want from it :)

I’m dabbling in irrlicht at the moment, but I have not yet had a proper look at Coppercube. Your demo /seems/ to be multi-threaded—I’m seeing graceful loading of texture resources in play. Is this correct?

At the moment I’m enjoying the demo best by getting the forward-walk key stuck on and then defocusing the window. The game explores itself :)
Hales () - 18 09 13 - 12:03

Thanks for the feedback, that’s exactly what I am also thinking.
About threads: Yes, it is emulating threads in order to be smooth when creating the world. Emulating because there isn’t something like a real threads in JavaScript (web workers come close but they are useless for this kind of app). Have fun with irrlicht :)
niko - 18 09 13 - 12:37

French language keyboards use AZERTY. See:
jonjon - 18 09 13 - 12:54

I am impressed
Martins1 - 20 09 13 - 22:25

Quite a massive leap from ‘Darkness Springs’. Truly incredible.
Tim - 23 09 13 - 09:14

irrlicht saved my neck in a project back in 2007/2008. i hope this engine grow commercially like unity
john () - 25 09 13 - 06:42

Wow, not bad niko!
It looks like in the 90s, were 3d real time computer graphic just started. And now 20 years and many GHz and GB of ram later, this graphic has finally found a revival. Thanks to the usage of JavaScript and and WebGL. Good work, keep up doing what you do, this definitely the right way, it will push the computer graphics boundaries a little bit further.
Native Programmer - 26 09 13 - 22:52

Remember personal info?
Email (optional):
URL (optional):
Enter "layered" (antispam):
Comment:Emoticons / Textile

  ( Register your username / Log in )

Notify: Yes, send me email when someone replies.  

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
Note: If you type in your email adress above, it will be visible to other visitors, although it will be hidden for bots using javaScript.