I prepared some slides on a presentation on
distance fields and what you can do with them:
A note on the navigation:
space for the next slide
backspace for the previous slide
left/right to jump to the next chapter
up/down to navigate in current chapter
i wrote a little demo with a modified lambert function in webgl:
You can clamp the illumination into the “brighter” colors that is expanded into the (usually unlit) back areas and thus allows you lit the whole object. The light can be toggled between a (fixed) lightsource and the camera-position. This is usefull if you (cheaply) don’t want to show “dark parts” of 3d-models while still showing the structure. It can be further tweaked (not implemented yet!) by adding gamma or a two-tone mapping.
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…
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:
The effects implemented are:
Vertex shader displacement
TwoTone shading CEL-Shading
Image Enhancement by unsharp masking the depthbuffer