Max GlenisterI spent every day of October 2016 creating VR content for Google Cardboard using JavaScript/WebGL/other WebAPIs and blogged about it.
[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…