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...