Demo of perspective-correct video texturing in <canvas>, by adaptive triangle subdivision.

This is a demo of using video as a source for perspective correct texturing in a HTML5 2D <canvas>. I (datenwolf) mainly did just a merger of two existing HTML5 demos.

The one, of which the majority of this code consists is the original perspective correct texture mapping demo.

The other is a demo of interactive video maipulation in <canvas> of which I took the trick to first copy the full video frame into intermediary canvas, and then use that one as source for the image transformation operations (I think this step increases performance, because each call on drawImage(...) on a video element starts a full frame decoding, whereas an intermediate copy will decode only one. Honestly, I think this is a issue of the browser implementation, as every sane media player keeps a cache of decodec video frames around, so instead of full decoding only such a cache should be accessed). I also took the Big Buck Bunny clip from there.

blur: wireframe: subdiv factor: (optional) non-adaptive depth: fps: - tris drawn: -

If it's slow or spiderwebby, try Chrome. If the image disappears, refresh the page (NaN somewhere, sorry about that).

See the page of the original perspective texturing demo for additional information about the implementation: Original demo by Thatcher Ulrich, tu@tulrich.com 2009-03-01

Video texturing added by Wolfgang 'datenwolf' Draxinger foobar@datenwolf.net 2010-07-02