VR Stuff
I've been building VR experiences since 2015, back when WebVR was still finding its feet. I've given talks on developing immersive web experiences, and in 2016 I set myself a challenge: create a new VR project every day for a month. I actually did it.
I'm interested in what's possible when you combine VR with web technologies. The accessibility, the immediacy, the weird experimental stuff you can't do anywhere else. This is where I document the experiments, talks, and projects that came out of that.
Talks
CardboctoberA talk about creating VR experiences every day for a month
20 Minutes into The FutureA talk about creating Google Cardboard VR experiences using JavaScript
An introduction to using A-FrameOnboarding for A-Frame that I put together for participants of Game Dev Day
The UX of VR: 10 Quick TipsThis was a short talk given at The Oxford Mega Super Meetup Meetup
Projects
Posts
The Inevitable Oculus Quest Post
I sold my HTC Vive back in 2020 and bought an Oculus Quest. Was it an impulsive lockdown treat? Perhaps; but it was time for an upgrade. I went for...
The Deepoon DPVR E3 Virtual Reality Headset
Today I’m reviewing the DPVR E3. This is a Virtual Reality headset with a high resolution display, comfortable straps and an experience that’s similar to the Oculus Rift.
The Virtoba S1 Daydream VR Bluetooth Controller
The Virtoba S1 is a Daydream compatible controller from China that costs around £15 ($20). Let me just start with saying I’ve got a lot of cheap Bluetooth controllers –...
Enabling Google Daydream Support on OnePlus 3T
My workflow for discovering new VR content
Since launching the UX of VR website last year I’ve been looking for ways to keep on top of new VR content. For most of the last year I relied...
The inevitable HTC Vive post
I bought an HTC Vive last November (a week before the Black Friday sales, doh!) and have spent the time since trying to get the most out of it. So...
Well that has been a crazy couple of months... Onward!
In October 2016 I spent every day of the month creating something for Google Cardboard using JavaScript — Cardboctober. Since then I’ve been preoccupied with a couple of other mostly...
Summer of Hacks: Game Dev Day
As part of the JS Oxford-organised Summer of Hacks, I co-organised the “Game Dev Day” hack day in Oxford. This is the second time I’ve held an event during the...
20 Minutes into the Future with Google Cardboard and JavaScript
I gave this talk at JS Oxford in November 2015. The talk is about using JavaScript and various web APIs to create Google Cardboard experiences.
UX in Virtual Reality
I’ve been trying to find resources on the subject of User Experience and User Interface design in Virtual Reality a lot lately, as I’m thinking about Google Cardboard, and preparing...
Cardboctober posts
Announcing Cardboctober
Throughout October Ben and I are working on a project called Cardboctober. The challenge is hacking on something new every day using Google Cardboard.
01: Basic VR
Kicking off Cardboctober I’ve decided to go with something very simple. This is actually pretty much one of the JSCard demos that I created last November for my 20 Minutes...
02: Raycaster based look interaction
For today’s Cardboctober hack I’m doing some basic look interaction. As you look at each ghost in the circle surrounding you the ghost will cover their eyes.
03: Even better gazed based look interaction
Improving on yesterday’s Raycaster based look interaction, I’ve improved the raycasting experience. I’m using a library called vreticle.js, though I’ve tweaked it a bit.
04: Skyboxes and generating meshes
Skyboxes There are a couple of ways you can create a skybox in Three.js Using a skydome (a textured sphere) Using a skybox (a textured cube) I’m using the textured...
05: Loading external models
Using a couple of Three.js plugins you can load external models in to your scene. The plugins are: OBJLoader.js MTLLoader.js OBJLoader lets you load .obj format models, and MTLLoader lets...
06: VR Pairs Game
Todays hack is intended more as an activity to pull together various bits from the first week of Cardboctober and make a game. So here we go, it’s a “pairs”...
07: Cardboard hardware (cardware?)
Today’s hack (and each Friday for the rest of October) is going to be hardware rather than software themed. If you get all the way to the end of the...
08: Playing sounds
Kicking off Cardboctober week 2 (in which I’ll be talking about using various Web APIs) today we’re looking at audio. Or more specifically how to get audio in to your...
09: Speech recognition
Today’s hack is using the speechRecognition API. How can this be useful in Google Cardboard VR? It can add another level of input to our limited arsenal. So let’s take...
10: HTML5 Video
Today we’re looking at HTML5 video – well not in the traditional sense. We’re looking at using the <video> element to create a texture and then applying it to an...
11: Webaudio Beat Sequencer
For today’s hack I’ve decided to make a VR beat sequencer. Nothing says inclusive-fun like a VR experience that makes noise! So let’s get on with that.
12: AAAAH! Zombies
Today’s hack was going to be built around the gamepad API – but I utterly failed to get it working nicely with any of my USB or Bluetooth controllers. Not...
13: AAAAH! More Zombies
For today’s hack I’m revisiting yesterday’s zombie game again. With a full re-write to un-bodge the implementation.
14: Debugging your Cardboard with Chrome
Today I’m going to be talking about how I test and debug while working on this Cardboctober hacks. If you make it to the end I’ll have a recap of...
15: The Hierarchy of Needs in Quick Google Cardboard Hacks
This week I’m going to be writing about some of the UX challenges encountered while creating Cardboctober hacks. In VR experiences it’s important to consider the needs of the person...
16: Getting in and out of Fullscreen
Today we’re looking at the task of getting in and out of Fullscreen. Fullscreen helps maintain an immersive experience. When using JavaScript as we’re confined to the capabilities of the...
17: Displaying Pertinent Information
Some Cardboard experiences might require pertinent information to always be visible to the user. As we’re working with a stereoscopic and not particularly high resolution screen this raises a couple...
18: Moving around in VR
Unless your VR experience is a roller coaster or some other sort of rail-based experience, you shouldn’t take movement control away from the user. Lack of movement control can cause...
19: Which way is North? Part 1
When developing for Google Cardboard VR with JavaScript we’re depending on the browser’s support of device orientation to know which way the user is looking. You can’t guarantee the user...
20: Which way is North? Part 2
In yesterday’s post I talked about the problem of using Cardinal North with device orientation, and how Three.js’ Device Orientation Camera provides a utility function for setting the alphaOffsetAngle, today...
21: One size doesn't fit all
An important factor in whether VR works for you or not is how well the hardware fits – both in terms of fitting your head shape and being aligned with...
22: Putting it all together
We’re starting the final (full) week of Cardboctober now, so I thought I’d do a week-long project to pull together some of the ideas from Cardboctober.
23: Planning Tetrominoes in VR
I outlined the plan for the week yesterday: To make a tetromino game. So here’s how we’re going to do that.
24: Basic Game Board
For today’s hack we’re going to start putting the teVRis game board together. We’ve already looked at positioning objects in a circle around the camera, but that doesn’t solve the...
25: Creating and Moving Pieces
Today we’re going to be looking at creating Tetromino pieces and moving them around the board.
26: Rotating Pieces
For today’s Cardboctober we’re still working with Tetris. The task today is to make the pieces rotate.
27: Moving with gaze
Today’s hack is more an aside while I’m focussing on yet another Tevris rewrite.
28: Planning Revisited
I thought it’d be weird to drop a hardware post in this week as I’ve not finished the Tevris game yet, so this week’s post will continue the Tetris theme...
29: Blocks out of the pram
Bit of a lame one for today. I feel like I’ve not been making much progress with the Tetris rewrite, and tackling collision detection with unexpected results is getting quite...
30: Github Contributions
For today’s Cardboctober, having shed the burden of creating Tetris in VR, I decided to hack around with data visualisation.
31: Something in the Shadows
Today is the last day of Cardboctober! And less surprisingly, it’s also Halloween 🎃 - For today’s hack I’ve made something spooky. If you don’t like spiders, you should look...