*blog... kind of... *rss 



Javascript plane deformations June 14th 2010, mr.doob
It's not the first time I mess with plane deformations, I also did some Pixel Bender experiments with them some years ago.

The principle of this technique is to apply a formula to every pixel of the output bitmap. If you know about shaders of Pixel Bender you know how this works.

Depending of the formula you're going to deform a source texture creating different forms. Javascript seems to be quite fast doing Math computations, the bottleneck, as usual, is drawing the pixels to the bitmap. So I thought it was worth porting the code and the formulas in order to get a base for it and have yet another experiment to test the new browser versions with.



Once again, using shaders we'll be able to do this kind of effects with much better resolution and speeds as soon as WebGL gets enabled on browsers by default.

Until then, feel free to take a look at the code and mess with the formulas.

4 comments written so far...

Awesome, Mr.Doob ;]
June 14th 2010, hush
Very beautiful javascript!
June 15th 2010, Belisma webdesign
You should check out "Shader Toy" by Inigo Quilez - It's an online WebGL Shader editor, which is very similar to Pixelbender. He's done some amazing effects with it. Inigo currently works for Pixar - and the tool is really far out.

http://www.iquilezles.org/apps/shadertoy

Unfortunately at the moment the site is down but here is a screen of it in action : http://blog.hvidtfeldts.net/index.php/2010/02/shader-toy/

June 15th 2010, Tony Volpe
I know Iñigo ;)

If you check the Pixel Bender post you'll see a link to his original tool (before the shader toy one).
June 15th 2010, mr.doob

Have your say!



Name:

Website:

Comment: