Tilt WebGL

Tilt: WebGL

February 8, 2012

Tilt represents a new way of visualizing a web page. This tool creates a 3D representation of the document, with the purpose of displaying, understanding and easily analyzing the DOM. It will take advantage of the great tools Firefox has to offer, as it is an extension which contains a WebGL implementation, providing rich user-experience, fun interaction and useful information, while taking full advantage of 3D hardware acceleration, GLSL shaders and what OpenGL ES 2.0 has to offer.
The implementation consists of a Firefox extension containing a 3D representation of a web page, as both a fun visualization tool and a developer-friendly environment for debugging the document’s structure, contents and nesting of the DOM tree. Various information besides the actual contents will be displayed on request, regarding each node’s type, class, id, and other attributes if available. The rendering will be dynamic, in-browser, using WebGL and GLSL shaders.

687474703a2f2f646c2e64726f70626f782e636f6d2f752f323338383331362f74696c742f74696c7430322e706e67 Tilt: WebGL
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.

Learn all about this project and download the .xpi plugin for Firefox at http://blog.mozilla.com/tilt/

Src is available at Victor’s Github repository: https://github.com/victorporof/Tilt

Screen Shot 2012 02 08 at 11.02.10 AM 1024x754 Tilt: WebGL

Screen Shot 2012 02 08 at 11.11.30 AM Tilt: WebGL

Tags: , , , , , ,