Repository: https://bitbucket.org/verbosio/webgl-dom
Home page: https://alexvincent.us/webgl-dom/
tl;dr: I have a new way of visualizing DOM trees in WebGL, and I’m looking for volunteers to improve the basic tool, especially on the WebGL side with three.js.
I’ve run into some trouble with an experimental Document Object Model. Specifically, I’m trying to visualize it, but I’m dealing with multiple dimensions:
- The parent-child node relationships
- Sibling nodes
- Attributes of DOM Element nodes
- Atomic change sets
- and at least two models of “shadow content”.
About four to six weeks ago, I realized I needed a tool to not only debug the DOM I’m trying to build, but to simulate new ideas that I haven’t yet implemented. So I started building a WebGL-based visualization tool.
The tool currently has two main tasks:
- Transforming a XML document into a specific JSON format
- Generating a tree diagram in WebGL from JSON documents in the specified format
Most importantly, hand-editing this JSON should allow me to show ideas that currently cannot be done in the standard DOM. The “WebGL Inspector sample” link from the home page shows this: it takes only JSON as input and renders the tree.
It is very primitive right now, a mere starting point. I’m posting this now, hoping to find a volunteer who’s more familiar with WebGL / three.js than I am to improve on the rendering parts. The image is static: there’s no zoom, pan, or rotation support whatsoever. I really would like some help there.
Also, it doesn’t work in Google Chrome, but that’s because I had to specify type=”application/javascript;version=1.8” to make it work in Mozilla Firefox 39+. (I like ECMAScript 6th edition and strict mode, thank you very much. I just wish it worked without versioning. I understand that’s Coming Soon.)
There is some click support: clicking on a sphere should give details about the corresponding DOM Node, including the nodeName and nodeType.
If anyone out there likes the 3-D visualization idea and wants to reimplement it in the Firefox Developer Tools, be my guest. Though the Tilt add-on for Firefox is more practical right now.