using svg filters to display 3D data

This demo is from Hans Schmucker, who has made a large number of interesting demos using Firefox 3.5 features. Tomorrow we’ll also have another neat demo from him as well.

Hans has used the CSS filter property and an SVG filter to do something really interesting – rendering a 3D perspective from Voxel data. Hans’ comment at the bottom of the demo is quite flattering:

Frankly, I didn’t expect this to work, primarily because the filter is very, very long. It needs to process around 30 operations to generate each frame (4 operations for each of the 5 layers + 5 for the texture + 3 for the texture transformation), and that’s with a 768×512 surface. It’s not very difficult to understand, but there’s simply a lot of processing needed and the speed at which Firefox renders this is nothing short of amazing.

If you’re interested in background also make sure to check out Hans’ post Perspective texture with 6 lines of SVG where he explains how to use filters to create this effect. Anyway, have a look at the demo – it’s very interesting.

View the Demo in Firefox 3.5


  1. Alex

    These filters seem to break when full colour management is enabled (gfx.color_management.mode=1)

    With it set to the defaults, it’s very nice though (and very fast)

    June 23rd, 2009 at 23:50

  2. Hans Schmucker

    /me scratches head. Looks the same to me, but I’m using the Win7 default profile anyway.
    It really shouldn’t make any difference unless the color profile changes the alpha channel and I have no idea why it should do that.

    June 24th, 2009 at 02:22

  3. Question

    It looks like map of war craft. maybe years later, the game can run in browser?

    June 24th, 2009 at 04:07

  4. Hans Schmucker

    Multiplayer would probably be tricky as the network protocols used by a browser are not really optimized for fast response times.

    But for the game itself: It already could run in a browser… maybe not with 3D backgrounds, but it could. The problem here is less the technology (at least as far as anything but InternetExplorer is concerned), but that it takes a huge investment to produce such a game.

    June 24th, 2009 at 04:32


    Yeah works well for me too. Amazing to think of all the incredibly inventive websites that we are going to see using technology like this.

    June 24th, 2009 at 06:04

  6. […] we featured a demo that used SVG to map 3D data. Today we link to Hans’ next demo: dynamically textured animations in the […]

    June 25th, 2009 at 00:29

  7. […] 原文地址:using svg filters to display 3D data 系列地址:颠覆网络35天 […]

    June 25th, 2009 at 22:22

  8. […] 原文地址:using svg filters to display 3D data 系列地址:颠覆网络35天 […]

    August 10th, 2009 at 20:40

Comments are closed for this article.