Month: September 2015

For Goofy day I made a WebGL game that I call Refract. The goal is to guide a laser beam from a starting point to goal. Its core mechanic is based on raycasting from p2.js – this is a perfect use case for the new p2 feature 🙂

The game was made entirely in Goo Create.

By flipping a boolean script parameter while working on the game in Create, it launches a custom level editor that lets you design levels and export them as JSON. The JSON can then saved back into Create to be included in the levels list.

The backgrounds are procedurally generated on the fly with some randomness added. I used texgen.js for this. I noticed that it uses a bit of CPU while generating large textures, so a future optimization would be to make a custom shader instead.

Because the game is very static when you don’t touch anything, it was possible to pause the render loop fully between interactions. This saves a lot of battery while on mobile.

Launch Refract

I made a WebGL demo for the Fuffr hardware. It’s a simple boxing game featuring awesome graphics made by at Goo, and the new physics components in Goo Create.

The most challenging part about this was to integrate it well with the hardware. Most of the tech part was already sorted – there’s a Fuffr JavaScript lib and a server app. The API is almost exactly like the HTML5 touch API. Easy to get started in other words.

Start Fuffr 3D boxing (also works on ordinary touch screens).

I was part of making the Suisse Mania project, making a WebGL site for Migros. It’s an experience for all ages about Switzerland and it features 54 attractions around the country.

The app had three versions, a 3D, a lightweight 3D, and a 2D fallback for older devices/browsers. The 2D and the on-top UI was made by Agigen, another techy company here in Stockholm.

The role I had in this project was to do most of the 3D coding. We used Goo Create (of course), and I had a bunch of graphics guys from all of the involved companies to help me do the scene beautiful. Since the UI layer of the app had all the state, it made development of the 3D app quite simple.

• A few custom shaders, including highlighting, grayscale, particles, icons, etc.
• Sounds for each monument, including tweaking the distance model equations.
• Deterministic particle system – that I developed specifically for this project to reduce GPU/CPU communication.

Another thing that I didn’t make but is still very cool is the splatmap shader for the terrain. It uses different channels in a “splatmap” texture to blend other textures in a layered manner. The result is higher quality texturing. The alternative is rendering a very high res texture for the whole terrain, but that would not work on all devices.

Without splatmap shader:

With splatmap shader:

Distance models for sound are used to lower the volume of a sound as its distance from the listener moves from it. I discovered that one of the models in the Audio API, the linear model, was broken in most browsers. But the inverse model worked well enough. The problem was to find good parameters to make sounds die out in the distance but around 100% volume when the camera is near the sound source. I used a graph calculator to get the right parameters for both linear, inverse, and exponential models.

I’m very happy with the result we got. It was hard work, misunderstandings, mistakes and all that, but it was worth it. I met a lot of nice people and had a really good time working with the Goo and the Agigen team.

Retweet this:

Our latest project: a 3D map of Switzerland in . Explore it at

— Goo Technologies (@GooTechnologies)

Start Suisse Mania.