Monday, 31 December 2012

Procedural Skybox WIP

I've been learning JavaScript. I thought that a great way to get started would be to try some 3D graphics in the browser using WebGL.

It has been great fun, thanks to Three.js, a lightweight 3D JavaScript graphics library. The examples of it in use are pretty cool and it's clearly going places, and it's incredibly easy to use thanks to the vast number of said examples means you can dive straight into those to figure out what's going on.

So, I had a shot at doing an atmosphere simulation with sun and clouds. I hooked it into date and sun position libraries and have a realistic day-night cycle going thanks to that. The aim is for it it all to be procedurally generated and realtime. On my computer (with a Radeon 5750) it runs at a steady 60fps at 1920x1080 resolution.

The atmosphere is an attempt to be fairly realistic and account for atmospheric scattering. This walkthrough by Florian Boesch made the maths really clear.

I am going for a wispy oriental look for the clouds, like how I would imagine clouds in a game like Okami would look, but with a 3D appearance. It turns out that it's relatively easy to create the effect using turbulent noise, rather than generating realistic clouds.

Here's what it looks like now:




I am currently up to adding some extra bits like JSON models and a minimap. Also, collision detection using Physijs.

Eventually I will add proper lighting for objects in the world and add some nicer models, and then release the code. May try to get it added as a Three.js example, if it turns out well.

On a related note, wow, check these guys out: Reset Atmosphere Tech WIP

No comments:

Post a Comment