Making a Live WebGPU Shader Editor

This is a continuation from my previous post about Learning Rust and WebGPU. As I’ve been working through the WebGPU and Rust tutorials, I reached the point where I could render triangles onto a canvas and experiment with custom shaders. This inspired me to take a small detour and build a live code editor for wgsl (WebGPU Shading Language). Previously, I created a live GLSL shader editor using three.js (Basics of Shader Fractals). That approach involved loading the entire three.js library and setting up a camera to render onto a plane. While it worked, it felt unnecessarily heavy and a bit convoluted for the simple task of live shader editing. ...

September 29, 2025

Learning Rust and WebGPU

I’ve looking at getting more into graphics programming. So I’ve mostly worked within game engines and dabbled a bit in OpenGL. Why Choose WebGPU? Vulkan Super modern and powerful, but the API is really verbose and has a pretty steep learning curve. You get amazing performance and control though. DirectX 12 The go-to for Windows stuff; modern and fast with lots of low-level control, but it’s Windows-only (though DirectX 11 is still pretty common). OpenGL/WebGL Been around forever and works everywhere, but has a lot more CPU overhead and lacks modern graphics features. No native computer shaders. Metal Apple’s graphics. Super powerful and simpler syntax but I don’t got a Mac. WebGPU A bit higher level as it maps to modern API’s like Vulkan and Metal. Simpler syntax to get started. Still offers modern features and great performance versus WebGL. Great multi-platform targetting and easily runs in the browser. Will be nice for sharing project! Some good documentation exists luckily but not nearly as much as some of the more mature options. C++ or Rust? I had to decide between using C++ with Google’s Dawn implementation or Rust with the wgpu crate for my WebGPU journey. ...

September 26, 2025

Building Mini Escape Maker with AI

I took part on a project tentatively named “Mini Escape Maker” - an educational tool that lets teachers create interactive mystery games for their students. I focused mainly on the front-end implementation. Project Overview It’s a tool targeted towards educators to help build interactive mystery games (in the style of escape/clue games). The idea is you start with some mystery story where there’s an array of suspects. Educators then create pairings of clues and tools, and students can match them up in order to produce findings. ...

August 23, 2025

20-day TapTap Spotlight Challenge 2024

Lucid Dream | 20-day TapTap Game Jam 2024 unity Unity C# ...

April 5, 2025

Unity Modular Inputs with ScriptableObjects

Managing inputs in Unity can quickly become unwieldy, especially when dealing with multiple devices and input schemes. This guide explores a modular approach using ScriptableObjects to manage device-specific icons, decouple input events, and enable dependency injection for flexibility. Goals Ease of Management: Simplify handling device-specific input icons. Decoupling: Avoid relying on a centralized input manager. Flexibility: Use ScriptableObjects for modular and reusable input definitions. Drawbacks InputActionDefinition OnInput returns a CallbackContext that can have any information Subscribers have to assume the CallbackContext has the info they need (ex. a Vector2) Steps Follow these steps to implement this architecture: ...

January 8, 2025

Shadow Detection: Why Render Textures Were a Mistake

During a game jam centered around the theme of light, I worked on a project that required a shadow detection system. You can check out the game here. The challenge was to detect when objects were in light or shadow and identify the closest shadow to an object. Initially, I thought render textures would be an elegant solution, but this approach turned out to be a mistake. Here’s why. The Initial Appeal of Render Textures The idea was to use a camera positioned above the scene to capture light and shadow data into a render texture. This texture could then be sampled to determine if an object was in shadow or to find the nearest shadow by analyzing surrounding pixels. It seemed promising because it provided a dynamic map of the environment, avoiding the performance cost of casting multiple rays while also letting us easily find the closest shadow. ...

October 28, 2024

Real Time Rendering Notes

Some notes I’ve made while reading Real-Time Rendering Fourth Edition. Chapter 2 Summary: The Graphics Rendering Pipeline flowchart LR A[Application]:::app --> B[Geometry Processing]:::geo B --> C[Rasterization]:::rast C --> D[Pixel Processing]:::pix classDef app fill:#f9f9a3,stroke:#333,stroke-width:2px; classDef geo fill:#9fe0a6,stroke:#333,stroke-width:2px; classDef rast fill:#b5d3ff,stroke:#333,stroke-width:2px; classDef pix fill:#f9c1a3,stroke:#333,stroke-width:2px; Overview The graphics rendering pipeline is a core concept in real-time graphics. Its purpose is to generate a 2D image from a virtual 3D environment, which includes objects, light sources, and a virtual camera. The pipeline ensures that objects are appropriately rendered by processing their geometry, materials, light interactions, and textures, among other factors. ...

September 5, 2024

Responsive Melee Combat

What is Responsive Combat Whether it’s an attack, dodge, or block, responsive combat ensures each feels immediate and with appropriate feedback. Games like Hades got this nailed down to a tee. Attacks feel punchy with minimal delay and the player rarely feels like their fighting with the controls to get the game to do what they want. By providing precise control over the character’s abilities, responsive combat enhances the sense of agency and satisfaction, leading to more intense and rewarding gameplay experiences. ...

June 5, 2024

Unity Custom Passes with URP

I’m documenting some of my adventures looking into the Scriptable Render Pipelines in Unity. I have the goal of creating a stylized 3D pixel-art render pipeline heavily inspired by t3ssel8r. What is URP Cel-Shading Rendering To an Intermediate Texture During rendering passes, it’s common to store information by rendering to a texture instead of immediately rendering to the screen. For example, if you want to just do a pass to collect depth information, you can draw that information in memory and hold on to it to reference for later usage. You probably wouldn’t want to draw normals on the screen directly and mess with the rest of your render passes. ...

May 7, 2024

GitHub Basics for Designers

This will be a short tutorial about GitHub to get you quickly up and started conceptually if you have little to no experience. I may gloss over some things if you’re already familiar. What is Git? Git is a version control system. It keeps tracks of a repository of files and records all changes made to the files. Most popular in software development for managing code bases. It provides a system for multiple people to work on the same files by tracking changes, allowing easy reverting, and merging multiple changes. ...

May 7, 2024