Dawn 5

Gradient study inspired by Rik Oostenbroek. Strong centered glow near white and yellow, opening into soft orange and brown with prismatic fringe at the edge.

←Dawn 4 Imaginary 1→

dawn⁴

Dawn 5

Gradient study inspired by Rik Oostenbroek. Strong centered glow near white and yellow, opening into soft orange and brown with prismatic fringe at the edge.

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 builds on the geometric complexity of Dawn 4 but introduces new elements like contrast enhancement and different SDF masking techniques. It features layered noise, sphere-based masking, and a sophisticated color processing pipeline. There are 6 key components:

Gradient with Enhanced SDF Modulation

Cosine PaletteGenerate procedural color palettes with cosine functions. Create smooth, vibrant gradients mathematically.

This gradient uses a sphere SDF with additional noise layering for more organic color variation:

Enhanced SDF-modulated gradient

// Get aspect-corrected UVs for the screen
const uv0 = screenAspectUV(screenSize).toVar()
 
// Palette arguments
const a = vec3(0.5, 0.5, 0.5)
const b = vec3(0.5, 0.5, 0.5)
const c = vec3(1.0, 1.0, 0.5)
const d = vec3(0.8, 0.9, 0.3)
 
// 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 n2 = simplexNoise3d(vec3(offsetUv.mul(3.0), time.mul(0.25))).mul(0.12)
 
// Gradient modulated by sphere SDF and noise
const col = cosinePalette(sdSphere(uv0).add(n2), a, b, c, d)

Multi-Scale Noise System

Noise FunctionsProcedural noise functions: Perlin, Simplex, FBM, and more. Add organic randomness and variation to your shaders.

This shader employs two different scales of simplex noise with varying time offsets for organic variation:

Multi-scale noise system

// 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(3.0), time.mul(0.25))).mul(0.12)

Sphere-Based Masking

SDF Shape FunctionsSigned Distance Functions (SDFs) for 2D and 3D shapes. Essential primitives for shader programming and raymarching.

The masking system uses an absolute sphere SDF combined with noise for organic, flowing shapes:

Sphere-based masking

// 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)))
 
// Mask using noise and sphere SDF
const t = oneMinus(abs(sdSphere(offsetUv)).add(n))

Horizontal Banding Pattern

This shader maintains the horizontal banding pattern using the floor function to create distinct bands:

Horizontal banding pattern

// 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:

Sine wave modulation

// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize).toVar()
const uv0 = 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))))

Contrast Enhancement

Tonemapping FunctionsTonemapping and color grading functions for shaders. Enhance contrast, mood, and visual quality in your compositions.

A hyperbolic tangent function enhances contrast and vibrancy in the final output:

Contrast enhancement

// Soft contrast curve for vibrancy
finalColor.assign(tanh(finalColor.mul(2.5)))

Texture

Grain Texture PatternFilm grain shader pattern for analog texture and vintage aesthetics. Add cinematic character to digital compositions.

As with the other Dawn sketches, grain is added for texture:

Adding the grain

// 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)

←Dawn 4 Imaginary 1→

dawn⁴

Dawn 1
Free
Loading...
Dawn 2
Free
Loading...
Dawn 3
Free
Loading...
Dawn 4
Free
Loading...

Implementation

The Dawn series of shaders are a tribute to some of the beautiful work of Rik Oostenbroek.

A couple of examples that inspired this shader:

Breakdown

Gradient with Enhanced SDF Modulation

Cosine PaletteGenerate procedural color palettes with cosine functions. Create smooth, vibrant gradients mathematically.

This gradient uses a sphere SDF with additional noise layering for more organic color variation:

Enhanced SDF-modulated gradient

// Get aspect-corrected UVs for the screen
const uv0 = screenAspectUV(screenSize).toVar()
 
// Palette arguments
const a = vec3(0.5, 0.5, 0.5)
const b = vec3(0.5, 0.5, 0.5)
const c = vec3(1.0, 1.0, 0.5)
const d = vec3(0.8, 0.9, 0.3)
 
// 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 n2 = simplexNoise3d(vec3(offsetUv.mul(3.0), time.mul(0.25))).mul(0.12)
 
// Gradient modulated by sphere SDF and noise
const col = cosinePalette(sdSphere(uv0).add(n2), a, b, c, d)

Multi-Scale Noise System

Noise FunctionsProcedural noise functions: Perlin, Simplex, FBM, and more. Add organic randomness and variation to your shaders.

This shader employs two different scales of simplex noise with varying time offsets for organic variation:

Multi-scale noise system

// 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(3.0), time.mul(0.25))).mul(0.12)

Sphere-Based Masking

SDF Shape FunctionsSigned Distance Functions (SDFs) for 2D and 3D shapes. Essential primitives for shader programming and raymarching.

The masking system uses an absolute sphere SDF combined with noise for organic, flowing shapes:

Sphere-based masking

// 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)))
 
// Mask using noise and sphere SDF
const t = oneMinus(abs(sdSphere(offsetUv)).add(n))

Horizontal Banding Pattern

This shader maintains the horizontal banding pattern using the floor function to create distinct bands:

Horizontal banding pattern

// 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:

Sine wave modulation

// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize).toVar()
const uv0 = 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))))

Contrast Enhancement

Tonemapping FunctionsTonemapping and color grading functions for shaders. Enhance contrast, mood, and visual quality in your compositions.

A hyperbolic tangent function enhances contrast and vibrancy in the final output:

Contrast enhancement

// Soft contrast curve for vibrancy
finalColor.assign(tanh(finalColor.mul(2.5)))

Texture

Grain Texture PatternFilm grain shader pattern for analog texture and vintage aesthetics. Add cinematic character to digital compositions.

As with the other Dawn sketches, grain is added for texture:

Adding the grain

// 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)

Implementation

Breakdown

Gradient with Enhanced SDF Modulation

Multi-Scale Noise System

Sphere-Based Masking

Horizontal Banding Pattern

Sine Wave Modulation

Contrast Enhancement

Texture

Dawn 1

Dawn 2

Dawn 3

Dawn 4

Implementation

Breakdown

Gradient with Enhanced SDF Modulation

Multi-Scale Noise System

Sphere-Based Masking

Horizontal Banding Pattern

Sine Wave Modulation

Contrast Enhancement

Texture

Dawn 1

Dawn 2

Dawn 3

Dawn 4

Be the first to know what's next