Series: Building the Dream Builder

Welcome to this blog post series documenting our Dream Builder project, a Department of Dreams commission, from conception to realisation.

#0 Designing the Dream Builder

This post covers the initial thinking behind and design of the Dream Builder project.

#1 Setting Up Shaders with React Three Fiber

This post covers the project setup: the patches on the Create React App TypeScript template in order to get shaders working with React Three Fiber and then integrated with animation and gesture libraries like React Spring and Use Gesture.

#2 Understanding Basic GLSL Shader Techniques

This post covers some of the basic GLSL shader patterns that I needed to learn in order to complete the Dream Builder's crop implementation.

#3 Implementing Crop

This post covers how to implement image cropping on 2D planes in a React Three Fiber project. Use Gesture and React Spring for gestures.

#4 Implementing Undo with Zustand and RFC6902

This post covers how to write a Zustand middleware leveraging RFC6902 patches to add undo/redo functionality.