Building Blox

Building Blox

Blox was inspired by Gitcoin.

Gitcoin was a live streaming donation platform. When viewers made a donation they were able to customize the animation that popped up as an overlay over the channel's stream.

Gitcoin was unique in that it was the first streaming plugin to offer viewers customization options into how their donation animations looked. The only issue is that the quality of these animations were restricted by streaming software limitations.

For example, WebGL was not supported in OBS by default because of a Chromium bug. This was disappointing because a lot of my original product ideas revolved around WebGL technology.

I built Blox as a learning experience to try out some of the ideas I couldn’t pursue with Gitcoin. I was so curious to discover what kinds of products were possible with WebGL technology.

I chose ThreeJS as the framework for interfacing with WebGL and dove into the product design. I knew from the start that I wanted the product to feel more like a game and less like a traditional web app. For example, in 3D games a 2D user interface sits on top of the 3D world. So I needed a world.

For my purposes it didn’t really matter what the world was. I just needed a scene to then stage other content in. After some experimentation, I worked with an artist to produce a low poly tropical island. Coming from no background in 3D development I learned that:

Finding and building a scene helped me understand that I wasn’t going to be able to develop many original 3D models for this project because I didn’t have the skills or the budget. I also wouldn’t be producing AAA level quality because there are strict performance limitations for what this technology can render effectively in a browser.

One of the product ideas I wanted to pursue was customizable viewer avatars. Whenever a viewer made a donation their avatar would show up live on stream. Viewers could customize their avatar appearance. To keep things simple I used a cube for the avatar’s base model that could then be customized using various skins I produced with a texture artist.

Blox App Elements 2

Typically in 3D games, navigating the menu also transports you to different locations of the world. For example you might start in a scene that looks like a lobby before you queue up to play, but to customize your character you will switch scenes to “the locker”.

I wanted to copy this pattern with the different pages I supported, but to keep things simple rather than creating whole new scenes I just pivoted the camera to different parts of the same scene. I learned:

It was especially important to know how to position 3D elements relative to 2D elements. I wanted some 2D elements to look like they were part of the 3D scene, so for some elements I needed to convert 3D world space to 2D screen space.

I discovered there was an incredible amount of depth that went into animating 3D models, so most of my animations used simple euler transforms with bezier curves.

I noticed unpacking assets into a scene always led to a little bit of stuttering and render delays, so I created an asset manifest loader that could throttle downloads and initializations. This cut down on stuttering but the render delay was even longer now so I built a smaller “loading scene” that was visible until the “main scene” was done initializing.

I integrated a WebVR renderer so you could “step inside” the world if you had a VR headset enabled. I learned about spatial audio and virtual interface controls.

I really enjoyed working on this project because I went from zero knowledge of 3D web development to a firm understanding of the basics.

The project helped me develop a better understanding of the design constraints and performance limitations when using WebGL, which allows you to start thinking more creatively rather than worrying about whether or not something will work.

The biggest lesson learned from this project is that with more technical ability and resources, you could build some really new and innovative products with this technology.