Visualization of the DOM tree in 3D (Firefox extension)

The Tilt extension for Firefox builds a three-dimensional model of the current web page using WebGL for fast rendering. Thus, you can instantly analyze the structure of the page and the relationship between different parts.

As you know, using the Document Object Model (DOM), any HTML document can be represented as a tree of nodes, each node of which is an element, attribute, text, graphic, or other object. This extension builds such a tree, superimposing on it the texture of the text and graphics that are in the corresponding nodes of the tree.

As shown in the video, besides the usual visualization, the plugin shows (on the right-click of the button, various information about each node type, id, class or other attributes).
')


The authors of the expansion are Victor Porof (the main part), Cedric Vivier (rendering DOM elements as WebGL textures, equivalent to canvas.drawWindow, see bug No. 653656 ) and Rob Campbell (author of the idea).

Guthub source code
Developer Blog
Last stable build: tilt.xpi

After installing the extension, it is launched by pressing Ctrl + Shift + L (or Cmd + Shift + L on the Mac) or by selecting the corresponding menu item in the browser, exit - by pressing the Esc key. The extension works on any page.

In the future, developers plan to add new features, including modifying and updating the 3D model on the fly (as soon as the page changes, CSS transformation is initiated for each node, plus the setting for displaying elements, including the transparency and relative position of the 3D nodes); rendering not only pages entirely, but separate parts using z-index; creating a toolkit more convenient for the web developer; better integration with Ace and Firefox Developer Tools (highlighting the current selected node, instant 3D preview), exporting 3D graphics to other browsers or applications (via a file with 3D objects, probably .obj and / or COLLADA).

The biggest breakthrough will be the possibility of 3D-surfing between pages, as in the normal 2D-mode.

For a complete list of plans for improving the extension, see the TODO.md list.