由 Tilt 是一款 Firefox 扩展，它允许您以 3D 方式可视化任何网页的 DOM 树。它由 Victor Porof（负责 Firefox 扩展本身的 3D 开发人员）以及 Cedric Vivier（创建 WebGL 优化后的等效于特权 canvas.drawWindow，见 #653656）和 Rob Campbell（最初想到创建网页的 3D 可视化）共同开发。最初，它始于 Google 暑期实习计划，但现在，在热情的团队以及众多新功能和创意的推动下，它已成为一个活跃的开发者工具项目。
Tilt 是一个有趣的 Firefox 扩展，专注于创建网页的 3D 可视化。
由于 DOM 本质上是文档的树状表示，因此该工具根据树中的嵌套层级对每个节点进行分层，创建元素堆栈，每个堆栈都具有相应的深度，并根据网页呈现本身进行纹理化。
与其他开发者工具或检查器不同，Tilt 允许以图形方式即时分析网页各个部分之间的关系，同时方便用户查看隐藏或超出页面范围的元素。此外，除了 3D 堆栈之外，还可以根据请求提供有关每个节点类型、ID、类或其他属性（如果可用）的信息，从而提供一种检查（和编辑）内部 HTML 和其他属性的方法。
基于 WebGL
可视化使用 WebGL 绘制，实现动态、快速、基于浏览器的呈现。在初始化时，Tilt 使用 DOM 创建单独的 3D 对象（描述网页几何形状的结构），其中 BODY 作为最底层，也是文档的基础，子节点在此基础上进行分层。对于每个后续级别，都会构建另一个平台，为 3D 网页网格添加深度。例如，堆栈由 DIV、UL 或任何具有子节点的包含节点构建。
控件
使用虚拟轨迹球（弧球）控制可视化，它绕 X 轴和 Y 轴旋转。其他鼠标事件用于控制偏航、俯仰、滚动、平移、缩放以及各种其他键盘快捷键。但是，控制器不仅限于这些外设，使其可访问且易于扩展到其他输入方法或设备。双击节点会调出 Ace Cloud9 IDE 编辑器，显示有关节点和内部 HTML 的更多有用信息。
试用
您可以在 Github 上找到 Tilt 源代码和最新的扩展版本，以及带有里程碑更新的开发博客 blog.mozilla.com/tilt。
现在，要测试扩展，只需下载最新的稳定版本 (tilt.xpi：下载文件，然后使用 Firefox 打开或将其拖放到 Firefox 上)，安装它并在“工具”菜单中搜索 Tilt。或者，您可以使用 Ctrl+Shift+L（如果使用 Mac，则使用 Cmd+Shift+L）启动可视化。随时使用 Esc 键关闭它。Tilt 可与任何网页配合使用，因此您甚至可以检查此博客，查看它在 3D 中的外观。
未来
即将添加更多功能，其中一些功能包括：动态修改和更新 3D 网页网格（随着网页的变化，公开每个节点的 CSS 变换，以及自定义堆栈间距、厚度、透明度等），以不同的方式呈现具有绝对位置或浮动的元素（例如，根据其 z 索引悬停在网页上方），创建一个更适合开发人员的环境，以及更好地与 Ace 编辑器和 Firefox 开发者工具集成。（突出显示当前选定的节点，即时 3D 预览），将可视化导出到其他浏览器或应用程序（作为 3D 对象文件，可能是 .obj 和/或 COLLADA）。
最大的里程碑将是在网页之间实现无缝的 3D 导航，就像在正常的 2D 环境中一样。
有关即将执行的任务的更多信息，请访问 TODO.md 列表。
关于 Paul Rouget
Paul 是一位 Firefox 开发者。
108 条评论