this WebGL sketch loads MD3-Files (Quake3 model format), Skinfiles and Textures to display Quake3-Models (the models are borrowed from the Quake3-Demoversion: http://www.idsoftware.com )
The code to import of the md3-files (binary files) is almost the same as in the MD3-library for java/processing i made some time ago (http://thomasdiewald.com/blog/?p=1232).
after the models were imported, i tried to implement some visual effects: per-pixel-lightning, fog, a reflecting groundplane, DOF.
live-version: WebGL MD3-Viewer
the reflection is made by using the stencil buffer, to make a mask of the groundplane, and draw the models mirrored into the scene. unfortunately its not possible to define a custom clipping plane, as it can be done in OpenGL by using “glClipPlane(…)”, so i had to do some clipping by myself (for geometry that intersects the groundplane). so, to clip geometry anyway, the fragmentshader discards fragments, on which the z-value (worldspace) is above/under the groundplane.
the depth-of-vield effect improves the 3dimensional impression. especially when the scene is moved. my implementation is quite simple. the depth and color of the scene is each captured in a FBO (webgl doesnt support MRT, so two FBOs are in use). in the next step, each fragment gets blured, depending on its depth and offset from the DOF-distance. the blur-kernel has a fixed size of 5×5, but the neighbours offset varies, to get a smooth transition. this bluring is repeated twice (more would be better!). there is a noticeable halo effect, which could be minimized by including the depth-difference of the neighbours into the bluring.
notes on the live-version:
it will take a view seconds at the beginning to load all the textures, md3-files, shaders, etc.. If it’s taking more than 10-15 seconds, check your browser console for errors. if there are no errors, maybe webgl is not enabled. test it here: http://get.webgl.org/
also, it times faster on google’s chrome, than on firefox, but should work fine in both browsers. in case the framerate drops to much, minimize the browser until the framerate is acceptable, anyway it looks the best in browser-fullscreen-mode.
update (21.03.2012): some things changed for Firefox 11.0, so i had to update the script. now all files are loaded asynchroniously (and therfore the setup is faster and you can watch building up the scene) but i couldn’t test if its still works on older browser-versions.