so that was about NINE years ago… since 2016, when 3D view was no longer available natively in FF 47, people are STILL asking why and where has it gone?
That was it, gone, just… GONE.
A major visualisation tool and concept just dropped due to some technical, unsupportable …thing, with no work around sorted.
For YEARS.
It left the scene in 2016 and then not until MS started tinkering did it start to make a come back.
And it wasn’t terribly easy to fathom out or activate when they started playing with it.
I mean…
> **[3D View - Microsoft Edge Development](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/)**
>
> All about 3D View and how to use it.
…and this was an improvement on the earlier version…
> **[What's new in DevTools (Microsoft Edge 80) - Microsoft Edge Development](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools)**
>
> Accessibility improvements, using the DevTools in other languages, and more.
The meaningful bit of that link in relation to this was this bit.
I mean, how was this for a set of user friendly instructions to follow… just to ACTIVATE the tool!?
and, they’d kept changing the bloody interface so you couldn’t find the controls!
Now isn’t that just infuriating?
Now, which app do we know that also evolves really quick and keeps changing the interf…
Oh never mind, 😉
Where was I? Oh yes…
Gutted.
SO webbing got harder, more complex, convoluted and with Increased _depth_ to content layout.
And the main decent tool to explore this depth, had been kicked into touch.
Madness.
SO I kept my OLD browsers, NOT updated, so I could STILL look at stuff in 3D, when the mood took me, and my mind was boggled by layers and depth of things, z-index which I habitually forget…cascades…etc
So Firefox 46 for native 3D View, as well as Tilt extension
and
Firefox 52 for Just the Tilt extension in a Slightly Newer (But still Obsolete) Browser.
\*\*\* UPDATE!!! \*\*\*
- Spoiler ALERT! \* go to the end!! something here now works that didnt before… woo hoo!!\*
Ha! Me Clever…
buuuuuut, then the web changed.
GAH! again.
Cue… CSS Grid.
Awkward.
This sort of stuff does NOT show up in old browser… renders all wrong and… cant be seen.
here we go, My tinkery Horseblog page in 3D View in FF46.
after doing 2 things. Here we go.
First click these 2 options.
Then you see the 3D cube of much Clickyness! -
**CLICK IT**
And then I get to see my CSS Grid Web Page in all its aweful lack of… CSS GRID.
But in 3D!
SO then I try the **Tilt** Plugin’s render aaand.
see the similarity and equally similar lack of … CSS GRID render?
pants!
Still, it can still do a rather dandy representation of this far more basic and less modern website…
Cough cough…
hee hee… look familar?
😃
SO fast forward to 2019 and…
THIS!
> **[Edge Dev/Canary adds 3D DOM Viewer, “inspired by” Firefox’s Tilt](https://www.onmsft.com/news/edge-dev-canary-adds-3d-dom-viewer-inspired-by-firefoxs-tilt)**
>
> Microsoft has introduced an interesting new tool for web developers in its upcoming Chromium-based Microsoft Edge via its Dev and Canary channels, which allows developers to view a 3D render of the…
Canary engine and… _gulps_… EDGE… yes, MicroWhore… were _inspired_ by FF plugin… Tilt
(Makes a nice change from Embrace, Extend, Extinguish)
And found This…which I wasn’t actually aware of at the time (Horses… remember?)
> **[Creating the Microsoft Edge DevTools 3D View](https://medium.com/web-on-the-edge/creating-the-microsoft-edge-devtools-3d-view-d27c7bdffc9d)**
>
> Last month we released a new tool for z-index debugging, why and how did we build it?
I recently searched a bit and found the devs input, about why and how it came about etc.
[https://bugs.chromium.org/p/chromium/issues/detail?id=987787](https://bugs.chromium.org/p/chromium/issues/detail?id=987787)
referring to the history of FF’s efforts etc.
So Then I find myself…\>
Glaring… yes
GLARING\>… at the bloody microsoft download page…
And… I … HAVE…to do… … IT!!
Mea Culpa!
There is NO alternative… none
I want to view…
CSS Grids in … 3D
And MS have … picked up the Baton, from where FF tossed it onto the ground, by the dog poo.
So anyway… I am then tortured by the MS EULA
and you MUST share info… there is NO way out of it. no way.
GRRRrrrr.
Were they being ironic when they juxtapositioned those two informatics next to each other?
Tossers.
SO I turned internet off as installing. It offered me to play a game, until I re enabled it!
A bit like their annoying MS Office Paper clip.
Dink DInk Dink… it looks like your to trying to wite a letter/foil my data harvesting… sort of pop up.
, disabled auto updates, even as it constantly attempts anyway.
And ran it.
…after going through preferences, turning off a myriad things.
And after fumbling around I FINALLY , got to this view of the dev tools…
and got to see this…
…tiny …postage stamp of my Web Page… bottom right of dev tools.
WHAT USE IS THAT!?
This is after quite a bit of laggy zooming in.
then found the dev tools , in new window icon… expanded it and -got a separate dev tools window
on…
THE OTHER MONITOR! Oh yes.
FINALLY!
After quite a lot of years… there it is…
TADA!!!
SO, The Enemy of my Enemy is my friend…
FireFox ditched my wonder tool for the hard of thinking…
AND… MS… who isn’t anyones best friend really… picked up the baton, wiped off the dog poo and ran with it.
I now have an application running on my Mac, that offers NO OPTION to turn off telemetry.
GRRRrrrr
But I can see pretty 3D, renders of web pages.
MS, might as well just start writing pRon Sites… carrot dangling nastyness.
So there you go.
After just hacking my Mojave installer… re partitioning it all to get it much more up to date, I then had to install 2012- 2016 browsers, just to fail to render css Grid in 3D, but to render other DOM visualistions pretty well.
The very long winded History of 3D web Page view and DOM structure visualisation, which now the latest canary Build of Edge …employs.
Please please please let some other Browser dev get back with the plan and reinstate this so I can ditch Edge… just as a lot of other Windows users are frothing at the bit about a forced upgrade to Edge, I have VOLUNTEERED to… host this nastyness, to feed my defective inner web beast.
Gah!
there I hope that was informative for someone.
If you have never used this sort of tool, as you took to web dev, in the interloping years before or after its respective dev and demise, its back, and this should now do both CSS Grid AND Z-index etc.
worth checking out… _spits_ even… if its…from… from… I just cant say it.
MS.
there, thats close enough.
PS, its taken me HOURS to write all of this!
ITs 4am and I only cooked my food at 2 am!
Bed… after some 3D rendering of web pages.
WOoo Hoo!!
I hate myself…right now… MS…gah
_UPDATE REPRIEVE_
it works!!
Firefox vr56, with the TIlt plugin, WORKS! and renders the CSS GRID!!
woo hoo.
check it out.
FF 56 download.
[https://ftp.mozilla.org/pub/firefox/releases/56.0.2/mac/en-GB/](https://ftp.mozilla.org/pub/firefox/releases/56.0.2/mac/en-GB/)
then download the .xpi from here
> **[victorporof/Tilt](https://github.com/victorporof/Tilt)**
>
> Tilt: a WebGL-based 3D visualization of a Webpage. Contribute to victorporof/Tilt development by creating an account on GitHub.
and double click it to install in FF 56.
I had it installed in 46 -and it appeared as a _legacy_ plugin in 56.
You dont have to surf the web with this thing, but turn off auto updates and use it as a visualisation tool.
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [February 6, 2021, 1:55pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/2 "2021-02-06T13:55:13Z")
Chrome \> DevTools \> Layers Panel
Safari \> DevTools \> Layers Tab
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 6, 2021, 7:47pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/3 "2021-02-06T19:47:43Z")
mmmm… Safari…Nope doesn’t exist. Well not in Safari 14 anyhow.
But I did get excited about the Google layers… which is what sent me off to re explore this stuff.
BUT
TBH, I was sorely disappointed.
IT seems Very Laggy and sort of …sucked.
I mean, This is the Pinegrow site in it.
But it was really What I thought looked the most promising.
until I tried to use it.
I became aware of it , via the blog rocket site tbh.here
> **[Eliminate content repaints with the new Layers panel in Chrome - LogRocket Blog](https://blog.logrocket.com/eliminate-content-repaints-with-the-new-layers-panel-in-chrome-e2c306d4d752/)**
>
> So there you are, at wits’ end, frustrated after hours of trying to find out why your beautifully crafted website is so slow to browse. You used the newest tech stack, the load time is shorter than for any page of that kind and the first meaningful...
And found that interesting as I knew little about repaints!
But, the Chrome layers view was a fail.
or I didnt get it right/did something wrong, and hence the exploration.
And the older browsers…whizz through the visualisations with very little lag.
Edge etc… like treacle
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [February 6, 2021, 8:48pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/4 "2021-02-06T20:48:29Z")
You had initially mentioned neither thats why I mentioned them.
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 6, 2021, 10:12pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/5 "2021-02-06T22:12:01Z")
Yes I didn’t mention them, as they don’t have it currently, A little like why I didn’t mention the Walmart superstore chain either.
That also cant do it 🙂
And I was trying to utilise a modern version of the 3D DOM model in a modern browser, no dice
And, alas, the Google version models compositing not DOM Rendering.
ie
**This is different as these are compositing layers, not DOM nodes shown in 3d. Compositing layers are an optimization technique.**
So good for examining Resource hogs in animations and _painting/ repainting the images_ etc.
which is explained quite succinctly here
[https://news.ycombinator.com/item?id=16943035](https://news.ycombinator.com/item?id=16943035)
Which is how I learnt about the Paint/repaint, performance stuff. so good for that yes, but not for 3D DOM modelling. It might be fun to inspect Animations produced with PG etc, but no use for my purpose.
I wish both of these did indeed have it, or anything else.
I JUST installed Chrome for this very reason over the past few days, to explore layers, but alas, not a 3D DOM view, which was the point of my post, ie, the actual title.
This explains it quite well, if you dont get what layers is actually about in Chrome.
> **[Investigate Animation Performance with DevTools | Calibre](https://calibreapp.com/blog/investigate-animation-performance-with-devtools)**
>
> Learn how to keep your animations buttery smooth at 60 fps in this detailed guide to exploring animation performance using Chrome DevTools.
If Ive got it wrong, fire away and point me in the right direction, but alas, your 2 line supportive post, appears to be in error.
I thought Safari had dabbled in it back in the day, but cant find any working versions now.
I went off and rechecked for back in the day, I can find reference to **WebKit** Layers, ie
here
> **[State of Web Inspector](https://webkit.org/blog/2518/state-of-web-inspector/#layers)**
>
> Last year, Safari 6 included a reimagination of Web Inspector that aligned the design and user experience with Xcode 4.
but again, compositing is mentioned.
SO that then turned into this
> **[Visualizing Layers in Web Inspector](https://webkit.org/blog/8262/visualizing-layers-in-web-inspector/)**
>
> Recent releases of Safari Technology Preview contain a new experimental feature for Web Inspector: the Layers tab.
So, it went from Layers Sidebar in 2013, to a Layers Tab in 2018 but alas,
Both had bo diddly squat to do with 3D DOM representation.
Hence my frustration with finding I had to … _spits_… utilise a MS product to achieve my goal, and the purpose of this long, exploratory post - to point out the amazing fact that such a mega useful, revolutionary tree visualisation tool - just got dumped, due to multi-processes and some other technical difficulties, but was NEVER picked back up over the intervening years.
Until now.
Quite mad.
A bit like everyone having to stop wearing new sunglasses because it becomes a bit difficult to produce the lens pigments.
…if you’ve still got OLD sunglasses, you’re gonna carry on wearing them, and if you’ve never had any and cant get new ones… yet see the old ones passing you every day, your just going to hanker after the old ones, which you can see still work perfectly and wonder why the hell you cant get new ones.
And… if your one of the old folks with perfectly working sunglasses, you are never going to stop walking about, gloating merrily whilst using them.
I now have BOTH old and NEW …sunglasses.
**GLoaTs**
🙂
… “Made by Micro who?”
…Ssssshhhhh!
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [February 6, 2021, 11:08pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/6 "2021-02-06T23:08:12Z")
As its never easy to understand or keep up with your current computer / OS situation. I was unsure what you were dealing with and dabbling in currently.
> [@schpengle](#):
>
> your 2 line supportive post
So I apologize if you feel those other two mentions were out of context given whatever setup you may currently be using. Out of curiosity are you having extensive issues with your “my Web Page” (horse site) that such features are imperative for development and optimization?
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 6, 2021, 11:17pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/7 "2021-02-06T23:17:04Z")
HI, no not at all, I was just using a very basic, previous prototype of a CSS GRID based site, to highlight the calamity of the current state of trying to render a simple page DOM in 3D.
With all the web advances that have been made, such a great tool got ditched.
And showing that even though the OLD ones worked and could render the PG one, with Bootstrap etc, pretty well, they just didn’t cut the mustard with CSS Grid.
That was until I fell on my own sword and realised that the later, FF 56 actually COULD render CSS Grid! It never did successfully for me before…
I guess it never did in my previous attempts as… I may just have screwed my first grids up 😃
oops.
And not to worry, it just seems like you got the layers/Composition/DOM 3D view thing muddled up, the same way I did when I first saw the google chrome mention of it and the tools looked SO similar!
But they proved to not be relevant to my search, hence them not getting mentioned.
Still it was good as my similar error, led to me learning about _Paints_ 🙂
**edit**
mmm although I have to admit, I am confused by the Chrome description of it though, as I HAVE seen reference to 3D DOM modelling with it.
Ie, here
> **[Facebook and Others Aim to Make the Mobile Web a Competitive App Platform -...](https://www.sencha.com/company/news/facebook-and-others-aim-to-make-the-mobile-web-a-competitive-app-platform/)**
>
> A coalition of 30 technology companies hopes to turn the Web into a competitive platform for building mobile applications. They have launched a Core Mobile Web Platform (coremob) community group through the W3C to provide a venue for collaborating on...
and I HAVE seen that actual,spinning image JS page site.
I shall have to have another look.
had a look… no compositing again.
---
### Author:  [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [February 6, 2021, 11:34pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/8 "2021-02-06T23:34:48Z")
> [@schpengle](#):
>
> layers/Composition/DOM 3D view
I think throughout all the browser venders various iterations over time they had desired to achieve similar features while likewise varying in many ways. In the end one may consider why these 3D features are so under discussed broadly thought the developer community (if they are imperative for dev) and likewise not effectively maintained across browsers.
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 6, 2021, 11:37pm UTC](https://forum.pinegrow.com/t/driven-to-the-edge-in-pursuit-of-a-3d-view-of-my-web-page/4923/9 "2021-02-06T23:37:36Z")
Yes, valid points.
It might be because they were just a _because we can_ sort of thing, but I found countless proclamations of dismay at their demise over the years, especially with regards z-index, nesting divs etc and debugging.