Tilt: Visualize your Web page in 3D

Tilt is a Firefox extension that lets you visualize any web page DOM tree in 3D. It is being developed by Victor Porof (3D developer responsible with the Firefox extension itself), along with Cedric Vivier (creating a WebGL optimized equivalent to the privileged canvas.drawWindow, see #653656) and Rob Campbell (who first thought about creating a 3D visualization of a webpage). Everything started initially as a Google Summer of Code project, but now, with an enthusiastic team behind it and so many new features and ideas, it has become an active Developer Tools project.

Tilt is a fun new Firefox extension focused on creating a 3D visualization of a webpage.

Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself.

Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.

Based on WebGL

The visualization is drawn using WebGL, for dynamic, fast, in-browser rendering. At initialization, Tilt creates individual 3D objects (structures describing how the webpage geometry looks like) using the DOM, with the BODY as the lowest layer and the base of the document upon which descendant nodes are layered. For each successive level, another platform is built, adding depth to the 3D webpage mesh. For example, stacks are built from DIVs, ULs, or any containing node with children.

Controls

Controlling the visualization is achieved using a virtual trackball (arcball), which rotates around the X and Y axes. Other mouse events exist to control yaw, pitch, roll, pan, zoom, as well as various additional keyboard shortcuts. The controller is not tied to these peripherals only however, making it accessible and easily scalable for other input methods or devices. Double clicking a node brings up the Ace Cloud9 IDE editor, showing more useful information about the node and the inner HTML.

Try it

You can find the Tilt source code and the latest extension builds on Github, and a development blog with milestone updates on blog.mozilla.com/tilt.

For now, to test the extension, just download the latest stable build (tilt.xpi: download the file, then open it with Firefox or drag’n drop it on Firefox), install it and search for Tilt inside the Tools menu. Or, you can use Ctrl+Shift+L (or Cmd+Shift+L if you’re on a Mac) to start the visualization. Close it at any time with the Esc key. Tilt works with any webpage, so you can even inspect this blog to see how it looks in 3D.

Future

More features are soon to be added, some of which include: modifying and updating the 3D webpage mesh on the fly (as the webpage changes, exposing CSS transforms for each node, plus customizing stack spacing, thickness, transparency etc.), rendering elements with absolute position or floats differently (e.g., hovering above the webpage based on their z-index), creating a more developer-friendly environment and better integration with the Ace editor and the Firefox Developer Tools. (highlighting the currently selected node, instant 3D preview), exporting the visualization to other browsers or applications (as a 3D object file, probably .obj and/or COLLADA).

The greatest milestone will be achieving seamless 3D navigation between webpages, as in a normal 2D environment.

For more information about upcoming tasks visit the TODO.md list.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , ,

20 thoughts on “Tilt: Visualize your Web page in 3D

  1. Apoleon

    On a Mac (Snow Leopard) and FX 5.0.1 all I get is a black window. My machine is not that old (early 2008 Mac Pro).

  2. Blakeyg

    I had a lot of trouble getting it to work in Firefox 5.

    If you’re getting the error message “Could not initialize the WebGL context, your hardware or drivers may not support it.”, try the following.

    * Make sure your graphics card supports Open GL (all but ancient ones should)
    * Make sure your graphics card drivers are up-to-date
    * Make sure you are running a Web-GL compatible browser (e.g. Firefox 4+)

    I double-checked the Web GL settings in Firefox, and although it was enabled I had to enable forced mode to get WebGL to work. To do this:

    1. In Firefox’s URL bar, type “about:config” and press Enter.
    2. Click the “I’ll be careful, I promise!” button.
    3. Do a search for “webgl” in the Filter field.
    4. Check that “webgl.disabled” is set to False.
    5. Double-click “webgl.force-enabled” to set it to True.

    Now try running the addon again.

    Hope this helps some people, as Tilt is a brilliant tool!

  3. darwin

    not work in my firefox 🙁
    “Could not initialize the WebGL context,
    your hardware or drivers may not support it.”

    Firefox5, xp

  4. Charbel

    For anyone having trouble with webGL just go to about:config and look for webgl, and turn it to true.

  5. Eelke

    So cool to see this tool alive, in the field. I have had exactly the same idea in my head and actually did my Msc thesis on the subject. I didn’t have the time to develop my idea any further out of the conceptual stage I left it at in December, 2010. So, I am really excited to see that somebody actually did do it! It offers so many possibilities to web developers, I’ll be following this project with great interest!

    If you’d like to check my thesis for some thoughts on the subject, check it out here: http://bit.ly/domscape. A video of my thesis concept here: http://vimeo.com/18895373

    Best regards,
    Eelke Boezeman

  6. moo

    Great idea!

    After I first installed the extension (by dragging the link onto the addons pane), it did nothing and was visible but inaccessible in the addons pane. It didn’t ask to restart Firefox, but after restarting Firefox it worked.

    The shortcut seems to be Ctrl-Shift-M now.

    The “help” or “exit” links do nothing for me. Doubleclick works sometimes, but often it has the side effect of rotating the page, or the DOM for the wrong element is shown. Why is it doubleclick anyway if single left click isn’t taken? I would love it if I could just click on an element and have it highlighted in Firebug.

  7. Charbel

    “Could not Initialize the WebGL Context, your hardware or drivers may not support it”…

    Lol, i’m running an i7 machine with 1gb of dedicated memory.. Drivers up to date. can any one help out?

  8. Vanessa Tibika

    It’s a very interesting way to look at pages.
    Suggestion for new feature: it’d be cool to be able to reverse the direction of the interpretation, so that higher priority objects and copy are highest.
    To generate a “SEO” view of your page for instance = which objects are seen first.

    Nice job, will watch out for the next versions!

Leave a Reply