Firefox Tilt: 3D
Firefox Tilt és un visualitzador en 3D de l’organització en blocs del contingut d’una pàgina. Ve de sèrie a qualsevol Firefox actual però depèn del tipus de targeta gràfica que es pugui fer funcionar o no. És tan fàcil com inspeccionar qualsevol part d’una pàgina web i clicar el botó Vista 3D.
Gràcies al bloc blog.mozilla.org/tilt he descobert diversos experiments utilitzant aquesta eina força espectaculars.
Realtime editing
Because Tilt is able to detect when a webpage’s DOM structure changes or when a repaint is necessary, integration is seamless with existing Developer Tools. Using Tilt and Firebug or Style Editor at the same time is easy. One can enable or disable CSS properties, changing the style of a node, and the visualization changes accordingly.
To enable realtime updates for the 3D webpage, go to the Options menu and check “Refresh visualization”.
Useful for learning
Developer tools such as “view source” have always been used to help people learn about web development. The 3D view highlights the structure of a page better than a flat view, thus anyone can immediately understand the parent-child relationship between nodes in a webpage, their positioning and how the layout is influenced.
One use case for this is the Hackasaurus mashup. The X-Ray Goggles is a nice and fun tool designed to make it easier to learn about the different document node types, the “building blocks” which create a webpage.
Export
A requested feature was the ability to export the visualization as a 3D mesh, to be used in games or other 3D editors. Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture (a screenshot of the entire webpage). The open .obj format ensures the fact that the mesh can be opened with almost any editor. Here’s a ray-traced rendering of hacks.mozilla.org in Blender:
Fun with experiments
As soon as it was released, many people found clever and interesting alternative ways to interact with Tilt. One experiment was creating a 3D visualization of an image, by exporting chunks of pixels to a HTML representation. The result was a voxel-like representation, with node blocks and stacks instead of pixels. A simple Image2Tilt converter was written in JavaScript, and you can try it directly in the browser.
Accelerometer support was another addition based on community request. This shows how easy it is to add functionality that wasn’t originally planned.
You can view the source code, fork it and also contribute to the addon with ideas or feature requests on Github, at github.com/victorporof/Tilt.
