Introduction

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:

• Showcase the readiness & versatility of WebVR
• Document learning curves, tips & issues for future devs
• Iterate, iterate, iterate to the point that SetDev is a leading WebVR studio

Experiment 1 Goal:

Shared-Space Artist Album Discography

• Multi-User Network Support
• Display Multiple Album Buttons
• On-Gaze Change Selected Album Box, Album Environment, & Track

Experiment 1 Shipped:

Single-User, Static Scene Album Preview: https://musicworldtest0.neocities.org/

GitHub repository will be updated here…

which…

• Loads a preset environment with the popular a-environment component
• Plays a single track, Urameshi by Anonymuz with the native sound component a-sound.
• Displays a single album-cover for the Urameshi album, as the material skin for a native a-box.

Summary:

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:

• First, prepare the image asset by uploading it to Imgur & then wrapping the <img> tag in the A-Frame <assets> component.
• Second, add a Material component with a src attribute set to the <img> tag loaded in the previous tag to the single <a-box> in our scene

<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:

https://github.com/feiss/aframe-environment-component