Home / 2013 / July

Texture in vertex shader

LINK

It’s such a shame that I only discover that you can get the texture data in the vertex shader recently. the texture2D method is not fragment shader only, this opens another world to me. Like this particle video example that i have rebuild for thousand times, now it’s extremely easy to build. Because i can just update the video texture and calculate the new position with the pixel, therefor i don’t need to re-upload the vertices position every frame. The resource saved allow me to do more e.g. using a texture particle, and create a simple dof effect.

here is how the vertex shader looks like :

vec4 colorVideo = texture2D(uSampler2, uvRef);
vec3 pos = aVertexPosition;
pos.y += colorVideo.y * offset;

when uploading the vertices you need to pass an extra uv coordinate so you know where to pick the color from the video texture, which is the uvRef in this example, then calculate the offset you want and add it to the position of the particle. That’s it, hope you enjoy it !

Flaming Flowers – WebGL + Projection

I have built this experiment for a while, and I’ve always wanted to project it on my back yard and see how it feels. Finally I borrowed a projector from a friend ( Thanks Henry !) this weekend and finally make it happen.

It goes better then I expected, now I’m really considering to buy a projector for my own. It’s really amazing how different it is when in different scale and environment, and also another amazing thing is that the moment i project it on my wall my kids start right away to touch it and try to interacte with it. I was a little afraid about how the kids will react with the projection, but now i know it’s going to be fine. So the next step will be adding the interaction using kinect, hope i can get it done before this summer ends, or they’ll only be able to play indoors.

the demo is here.

The main difference of this build and the last one is that I put everything in WebGL instead of create the animation in canvas then create the texture from it. The idea is still the same, use a video texture as a background, then apply a mask on top of it.

texture_mask

That’s it, it’s not super complicated, but require more work on preparing the assets and creating the simple IK bones. I’ll move on to the next stop to make it interactive and hopefully i’ll get enough time to finish it this summer 😀

P.S. I have record a small video of the projection, unfortunately my camera is not powerful enough so the quality is not the best, if you are still interested in how the projection looks, the video is here.