A behind-the-scenes case study of Susurrus, a WebGL experience that mimics watercolor painting using Non-Photorealistic Rendering (NPR). The author details the Kuwahara shader implementation as the core visual technique, a simplified version that skips TensorPass and MVP matrices for performance. Other technical highlights include reflective water using MeshReflectorMaterial with a custom shader overlay, physics-based bread spawning via React Three Rapier, a scroll-driven reveal effect using ScreenQuad, and sound integration with react-howler. The stack includes React Three Fiber, Drei, TypeScript, and Howler.js.
Table of contents
Concept: Comfort That Doesn’t ExistDesigning Painting-like VisualsTech StackKuwahara Shader: Defining the Project’s IdentityThe Reflective WaterSpawning Bread on ClickReveal Effect for the IntroSound Effects & InteractionResponsive DesignFinal ThoughtsCreditsSort: