Start

Shadertoy Integration

code experiment

An interactive Three.js integration of a Shadertoy SDF scene with mouse-driven orbit controls and zoom.

1. Demonstrator

interactive signed distance field scene

The jumping yellow creature, terrain and candy shapes are built from SDF primitives combined into a single distance field and rendered with raymarching.

Drag to orbit the camera. Use the mouse wheel — or pinch — to zoom.

Just a happy yellow creature

2. What is an SDF?

signed distance field

A Signed Distance Field is a function that reports how far a point in space is from the surface of an object. Its sign distinguishes the spatial state:

  • Negative — inside the object.
  • Zero — exactly on the surface.
  • Positive — outside the object.

3. Key Advantages

compact procedural geometry

  • Compact, mathematics-based scene descriptions.
  • Smooth blending between primitives.
  • Resolution-independent geometry without conventional meshes.