Rhizome
Rhizome is a small TypeScript library for creating what I call “reactive resource trees”. It’s essentially a graph where each node is a resource (a buffer, a Canvas element, an image, etc.) and each edge is a dependency between resources. The library automatically tracks these dependencies and updates the resources when their dependencies change.
I use Rhizome for my WebGPU projects to simplify management of the many low-level resources that are needed for rendering. The reactivity comes in handy in many scenarios, including:
- Browsers can lose the GPU context for a number of reasons1, such as when a tab is moved to the background for a long time. All GPU-related resources are lost in this case, but Rhizome can automatically recreate them when the context is restored.
- Certain textures may need to be updated when the canvas is resized, or when the device pixel ratio changes.
- Assets like image textures can be hot-reloaded when the source file changes. I integrate with my own hot reloading library for this.
Since Rhizome encapsulates each resource type, it also means that I have easily been able to build a set of common resource types that can be used across projects. This alleviates a lot of the boilerplate code needed when working with WebGPU.