Comments on: Fun with 3D CSS and video

By: Ajaxerex

Ajaxerex — Tue, 23 Jun 2009 04:11:01 +0000

In canvas we can not manipulate objects like in SVG and canvas is already part of the fab four (firefox, safari, opera and chrome)

I propose to use canvas.getContext(“SVG”) to merge canvas and SVG in order to join efforts, graphics and vectors, in one common tag.

Thoughts?

By: hansschmucker

hansschmucker — Mon, 22 Jun 2009 20:23:35 +0000

True for normal SVG, but the filters themselves are pretty fast… which is mainly the case because they’re so brain dead simple. They’re not very versatile, but as for raw speed, they cannot be beaten, because they are already native C.

By: zachstronaut

zachstronaut — Mon, 22 Jun 2009 20:17:00 +0000

It is impressive what you can do with SVG… however, my tests have convinced me SVG needs some speed improvements. If only browser vendors would work hardware acceleration into their implementations!

Here is a textured Wolfenstein 3D clone running at high frame rates using JS+Canvas instead of SVG:

http://www.benjoffe.com/code/demos/canvascape/textures

By: hansschmucker

hansschmucker — Mon, 22 Jun 2009 16:11:41 +0000

Here’s a pure SVG variant of the Mariokart filter. It does the transformation of the (large) map image using SVGTransforms, so it’s a bit on the slow side, but it works:

http://www.tapper-ware.net/stable/PerspectiveWith6LinesOfXML/index.svg

By: hansschmucker

hansschmucker — Mon, 22 Jun 2009 16:09:46 +0000

Because the filters are applied using a (for now) non-standard CSS property (“filter:url(#svgFilterId)”). They could also be applied using HTML>iframe(SVG)>filter>foreignObject(Canvas) or HTML>iframe(SVG)>filter>SVGTransform>SVGImage, I was just too lazy to set it up.
But the basic system works in all browsers that support feDisplacementMap

By: zachstronaut

zachstronaut — Mon, 22 Jun 2009 15:57:14 +0000

Hey, thanks for posting my demo. Ajaxian Editors: My name is actually Zachary Johnson. (Just my website is zachstronaut.com)

hansschmucker… those demos are incredible. I wonder why they don’t work in Webkit?

By: hansschmucker

hansschmucker — Mon, 22 Jun 2009 13:21:55 +0000

Nope SVG is very much alive and kicking. It simply needs a more accessible way to integrate it into normal pages and the CSS filter property is a nice first step. Next would be an image decoder. SVG is already big as an image format, but we need better ways to combine SVG and HTML if we want it to be really popular.

PS: No, it won’t work in MSIE 6, but SVG filters are something very simple and compact. It could be easily implemented via Flash as a fallback.

By: Svennedy

Svennedy — Mon, 22 Jun 2009 13:15:17 +0000

Want work in IE6! >;D

And: SVG is dead and buried.

By: Svennedy

Svennedy — Mon, 22 Jun 2009 13:14:03 +0000

qwdqwd

By: hansschmucker

hansschmucker — Mon, 22 Jun 2009 13:05:59 +0000

Honestly, we can do even more amazing stuff with SVG filters :)

(these demos need Firefox 3.5 as the filter is applied via CSS filter property, but using an iframe SVG or combined XML document would work just as well)

Like texturing a prerendered animation in realtime:
http://www.tapper-ware.net/stable/web.filter.apng.dynamicTexture/index.xhtml

Or doing perspective texture mapping to play Mario Kart:
http://www.tapper-ware.net/stable/PerspectiveWith6LinesOfXML-CanvasEnhanced/index.xhtml

Or spinning a world sphere:
http://www.tapper-ware.net/stable/SVGWorld/index.xhtml

Of course you can apply such filters to anything, and yes: that includes VIDEO. Or Canvas. Or SVG. Or, well: Anything.