Susurrus: Crafting a Cozy Watercolor World with Three.js and Shaders

What would it not appear to be if a Three.js/WebGL 3D net expertise behaved like a watercolor portray—fluid, responsive, and interactive? In Susurrus, I discover this concept utilizing Non-Photorealistic Rendering (NPR), approaching stylization as each an aesthetic and a efficiency consideration. On this case examine, I’ll stroll by how this undertaking was designed and constructed.

Idea: Consolation That Doesn’t Exist

A forgotten windmill floats on the water, rendered with the delicacy of a watercolor portray but absolutely 3D and interactive. In Susurrus, the scene feels pure and comfy at first look, however subtly surreal and absurd upon nearer inspection. Comfortable sound design and a peaceful ambiance create a meditative, lo-fi–like area.

Beneath the comfy visuals, a delicate uncanny emerges: a submerged millhouse endlessly producing bread, regardless that the grain needs to be lengthy gone—a quiet image of non-existent consolation.

Designing Portray-like Visuals

As at all times, I hardly ever use Figma or different design instruments for private initiatives. I desire a freestyle method, exploring concepts from a short idea. The design course of looks like an echo in my thoughts: I need to have a home floating on reflective water, with the Kuwahara shader utilized as post-processing to create a painting-like 3D net expertise.

The UI/UX is intuitive and clear, specializing in 3D content material. Two poets are featured, however the core message is emotion and ambiance—expressed by visuals and sound. Identical to the title Susurrus, the phrases are delicate and unclear, extra about conveying a vibe than literal that means.

Tech Stack

• React
• React Three Fiber
• Drei
• React Three Rapier
• Howler.js
• TypeScript
• WebGL
• HTML / SCSS

Kuwahara Shader: Defining the Mission’s Id

Your entire visible model of Susurrus relies on the Kuwahara shader. Though it could look closely processed, the Kuwahara shader is definitely the one post-processing go within the undertaking, and the whole lot is constructed round it. Some settings and customized shaders are used to subtly “cheat” the attention and obtain the ultimate impact.

On this undertaking I began with it as step one—even earlier than ending the 3D fashions in Blender. This method allowed me to regulate visible results early and keep away from sudden shader outcomes later.

I researched totally different approaches to implementing the Kuwahara shader and located a number of useful assets on-line. The reference that the majority impressed me was a weblog by Maxime Heckel, the place he clearly explains the Kuwahara filter and explores painterly shading methods.

Based mostly on these references, I developed my very own simplified implementation throughout the undertaking, specializing in a extra light-weight and restricted method:

1. I didn’t use TensorPass to maintain the go easy, regardless that it might probably improve element.
2. I exploit a unique vertex-stage method in comparison with customary Kuwahara shader implementations.

various vec2 vUv;

  void principal() {
    vUv = uv;
    vec4 modelViewPosition = modelViewMatrix * vec4(place, 1.0);
   

    // Set the ultimate place of the vertex
    gl_Position = projectionMatrix * modelViewPosition;
  }

And the vertex code of my Kuwahara shader is:

various vec2 vUv;

void principal() {
  vUv = uv;
  gl_Position = vec4(place, 1.0);

I didn’t use the complete modelViewProjection (MVP) matrices to maintain calculations barely sooner, with the trade-off that the impact is weaker when the digital camera will get very shut—however for the reason that digital camera isn’t animated to method the fashions, this works okay.

Hier is my model of Kawahara Move which I utilized in Susurrus:

The Reflective Water

The reflective water is definitely made in a grimy manner, it’s simply three steps:

• 1. Used MeshReflectorMaterial, with the watercolor-like model, the decision may be very low, conserving efficiency clean on each cellular and desktop.
• 2. Created a customized shader and utilized it to a airplane above the MeshReflectorMaterial airplane, including extra element and animation to the water.
• 3. Adjusted lightning so the water seems to be extra vigorous, not too flat or boring.

Spawning Bread on Click on

he idea is about constructing a dynamic portray, so I believed it might be fascinating to implement the physics on this undertaking. The Spawning Bread is featured as the principle interactive factor of Susurrus.

Reveal Impact for the Intro

Concerning efficiency, I used ScrollControls to manage the reveal shader uProgress and utilized the shader to a ScreenQuad, which is a really useful method to implement the intro reveal impact.

const RevealOverlay = ({ seen = true }: { seen?: boolean }) => {
  const materialRef = useRef<THREE.ShaderMaterial>(null!);
  const meshRef = useRef<THREE.Mesh>(null!);
  const scroll = useScroll();

  const uniforms = useMemo(
    () => ({
      uProgress: { worth: 0 },
    }),
    [],
  );

  useEffect(() => {
    if (meshRef.present) {
      meshRef.present.raycast = () => null;
    }
  }, []);

  useFrame(() => {
    if (!materialRef.present) return;

    let offset = scroll.offset;
    if (offset < 0.001) offset = 0;

    materialRef.present.uniforms.uProgress.worth = offset * 0.9;
  });

  if (!seen) return null; 

  return (
    <ScreenQuad ref={meshRef} renderOrder={-1}>
      <shaderMaterial
        ref={materialRef}
        clear
        depthWrite={false} 
        uniforms={uniforms}
        vertexShader={revealVertexShader}
        fragmentShader={revealFragmentShader}
        facet={THREE.FrontSide}
        depthTest={false}
      />
    </ScreenQuad>
  );
};

export default RevealOverlay;

Sound Results & Interplay

I used react-howler to implement sound results. Completely different audio interactions may be triggered by hover or click on. The sound results are built-in with background music to attain a lo-fi model, which makes Susurrus really feel like a portray that may sing.

Responsive Design

As at all times, my purpose is cellular compatibility and clean efficiency on cellular units and older units as properly.

Remaining Ideas

Earlier than AI grew to become so highly effective, I typically anxious my work was too unusual. However as AI has grown extra succesful, my mindset has shifted. On this AI period, uniqueness feels extra essential these days. If my private initiatives are distinctive sufficient to go away even a faint impression, or make somebody pause for a millisecond and suppose, “what’s that?”—that feels sufficient to be happy with. It additionally pushes me to experiment extra in my private work.

Credit

3D Belongings:
(Sourced and modified for this undertaking)

Music & Sound Results: