Computer Graphics

2D Graphics

Over the years I’ve built up a repertoire of techniques and workflows for working with the humble 2D canvas.

From procedural flowers to audio visualizers , it’s a blast! Plus it can take your website from “hmm” to “whoa!” with just a little bit of code.

3D Graphics

3D graphics is the next level - a step up both in complexity and in reward.

So far I’ve built two different 3D rendering pipelines from scratch; one in the Rust language using wgpu and one in Typescript using WebGPU.

The latter of which we use in-house for our web projects. The code is publicly available on our github: webgpu-renderer and it comes with two extensions; webgpu-renderer-gltf-loader and webgpu-renderer-post-processing.

The core renderer is lightweight, dependency-free, and typed - providing a solid foundation for building custom graphics projects.

You can take it for a spin (literally) over at webgpu-racing where we have a 3D racing game prototype built with it.

Key features include:

> A custom deferred rendering pipeline with support for multiple lights, shadows, and post-processing effects
> A glTF model loader that supports PBR materials, animations, and skinning
> A particle system for effects like smoke and sparks
> A highly customisable material pipeline with both hooks and entire overrides for the vertex and fragment shaders

Shaders

I won’t claim to possess the wizardry of the folks over at ShaderToy - but I do work with shaders frequently.

Shaders are another excellent tool to take a web design from “hmm” to “whoa!” and can be used for everything from simple hover effects and image transitions to complex procedural animations.

Libraries and Frameworks

I also have experience with a range of graphics libraries and frameworks, including:

These are brilliant and battle-tested tools that I’m more than comfortable using and extending to create custom graphics projects.

Next: Video Games