Author Archives: numb3r23

WebGL-Paccer (more three.js)

Here’s a little simplified version of a rather known game I’d like to call “WebGL-Paccer”. You play as a yellow ball, trying to eat all the dots before the enemy gets you. Yeah, that one.


Even though it has a distinct “retro” look, I added an FXAA-aliasing and a bloom-filter to it. I tried doing some dynamic cube-map for floor-reflections, but it didn’t fit the theme.

Maybe in an extended version could not only add more enemies (Blinky, Inky, Pinky, Clyde) but also some more fx. I loved Geometry wars, maybe some effects from them could fit in here…

WebGL: three.js & dat.gui.js

I’ve uploaded an updated WebGL demo I wrote some time ago. It shows a vertex displacement shader on simple models and applies some screen-space image filter (=fragment shaders) to it:

Here are selected screenshots:

Screen Shot 2013-05-17 at 7.03Screen Shot 2013-05-17 at 7.07

Screen Shot 2013-05-17 at 7.04Screen Shot 2013-05-17 at 7.06

The effects implemented are:

  • Vertex shader displacement
  • TwoTone shading
  • CEL-Shading
  • Gaussian Blur
  • Image Enhancement by unsharp masking the depthbuffer
  • Gamma/Contrast/Brightness adjustment

Github: GLSL shader library

Modern OpenGL relies heavily on GLSL shaders. They are needed for pretty much everything you draw. To ease the handling of shaders I’ve decided publish my shader-collection (well, part of it, for now) on github. The shaders are sorted by GLSL version (currently: version 1.5, webgl 1.0) and “purpose”. Their implementation is focused on readability, not speed. Hence, they can be optimized quite heavily and be combined as well. Anyway, here’s the link:

I’m planning on continuously adding shaders.

Github: OpenGL 3.2 core Render-library [cpp]

I’ve shared parts of my rendering library on github:

here’s a feature list:

  • OpenGL 3.2 core profile rendering
  • cpp, compiles with gcc & VS 2010
  • cmake project-file
  • focus on Imagefilters via GLSL fragment-shader

Here’s a little code example on the usage:

using namespace SciIllLib;

CFilter fltFXAA = new CFilter();

SFilterEngine::ReGenerateTexture(&m_rtScene, GL_FLOAT); SFilterEngine::ReGenerateTexture(&m_rtFinal, GL_FLOAT);

... render as usual ...

SFilterEngine::Apply(fltFXAA, m_rtScene, m_rtFinal);
SFilterEngine::ToScreen(fltDisplay, m_rtFinal);

Of course it can do much more – load textures, load models, …

Video: Spectral rendering on the GPU – soap bubble!

I came up with an idea for a soap-bubble shader!

Two-sided soap bubble thin-film interference

More generally speaking it does dynamic thin-film interference of hollow convex two-sided objects in a deferred rendering configuration. In two passes front and back are rendered and the ray is traced through the object. To give you a better idea I screen-captured my demo-program and uploaded it:

As before all physical parameters of the shader can be changed at runtime (as seen in the above video). Bear in mind, that the program uses OpenGL 3.2 core and runs on my late iMac 2011 – it uses a Radeon 6960M, a mobile GPU.

The cube maps are from Emil Persson and can be found at humus’s textures. The head model is copyrighted to © I-R Entertainment Ltd., taken from Morgan McGuire‘s Graphics Data.

Spectral Rendering on the GPU – now with bumps

My GLSL spectral rendering shader (here & here) is now able to do some (environmental) bump-mapping. It does physical wavelength-based thinfilm interference with sampled SPD‘s on the GPU in realtime. All parameters are adjustable at runtime. I’ve implemented five distinct “film-setups” that have different ways to interpret/change film thickness and normals of film and object surface. The setups are outlined in this sketch:


Here’s a textual description:

  1. A simple film with constant thickness covers the object.
  2. The surface of the object is “bumped” and the film has a constant thickness.
  3. Both object and film use regular normals, but the thickness of the film varies. This is fake but looks nice:D.
  4. The object remains unchanged while the film (thickness + normal) is bumped. Basically 3, but correct.
  5. The object is bumped and the thickness is modulated such that the film’s surface is “flat”(like setup 1). The inverse scenario of 4.

Finally some screenshots from the same angle and same film settings: refraction index=1.09, tilm-thickness:550-1170nm, CIE D65 light, silver material. The matte utah teapot is shown on the left, the shiny teapot on the right:

Teapot_Matte_Setup1 Teapot_Shiny_Setup1Teapot_Matte_Setup2 Teapot_Shiny_Setup2Teapot_Matte_Setup3 Teapot_Shiny_Setup3Teapot_Matte_Setup4 Teapot_Shiny_Setup4Teapot_Matte_Setup5 Teapot_Shiny_Setup5

(Click on image to enlarge)

I hope to be able to record a demo video soon (~ this week). While going through the sourcecode I also noticed that there’s no dispersion as the refraction index is const. This should be easily adjustable, I just need some data. 

Also, while the uffizi gallery is nice I’d like to try out some other cubemaps ( from Humus) and some other models. Maybe a wobbling soapbubble?

wavelength-based thinfilm interference

I managed to successfully port some cg shaders over to glsl, gave them a spring-cleaning and integrated them into an OpenGL 3.2 core renderer (yeah, OS X 10.8 if you have to ask – bummer). It is kinda “the real deal”: thinfilm interference evaluated per lambda with interactive refraction indices, light + material spectral power distributions and thickness. I might have more results soon, so far these images below have to do:

Alien, smooth surface, film: 400nmAlien, semi-rough surface, film: 340nmAlien, rough surface, film: 430nm

Besides I still have other work todo, writing down my ph.d thesis…


I just uploaded my SpectralLibrarian to

It’s written in C# and allows you to create, edit and manage spectral data.

  • Spectras can be manually entered, imported from CSV, captured from an image, ….
  • Libraries can be saved/loaded/exchanged
  • Spectras can be put together in collections and stored into various filetypes
  • Spectral points are interpreted as peaks or as linear interpolation guides
  • Few lights & material spectras are provided in data-subfolder

I needed it for a spectral-rendering project to manage and export textures containing the spectral data.