Virtual Reality
Augmented Reality
Twine Stories
WebXR Starter Kit
Surface Scatter
Teleport Controls
Blink Controls

Warning: Experiments Ahead

Experiments and general mucking about page to explore new Web/WebVR/WebXR technologies and approaches to the implementation processes in production. Which basically means that the experience will vary (even break) depending on the browser/device being used.

In the end, the main purpose of this page is to learn and to share. So with that in mind - Welcome to our lab!
Have fun and please share any thoughts, suggestions or questions you have with us.

About The Page Header

This is an A-Frame (webVR/WebXR) scene that demonstrates an implementation of a 'navmesh' navigation, set in an iframe in the header tag.


Instructions:

Browser: Click on the screen and use the WASD keys to move About. Use the mouse to look around the scene.
Press the Esc key to release the cursor.
This scene behaves like an FPS game.


Smartphone VR viewer: Includes Google Cardboard and other smartphone VR housings.
Click on the symbol in the lower right to enter true VR mode. If your viewer includes a button, use that to move about the scene in the direction you are facing.


Tracked headset: Use the built in browser to navigate to this page. Click the symbol in the lower right to enter VR mode. To move around the scene, push the joystick forward and then release to teleport to a new location.

Virtual Reality using A-frame

Xr

Xr

Game Level VR HMD tracked controllers

Submariner Walkabout XR

Game level with basic teleport controls added.

Xr

Xr

A-Frame Original Maritime Experience

Movement & Blink
Teleport Controls

Implementation of both movement controls - keyboard & touch - with the Blink Teleport Controls.

Xr

Xr

A-Frame VR HMD tracked controllers

Character Interaction Level

Working on creating a useable character and dialogue component for narrative based experiences.

Vr

Vr

A-Frame Original Maritime Experience

Original Demo Scene

The original Maritime experience from 2018.

Back to Top of Page

Augmented Reality using A-frame

Xr

Xr

A-Frame Multiple AR Markers

A-Frame WebXR

Boilerplate augmented reality scene in WebXR from Ada Rose Cannon's Medium tutorial

Ar

Ar

A-Frame Multiple AR Markers

A-Frame Multimarker

Basic A-Frame Multimarker AR scene illustrating the ease of implementation. Three markers are required: the built in Hiro and two custom markers.

Marker set download.

Xr

Xr

A-Frame WebXR Spinosaurus

A-Frame WebXR

A-frame WebXR demo. Works on Android & XRViewer on Mac.

Xr

Xr

A-Frame Box & Environment Component.

WebXR Boilerplate

A-frame WebXR boilerplate file. Works on Android & XRViewer on Mac.

Ar

Ar

A-Frame AR Reticle Click

A-Frame AR reticle Click

A-frame AR example using a reticle and 'click' event to affect or activate the artifact when hovering over them.

Ar

Ar

A-Frame AR Mouse Click

A-Frame AR Mouse Click

A-frame AR example allowing for targeted clicks on objects displayed by the marker.

Ar

Ar

AR GPS tracking

AR GPS Boilerplate

Position an object using GPS coordinates and track with AR camera.

Back to Top of Page

Interactive Fiction using Twine

If

If

Escape The Tomb Adventure

Escape The Tomb

A simple Interactive Fiction adventure using Twine to illustrate the use of variables to the game play.

Back to Top of Page