Webmasters Gallery

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.

Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.

Here are key things that occur during the main loop:

• first, the content of the video is injected in the main canvas. That’s why
  the canvas element looks like a video element;
• second, the position of the 2 brighter areas of the canvas are computed
  (you have access to all pixels values);
• third, the required transformation is computed (rotation, scale,
  translation);
• fourth, the content of the selected pattern is injected in the main canvas
  following the transformation.

A little drawing:

 

One of the major drawbacks of the Blender game engine is that it doesn’t support video textures. There is something under development but it is still in its early stages.

Panda3D on the other hand has solid support for video textures. Getting it to work is really easy:

import direct.directbase.DirectStart

#load movie texture from disk
tex = loader.loadTexture("trailer.avi")
#load 3D cube model (.egg file) from disk
cube = loader.loadModel("videotexttest")
#put the cube in the scenegraph
cube.reparentTo(render)
#set the cube's position
cube.setPos(0,42,0)
#apply the texture
cube.setTexture(tex)
#rotate the cube
cube.setHpr(45,0,0)
#scale the cube
cube.setScale(2)

#run the program
run()

The cube was created with Blender and then exporter with Chicken, a blender to .egg exporter.