Sculpting Procedural Content with Implicit Surfaces

Hugh Kennedy

WebGL / npm / stack.gl

Shadertoy

Shader Rally

Skyline

Fractal Land

3D Meshes

The Conventional Approach

Let's Unlearn The Foundations of 3D Graphics For a Moment

We Only Need Two!

color = f(x, y, time)

How do we get to a 3D scene using only pixels?

Implicit Functions

"A function which is not defined explicitly, but rather is defined in terms of an algebraic relationship" — Wolfram MathWorld

x2 + y2 = 1

Unit Circle

x2 + y2 + z2 = 1

Unit Sphere

Signed Distance Functions

Return the distance of any point from a surface.

SDFs in 3D

Primitives

iquilezles.org

Operations

Minimum

d = min(d1, d2)

Smooth Minimum

d = smin(d1, d2, e)

Domain Repetition

p = mod(p + r/2, r) - r/2

Axial Domain Repetition

a = mod(atan(y, x) + r/2, r) - r/2
p = [cos(a), sin(a)] * length(p)

Build Up Operations & Primitives

Meditation for Dummies

These techniques aren't limited to Shadertoy

Voxelize and Generate a Mesh

Marching Cubes / Surface Nets / Dual Contouring / Greedy Meshing

Point Clouds

Dreams

Where to From Here?

Book of Shaders / hg_sdf / stack.gl / Shader School

Thanks!

Questions?