http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/
Blowing up HTML5 video and mapping it into 3D space; No Flash required
Thursday, April 22, 2010
"Ive been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. [One API] lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime," Sean Christmann reports for Craftymind. "Two concepts instantly came to mind that seemed like fun to try."
Best viewed in WebKit-based browsers like Apple's Safari.
Blowing apart fragments of video: Click around the video frame to blow up that part of the video, the exploded pieces will continue to play the video inside them. After a while they retract back to their original place.
3D Video: This demo in particular runs really well inside webkit based browsers, but not so much in Firefox. Firefox doesnt appear to have any hardware acceleration for Ogg decoding so I had to drop the video size in half in order to run at acceptable framerates. Even still, Firefox chokes pretty badly on my Macbook Pro. *Update* Ive changed the ogg video to be 640 x 360, prepare to see firefox weep.
Blowing up HTML5 video and mapping it into 3D space; No Flash required
Thursday, April 22, 2010
"Ive been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. [One API] lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime," Sean Christmann reports for Craftymind. "Two concepts instantly came to mind that seemed like fun to try."
Best viewed in WebKit-based browsers like Apple's Safari.
Blowing apart fragments of video: Click around the video frame to blow up that part of the video, the exploded pieces will continue to play the video inside them. After a while they retract back to their original place.
3D Video: This demo in particular runs really well inside webkit based browsers, but not so much in Firefox. Firefox doesnt appear to have any hardware acceleration for Ogg decoding so I had to drop the video size in half in order to run at acceptable framerates. Even still, Firefox chokes pretty badly on my Macbook Pro. *Update* Ive changed the ogg video to be 640 x 360, prepare to see firefox weep.