Three supposed developers from Auto Trader UK (with no prior VR experience!)
BundleDungeon is a Virtual Reality visualiser for Webpack build statistics.
Please allow us to present BundleDungeon, the first tentative step in the evolution of build visualisers! Simply upload your Webpack build statistics and watch in wonder as it appears in a virtual dungeon (or jungle or cyberspace)! Interrogate chunks for more information on what's going on inside them.
BundleDungeon supports Google Cardboard.
You have two initial options when starting BundleDungeon; to use your own Webpack bundles, or our default example data.
If you want to jump straight in and see some instant madness, click the "Use Default Data" button.
In order to use your own data with BundleDungeon, first extract the stats from your Webpack build by running webpack -p --json > stats-main.json in the appropriate directory. You can then proceed to open the BundleDungeon app and click the "Open" button located in the top left of the screen. Select your stats file and as if by magic...
...you should see multiple objects floating through the virtual space. You are now inside your Webpack build! The chunks appear as spheres randomly distributed in space, their sizes based on the actual size of the corresponding chunk. Chunks above a threshold size (600K) appear red.
The mouse can be used to look around, and WASD movement controls are enabled. Mousing over any of the objects (or selecting using the reticule) will display an overlay providing more information about that chunk, and further objects will appear representing the modules within that chunk - colour-coded by file extension!
You can also change the background with the three change background buttons in the top left of the screen.
If you have access to a Google Cardboard headset, prepare yourself for the ultimate experience of BundleDungeon! Load the app on your (preferably high-end!) smartphone, load some data (your own or our default), and press the Cardboard logo located at the top right of your screen. Put the device in the headset, and voila! You are living the dream.
[Developed in Chrome. Tested in Safari and Firefox, cannot guarantee all features. Not tested in I.E. Cannot guarantee perfect VR experience on all mobile devices. Obv.]
Dependencies used : - aframe - aframe-animation-component - aframe-mouse-cursor-component - aframe-particle-system-component - aframe-react - history - react - react-dom - react-redux - react-router-dom - react-router-redux - redux - react-scripts
Bootstrapped with "create-react-app". Initial prototype built using "react-vr", but we pivoted and switched to "a-frame" due to available libraries (checkout vr_learnings branch).
I like the idea of using VR to visualize data that's hard to grasp. With Webpack there's a lot of things that get bundled and can contribute to the size, so the additional dimension is a really interesting approach to exposing that. Had major performance issues whenever I hovered one of the spheres though (popup took almost a second to show up). WebVR will make this really shine, can't wait for it.
Great concept, keep up the good work
Oh wow, I really wish I had Google Glass to try the VR experience out. I like the idea of visually browsing around a webpack build (kind of reminds me of fsv). wasd wasn't working for me (using chromium). I also kind of wish I could zoom in on the individual chunks to find out more.
Hard to say.. Your work is definitely.. Hard :-D I hardly touch VR but this is one. I opened this on desktop and say myself, hmm.. This is undone. But now I opened this on mobile and, hey, nice! I was actually scared, my browser allows information about compass and gyroscope? Or what are you using? It smashing my brain :-)
Btw I know about AR stuff but didn't hope I can see something on my phone.. well this is only VR, sure? :-)
dusted off my Bobo VR headset for this - good stuff! I love it when entrants take risks with new projects!