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.

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
12. MHCI Portugal

1. Hello World


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


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


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


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)


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


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


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


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


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


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


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'
}

12. MHCI Portugal - Work in Progress


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

Setup

$ npm install
$ bower update
$ grunt

Grunt uses LiveReload.

To deploy,

$ npm run deploy

Personal site: andrewrmchugh.rocks.