This is a personal sandbox for webVR experiments

Everything is built with A-Frame. Order is chronological. Keyboard shortcuts are largely for development or demonstration purposes. To read design documentation and my process for experiments six and later, see my Medium collection Humane Virtuality.

Comments, suggestions, and pull requests welcome.

Humane Virtuality Logo

Experiments

  1. Hello World
  2. UI Test
  3. Figures in Space
  4. ViewPoint
  5. Terrain (Previously Missed Connections)
  6. Head Tracked Transformations
  7. Product Selection & Customization
  8. Video Controls
  9. Solar System
  10. SpaceVR Simulator
  11. Environment Traversal

1. Hello World

Image for experiment 1

A basic world with random components. Made while learning A-Frame.

Guiding Question: How do I use A-Frame?

Action Key
Movement W A S D

2. UI Test

Image for experiment 2

A basic test with cylinder UI.

Guiding Question: How easy is it to create a UI with a single cylinder?

Action Key
Movement W A S D

3. Figures in Space

Image for experiment 3

Testing a project for IXDS.

Guiding Question: Is it realistic to use A-Frame in the short timeframe of a class project?

Action Key
Movement W A S D

4. ViewPoint

Image for experiment 4

The working model for a class project (IXDS public display).

Case study

Guiding Question: Can A-Frame be used to present designs for an installation piece in a museum?

Team Members: Iris Wu, Tiffany Wang, Ryan Huber

Action Key
Movement W A S D
God Camera G
Toggle Click Interactions C

5. Terrain (Previously Missed Connections)

Image for experiment 5

Experience the missed connections section of Craigslist in a surreal city environment. Prototype and final presentation for a class project (Programming Usable Interfaces).

Guiding Question: Given (another) short timeframe, can we build more with in A-Frame than with Swift?

Team Members: Andrew Novotny, Joel Rodrigues, & Rachel Ng

Action Key
Selection Gaze
Movement W A S D
Topographic Camera G
Force load text, if it doesn't load B

6. Head Tracked Transformations

Image for experiment 6

For headsets without positional tracking (e.g. Google Cardboard), how can we allow position-esque movement? In this set of experiments, the blocks mutate based on the selected transformation.

Case study

Guiding Question: Can head rotations be tied to an object to allow position-esque movements?

Action Key
Movement W A S D
Toggle target to be locked to camera or to world T
Toggle building B
Toggle pillars P
Toggle fog F
console.log(Camera Attributes, activeTarget Attributes) C
Transformation Key
Rotate target with human camera rotation 1
Rotate target with human camera rotation
Includes reasonable magic numbers: 4x of horizontal rotation, 3x of vertical rotation
2
Default
Rotate target inversely with human camera rotation
Includes reasonable magic numbers: -4x of horizontal rotation, -3x of vertical rotation
3
Move target in x-axis based on z-position of human camera 4
Rotate target in x-axis based on z-position of human camera 5

7. Product Selection Customization

Image for experiment 7

Looking at the differences in prototyping with a single planar mockup, a curved mockup, and a three dimensional mockup.

Case study

Guiding Question: What can be learned by taking a design from the web and translating it into VR?

Action Key
Movement W A S D
console.log(Targets) C
Mockup Selection Key
Planar mockup 1
Curved mockup 2
3D mockups 3

8. Video Controls - Work in Progress

Image for experiment 8

Well-designed video controls for spherical videos. Inspired by @oscarmarinmiro.

Guiding Question: How do controls for videos change when the content is all around you?

Action Key
Selection Gaze or Click

9. Solar System

Image for experiment 9

After hearing a podcast on SpaceVR, I was inspired to create an experience based on their project. However, for this prototype, I decided I was building in the wrong direction. So, I wrapped it up and started work on experiment 10. It now stands as a solar system simulator, with scaled proportions.

Guiding Question: What does it feel like to see earth from a satellite point-of-view?

Action Key
Selection Gaze or Click

10. SpaceVR Simulator

Image for experiment 10

This is my second attempt to build a SpaceVR simulator. This time, I had a clearer project in-mind: less robust, more to the point. This time it took me less than two hours to throw it all together.

Guiding Question: What does it feel like to see earth from a satellite point-of-view?

Action Key
Selection Gaze or Click

11. Environment Traversal

Image for experiment 11

Guiding Question: What are the best ways to move in VR without position controls?

Case study

Devs: Each transition can be selected by passing its name into settings.transition. Short and long alternatives are available for each transition as well with the exception of the individual Jump and Fade transitions.

Transition Name Action Parameters Key
Jump Instantly move from one position to another. position 1
Fade View fades into black, then back up. Useless by itself. Used in Fade Jump and can be used in other custom transitions. duration, beginTime, easing, middleFunction N/A
Fade Jump View fades into black. Position instantly changes. View fades back up. duration, beginTime, easing, position 2
Micro-Movements Many short jumps between the current position and final position. position, stepCount, duration 3
Animate Continuous, linear movement from one location to another. position, speed 4
Action Key
Selection Gaze or Click
Toggle to short version of transition -
Toggle to long version of transition =
console.log(Camera Position) C

Example:

// Fade Jump
settings = {
   transition: 'Fade Jump'
}

// Fade Jump Long
settings = {
   transition: 'Fade Jump Long'
}

Setup

$ npm install
$ bower update
$ grunt

Grunt uses LiveReload.

To deploy,

$ npm run deploy

Personal site: andrewrmchugh.rocks.