When you think of WebGL you probably think of amazing 3D demos, games, and things like that. You probably never think of slideshow transitions. Gaëtan Renaudeau (@greweb) has put WebGL to use for just that in this small GLSL-Transition experiment.

Assuming you have a WebGL capable browser (which is probably a safe assumption here) the transitions are buttery smooth. And the tool let’s you select and effect – ripple, page turn and wind to name a few – as well as the duration, delay and easing. It’s probably overkill for your next image slideshow, but still worthing checking out. For full documentation and all the source, check it out on github too.

GLSL-Transition
Gaëtan Renaudeau (@greweb)

Project 2^19 points onto a texture, calculate blur, use the gradients to update the particle positions, mumble a magic spell and you get a beautiful shader / WebGL powered effect like this by Felix Woitzel (@Flexi23). Move the mouse through the particle field to play with the fire.

Just don’t cross the streams.

So what does 291 lines of WebGL shader code buy you these days? How about a full 3D fly-through of a fractal constructed ancient temple styled structure, with pulsating beams of light running up and down the vibrating columns. Add to that a fully raytraced sphere, accurately reflecting the environment it’s whisking through and liberally mix in a bunch of post effects and finish off with optional mouse controls.

Generators Redux by Kali is a new experiment over on Shadertoy, and nothing short of stunning in all of its GPU melting glory. And you will need a gaming-class GPU to experience this. But it’s well worth the trip. Be sure to check out some of his other fractal inspired shader toys while you’re there.

View Generators Redux on Shadertoy.

We see a lot of particle effects here on CreativeJS, and every now and then a demo stands apart from the rest. GPU particles is an beautiful interactive particle experiment by creative coder Justin Windle (@soulwire). Amazingly, all of the physics calculations are done within a shader, meaning the GPU does all the heavy lifting, allowing the WebGL context to render a whopping 1,048,576 particles at 60 fps.

The project is open source and was itself, part of a much bigger talk about dissecting WebGL (which is definitely worth checking out as well).

GPU particles by Justin Windle (@soulwire)

Here’s a fun shader designed to look like hand drawn cross-hatching that uses three.js to render 3D objects (including my favourite – the knotted torus).

Based on a research paper published by Hugues Hoppe in 2001 at SIGGRAPH, it’s a pretty nice effect.

Cross-hatching GLSL shader by Jaume Sanchez

Decomposing images into a bazillion dancing particles certainly isn’t a new idea, but this three.js based demo from @BlurSpline is a particularly (heh) nice example.

Spherical repulsion and noise are among the transition effects available, and while the reformation of each subsequent image could be a bit smoother, the overall effect is still rather pleasing.

The majority of the heavy lifting is in the shaders, which are fairly readable in the source – worth a look, as always!

Photo Particles by @BlurSpine

Environment maps are extremely useful when we want reflections and refractions in our WebGL work. If you’ve not come across them before you have to imagine that the 3D scene is in the middle of a huge cube. When we want to know what an object is reflecting we bounce a ray (an invisible line that goes from wherever we are in the scene to the object) off it and see where it hits our cube. It’s very neat and it works really well.

By default, however, WebGL only supports working with a cube (called a cube map) rather than the alternative, which is a huge sphere (handily called a sphere map). This means that if you start off with a sphere map (from an app like PhotoSynth) and you want to use it in your WebGL scene, you’re going to need to convert it.

Well no more! Jaume Sánchez, with a little tweak help from Mr. doob, has been working on a way to use images which are based on sphere maps rather than cube maps. In case you’re wondering what that means in real terms, it means you’d no longer need to convert your sphere maps and, as in the case of Jaume’s demo, you can use Google’s Street View images! In the middle of the screen you’ll see that Jaume has placed a shiny knot that reflects the current Street View. It looks all shiny!

Sometimes we look at these demos and, while they’re great in their own right, it can often be what they inspire us to create next that can be more exciting. How will people use real world locations in their own 3d work? I don’t know, but I’m itching to find out!

Floating Shiny Knot by Jaume Sánchez

Early March was a good time to be a creative coder in San Francisco. Organised by the Gray Area Foundation For The Arts (GAFFTA) and The Creators Project, ArtHack Weekend SF was a hackathon dedicated to creating HTML5 and WebGL toys and demos with an artistic bent.

Over two pizza-and-beer-fuelled days, coders created a variety of demos and interactive installation art. Unfortunately, most of the finished works can’t be viewed online, but the two jury-selected winners are available. In addition to the kudos of winning, these projects were also featured in The Creators Project: San Francisco which took place March 17-18th alongside new interactive art pieces from Chris Milk (of The Wilderness Downtown fame) and Casey Reas (co-creator of Processing).

soundQuake

SoundQuake is a visualisation and audio representation of San Francisco earthquake data since 1973 (using banjoes). The tool uses three.js to create a 30×30 voxel representation of the Bay Area then ‘plays through’ seismic records along a timeline with each earthquake sending ripples through the land accompanied by a lonely banjo chord. The authors’ intention was to create a “meditative experience that is simultaneously literal and abstract” and they’ve succeeded. If you leave it on the default settings, you do find yourself strangely anticipating the late-1980s where there’s a swell of activity turning the calm landscape into a storm-whipped sea and making the banjo play dischordant bluegrass.

The source is available from GitHub but can be prone to throwing exceptions and breaking, unfortunately.

Audio ShaderToy

The Audio ShaderToy is a combination of the Web Audio API and WebGL into a tool to enable visualisations of audio files dragged into the browser. It’s kind of like the GLSL Sandbox for audio. When I say “It’s kind of like”, I mean “It’s exactly like” although, in addition to using elapsed time and mouse position to vary the output, it also exposes the current frequencies of the audio track and allows you to set the number of bands in the analysis.

In much the same way that the GLSL Sandbox can be a time sink, there is something wonderfully hypnotic about hacking away at some floating-point calculations while patterns shift in the background in time with the data you’re working with. Given the right backing track, one could easily surface from the keyboard head swimming after several hours of mixing music, colours, equations and algorithms. Personally, I had They Might Be Giants on repeat. Each to their own…

SoundQuake by bowman224
Audio ShaderToy by notlion
Other demos created during ArtHackSF

Ambient occlusion is a great effect that provides more realistic lighting to objects in a 3D scene. It works by looking at the scene geometry to see what is nearby; floors, walls or other geometry. In the real world the effect we see when objects are near each other is subtle shadowing – this is the effect ambient occlusion creates, and very convincingly so! The main downside of it is that it’s really intensive (read: slow) to calculate properly, so to render it in real-time we do what the very best of us do: cheat. Cheat like dirty, rotten scoundrels.

The proper non-cheated effect is generated in 3D space, but instead we calculate the ambient occlusion in something called “screen space”. In other words, we use the information that we’ve already calculated when the scene was rendered, particularly the depth information, and reuse it to approximate the soft shadows. There are a few benefits of doing it this way: it can be done entirely on the GPU, it’s independent of the scene’s complexity (because it’s calculated per-pixel and not per-object) and it can be dynamically recalculated as the scene changes. Of course it’s only an approximation of ambient occlusion so you’re trading out accuracy.

If you’re wondering what this effect looks like, you’re in luck. It turns out prolific creative coder and Three.js contributor, AlteredQualia, has you covered. He’s written a very nice demo showing screen space ambient occlusion (or SSAO as it’s typically known). The demo also allows you to toggle tilt-shift as well, but I’ll not get into that just now!

Take a look at the demo, and if you’re interested in ambient occlusion or its screen space sibling you should head over to Wikipedia or check out this tutorial from John Chapman. A little warning, though: it can get a little intense if you’re not into graphics programming.

SSAO with Three.js by AlteredQualia

Evan Wallace is a very clever chap. He brought us the WebGL water experiment, and he’s done several other high-quality experiments that are among the best I’ve seen. He particularly excels at demos that do the heavy lifting with shaders, and here’s the latest : a GPU Lightmap! The gist of the demo is that he makes a load of 3D planes and creates realistic soft shadows based on the positions and orientations of the planes.

To achieve the effect a virtual light is shone at each plane – if the light hits the plane it’s (perhaps obviously!) lit, if the light hits something else first then the plane is in shadow. This information is used to lighten or darken every plane’s material as needed.

The light is passed over the planes several times, from a different direction each time. The shadow map information from each pass is averaged with the previous passes. The quality improves over time as more information is picked up. The net effect of this is that you get lovely soft shadows.

Whether or not you love getting your head into these kind of heavier-duty graphics techniques I’m pretty sure you’ll enjoy the final effect.

The demo is one of several from his LightGL library, which is designed to provide extra capabilities to the WebGL API to make it more like its older sibling, OpenGL. If you like getting your hands dirty with raw or near-raw WebGL it’s well worth a look.

GPU Lightmap by Evan Wallace