Skyscraper built in the Firefox inspector's 3D View(shaneriley.com)
shaneriley.com
Skyscraper built in the Firefox inspector's 3D View
http://shaneriley.com/firefox_skyscraper/
16 comments
"Strange how much human progress and accomplishment comes from contemplation of the irrelevant." - Scott Kim
This is wrong. So wrong. So, so, delightfully wrong.
upvote
upvote
That's a pretty nifty hack. Wish i thought of that before :)
Does anyone actually use the new 3D view in Firefox?
Does anyone actually use the new 3D view in Firefox?
A friend of mine doing UX stuff actually uses it regularly to instantly see the structure of pages. He's doesn't usually touch developer tools generally, and stays away from any CSS or HTML learning intentionally. But he uses this.
I've played with it but haven't found any great use case (except, now, this). Next time I come across an annoying z-index bug I'll probably bust it out. Anyone who has had the displeasure of build modals on modals (always a good UX) could sympathize.
I don't use 3D view but I've used Jesse Rudderman's topo bookmarklet[1], which is conceptually very similar, for years. It's more useful in IE so you can see what tag IE is failing to close but it's useful for getting a quick feel for unfamiliar markup when doing Greasmonkey hacks and the like.
[1] https://www.squarefree.com/bookmarklets/webdevel.html
[1] https://www.squarefree.com/bookmarklets/webdevel.html
I use it once in awhile, mainly to get a quick conceptual idea of how a website is layed out. Is it super useful? Probably not, but I think it's still a cool and somewhat worthwhile feature.
Nope. It sums up all that is wrong with Firefox for me.
Chrome developer tools are just ridiculously more awesome.
Chrome developer tools are just ridiculously more awesome.
I find it super useful to get a quick insight into a random page. As I'm still learning a lot about HTML, I can go to a website and see a quick visual breakdown of how the elements are composed together.
I sometimes use it as a quick way to inspect parent elements when they are completely covered up by their children.
I used a few times to figure out why something would work in every browser but IE due to how IE handles event bubble different in DIV hierarchy. 3D view really helped in that regards.
Ha ha .. Geeks and their works. :). I have used 3d view a few times in the past for simple web pages, but as a CAD programmer I'm quite impressed with the rendering performance with this building you just created.
Using FF 16 on XP... I don't have a 3d button in my Inspector? Anyone know how to get one?
Also using XP here. Make sure you're on the right bar (Firefox has way too many disparate developer tools). It's Ctrl+Shift+I to bring up the Inspector. There should be a button labeled "3D View" on the far right, next to "Style". I don't think it requires any sort of hardware acceleration, the computer I'm on right now isn't exactly recent...
If it's not there, you have to enable WebGL in the about:config.
Type about:config into the browser bar.
Right click and add a new boolean:
webgl.enabled_for_all_sites
Set to true, restart firefox, and load the site again. Press ctrl+shift+I, and you should see the 3D button in the lower right corner.
Type about:config into the browser bar.
Right click and add a new boolean:
webgl.enabled_for_all_sites
Set to true, restart firefox, and load the site again. Press ctrl+shift+I, and you should see the 3D button in the lower right corner.
I believe it is determined by your video card. You could try fiddling with the about:config settings:
webgl.disabled webgl.force-enabled
Though it wouldn't surprise me if you started to get BSODs.
webgl.disabled webgl.force-enabled
Though it wouldn't surprise me if you started to get BSODs.
That is sick.
In a totally good way, of course.
In a totally good way, of course.
Anyone want to post a screenshot for us mobile readers?
https://dl.dropbox.com/u/98854/Screen%20Shot%202012-10-11%20...
It's a skyscraper built with the 3D DOM view in Firefox.
It's a skyscraper built with the 3D DOM view in Firefox.
This is fun and all...
but you could just, you know, use 3D transforms, like this:
http://ajf.me/demos/200blocks/
but you could just, you know, use 3D transforms, like this:
http://ajf.me/demos/200blocks/
Good stuff. Always pushing the envelope Mr. Riley.
Nice and incredibly pointless. Must be art then.
Anyone up to create a 3d shooter game in it.
Hi, developer of DOM from HackNY here ( http://bit.ly/SPxLRx ; we turn webpage DOMs into 3D shooter games). We're working on it :)
Hidden art in the browser.
Excellent job.
Excellent job.
I knew it was only a matter of time before someone did exactly this.
Minecraft... with DOMS...
that's cool.
Clever, but not too impressive. It's more like building 3D models using only Lego blocks. It can't have circle, triangle or anythig other shapes.