HTML5: Video, 3D, Javascript and a Big Buck Bunny

Wednesday, April 21st, 2010 | Business | by

An article written by Sean Christmann over at Craftymind reviews some cool effects you can create with HTML5, Video and 3D featuring the Blender created Big Buck Bunny.

From the article:

I’ve 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 of those is the Canvas.drawImage() api call. Here is the description on the draft site.

The 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. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below.

The article cites the W3C Working Draft of html5’s drawImage functionality.

He includes some nice hints at the inner workings of HTML5:

There’s a couple hints I found out along the way that are good to know if you want to play around with drawing video. First, you need a bit of hackish code to get this to work effeciently and it flows like this.

[Video playing] -> [Draw Video onto Canvas 1] -> [Draw fragments of Canvas 1 onto Canvas 2]

Don’t ask me why, but copying pixel data out of a video tag is expensive, so expensive that drawing it into a temporary canvas, and then drawing pieces of that temp canvas onto a final canvas is faster then just referencing the video tag repeatedly within the same loop. That’s why you’ll see 2 Canvases in the source code for the demos. I’m sure there’s a technical reason for this duplication process, but it’s a lazy reason.

Good stuff — also nice to see Big Buck Bunny featured!  For those who don’t know, Big Buck Bunny was created entirely with open source software (yup, all free) — predominately using Blender.  Below is the video — all built with Blender.

Big Buck Bunny from Blender Foundation on Vimeo.

Related Posts

Tags: , , , , , , , , ,

No comments yet.

Leave a comment

*


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template