Home / Javascript / Video Texture and cross hatching in WebGL

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.



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 😀

Leave a Reply

Your email address will not be published. Required fields are marked *