Monthly Archives: May 2013

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, …