AR Chess in Wiarframe

One of the cool things about AR is the ability to play games in the real-world. This can be entirely new concepts like Pokémon Go or traditional games like Chess. Using Wiarframe I prototyped an AR Chessboard, just in case I ever want to play Chess whilst out on the go.

Jeremiah Alexander
Jul 17 · 3 min read

How it’s made

The chessboard and pieces are each unique objects in Wiarframe. Each piece is set in a starting position and scaled.

3D Models & Styles

There are 3D models for each unique piece, and they are reused across multiple objects. They are set up with 2 styles, black and white, which simply change the material colour.

All black pieces are assigned the black style and vice versa.


Each piece is initially set to 80% opacity so that they don’t fully occlude the other pieces on the board.


Each piece has physics enabled so that it can collide with other pieces, and also fall off the edge of the board.


Each piece has a moveability property so that the user can drag it.


Each piece has two interactions…

  • when the user focuses on a piece (looks straight at it), it becomes opaque (it’s opacity changes to 100%)
  • when the user looks away from a piece, it becomes translucent (it’s opacity changes back to 80%)

How it looks

Log in to the Wiarframe app to try it for yourself. The wiarframe is set to open, so you can also inspect it and remix it in the editor.

Potential improvements

Currently, a piece is dragged passed other pieces and because of the physics, it will knock them out of the way. This is fun but makes moving the knight very clumsy. An easy fix would be to disable physics, but it’s quite fun. So perhaps instead we might want to elevate the piece above the board when the user taps or focuses on it— it is not currently possible to just change just the elevation of an object based on an interaction, so I’ll come back and revise this soon.

Currently, looking away from a piece changes it translucent even if you’re dragging it. This would be better if it waited for the drag to cease — but we don’t have drag start & stop triggers in wiarframe, yet.

An interesting alternative would be to do it entirely with gaze gestures. A stare would pick up a piece and bind it to the camera, the user could then move around to move the piece. We’d need to think of a way to drop it thought hmm… perhaps proximity to the board.


This is the most 3D models I’ve tested at once in the new wiarframe 3D scene layout tool, and honestly, it chugs a bit, so I’ll need to add some optimisations. In the meantime, switching over to an Object Close-up or viewing on mobile will hide the Canvas and thus allow you to adjust properties without the lag.


wiarframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.

Jeremiah Alexander

Written by

Founder @wiARframe — the design and prototyping platform for Augmented Reality.



wiarframe empowers anyone to design AR experiences through an intuitive prototyping tool, a creator community and rich learning materials.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade