Implementation
The Dawn series of shaders are a tribute to some of the beautiful work of Rik Oostenbroek.
I've been a huge fan of his work for a long time, and was particularly inspired by some of his pieces that feature lovely, vertically-oriented gradients with a simple, repeating, linear pattern and a grainy texture.
A couple of examples that inspired this shader:
Breakdown
This shader introduces more complex geometric elements while maintaining the signature Dawn aesthetic. It uses SDFs (Signed Distance Functions) to create organic shapes, layered noise for variation, and a sophisticated masking system. There are 5 key components:
Gradient with SDF Modulation
Unlike the previous Dawn sketches, this gradient is modulated by a sphere SDF and noise, creating more organic color variation:
// Get aspect-corrected UVs for the screen
const uv0 = screenAspectUV(screenSize).toVar()
// Palette arguments
const a = vec3(0.8, 0.5, 0.4)
const b = vec3(0.2, 0.4, 0.2)
const c = vec3(2.0, 1.0, 1.0)
const d = vec3(0.0, 0.25, 0.25)
// Layered noise for organic variation
const n = simplexNoise3d(vec3(offsetUv, time.mul(0.1)))
// Gradient modulated by sphere SDF and noise
const col = cosinePalette(sdSphere(uv0).mul(n), a, b, c, d)Layered Noise System
This shader uses two layers of simplex noise with different scales to create organic variation:
// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize).toVar()
// X-repeated pattern for banding
const repetitions = 12.0
const repeatingPattern = floor(_uv.x.mul(repetitions)).mul(repetitions).mul(0.005)
// Sine wave for vertical offset
const s = sin(uv0.x.mul(PI)).toVar()
// Offset UVs for noise
const offsetUv = vec2(_uv.x, _uv.y.add(repeatingPattern).add(sin(mul(s, 0.05))))
// Layered noise for organic variation
const n = simplexNoise3d(vec3(offsetUv, time.mul(0.1)))
const n2 = simplexNoise3d(vec3(offsetUv.mul(2.0), time.mul(0.1)))Geometric Masking with SDFs
The masking system uses a box SDF with noise-modulated dimensions to create organic, flowing shapes:
// Offset UVs for noise
const offsetUv = vec2(_uv.x, _uv.y.add(repeatingPattern).add(sin(mul(s, 0.05))))
// Layered noise for organic variation
const n = simplexNoise3d(vec3(offsetUv, time.mul(0.1)))
const n2 = simplexNoise3d(vec3(offsetUv.mul(2.0), time.mul(0.1)))
// Mask using noise and box SDF
const t = oneMinus(sdBox2d(vec2(offsetUv.x.mul(mul(2.5, n)), offsetUv.y.mul(mul(1.5, n2)))))Horizontal Banding Pattern
This shader introduces a horizontal banding pattern using the floor function to create distinct bands:
// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize).toVar()
// X-repeated pattern for banding
const repetitions = 12.0
const repeatingPattern = floor(_uv.x.mul(repetitions)).mul(repetitions).mul(0.005)Sine Wave Modulation
A sine wave creates vertical offset variation that adds movement and organic flow:
// Get aspect-corrected UVs for the screen
const uv0 = screenAspectUV(screenSize).toVar()
// Sine wave for vertical offset
const s = sin(uv0.x.mul(PI)).toVar()
// Offset UVs for noise
const offsetUv = vec2(_uv.x, _uv.y.add(repeatingPattern).add(sin(mul(s, 0.05))))Texture
As with the other Dawn sketches, grain is added for texture:
// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize).toVar()
// Add grain for texture
const _grain = grainTexturePattern(_uv).mul(0.2)
finalColor.addAssign(_grain)
