Home / Javascript / Flaming Flowers – WebGL + Projection

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 :D

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.



One thought on “Flaming Flowers – WebGL + Projection

  1. blog

    12 May on 2014 at 6:31 pm

    I was very pleaseed to uncover this website. I wanted to thak you for your time due to this fanntastic read!!
    I definitely appreciated every bit of it and I have youu bok marked to chek
    out new information on your site.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>