Mozilla

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.

108 comments

Comments are now closed.

  1. darwin wrote on July 21st, 2011 at 8:42 am:

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

    Firefox5, xp

  2. Kim wrote on July 21st, 2011 at 11:01 am:

    FEED ME! THAT’S AWESOME!! Works like a charm :)

  3. ernest wrote on July 21st, 2011 at 11:12 am:

    awesome!

  4. Darryn wrote on July 21st, 2011 at 1:56 pm:

    You guys are amazing!

  5. Stephanie Daugherty wrote on July 21st, 2011 at 9:29 pm:

    Uses the same key as recallmonkey, otherwise, neat tool :)

  6. Vasileios Topouz wrote on July 22nd, 2011 at 2:59 am:

    Fantastic, let’s see how it will evolve ;>

  7. Norbert Vieten wrote on July 22nd, 2011 at 6:18 am:

    Unbelievable.
    Thanks a million for such a great extension.

  8. Blakeyg wrote on July 22nd, 2011 at 8:28 am:

    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!

    1. Ricardo wrote on August 2nd, 2011 at 8:50 am:

      Thanks for these steps, they worked perfectly for me :)

    2. MZ wrote on August 9th, 2011 at 7:12 pm:

      Thanks, nice tip

  9. Apoleon wrote on July 24th, 2011 at 6:59 am:

    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).

  10. Michael wrote on July 24th, 2011 at 7:06 pm:

    I’ve always wanted this to debug z-index issues. I use a bookmarklet now to help with this. See http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/#bookmarklet for the bookmarklet that can be used in any browser.

  11. SJ wrote on July 26th, 2011 at 4:07 am:

    Is this only for FF 4.n? Is there any way I can try it on FF 3.6?

    1. louisremi wrote on July 26th, 2011 at 9:46 am:

      It’s for Firefox 4 only. It’s another good reason to update your browser ;-)

  12. Ajay wrote on July 26th, 2011 at 4:46 am:

    Awsome

  13. Niklas wrote on July 26th, 2011 at 3:26 pm:

    Very similar application to http://hertzen.com/experiments/html2webgl/ which uses on the browser without extensions, by reading the contents of the page through the DOM instead of drawWindow

  14. Chak wrote on July 27th, 2011 at 2:24 am:

    Its not working in my Firefox 6.0 beta

    “Could not initialize the WebGL context,
    your hardware or drivers may not support it.”

    i tried:

    “webgl.disabled” is set to False.
    “webgl.force-enabled” to set it to True.
    updated Graphics driver.

  15. Claudiu wrote on July 27th, 2011 at 3:43 am:

    Guys, the feedback on what’s not working wouldn’t help the developer if it’s sent here. I’m sure raising an issue on GitHub would be more appropiate…

  16. Mudit Jain wrote on July 27th, 2011 at 6:56 pm:

    You guys are just awesome… @Paul its truly awesome…. :-)

  17. witek wrote on July 30th, 2011 at 7:16 am:

    Nice and usefull. Can you make it work in other webgl enabled webbrowsers?

  18. Ayush Gupta wrote on July 31st, 2011 at 4:06 am:

    Wow! This works nicely Thanks man

  19. J.S.Webschmiede wrote on July 31st, 2011 at 10:24 am:

    Hello,
    that is really a nice extension. I will definitely try.

  20. SteveM wrote on July 31st, 2011 at 7:04 pm:

    Wow! I was looking for something like this months ago, and now one finally exists! brillient! :)

  21. Jubayer Arefin wrote on July 31st, 2011 at 11:42 pm:

    It is marvelous. Now I can debug in 3D ! Warm thanks to the devs and good luck.

  22. pw wrote on August 1st, 2011 at 6:50 am:

    Would be great if this could be made available on the Web Developer Toolbar.

    1. Thug wrote on October 21st, 2011 at 3:26 am:

      It is.

  23. Enrico wrote on August 2nd, 2011 at 5:46 am:

    WooHooo Works like a charm!
    Firefox 5.0.1 / MBP 2010 i7 / 10.7
    Thanks you guys! Great tool!

  24. neil wrote on August 2nd, 2011 at 6:11 am:

    not only insanely useful but real fun to use – very impressive can’t wait to see how it evolves

  25. SteF wrote on August 2nd, 2011 at 7:11 am:

    Mega Wow !!! Thanks, great work :)

  26. Kevin Harter wrote on August 3rd, 2011 at 8:22 am:

    This helped me solve a problem, in an inherited web project, in about six minutes that I’ve been working on for three days. Awesome tool!

    Now where’s the Chrome version? =)

    1. Eric wrote on February 5th, 2012 at 4:05 pm:

      Yes, totally! I so want the Google Chrome version of this addon! Please notify when it comes out!!

  27. Alexey Zinoviev wrote on August 10th, 2011 at 11:44 pm:

    Awesome!

  28. Chico Web Design wrote on August 31st, 2011 at 4:57 pm:

    Such a unique 3D functionality in Firefox!

  29. paris triathlon wrote on September 29th, 2011 at 9:23 am:

    Can someone confirm that ‘s working on firefox 7 on mac ?
    I can’t find firefox 4 for mac on the web, even on mozilla web site :(((

    1. paris triathlon wrote on October 3rd, 2011 at 1:54 am:

      Finally i found the ftp link ,
      you can download all the firefox version here :

      http://releases.mozilla.org/pub/mozilla.org/firefox/releases/

      including the mac versions ;)

  30. evan wrote on October 2nd, 2011 at 4:36 am:

    This could be interesting…

  31. Niall Flynn wrote on October 21st, 2011 at 8:18 am:

    Very cool!! Good Work

  32. Albert wrote on October 28th, 2011 at 10:33 pm:

    Awesome, this is extremely cool.

  33. Wojtek wrote on November 2nd, 2011 at 12:19 pm:

    This is coolest developer visualization tool I have ever seen on web!

  34. Prova wrote on November 4th, 2011 at 8:16 am:

    Umm, why?

  35. Bosi wrote on November 10th, 2011 at 12:05 pm:

    It works just fine in Firefox 8.0…BTW I do not understand why ppl are still running versions 4 or 5 or however old releases of Firefox – is there any reasonable explanation not to upgrade your browser to the latest release?

  36. Siddharth Saxena wrote on November 14th, 2011 at 10:21 am:

    Nice one!
    Mozilla always rocks

  37. techglimpse wrote on November 29th, 2011 at 3:12 am:

    Its looks great to visualize in 3D?…but just wondering how can it be helpful to the developer…probably it helps to visualize the z-index of an html element…?…not sure…

  38. Dan wrote on December 6th, 2011 at 10:21 am:

    Unfortunately CTRL+SHIFT+L is the same shortcut as firebug another essential tool for developers.

    Integrate it into Firebug (Similar to YSlow) or pick a new shortcut key combination.

  39. kathrin wrote on January 8th, 2012 at 1:39 pm:

    very interesting, great work

  40. Lee Jordan wrote on January 14th, 2012 at 10:56 am:

    I can see a potential here of making real 3D webpages viewable on the iPhone using a “Hasbro My3D”!

  41. Guilherme Monteiro wrote on January 27th, 2012 at 10:01 pm:

    Hello folks, could someone help me to solve my issue? When I try to use the TILT 3D the follow message is shown: “Hmm. While your browser seems to support WebGL, it is disabled or unavailable. If possible, please ensure that you are running the latest drivers for your video card.”

    My hardware and the browser are all right. The problem seems to be some incompatibility between webGL and my Intel HD Integrated.

    I’ve tried all possibilities but I am still under the weather, does someone has any clue?

    I really wanna use this add because I am learning html and it’s very usefull to see how the tags works.

    Thanks

  42. simone medri wrote on March 14th, 2012 at 8:02 am:

    http://www.simonemedri.com/3d.php

  43. Todor wrote on March 16th, 2012 at 7:34 am:

    Wonderfull ! Just found about it and I’m impressed. I wonder if is possible to exploit this further and present a web site in 3d, specially designed with some elements bumping from others

  44. Francisco wrote on March 30th, 2012 at 11:05 pm:

    Just tried it in my ff 12 in ubuntu and it is astonishing! Best thing I realized it existed till yesterday xD

  45. Jamie wrote on April 29th, 2012 at 7:24 pm:

    This is great but what happens when people start setting z-index:999999?

  46. SEO Biella wrote on November 29th, 2012 at 6:22 pm:

    Very very cool idea!!!!!!

  47. Agung Wiseso wrote on February 8th, 2013 at 1:33 am:

    Worked Fine.

  48. chris wrote on April 8th, 2013 at 7:04 pm:

    nice one …..great visualisation of webpage really usefull :)

1 2

Comments are closed for this article.