Home / 2013 / January

Light smoke

UPDATE:

http://www.bongiovi.tw/experiments/webgl/smokeVideo/

I tried to put this affect on a video, first i remove the darker part of the video to get the “light map”. Then do the exactly the same thing, the result is quite interesting, move left and right to play. Kind of psychedelic feel 😀

http://www.bongiovi.tw/experiments/webgl/lightsmoke/

Just trying to redo the smoke effect with js/webgl, i tried once but the result isn’t that good, then i found out that i have to set the blend function to

this.gl.blendFunc(this.gl.ONE, this.gl.ONE);

to get the best result.

 

Actually it’s quite easy to create this effect, all you need is a background, a light map and a noise. In each frame i just keep apply a displacement effect on the light map, so it gets more and more distorted and in the same time we dim the alpha a little bit in each frame, then you will get the fade out effect and that’s it, really simple, just don’t forget to add the light map again every frame, or the light will fade out very soon.

Video Texture and cross hatching in WebGL

I was watching “Castle in the sky” with my little daughter the other day, and i was fascinated by its opening title, i strongly recommend you to watch it, it’s amazingly beautiful.

castle

 

So i was wondering if it possible to create this kind of pencil sketch feel style with shader, it turns out easier then i thought, you can see an excellent post here.

I tried to apply this shader on a video, i think it’s always more interesting then a static image, and i did it. In fact it’s really easy to use video as a texture, but just make sure both the width and height of your video is power of 2 ( 256, 512 , 1024 …. )

Also I’m using the little class i wrote called GLTexture and GLTextureFilter to apply this effect. I am a huge fan of Pixel Bender, it is fragment shader basically and I always enjoy playing with pixels. So i decide to create this little tool to help me build the effect faster, you can find it here on my github. I’m just starting on Javascript so please let me know if i made some stupid mistakes 😀  For the usage there’s a simple example on the github. Hope you enjoy it 😀