top | item 2786114

Tilt: Visualize your web page's DOM in 3D

260 points| mbrubeck | 14 years ago |hacks.mozilla.org | reply

18 comments

order
[+] justindz|14 years ago|reply
I'm keenly interested to see if this provides a visual indication of markup or layout clutter/complexity. That would be nice for sniffing out UI design smells, particularly in big enterprise portals.

Sadly, when I launch the tool it seems to create an overlay that prevents input to the page but doesn't show anything. Not blank, just invisible. I can close the overlay and keep using the page. But, I can't see anything. Hopefully I can figure that out.

I plan to use this for a side-by-side comparison of my product, Oracle web UIs (I'm scared), some nicely-designed and clean sites and some prominent web apps like Amazon or Backpack. Might be a useful tool for me on the "Marketecture" side of things.

[+] justindz|14 years ago|reply
Got it working. Short answer, Intel igfx cards (aka, "work laptops") are garbage. Chrome WebGL worked, Firefox didn't. I got it working, albeit slowly, using OSMesa on Ubuntu.

Marketing department power!

Hope that helps someone.

[+] ymir|14 years ago|reply
I can't imagine better tool to help finding unclosed divs.
[+] viggity|14 years ago|reply
This is actually very useful, Snoop is a utility for debugging the WPF visual tree and it has had this feature for several years now. I don't know if snoop was the first to have it or not though.

http://snoopwpf.codeplex.com/documentation

(scroll to the bottom)

[+] nitrogen|14 years ago|reply
I don't know if snoop was the first to have it or not though.

I remember seeing a GIMP plugin a long time ago that would render a 3D stack of the layers in an image, but I can't remember the name of the plugin or think of appropriate search terms to find it. This isn't precisely the same thing, but the plugin, combined with the 3D filesystem view in fsv (as seen in Jurassic Park), influenced these visualization tools. Or, maybe they were all inspired by some much-earlier tool that nobody remembers.

[+] bokchoi|14 years ago|reply
Snoop is an amazing utility and I used it quite often when I was coding WPF.
[+] bwm|14 years ago|reply
This is very cool. I really like the effort Mozilla has been putting into showing people what can be done with modern web technologies recently. They've got a whole bunch of other cool demos at demos.mozilla.org
[+] prpon|14 years ago|reply
The technology is pretty cool and all but I fail to understand why I need a 3D view of a 2D world.
[+] wvenable|14 years ago|reply
The 3D dimension provides an additional data point: nesting level.
[+] rcfox|14 years ago|reply
Putting it mathematically, non-linear problems (which are generally harder to solve) may become linear in a higher-dimensional space.
[+] jsavimbi|14 years ago|reply
This is an awesome tool. I can't even tell you how much debugging time this is going to save me. Said time won't be reflected in my estimates or in my billing rate, of course, but at least I'll have more time to work on my RSS feed.
[+] azakai|14 years ago|reply
Wow, this is very cool, and very useful as well!