Timmy Kokke / Sorskoot
Web - Games - VR/AR/XR - Live Coding
For a presentation I gave recently I’ve created a small demo showing a 3D model and some text rendered over a business card.
The biggest challenge was to get the model to be usable for the web. I used 3D Studio to optimize the model without loosing too much detail.
A demo to show a 3D map rendered on the table in AR. This demo was inspired by examples on the Hololens. I quickly found the Mapbox API and used that to render the elevation map using Three.js. I planned to add Web speech support as well but unfortunately, the WebAROnARCore browser didn’t support this.
A simple recreation of the portal demos often seen. This one is build with WebXR.
Hiding the virtual world and switching to hiding the real world when passing through the portal. This eventually was fixed by using the colorwrite material option in Three.js.
This year the WebVR category was changed in the JS13KGames competition. Instead of using A-Frame, BabylonJS had to be used. I’ve created a puzzle game, where you have to get the laser from the transmitter to the receiver by turning blocks. I’ve used some custom 3Dsmax scripts to create the levels and export them to json so they could be used as puzzles.
You can read all about it in this recap .
In 2017 the JS13kGames competition added the VR category to promote WebVR. I’ve entered with this game. It’s a turn-based game with influences from roguelike games. It has a generated dungeon where you need to find the pieces of your ship to escape the planet. You can read the full story of the game in this blogpost .
In this case, the biggest challenge was to keep all the graphics very small. This led me to create my own shaders to highly optimize the used images.
I’ve created this drum machine as an example to demonstrate the low latency of the Web Audio API. It was built as an Apache Cordova app at first, later ported to the web.
The biggest challenge was to get the performance it needs to run, play the samples and effects. At first, I build it using Material Design animations, but that was too slow so I had to remove them and create everything myself.