Three supposed developers from Auto Trader UK (with no prior VR experience!)

Team Members

Launch Site

BundleDungeon

BundleDungeon is a Virtual Reality visualiser for Webpack build statistics.

V800 screenshot 20170626 221510

Description

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.

Instructions

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.]

Built With

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).

Feedback / Ratings (6)

All Feedback