Thursday, September 8. 2011
Testing WebGL
One of the common topics of this blog is the HTML5 standard and its multiple new features. Today I am going to test WebGL, which is a standard specification to add 3D graphics in a browser canvas element without using any plug-in or external component (so it is not part of HTML5 itself but depends on it). Obviously this feature is deeply connected to graphic hardware acceleration because any WebGL application needs to be GPU accelerated in order to run smoothly. WebGL is a breaking new feature in the web world and another element of great controversy among browsers. If you remember, the canvas element was already commented in a previous series of this blog, but there only 2D graphics were shown.
WebGL standard is being driven by the Khronos Group and all players in the web are involved (Apple, Google, Mozilla and Opera) except Microsoft. The corporation headquartered in Redmond rejects this standard and has declared several times that IE will not support it, they consider WebGL harmful in terms of security and they are not totally wrong.
The summary of the current situation is more or less the following. Chrome (initial webGL support in version 9) and firefox (version 4 also added WebGL) support WebGL in Windows (and I think Mac OS) and it is enabled by default. Opera does not support it although there is a WebGL preview version for its version 11.50 only for windows. On Mac OS Safari was adding the support in their WebKit nightly builds but maybe in Lion WebGL is already supported (sorry but I am not a Mac OS user). There are some summaries of the supportability matrix, for example in the Khronos page or in the first chapter of this tutorial, but this is a constantly changing subject so please always re-check. Nevertheless the main problem comes in the Linux world. Here there are a lot of problems related to the implementation of many graphic drivers, firefox reported issues with Linux GPU drivers and both chrome and firefox added a gpu blacklist to disable some features (WebGL mainly) depending the driver and the OS involved. Firefox 6 and 7 are supposed to remove more and more drivers from the blacklist, same behavior is expected in the next versions of chrome, as soon as linux driver implementations became more reliable. In summary current browsers in Linux hardly support the nvidia binary blob as the only out of the box WebGL driver (at least in my case my two boxes are blacklisted, my desktop uses gallium R300 driver and my laptop classic intel stack).
After this little introduction I am going to present a quick demo of WebGL. I am very, very interested in porting my PFC project to a web version. It is incredible to me how a 12 years old project (which had to be run inside a SGI server) can now be run inside a browser. If you remember what I told in that entry, I lost my code and all the data (mesh and textures) because of a broken CD, so this implementation is only a simple demo with new and fixed data (there is a lot of room for improvement). The demo has the following features:
- A fixed height mesh is retrieved using a static json file. This file contains the starting latitude and longitude of the mesh, the number of points (rows and columns), the length or step of each side, the matrix data and a lot of configuration parameters. This mesh is not drawn completely. In OpenGL and WebGL (they are very similar) the idea is simple, all the figures are sent to be drawn and depending the perspective, camera and other elements the engine draws what is needed. But in my PFC the mesh was so big that only a part of it was sent to be drawn. I have followed the same idea in this demo.
- Basic camera management. The camera is implemented using its own axis, this way the camera can turn and move following natural keystrokes and mouse movements.
- Tile representation and painting. In the real application every satellite image was the texture for a tile mesh (50x50 points). This way the part of the mesh that corresponded to an image was painted independently (the application drew each square of mesh with the associated texture). I have implemented the same here but, in the demo, there is only one tile (a 8x8 tile) which is repeated all the time horizontally and vertically (11 times in each direction).
- Easy texture loading. A simple FIFO queue has been implemented to load and unload images. Actually this is not used in the demo cos only one image is used (there is only one tile which is repeated, so only one texture is needed and the queue is never filled).
- Basic ambient and directional light for emulating the sun (in my PFC there were more environmental effects like sky, fog,...).
- Management of the configuration parameters. I have used the new input type number which is only supported in some browsers. HTML5 is everywhere.
The whole demo is below, integrated in the entry using an iframe. It is a pity that I cannot have at my disposal the real data from my PFC (damn CD). As I said a simple pattern (only 8x8 points) is repeated all the time (11x11 tiles). This way I do not upload a lot of images to the server. How to navigate using keyboard or mouse is explained in the right part of the page.
Remember what I have said before, in order to test this example you need a modern browser if you use Windows (firefox, chrome or the Opera 11 preview but not IE9). In Linux you need firefox or chromium but usually you need to disable the black list. Debian testing packages have just been upgraded to Chromium 13 and iceweasel 5 respectively and both support WebGL. In chromium the blacklist has to be ignored starting the browser with the following option:
$ chromium --ignore-gpu-blacklist
In Firefox I have changed some webgl settings (in the about:config page):
webgl.disabled | false (default) |
webgl.force-enabled | true |
webgl.force_osmesa | false (default) |
webgl.osmesalib | /usr/lib/x86_64-linux-gnu/libOSMesa.so.6 |
webgl.prefer-native-gl | true |
webgl.shader_validator | true (default) |
webgl.verbose | true |
And the browser has to be executed with the following environment variable:
$ MOZ_GLX_IGNORE_BLACKLIST=1 iceweasel
This entry is doubtless the one that I have spent more time working on it. I was developing the JavaScript code long hours and I have to admit that I started it some time ago (last months I have been quite busy and I was never in the mood to finish it). Documentation about WebGL is very poor and thanks to this good tutorial I could start the development, but when you need something special, custom or a mix of things you usually wasted much time just trying to identify how to do it. In summary current WebGL support is quite a mess (much more in the Linux world) but it is an essential feature to move gaming to the web. When I saw that quake was available inside a browser I was totally shocked. I personally think this technology is unstoppable, no matter how buggy or insecure it was. Needless to say, flash is the current option for all of this, so WebGL should be very buggy and very insecure to be unworthy.
Long life to the web wars!
Comments