使用 SVG 滤镜显示 3D 数据

此演示来自 Hans Schmucker,他使用 Firefox 3.5 的功能制作了许多有趣的演示。明天我们还将展示他另一个很棒的演示。

Hans 使用了 CSS 的 filter 属性SVG 滤镜 做了一些非常有趣的事情——从 体素 数据渲染 3D 透视效果。Hans 在演示底部发表的评论相当令人赞赏。

坦白说,我没想到这会奏效,主要是因为滤镜非常非常长。它需要处理大约 30 个操作才能生成每一帧(每 5 层 4 个操作 + 纹理 5 个操作 + 纹理变换 3 个操作),而且是在 768×512 的表面上。它并不难理解,但需要大量的处理,而 Firefox 渲染它的速度简直令人惊叹。

如果您对背景感兴趣,请务必查看 Hans 的帖子 使用 6 行 SVG 创建透视纹理,其中他解释了如何使用滤镜来创建此效果。无论如何,看看这个演示——它非常有趣。

在 Firefox 3.5 中查看演示

8 条评论

  1. Alex

    当启用完全色彩管理时,这些滤镜似乎会失效(gfx.color_management.mode=1)

    设置为默认值时,它非常棒(而且非常快)

    2009 年 6 月 23 日 23:50

  2. Hans Schmucker

    /me 挠挠头。对我来说看起来一样,但我无论如何都在使用 Win7 默认配置文件。
    除非颜色配置文件更改了 alpha 通道,否则它确实不应该有任何区别,我不知道它为什么会这样做。

    2009 年 6 月 24 日 02:22

  3. 问题

    它看起来像是魔兽争霸的地图。也许若干年后,游戏可以在浏览器中运行?

    2009 年 6 月 24 日 04:07

  4. Hans Schmucker

    多人游戏可能会很棘手,因为浏览器使用的网络协议并没有针对快速响应时间进行优化。

    但对于游戏本身来说:它已经可以在浏览器中运行了……也许没有 3D 背景,但可以。这里的问题与其说是技术(至少在除了 InternetExplorer 之外的任何浏览器中),不如说是制作这样的游戏需要巨大的投资。

    2009 年 6 月 24 日 04:32

  5. director@hyper-metrix.com

    是的,对我也适用。想到我们将看到所有使用此类技术的令人难以置信的创意网站,真是太神奇了。

    2009 年 6 月 24 日 06:04

  6. [...] 我们展示了一个使用 SVG 映射 3D 数据的演示。今天,我们链接到 Hans 的下一个演示:动态纹理动画在 [...] 中

    2009 年 6 月 25 日 00:29

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

    2009 年 6 月 25 日 22:22

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

    2009 年 8 月 10 日 20:40

本文评论已关闭。