Advanced WebGL - Part 1

Apr. 11, 2011

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).

Video and Screenshots

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).

WebGL Caveats

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.

Architecture Overview

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.

Features include:

  • 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

Below is an overview of the rendering pipeline (also available as full size image and pdf)

The next part

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.