An article

Making a Progressive WebXR game with 13Kb + three.js

How I made it as a part of the Js13kGames coding competition

13 September 2019

PLAY HERE > Go Back (And Do It Again) WebXR js13k entry

First, I must say that and were my main inspiration source. Both are great places to start learning how to make 3D on the web.

The idea and the goal

The theme of the js13kgame contest for 2019 was 'back', and I started to play with this 'misc controls pointerlock' example but after several tests, the final idea was to make a 'Simon' game with 5 colors and 5 shapes, where to select the color you could change the way where you are going.

How it works on Desktop/iOS/Android/WebXR How it works on Desktop/iOS/Android/WebXR

With this pet project, I wanna learn how is the status of the WebXR API now and if it was possible to make a progressive enhancement interactive site that works on desktop, mobile/tablet, and VR/AR. As a summary, it is possible to make it all except on AR that is very advanced using a web component like model-viewer but is not possible to make complex interactions with the elements on the augmented reality (or at least, I didn't know how to integrate it).

What I learned in this phase For me, it is very important to have these examples to start to play and experiment with different user interactions.


The first days I made a long main.js file with all the code, as the three.js examples, until I had a playable prototype. With this prototype, I tested with my two daughters and my wife, without telling anything about how to play it. And then, after two or three iterations (I needed to make some changes to the usability), I had a first valid prototype.

This prototype had a lot of draw calls and it was very monocromatic, and as I said it was all in a big main.js file. Then my next step was to optimize it and to make it modular with a bunch of Classes to organize better the code.

Screenshots of the gameplay Screenshots of the gameplay

What I learned in this phase That I prefer to have an 'easy to make' fast iterations workflow to test the usability and if it is fun to play it, and making all on a big main.js file and make it playable with your desktop browser is a fast way to have it.


Organizing the code

I tried to use the minimum dependencies needed and to have ES6 support and to use webpack to have 'live reload' and to compress it all in a single bundle.js, this would be useful to me to apply it in the project that I was going to start in my daily work (another of the advantages of doing pet projects).

The package.json only had:

Dividing into Classes

I divided the code into around 20 different files:

Playing with different background colors Playing with different background colors

Using Shaders

I used two shaders, one to have multiple Sky color and easy to make transitions between colors, another to have instanced objects instancedObjs.js to have 300 triangles changing their position and opacity with only one draw call (this shader was a mix of Buffer Geometry Instancing 2 and Buffer Geometry Instancing Dynamic examples).

Go Back (And Do It Again) game working on multiple devices

Fitting on 13Kb

As I did not load any external file, 3D models or images for textures, the main problem was to add music without exceeding 13Kb. The solution was to make music with oscillators:

First, I tested part of the code of this post but if you dispatch these methods several times on mobile appears some audio distortion. Then at the end, I used a custom solution based on MiniMusic project. In this Synth.js Class is all the code needed to make things happen.

PLAY HERE > Go Back (And Do It Again) WebXR js13kgame entry

SOURCE CODE HERE > webxr-back github project


Arturo Paracuellos
Creative Coder / Artist
Email | GitHub | Twitter | LinkedIn

"Looking On The Bright Side Of Life."

Another Unboring posts