006 - September 9, 2018


This past week I was supposed to update my blender-exporter and renderer to support textured meshes as well as add a placeholder 2D UI element that I'd render using WebGL.

For most of the week the wasm32-unknown-unknown target that lets you compile Rust code to WebAssembly was broken on MacOS which slowed me down a bit because I couldn't check to make sure that my textures were rendering properly.

On Monday I realized that I could use a docker image target wasm32-unknown-unknown on linux so after fiddling around a bit I was able to compile to WebAssembly.

By Thursday morning I was rendering to textures in my mesh visualizer program, and around 1:30am on Saturday I had my game serving a texture atlas that I was using when rendering meshes.

I have the process fairly automated. I save my meshes in Blender and my textures as PSDs and my build script automatically generates a binary with all of my meshes and a texture atlas with all of my textures. The meshes get de-serialized into a data structure that points to the associated texture's coordinates within the larger texture atlas so as I add or change textures and meshes it all just works.

On Saturday morning around 11:40am I got off the phone catching up with my mom and got started on some work. I needed to help my friend uptown around 4:15pm so between lifting, showering and getting ready I had about an hour and a half of the afternoon to make progress. I found a tutorial on rendering 2D sprites which was exactly what I needed to render 2D UI elements.

That first moment that I was able to log into the game on mobile and interact with it and all I needed was a URL was powerful for me. While there isn't much going on just yet, I had a strong feeling that being able to access the game on the web without installing anything and being able to just dive right in would be something special. I'm excited!

On Sunday at 2:38am I had a placeholder "menu" (empty white 2D untextured rectangle) showing up on click and disappearing when I moused out of it. All that was left was to update my touch controls to be able to interact with both the camera and this menu.

A 2d menu that we can mouse out of Clicking shows the menu (haven't added options to it yet) and mousing out of it dismisses it.

On Sunday morning I realized that I'd need to be able to access the game on a mobile device locally while I worked on it so that I could get a good sense of how it felt in mobile browsers. I signed up for Pro ngrok plan ($10/mo) and set up ngrok subdomains for my authentication, asset, game website and WebSocket servers and was able to access localhost from another device very easily.

Touch Controls Your first finger shows the menu, your second finger controls the camera.

Side note - I never knew you could plug your iOS device into your laptop and view the console. I had a rendering issue when I first accessed the game from my iPad but by viewing the web inspector I was able to find the issue and fix it within minutes.

Next Week

This week was a first for me since I'd never written re-usable 2D rendering functionality within a WebGL pipeline. In the past I had just used HTML and CSS on top of my WebGL canvas.

Next week will have another first - rendering text with WebGL. I'm going to try using rusttype since it has a few examples that I think I can adapt.

I'll also get vertex skinning / skeletal animation working in the game. I'll make a placeholder skeleton, mesh and animation and render this animation in the game.

Since I haven't rendered text before I'm not sure what stumbling blocks I'll run into.. so I'll just commit to these two things this week. Let's see where this goes.

See ya next time!