The most important part of Tilt was actually visualizing the DOM nodes depth and coordinates in 3D manner, by positioning them relative to parent offsets and sizing them based on the client width and height dimensions. This is exactly what’s been implemented in the past week, so let’s take a look.
This is an idea of the direction in which Tilt should evolve, as seen on the wiki page:
From the start, the general concept was that “Tilt allows a person to instantly see the relationship between various parts of a web-page and their ancestors in a fun and graphical way”. As you can see, by layering the DOM nodes based on the depth as stacks, positioning and even texturing them accordingly makes a very interesting web-page inspector. These “layers could be built from DIVs, ULs or any containing node with children” and also “elements with absolute position or floats”.
Therefore, two main challenges arise so let’s analyze each problem and find the solution.
- Acquiring the texture of the webpage
- Traversing the DOM to create the visualization mesh
Quite elegant. Moreover, the get the coordinates (x, y, width and height) for each node, we make use of the offsetParent, offsetTop, offsetLeft and clientWidth & clientHeight properties:
If you want to see more details on how the visualization mesh with each stack shape is build and how the texture coordinates are calculated, check out the jTiltVisualization.js file. Here’s a quick look on how things look for now:
Note that a single mesh is created! Drawing chunks of 3D models, each one with it’s own texture (for example) would be highly inefficient, thus some clever optimizations are done here. An entire object, built of triangles is computed, without duplicating any vertex or corner (by using index buffers), and a single texture is applied to the entire mesh, by computing the u, v coordinates relative to the width and height of the DOM texture.
The following videos are a proof of concept of visualizing the DOM nodes depth and coordinates. The only thing remaining to do now is make the extension usable, ergonomic and fun. But you can check it out now!
Having fun with DOM nodes and effects, and applying the document texture: