WebGL Tadpoles

// August 14th, 2011 // Experiments, WebGL

Its been a while since my latest blog post, I spend this year renovating my new house and office. I also became more and more frustrated by the slow speed of Flash for my experiments, so I started learning C++ and OpenGL. Which is coming along fine now. I made a C++-OpenGL Kinect installation for a client, made an IPad app in C++ and OpenGL ES2 etc.

And although I still do a lot of Flash development for clients, I kind of lost track on what’s happening on the web. So I was surprised to see what has become of WebGL. And with OpenGL more and more becoming my new love, I thought I give it a try and remake a C++ experiment I did in JavaScript.

It uses derivatives in the shader, which is an optional extension in the WebGL specifications, and as far is I can see, its only supported by Chrome at the moment. If you have the HTML5 audio API enabled, it reacts to the music (very basic, just some speed adjustments).

» Visit the experiment (needs Google Chrome)


The 30 tadpoles are Inverse Kinematic chains moving in a 3D Perlin Noise vector field. And since they aren’t static objects, I have to project the vertics and calculate the normals every frame in JavaScript. In that sense, the JavaScript speed is reasonable. But as always, I was hoping for more. In C++ I can easily render +500 tadpoles with 4 times as many triangles per tadpole . It should be interesting to see how fast Flash can do this… maybe I try that later.

To get some anti-alias, I render it first in a frame buffer object 9 times the window size (width*3, height*3). So, no complaints about the WebGL speed… for now… ;)

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

5 Responses to “WebGL Tadpoles”

  1. [...] demo only appears to work in chrome at the moment, and Kris has written up a post with some of the details behind the making of [...]

  2. Hey! Good to see you blogging again :O)

    Was just looking to get started with fractal landscapes and wondered by.
    I hope Molehill can lure you back to Flash, it’s a gas, gas, gas!
    It’s as if their’s a whole new continent to explore and if Adobe supply the level of ubiquity they’re striving after, it should be the place to be as far as interesting commercial work goes. WebGL is all very cool, I’m sure, but it just gives me flash backs to the 90′s as far as feature adoption per browser version, etc.

  3. [...] From Kris Temmerman, some (Chrome-only, uses OES_standard_derivatives) WebGL tadpoles. [...]

  4. Jan says:

    Thanks for sharing! Hopefully we’ll see some more WebGL on your blog in the future. I moved from from flash to WebGL as well for experimenting in my free time, it just feels so giddy to create these supersmooth and over the top visuals inside a browser using JavaScript haven’t even looked at molehill yet :) Make sure to check out THREE.js if you want more speedy development in webGL, It’s an awesome libray.. Keep up the good work!

  5. Paul says:

    Works ok in Firefox 11. Nice work.

Leave a Reply