WebGL is now enabled by default in both Firefox 4.0 and Chrome 10.0, so I thought I give it a try and see what I can get out of it. The goal was to render some simple terrain, nice looking sky and waving grass. In this part of the description I will give the overview of how that works.
It would like to post more entries like the following, but contract work I do to feed me keeps me away from that. You could help me by donating some money/flattrs if you feel like it.
A live demo is available. Use asdw for movement (qe for up/down) and drag the mouse to look. The cursor keys (left/right/up/down) change the sun orientation/elevation). You can also check out the code with mercurial.
If you have trouble running this on windows with chrome, try running chrome with the argument: --use-gl=desktop . This should disable the angle wrapper and go straight to OpenGL.
The Demo will tell you if you can not run it for some or another reason. I also capture statistical compatibility/performance data on the demo including the vendor, version, user agent, time, user and fps.
I am aware that this demo will not run for everybody, or that it will be slow. Unfortunately WebGL is early days, so hardware/software support is notoriously spotty. Also I am afraid it will not be possible to do GPU boundaries pushing demos that run well on unsuitable hardware (such as most laptops and graphics cards older then 2 years).
If you can not run the demo, below you will find a video and some screenshots.
(the music in the video is Home Part II by Armand Amar)
I was curious how much I can cram into a realtime demo in the browser. As it is, it took me about 3 weeks to write and it runs around 50FPS on my machine (GTX-460, chrome, linux).
Unfortunately, this demo will not run for many people, and I'm sorry for that. The reason for this is:
- Firefox will not run my demo since it lacks floating point textures
- It will not run on Windows since Google and their angle wrapper defer WebGL to DirectX9, which cannot do floating point textures.
- Since this is an experiment in how much can be done, you will need a powerful graphics card.
All rendering is performed into framebuffer objects. The pipeline is fully deferred, meaning that all lighting and effects take place after the scene has been rendered.
- Sky by atmospheric scattering
- Irradiance environment map calculated in realtime
- Screen Space Ambient Occlusion (SSAO)
- Multitextured detail albedo/normal mapping
- Pseudo-instancing for the grass
- Grass field LODing based on camera box wraparound
- Grass field animation based on simple euler spring integration and some random moving wind field
- Antialiasing by blurring edges in depth/normals
- Offline computation of TIN (triangular irregular mesh) from a high detail heightmap to a low resolution mesh
I will write more articles covering parts of this demo. The next one I will write is how I got the sky and irradiance map.