July 6, 2018
Code & Design
This is a series of mini coding sprint experiments in the breakthrough Web Virtual Reality interface. In case that went over your head , virtual reality & augmented reality headsets allow now for direct browser & web access. This means websites can & should now be built in virtual reality from the ground up.
The goal here is to ship 100 mini-WebVR experiences, over the course of three-hour sprints, in order to:
Shared-Space Artist Album Discography
Single-User, Static Scene Album Preview: https://musicworldtest0.neocities.org/
GitHub repository will be updated here…
I kicked this off with a bang in terms of sky-high expectations — as usual when hacking away on side-projects, I spent precious time way over-engineering for an opening piece. After installing & messing around with the best public networking component for A-Frame, the Networked A-Frame component, I decided that there were a significant amount of unknowns that were associated directly with the multi-user support. So a whole hour in, I scrapped multi-user support & focused on a more manageable sprint goal: single-user artist discography preview.
A user loads the scene & is presented with album covers — clicking an album changes the current scene environment, including a live track.
So what artist to use for the demo? Option paralysis took over as I was undecided for at least 15 minutes. I decided on South Florida rapper Anonymuz & quickly gathered the necessary resources (album covers & tracks) but unfortunately I just crossed the half-way mark at ~90 minutes.
With close to an hour left in this first experiment I wrote the first actual line of code that was pushed publicly. My initial thought was to tackle the album-like button. Since most album covers are square, I decided to use the native <a-box> component as the buttons. Had to take two steps here:
<a-box id=”albumThree” depth=”1" height=”1" width=”1" material=”src: #albumSkin3" position=”0 1.75 -3"></a-box>
Fairly smooth sailing for once, as you can see above. Our scene, however, is painfully white, so I decided to tackle that next. My thought was to quickly comb through the A-Frame registry of public components to see if I could find an environment generator.
Lo & behold oil struck again! Apparently voted “Component of the Year,” Diego Goberna’s A-Frame Environment Component was actually exactly what we needed. With a good range of beautiful presets that you can check out yourself at https://feiss.github.io/aframe-environment-component/, I ultimately decided to go with the Japan present that you can now see in the cover photo!
With 15 minutes left on the clock I headed to the A-Frame docs for the most pain-free deployment method — I soon found myself headed to the hobbyist host-editor Neocities.org. Deploying our minimal lines, single index.html file on Neocities actually was pretty straightforward.
New Public Components & Technologies Used: