By the end of my last post, I had a very boring hot-pink “StaticRectangle”.

I gave my wife a demo who was as enthused about a hot-pink rectangle as you can imagine. I showed her all the code it took to produce that rectangle.

Her honest response was “why?”

I explained how it took lot of leg work to do the things you can’t see. Of course she understood that, but it is remarkable how much work can go into something so unassuming.

I mentioned that once we had one rectangle (technically two triangles) adding more is easy which of course it was.

Before long, I was drawing all kinds of 2d-shapes, circles, triangles, stars, pentagons that were supposed to be stars.

I was bored of static 2d shapes pretty quick and had to get things moving. This lead to expanding StaticRectangles architecture and adding new/extending core components.

• Application
  • There is now a top-most application instance that the browser owns. It is responsible for creating and initialising the other components. The browser tells the application to update, and the application passes that message onto components that care.
• ResourceManager
  • This handles the loading / supplying of resources, currently just shaders, but other external resources (textures, models, sound etc.) would be managed by this component.
• Time
  • Responsible for time keeping and updating systems that need to know the time. It also has a rudimentary separation between the ‘animation time’ and ‘application time’ so you can pause (and theoretically speed up/slow down) time that control animations specifically.
• InputHandler
  • Manages input state. Effectively an extension of the pre-existing EventManager. All components that need to know about user input will request this from the InputManager.

With those in place, I was then able to draw other coloured shapes and move them around the screen¹! Still not very exciting, it needed another dimension.

To implement 3d I was able to refer to the work I had already done with the Vulkan version of StaticRectangle, as well as the invaluable https://webgpufundamentals.org/ resource.

It just meant another component to add…

• CameraController
  • Receives input from the InputManager and updates from the Time component and calculates camera vectors that are used to produce the projection/view matrices used by the shaders.

…and a bunch of math utils for working with 4×4 matrices and 3d vectors and new shaders.

It really wasn’t long before I had achieved the illustrious spinning cube.

render.com

I have spent the couple of nights trying figuring out how to deploy ‘StaticRectangle’ so I can embed it here, one of my original goals for this project.

I can’t say it wasn’t a frustrating experience… I have said this before, I’m not a web guy.

I ended up using render.com, which to quote their marketing is “a cloud platform for deploying and managing web applications, static sites, databases, and other services”. I have nothing negative to say about it, all of the issues I had were due to my own ignorance.

I really dig how I can point it to specific branches, a great way to show WIP and that it will auto build/deploy on push.

Unfortunately…

It’s currently deployed using the free VPS offering, so the service needs to spin up after being inactive for 15 mins. I’ll have to pay for something better eventually.

If you get a 502, you’ll have to refresh the browser after a minute or two. You know what they say, you get what you pay for!

StaticRectangle 01

Hopefully you don’t get the ‘Sorry!’ screen, I know it works on Firefox/Chrome and you should be able to enable it in Safari if it doesn’t work out of the box with your version.

If you have a keyboard/mouse

• ~ will open the terminal
• W, A, S, D moves the camera left, forward, back and right.
• Holding CTRL will enable mouse-look
• P will pause the animation

Handheld / touch screen interaction is an entirely new line of investigations I’ll look into at some point.

1. I don’t even have screenshots of this, I got over excited and moved onto implementing 3d. By the time I thought about screenshots, I had already broken everything. I wasn’t using source control at this point, because I’m an idiot. I am now though. ↩︎