2016
October
- 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 away now.
- 30: Github Contributions
For today’s Cardboctober, having shed the burden of creating Tetris in VR, I decided to hack around with data visualisation.
- 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 annoying, so I think I might just leave teVRis where it is for now.
- 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 and then there will be a Cardboctober Week 4 round-up at the end.
- 27: Moving with gaze
Today’s hack is more an aside while I’m focussing on yet another Tevris rewrite.
- 26: Rotating Pieces
For today’s Cardboctober we’re still working with Tetris. The task today is to make the pieces rotate.
- 25: Creating and Moving Pieces
Today we’re going to be looking at creating Tetromino pieces and moving them around the board.
- 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 whole problem.
- 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.
- 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.
- 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 your eyes. For today’s post I’ll be looking at some of the things that affect the fit of Google Cardboard headsets.
- 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 we’re going to cover building a device to use this function.
- 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 is always looking in the direction you’ve oriented your scene.
- 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 VR sickness. Here are a couple of approaches for user-controlled movement in VR:
- 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 of challenges.
- 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 web browser.
- 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 using what you’ve created. We can look at the Hierarchy of Needs in Virtual Reality that Beau Cronin adapted from Maslow’s Hierarchy of Needs
- 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 Week 2 of Cardboctober.
- 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.
- 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 to mention that support seems patchy at best across all platforms/browsers. So I decided to make a little game instead.
- 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.
- 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 object in our 3D scene.
- 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 a closer look at that.
- 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 VR things.
- 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 post I’ll even throw in a recap of the week so far. This is totally not a cop-out.
- 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” game.
- 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 you load .mtl material definitions to apply textures to the models.
- 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 cube approach. For this approach, our skybox texture has to be broken up into six textures.
- 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.
- 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.
- 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 into the Future with Google Cardboard and JavaScript talk.
September
- 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.
- The Chuwi Vi10 Plus Windows and Android Tablet
I’ve been on the hunt for a 10” tablet for a couple of months now. Besides Google’s Pixel C, there isn’t much choice in this area (ignoring the iPad). There are a bunch of options for cheap Atom-based Android/Windows tablets on Gearbest/Aliexpress/etc. I decided to buy a Chuwi Vi10 Plus on Gearbest. For less than £120 what could I lose?
August
- Upgrading to El Capitan with an old installer
I upgrade my Macbook to El Capitan as soon as I could, and have had very few issues with the release. On my iMac at work though, I’ve been putting off the upgrade since last October – due to time constraints and not wanting to mess anything in my dev environment up. Today I tried to install El Capitan using the Install OS X El Capitan.app installer.
July
- 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 Summer of Hacks (the previous event being SusHack #3 last year!).
May
- Getting to know @for, @each and @while in Sass
I use Sass every day, both professionally and in my side projects. One thing that never seems to stick in my mind though is the correct way to use @for, @each or @while. I’m writing this up here for some cathartic release, and hopefully to be of use to somebody else.