HTML5 Example

This data visualization was produced by Google as part of the 2012 Google Ideas INFO (Illicit Networks, Forces in Opposition) Summit with support from the Igarape Institute and data provided by the Peace Research Institute Oslo (PRIO) small arms database. The data includes annual customs report data providing >1 million data points of individual exports and imports to map the transfer of small arms, light weapons and ammunition across 250 states and territories across the world between 1992 and 2010.

HTML5, JavaScript, WebGL, WebGL Globe

Nucleal, a WebGL experiment that explores particles birthed by photos, transformed by physics. Explode, particle wave, imposion and more effects powered by the graphics unit, this experiment can drive an insane number of particles at neck breaking speeds.

Explore the particles in a 3D field with your mouse.

New: import your Facebook photos to create an slideshow of explosions.

WebGL Shader Texture Canvas3D

Particles WebGL

Audio by Jon Baken

traer.js, paper.js

Not WebGL

A real HTML5 bomb, powerful enough to destroy the web!

js, css(2d transform)

Not WebGL

Some months ago I was browsing webglstats.com and I realised that 95% of all the systems that supported WebGL also supported the extension OES_texture_float. This extension opens the door for textures with 32 bit float precision per channel instead of the usual unsigned 8 bit integer.

This also allows all sorts of trickery. Suddenly you can store, say, 1 million particle positions into a 1024x1024 texture and in the vertex shader move the particles to wherever the color in the texture says.

On top of that, add the generosity of zz85 on moving the particle simulation from javascript to a shader directly (aka fom the cpu to the gpu) and you end up with a neat and performant toy.

I have to be honest though, I don't yet control the simulation code. It just happens to be stable and cool looking.

webgl, glsl, three.js

WebGL