Wednesday January 15, 2025

Home | Contact | Support | WebGPU Graphics and Compute ...

WebGPU/WGSL Tutorials and Articles

Graphics and Compute ...

Procedural Textures

Generating textures using various algorithms - from wood and stone through to lava, dirt and fabrics.

Natural Materials
1. Wood Grain: Mimics the rings of a tree using sinusoidal and noise-based modulation.
2. Marble: Simulates marble veining with sine functions combined with turbulence.
3. Stone/Granite: Produces rugged surfaces using fractal noise with fine jitter.
4. Sand/Dirt: Grainy patterns with FBM (Fractal Brownian Motion) noise.
5. Water/Waves: Undulating wave patterns using layered sinusoids.
6. Fire/Flames: Animated turbulence with a fiery color gradient.
7. Clouds: Soft, billowy patterns from smooth FBM noise.

Geometric Patterns
8. Checkerboard: Alternating squares of contrasting colors.
9. Stripes: Horizontal or vertical repeating bands.
10. Polka Dots: Repeated circular patterns with uniform or random distribution.
11. Hexagonal Grid: Honeycomb-like tessellation.
12. Triangle Grid: Tessellated triangular arrangements.
13. Wave Patterns: Sinusoidal waves, optionally layered for complexity.
14. Concentric Circles: Expanding rings emanating from a center.
15. Radial Gradient: Smooth transitions radiating outward from a point.
16. Spiral: Coiled patterns created with polar coordinates.

Organic/Abstract Patterns
17. Veins/Cracks: Geological fault patterns using Voronoi noise.
18. Bubbles: Randomized circular shapes resembling foam.
19. Plasma: Swirling, colorful, and dynamic noise patterns.
20. Interference: Moiré effects from overlapping sine waves.
21. Growth Rings: Concentric patterns mimicking organic growth.
22. Lava: Animated molten rock textures with turbulent distortion.

Synthetic Textures
23. Metallic Brushed: Anisotropic noise for brushed metal effects.
24. Circuit Board: Geometric, grid-like patterns with fine detail.
25. Carbon Fiber: Woven, tight checkerboard patterns.
26. Brick Wall: Offset rectangular patterns for walls.
27. Fabric/Weave: Intersecting sine waves mimicking textile patterns.

Procedural Variations
28. Fractal Terrain: Mountain-like patterns with height maps.
29. Gaseous Nebula: Colorful, swirling patterns resembling space phenomena.
30. Stained Glass: Randomized Voronoi cells with bright colors.
31. Lightning: Jagged, branching patterns from fractal techniques.
32. Pebble Path: Coherent scatter of rounded shapes.
33. Grass: Thin, randomized lines simulating blades of grass.
34. Snowflakes: Geometric, fractal-like patterns for snow crystals.
35. Wood Bark: Ridged, layered noise for bark textures.

Mathematical Patterns
36. Mandelbrot Set: Complex fractal patterns with infinite detail.
37. Julia Set: Parameterized fractals similar to Mandelbrot.
38. Moire Patterns: Overlapping grids creating interference effects.
39. Sinusoidal Grids: Ripple-like patterns from intersecting sine waves.
40. Tiled Fractals: Fractal shapes repeated within a tile grid.

Animated/Temporal Patterns
41. Flow Fields: Simulates fluid-like directional motion.
42. Ripples: Expanding wave rings resembling raindrop ripples.
43. Pulsing Rings: Oscillating concentric circles.
44. Fading Stripes: Time-based transitions between stripe patterns.
45. Morphing Grid: Dynamically distorting grid patterns.

Color-Based Patterns
46. Rainbow Gradient: Smooth transitions across the color spectrum.
47. Heatmap: Gradient patterns similar to thermal imaging.
48. Fluorescent Glow: Radial gradients with a glowing effect.
49. Iridescence: Thin-film interference patterns.
50. Grayscale Noise: Monochrome noise for masking or blending.

For fun, lets put all the textures on a single image!

Example Implementations

Obviously their is dozens of different ways to implement the texture algorithms - but to get you started and give you an idea the following gives you a simple example.

1. Wood Grain

<?php
// Default parameters: scale=10.0, grainIntensity=5.0
fn woodTexture(uv: vec2<f32>, scale: f32 = 10.0, grainIntensity: f32 = 5.0) -> vec3<f32> {
    let rings = scale * uv.x + grainIntensity * sin(scale * uv.y);
    let grain = abs(sin(rings));
    return vec3<f32>(grain, grain * 0.5, grain * 0.2);
}

// Default parameters: scale=10.0, grainIntensity=5.0
fn woodTexture(uv: vec2<f32>, scale: f32 = 10.0, grainIntensity: f32 = 5.0) -> vec3<f32> {
    let rings = scale * uv.x + grainIntensity * sin(scale * uv.y);
    let grain = abs(sin(rings));
    return vec3<f32>(grain, grain * 0.5, grain * 0.2);
}

2. Marble

<?php
// Default parameters: scale=5.0, turbulence=2.0
fn marbleTexture(uv: vec2<f32>, scale: f32 = 5.0, turbulence: f32 = 2.0) -> vec3<f32> {
    let veins = sin(uv.x * scale + turbulence * sin(uv.y * scale));
    let marble = 0.5 + 0.5 * veins;
    return vec3<f32>(marble, marble, marble * 0.8);
}

// Default parameters: scale=5.0, turbulence=2.0
fn marbleTexture(uv: vec2<f32>, scale: f32 = 5.0, turbulence: f32 = 2.0) -> vec3<f32> {
    let veins = sin(uv.x * scale + turbulence * sin(uv.y * scale));
    let marble = 0.5 + 0.5 * veins;
    return vec3<f32>(marble, marble, marble * 0.8);
}

3. Stone/Granite

<?php
// Default parameters: scale=8.0, roughness=0.5
fn stoneTexture(uv: vec2<f32>, scale: f32 = 8.0, roughness: f32 = 0.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let texture = mix(1.0, noise, roughness);
    return vec3<f32>(texture * 0.7, texture * 0.6, texture * 0.4);
}

// Default parameters: scale=8.0, roughness=0.5
fn stoneTexture(uv: vec2<f32>, scale: f32 = 8.0, roughness: f32 = 0.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let texture = mix(1.0, noise, roughness);
    return vec3<f32>(texture * 0.7, texture * 0.6, texture * 0.4);
}

4. Sand/Dirt

<?php
// Default parameters: scale=10.0, noiseFactor=0.5
fn sandTexture(uv: vec2<f32>, scale: f32 = 10.0, noiseFactor: f32 = 0.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let dirt = mix(0.7, 0.9, noise * noiseFactor);
    return vec3<f32>(dirt, dirt * 0.8, dirt * 0.5);
}

// Default parameters: scale=10.0, noiseFactor=0.5
fn sandTexture(uv: vec2<f32>, scale: f32 = 10.0, noiseFactor: f32 = 0.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let dirt = mix(0.7, 0.9, noise * noiseFactor);
    return vec3<f32>(dirt, dirt * 0.8, dirt * 0.5);
}

5. Water/Waves

<?php
// Default parameters: scale=1.0, frequency=5.0
fn waterRippleTexture(uv: vec2<f32>, scale: f32 = 1.0, frequency: f32 = 5.0) -> vec3<f32> {
    let ripple = sin(uv.x * frequency + uv.y * frequency);
    return vec3<f32>(0.0, 0.5 + 0.5 * ripple, 1.0);
}

// Default parameters: scale=1.0, frequency=5.0
fn waterRippleTexture(uv: vec2<f32>, scale: f32 = 1.0, frequency: f32 = 5.0) -> vec3<f32> {
let ripple = sin(uv.x * frequency + uv.y * frequency);
return vec3<f32>(0.0, 0.5 + 0.5 * ripple, 1.0);
}

6. Fire/Flames

<?php
// Default parameters: scale=2.0, turbulence=3.0
fn fireTexture(uv: vec2<f32>, scale: f32 = 2.0, turbulence: f32 = 3.0) -> vec3<f32> {
    let flame = abs(sin(uv.x * scale + turbulence * sin(uv.y * scale)));
    return vec3<f32>(flame, flame * 0.5, 0.0);
}

// Default parameters: scale=2.0, turbulence=3.0
fn fireTexture(uv: vec2<f32>, scale: f32 = 2.0, turbulence: f32 = 3.0) -> vec3<f32> {
let flame = abs(sin(uv.x * scale + turbulence * sin(uv.y * scale)));
return vec3<f32>(flame, flame * 0.5, 0.0);
}

7. Clouds

<?php
// Default parameters: scale=5.0, softness=0.6
fn cloudTexture(uv: vec2<f32>, scale: f32 = 5.0, softness: f32 = 0.6) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let clouds = smoothstep(softness, 1.0, noise);
    return vec3<f32>(clouds * 0.8, clouds * 0.8, clouds * 0.9);
}

// Default parameters: scale=5.0, softness=0.6
fn cloudTexture(uv: vec2<f32>, scale: f32 = 5.0, softness: f32 = 0.6) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let clouds = smoothstep(softness, 1.0, noise);
    return vec3<f32>(clouds * 0.8, clouds * 0.8, clouds * 0.9);
}

Geometric Patterns

8. Checkerboard

<?php
// Default parameters: scale=5.0
fn checkerboardTexture(uv: vec2<f32>, scale: f32 = 5.0) -> vec3<f32> {
    let checker = mod(floor(uv * scale), 2.0);
    return vec3<f32>(checker.x, checker.y, 0.0);
}

// Default parameters: scale=5.0
fn checkerboardTexture(uv: vec2<f32>, scale: f32 = 5.0) -> vec3<f32> {
let checker = mod(floor(uv * scale), 2.0);
return vec3<f32>(checker.x, checker.y, 0.0);
}

9. Stripes

<?php
// Default parameters: scale=5.0, direction=1.0
fn stripeTexture(uv: vec2<f32>, scale: f32 = 5.0, direction: f32 = 1.0) -> vec3<f32> {
    let stripe = mod(floor(uv.x * scale + direction), 2.0);
    return vec3<f32>(stripe, 0.0, 0.0);
}

// Default parameters: scale=5.0, direction=1.0
fn stripeTexture(uv: vec2<f32>, scale: f32 = 5.0, direction: f32 = 1.0) -> vec3<f32> {
let stripe = mod(floor(uv.x * scale + direction), 2.0);
return vec3<f32>(stripe, 0.0, 0.0);
}

10. Polka Dots

<?php
// Default parameters: scale=10.0, radius=0.2
fn polkaDotTexture(uv: vec2<f32>, scale: f32 = 10.0, radius: f32 = 0.2) -> vec3<f32> {
    let center = fract(uv * scale);
    let dist = length(center - 0.5);
    return vec3<f32>(step(dist, radius), 0.0, 0.0);
}

// Default parameters: scale=10.0, radius=0.2
fn polkaDotTexture(uv: vec2<f32>, scale: f32 = 10.0, radius: f32 = 0.2) -> vec3<f32> {
    let center = fract(uv * scale);
    let dist = length(center - 0.5);
    return vec3<f32>(step(dist, radius), 0.0, 0.0);
}

11. Hexagonal Grid

<?php
// Default parameters: scale=10.0
fn hexagonalGrid(uv: vec2<f32>, scale: f32 = 10.0) -> vec3<f32> {
    let hex = mod(floor(uv * scale), 2.0);
    return vec3<f32>(hex.x, hex.y, 0.0);
}

// Default parameters: scale=10.0
fn hexagonalGrid(uv: vec2<f32>, scale: f32 = 10.0) -> vec3<f32> {
let hex = mod(floor(uv * scale), 2.0);
return vec3<f32>(hex.x, hex.y, 0.0);
}

12. Triangle Grid

<?php
// Default parameters: scale=10.0
fn triangleGrid(uv: vec2<f32>, scale: f32 = 10.0) -> vec3<f32> {
    let tri = mod(floor(uv * scale), 2.0);
    return vec3<f32>(tri.x, 0.0, tri.y);
}

// Default parameters: scale=10.0
fn triangleGrid(uv: vec2<f32>, scale: f32 = 10.0) -> vec3<f32> {
let tri = mod(floor(uv * scale), 2.0);
return vec3<f32>(tri.x, 0.0, tri.y);
}

13. Wave Patterns

<?php
// Default parameters: frequency=5.0
fn wavePattern(uv: vec2<f32>, frequency: f32 = 5.0) -> vec3<f32> {
    let wave = sin(uv.x * frequency) + sin(uv.y * frequency);
    return vec3<f32>(wave * 0.5 + 0.5, 0.0, 0.0);
}

// Default parameters: frequency=5.0
fn wavePattern(uv: vec2<f32>, frequency: f32 = 5.0) -> vec3<f32> {
let wave = sin(uv.x * frequency) + sin(uv.y * frequency);
return vec3<f32>(wave * 0.5 + 0.5, 0.0, 0.0);
}

14. Concentric Circles

<?php
// Default parameters: scale=5.0, center=0.5
fn concentricCircles(uv: vec2<f32>, scale: f32 = 5.0, center: f32 = 0.5) -> vec3<f32> {
    let dist = length(uv - vec2<f32>(center, center)) * scale;
    let rings = sin(dist);
    return vec3<f32>(rings * 0.5 + 0.5, rings * 0.3, rings * 0.1);
}

// Default parameters: scale=5.0, center=0.5
fn concentricCircles(uv: vec2<f32>, scale: f32 = 5.0, center: f32 = 0.5) -> vec3<f32> {
    let dist = length(uv - vec2<f32>(center, center)) * scale;
    let rings = sin(dist);
    return vec3<f32>(rings * 0.5 + 0.5, rings * 0.3, rings * 0.1);
}

15. Radial Gradient

<?php
// Default parameters: scale=5.0
fn radialGradient(uv: vec2<f32>, scale: f32 = 5.0) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    return vec3<f32>(dist, dist * 0.5, dist * 0.2);
}

// Default parameters: scale=5.0
fn radialGradient(uv: vec2<f32>, scale: f32 = 5.0) -> vec3<f32> {
let dist = length(uv - 0.5) * scale;
return vec3<f32>(dist, dist * 0.5, dist * 0.2);
}

16. Spiral

<?php
// Default parameters: scale=5.0, turnCount=5.0
fn spiralTexture(uv: vec2<f32>, scale: f32 = 5.0, turnCount: f32 = 5.0) -> vec3<f32> {
    let angle = atan2(uv.y - 0.5, uv.x - 0.5);
    let radius = length(uv - 0.5) * scale;
    let spiral = sin(angle * turnCount + radius);
    return vec3<f32>(spiral * 0.5 + 0.5, spiral * 0.4, spiral * 0.3);
}

// Default parameters: scale=5.0, turnCount=5.0
fn spiralTexture(uv: vec2<f32>, scale: f32 = 5.0, turnCount: f32 = 5.0) -> vec3<f32> {
    let angle = atan2(uv.y - 0.5, uv.x - 0.5);
    let radius = length(uv - 0.5) * scale;
    let spiral = sin(angle * turnCount + radius);
    return vec3<f32>(spiral * 0.5 + 0.5, spiral * 0.4, spiral * 0.3);
}

Organic/Abstract Patterns

17. Veins/Cracks

<?php
// Default parameters: scale=5.0, roughness=1.0
fn veinsTexture(uv: vec2<f32>, scale: f32 = 5.0, roughness: f32 = 1.0) -> vec3<f32> {
    let veins = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    return vec3<f32>(veins * roughness, veins * roughness * 0.6, 0.0);
}

// Default parameters: scale=5.0, roughness=1.0
fn veinsTexture(uv: vec2<f32>, scale: f32 = 5.0, roughness: f32 = 1.0) -> vec3<f32> {
let veins = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
return vec3<f32>(veins * roughness, veins * roughness * 0.6, 0.0);
}

18. Bubbles

<?php
// Default parameters: scale=10.0, size=0.1
fn bubblesTexture(uv: vec2<f32>, scale: f32 = 10.0, size: f32 = 0.1) -> vec3<f32> {
    let dist = length(fract(uv * scale) - 0.5);
    return vec3<f32>(step(dist, size), 0.5, 1.0);
}

// Default parameters: scale=10.0, size=0.1
fn bubblesTexture(uv: vec2<f32>, scale: f32 = 10.0, size: f32 = 0.1) -> vec3<f32> {
let dist = length(fract(uv * scale) - 0.5);
return vec3<f32>(step(dist, size), 0.5, 1.0);
}

19. Plasma

<?php
// Default parameters: scale=5.0, turbulence=0.5
fn plasmaTexture(uv: vec2<f32>, scale: f32 = 5.0, turbulence: f32 = 0.5) -> vec3<f32> {
    let noise = sin(uv.x * scale + turbulence * cos(uv.y * scale));
    return vec3<f32>(noise * 0.5 + 0.5, noise * 0.3 + 0.5, noise * 0.2 + 0.5);
}

// Default parameters: scale=5.0, turbulence=0.5
fn plasmaTexture(uv: vec2<f32>, scale: f32 = 5.0, turbulence: f32 = 0.5) -> vec3<f32> {
let noise = sin(uv.x * scale + turbulence * cos(uv.y * scale));
return vec3<f32>(noise * 0.5 + 0.5, noise * 0.3 + 0.5, noise * 0.2 + 0.5);
}

20. Interference

<?php
// Default parameters: scale=5.0, amplitude=0.5
fn interferenceTexture(uv: vec2<f32>, scale: f32 = 5.0, amplitude: f32 = 0.5) -> vec3<f32> {
    let interference = sin(uv.x * scale + uv.y * scale) * amplitude;
    return vec3<f32>(interference, interference * 0.5, interference * 0.3);
}

// Default parameters: scale=5.0, amplitude=0.5
fn interferenceTexture(uv: vec2<f32>, scale: f32 = 5.0, amplitude: f32 = 0.5) -> vec3<f32> {
let interference = sin(uv.x * scale + uv.y * scale) * amplitude;
return vec3<f32>(interference, interference * 0.5, interference * 0.3);
}

21. Growth Rings

<?php
// Default parameters: scale=5.0, rings=10.0
fn growthRingsTexture(uv: vec2<f32>, scale: f32 = 5.0, rings: f32 = 10.0) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    let ring = sin(dist * rings);
    return vec3<f32>(ring * 0.8 + 0.2, ring * 0.6 + 0.4, ring * 0.4 + 0.2);
}

// Default parameters: scale=5.0, rings=10.0
fn growthRingsTexture(uv: vec2<f32>, scale: f32 = 5.0, rings: f32 = 10.0) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    let ring = sin(dist * rings);
    return vec3<f32>(ring * 0.8 + 0.2, ring * 0.6 + 0.4, ring * 0.4 + 0.2);
}

22. Lava

<?php
// Default parameters: scale=5.0, intensity=1.5
fn lavaTexture(uv: vec2<f32>, scale: f32 = 5.0, intensity: f32 = 1.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let lava = noise * intensity;
    return vec3<f32>(lava * 1.0, lava * 0.5, lava * 0.0);
}

// Default parameters: scale=5.0, intensity=1.5
fn lavaTexture(uv: vec2<f32>, scale: f32 = 5.0, intensity: f32 = 1.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let lava = noise * intensity;
    return vec3<f32>(lava * 1.0, lava * 0.5, lava * 0.0);
}

Synthetic Textures

23. Metallic Brushed

<?php
// Default parameters: scale=5.0, roughness=0.3
fn metallicBrushedTexture(uv: vec2<f32>, scale: f32 = 5.0, roughness: f32 = 0.3) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let metallic = mix(0.5, 1.0, noise * roughness);
    return vec3<f32>(metallic, metallic * 0.7, metallic * 0.4);
}

// Default parameters: scale=5.0, roughness=0.3
fn metallicBrushedTexture(uv: vec2<f32>, scale: f32 = 5.0, roughness: f32 = 0.3) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let metallic = mix(0.5, 1.0, noise * roughness);
    return vec3<f32>(metallic, metallic * 0.7, metallic * 0.4);
}

24. Circuit Board

<?php
// Default parameters: scale=10.0, lineThickness=0.02
fn circuitBoardTexture(uv: vec2<f32>, scale: f32 = 10.0, lineThickness: f32 = 0.02) -> vec3<f32> {
    let grid = fract(uv * scale);
    let lines = step(lineThickness, grid);
    return vec3<f32>(lines.x, lines.y, lines.x * 0.5);
}

// Default parameters: scale=10.0, lineThickness=0.02
fn circuitBoardTexture(uv: vec2<f32>, scale: f32 = 10.0, lineThickness: f32 = 0.02) -> vec3<f32> {
    let grid = fract(uv * scale);
    let lines = step(lineThickness, grid);
    return vec3<f32>(lines.x, lines.y, lines.x * 0.5);
}

25. Carbon Fiber

<?php
// Default parameters: scale=10.0, weaveSize=0.1
fn carbonFiberTexture(uv: vec2<f32>, scale: f32 = 10.0, weaveSize: f32 = 0.1) -> vec3<f32> {
    let dist = length(fract(uv * scale) - 0.5);
    return vec3<f32>(step(dist, weaveSize), step(dist, weaveSize) * 0.7, step(dist, weaveSize) * 0.5);
}

// Default parameters: scale=10.0, weaveSize=0.1
fn carbonFiberTexture(uv: vec2<f32>, scale: f32 = 10.0, weaveSize: f32 = 0.1) -> vec3<f32> {
let dist = length(fract(uv * scale) - 0.5);
return vec3<f32>(step(dist, weaveSize), step(dist, weaveSize) * 0.7, step(dist, weaveSize) * 0.5);
}

26. Brick Wall

<?php
// Default parameters: scale=1.0, brickHeight=0.2
fn brickWallTexture(uv: vec2<f32>, scale: f32 = 1.0, brickHeight: f32 = 0.2) -> vec3<f32> {
    let brick = mod(floor(uv.x * scale), 2.0);
    let height = mod(floor(uv.y / brickHeight), 2.0);
    return vec3<f32>(brick, brick * 0.3, height * 0.3);
}

// Default parameters: scale=1.0, brickHeight=0.2
fn brickWallTexture(uv: vec2<f32>, scale: f32 = 1.0, brickHeight: f32 = 0.2) -> vec3<f32> {
    let brick = mod(floor(uv.x * scale), 2.0);
    let height = mod(floor(uv.y / brickHeight), 2.0);
    return vec3<f32>(brick, brick * 0.3, height * 0.3);
}

27. Fabric/Weave

<?php
// Default parameters: scale=10.0, weaveSize=0.1
fn fabricWeaveTexture(uv: vec2<f32>, scale: f32 = 10.0, weaveSize: f32 = 0.1) -> vec3<f32> {
    let dist = length(fract(uv * scale) - 0.5);
    return vec3<f32>(step(dist, weaveSize), step(dist, weaveSize) * 0.7, step(dist, weaveSize) * 0.5);
}

// Default parameters: scale=10.0, weaveSize=0.1
fn fabricWeaveTexture(uv: vec2<f32>, scale: f32 = 10.0, weaveSize: f32 = 0.1) -> vec3<f32> {
let dist = length(fract(uv * scale) - 0.5);
return vec3<f32>(step(dist, weaveSize), step(dist, weaveSize) * 0.7, step(dist, weaveSize) * 0.5);
}

Procedural Variations

28. Fractal Terrain

<?php
// Default parameters: scale=5.0, roughness=0.6
fn fractalTerrainTexture(uv: vec2<f32>, scale: f32 = 5.0, roughness: f32 = 0.6) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    return vec3<f32>(noise * roughness, noise * 0.7, noise * 0.3);
}

// Default parameters: scale=5.0, roughness=0.6
fn fractalTerrainTexture(uv: vec2<f32>, scale: f32 = 5.0, roughness: f32 = 0.6) -> vec3<f32> {
let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
return vec3<f32>(noise * roughness, noise * 0.7, noise * 0.3);
}

29. Gaseous Nebula

<?php
// Default parameters: scale=5.0, intensity=0.5
fn gaseousNebulaTexture(uv: vec2<f32>, scale: f32 = 5.0, intensity: f32 = 0.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    return vec3<f32>(noise * intensity, noise * 0.8, noise * 0.6);
}

// Default parameters: scale=5.0, intensity=0.5
fn gaseousNebulaTexture(uv: vec2<f32>, scale: f32 = 5.0, intensity: f32 = 0.5) -> vec3<f32> {
let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
return vec3<f32>(noise * intensity, noise * 0.8, noise * 0.6);
}

30. Stained Glass

<?php
// Default parameters: scale=5.0, colorVariance=0.2
fn stainedGlassTexture(uv: vec2<f32>, scale: f32 = 5.0, colorVariance: f32 = 0.2) -> vec3<f32> {
    let cell = fract(uv * scale);
    return vec3<f32>(cell.x * colorVariance, cell.y * colorVariance, (cell.x + cell.y) * 0.3);
}

// Default parameters: scale=5.0, colorVariance=0.2
fn stainedGlassTexture(uv: vec2<f32>, scale: f32 = 5.0, colorVariance: f32 = 0.2) -> vec3<f32> {
let cell = fract(uv * scale);
return vec3<f32>(cell.x * colorVariance, cell.y * colorVariance, (cell.x + cell.y) * 0.3);
}

31. Lightning

<?php
// Default parameters: scale=5.0, jaggedness=1.0
fn lightningTexture(uv: vec2<f32>, scale: f32 = 5.0, jaggedness: f32 = 1.0) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let lightning = abs(noise - 0.5) * jaggedness;
    return vec3<f32>(lightning, lightning * 0.8, lightning * 0.4);
}

// Default parameters: scale=5.0, jaggedness=1.0
fn lightningTexture(uv: vec2<f32>, scale: f32 = 5.0, jaggedness: f32 = 1.0) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let lightning = abs(noise - 0.5) * jaggedness;
    return vec3<f32>(lightning, lightning * 0.8, lightning * 0.4);
}

32. Pebble Path

<?php
// Default parameters: scale=10.0, pebbleSize=0.1
fn pebblePathTexture(uv: vec2<f32>, scale: f32 = 10.0, pebbleSize: f32 = 0.1) -> vec3<f32> {
    let dist = length(fract(uv * scale) - 0.5);
    return vec3<f32>(step(dist, pebbleSize), 0.6, 0.3);
}

// Default parameters: scale=10.0, pebbleSize=0.1
fn pebblePathTexture(uv: vec2<f32>, scale: f32 = 10.0, pebbleSize: f32 = 0.1) -> vec3<f32> {
let dist = length(fract(uv * scale) - 0.5);
return vec3<f32>(step(dist, pebbleSize), 0.6, 0.3);
}

33. Grass

<?php
// Default parameters: scale=10.0, bladeHeight=0.5
fn grassTexture(uv: vec2<f32>, scale: f32 = 10.0, bladeHeight: f32 = 0.5) -> vec3<f32> {
    let blade = step(0.2, fract(uv.x * scale)) * bladeHeight;
    return vec3<f32>(0.2, blade * 0.8, 0.2);
}

// Default parameters: scale=10.0, bladeHeight=0.5
fn grassTexture(uv: vec2<f32>, scale: f32 = 10.0, bladeHeight: f32 = 0.5) -> vec3<f32> {
let blade = step(0.2, fract(uv.x * scale)) * bladeHeight;
return vec3<f32>(0.2, blade * 0.8, 0.2);
}

34. Snowflakes

<?php
// Default parameters: scale=5.0, fractalDetail=2.0
fn snowflakeTexture(uv: vec2<f32>, scale: f32 = 5.0, fractalDetail: f32 = 2.0) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let snowflake = smoothstep(fractalDetail, 1.0, noise);
    return vec3<f32>(snowflake * 0.9, snowflake * 0.9, snowflake * 1.0);
}

// Default parameters: scale=5.0, fractalDetail=2.0
fn snowflakeTexture(uv: vec2<f32>, scale: f32 = 5.0, fractalDetail: f32 = 2.0) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let snowflake = smoothstep(fractalDetail, 1.0, noise);
    return vec3<f32>(snowflake * 0.9, snowflake * 0.9, snowflake * 1.0);
}

35. Wood Bark

<?php
// Default parameters: scale=5.0, ridges=5.0
fn woodBarkTexture(uv: vec2<f32>, scale: f32 = 5.0, ridges: f32 = 5.0) -> vec3<f32> {
    let bark = sin(uv.x * scale + uv.y * ridges);
    return vec3<f32>(bark * 0.6 + 0.4, bark * 0.5 + 0.3, bark * 0.3 + 0.2);
}

// Default parameters: scale=5.0, ridges=5.0
fn woodBarkTexture(uv: vec2<f32>, scale: f32 = 5.0, ridges: f32 = 5.0) -> vec3<f32> {
let bark = sin(uv.x * scale + uv.y * ridges);
return vec3<f32>(bark * 0.6 + 0.4, bark * 0.5 + 0.3, bark * 0.3 + 0.2);
}

36. Mandelbrot Set

<?php
// Default parameters: scale=5.0, iterations=50
fn mandelbrotSet(uv: vec2<f32>, scale: f32 = 5.0, iterations: f32 = 50.0) -> vec3<f32> {
    let c = uv * scale - 1.0;
    var z = vec2<f32>(0.0, 0.0);
    var count: f32 = 0.0;
    for (var i = 0u; i < iterations; i = i + 1u) {
        z = vec2<f32>(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
        if (length(z) > 2.0) {
            break;
        }
        count = count + 1.0;
    }
    return vec3<f32>(count / iterations, count / iterations, count / iterations);
}

// Default parameters: scale=5.0, iterations=50
fn mandelbrotSet(uv: vec2<f32>, scale: f32 = 5.0, iterations: f32 = 50.0) -> vec3<f32> {
    let c = uv * scale - 1.0;
    var z = vec2<f32>(0.0, 0.0);
    var count: f32 = 0.0;
    for (var i = 0u; i < iterations; i = i + 1u) {
        z = vec2<f32>(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
        if (length(z) > 2.0) {
            break;
        }
        count = count + 1.0;
    }
    return vec3<f32>(count / iterations, count / iterations, count / iterations);
}

37. Julia Set

<?php
// Default parameters: scale=1.0, iterations=50
fn juliaSet(uv: vec2<f32>, scale: f32 = 1.0, iterations: f32 = 50.0) -> vec3<f32> {
    let c = vec2<f32>(0.355, 0.355); // Fixed Julia constant
    var z = uv * scale;
    var count: f32 = 0.0;
    for (var i = 0u; i < iterations; i = i + 1u) {
        z = vec2<f32>(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
        if (length(z) > 2.0) {
            break;
        }
        count = count + 1.0;
    }
    return vec3<f32>(count / iterations, count / iterations, count / iterations);
}

// Default parameters: scale=1.0, iterations=50
fn juliaSet(uv: vec2<f32>, scale: f32 = 1.0, iterations: f32 = 50.0) -> vec3<f32> {
    let c = vec2<f32>(0.355, 0.355); // Fixed Julia constant
    var z = uv * scale;
    var count: f32 = 0.0;
    for (var i = 0u; i < iterations; i = i + 1u) {
        z = vec2<f32>(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
        if (length(z) > 2.0) {
            break;
        }
        count = count + 1.0;
    }
    return vec3<f32>(count / iterations, count / iterations, count / iterations);
}

38. Moire Patterns

<?php
// Default parameters: scale=10.0, frequency=5.0
fn moirePatternsTexture(uv: vec2<f32>, scale: f32 = 10.0, frequency: f32 = 5.0) -> vec3<f32> {
    let grid1 = fract(uv * scale);
    let grid2 = fract(uv * scale * frequency);
    let interference = abs(grid1 - grid2);
    return vec3<f32>(interference, interference * 0.5, interference * 0.2);
}

// Default parameters: scale=10.0, frequency=5.0
fn moirePatternsTexture(uv: vec2<f32>, scale: f32 = 10.0, frequency: f32 = 5.0) -> vec3<f32> {
    let grid1 = fract(uv * scale);
    let grid2 = fract(uv * scale * frequency);
    let interference = abs(grid1 - grid2);
    return vec3<f32>(interference, interference * 0.5, interference * 0.2);
}

39. Sinusoidal Grids

<?php
// Default parameters: scale=10.0, frequency=2.0
fn sinusoidalGridsTexture(uv: vec2<f32>, scale: f32 = 10.0, frequency: f32 = 2.0) -> vec3<f32> {
    let sinX = sin(uv.x * frequency);
    let sinY = sin(uv.y * frequency);
    let grid = abs(sinX + sinY);
    return vec3<f32>(grid, grid * 0.5, grid * 0.2);
}

// Default parameters: scale=10.0, frequency=2.0
fn sinusoidalGridsTexture(uv: vec2<f32>, scale: f32 = 10.0, frequency: f32 = 2.0) -> vec3<f32> {
    let sinX = sin(uv.x * frequency);
    let sinY = sin(uv.y * frequency);
    let grid = abs(sinX + sinY);
    return vec3<f32>(grid, grid * 0.5, grid * 0.2);
}

40. Tiled Fractals

<?php
// Default parameters: scale=5.0, fractalDetail=2.0
fn tiledFractalsTexture(uv: vec2<f32>, scale: f32 = 5.0, fractalDetail: f32 = 2.0) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let fractal = fract(noise * fractalDetail);
    return vec3<f32>(fractal, fractal * 0.7, fractal * 0.5);
}

// Default parameters: scale=5.0, fractalDetail=2.0
fn tiledFractalsTexture(uv: vec2<f32>, scale: f32 = 5.0, fractalDetail: f32 = 2.0) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    let fractal = fract(noise * fractalDetail);
    return vec3<f32>(fractal, fractal * 0.7, fractal * 0.5);
}

41. Flow Fields

<?php
// Default parameters: scale=10.0, speed=0.1
fn flowFieldsTexture(uv: vec2<f32>, scale: f32 = 10.0, speed: f32 = 0.1) -> vec3<f32> {
    let flow = sin(uv.x * scale + speed * sin(uv.y * scale));
    return vec3<f32>(flow, flow * 0.5, flow * 0.2);
}

// Default parameters: scale=10.0, speed=0.1
fn flowFieldsTexture(uv: vec2<f32>, scale: f32 = 10.0, speed: f32 = 0.1) -> vec3<f32> {
let flow = sin(uv.x * scale + speed * sin(uv.y * scale));
return vec3<f32>(flow, flow * 0.5, flow * 0.2);
}

42. Ripples

<?php
// Default parameters: scale=10.0, waveSpeed=0.5
fn ripplesTexture(uv: vec2<f32>, scale: f32 = 10.0, waveSpeed: f32 = 0.5) -> vec3<f32> {
    let dist = length(uv - 0.5);
    let ripples = sin(dist * scale - waveSpeed);
    return vec3<f32>(ripples * 0.5 + 0.5, ripples * 0.3 + 0.5, ripples * 0.1 + 0.5);
}

// Default parameters: scale=10.0, waveSpeed=0.5
fn ripplesTexture(uv: vec2<f32>, scale: f32 = 10.0, waveSpeed: f32 = 0.5) -> vec3<f32> {
    let dist = length(uv - 0.5);
    let ripples = sin(dist * scale - waveSpeed);
    return vec3<f32>(ripples * 0.5 + 0.5, ripples * 0.3 + 0.5, ripples * 0.1 + 0.5);
}

43. Pulsing Rings

<?php
// Default parameters: scale=10.0, pulseSpeed=1.0
fn pulsingRingsTexture(uv: vec2<f32>, scale: f32 = 10.0, pulseSpeed: f32 = 1.0) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    let pulse = sin(dist - pulseSpeed * sin(dist));
    return vec3<f32>(pulse * 0.5 + 0.5, pulse * 0.3 + 0.5, pulse * 0.2 + 0.5);
}

// Default parameters: scale=10.0, pulseSpeed=1.0
fn pulsingRingsTexture(uv: vec2<f32>, scale: f32 = 10.0, pulseSpeed: f32 = 1.0) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    let pulse = sin(dist - pulseSpeed * sin(dist));
    return vec3<f32>(pulse * 0.5 + 0.5, pulse * 0.3 + 0.5, pulse * 0.2 + 0.5);
}

44. Fading Stripes

<?php
// Default parameters: scale=10.0, fadeSpeed=1.0
fn fadingStripesTexture(uv: vec2<f32>, scale: f32 = 10.0, fadeSpeed: f32 = 1.0) -> vec3<f32> {
    let stripes = mod(floor(uv.x * scale), 2.0);
    let fade = smoothstep(0.0, fadeSpeed, sin(uv.y * scale));
    return vec3<f32>(stripes, stripes * fade, stripes * 0.5);
}

// Default parameters: scale=10.0, fadeSpeed=1.0
fn fadingStripesTexture(uv: vec2<f32>, scale: f32 = 10.0, fadeSpeed: f32 = 1.0) -> vec3<f32> {
    let stripes = mod(floor(uv.x * scale), 2.0);
    let fade = smoothstep(0.0, fadeSpeed, sin(uv.y * scale));
    return vec3<f32>(stripes, stripes * fade, stripes * 0.5);
}

45. Morphing Grid

<?php
// Default parameters: scale=10.0, time=0.0
fn morphingGridTexture(uv: vec2<f32>, scale: f32 = 10.0, time: f32 = 0.0) -> vec3<f32> {
    let grid = fract(uv * scale + time);
    return vec3<f32>(grid, grid * 0.5, grid * 0.2);
}

// Default parameters: scale=10.0, time=0.0
fn morphingGridTexture(uv: vec2<f32>, scale: f32 = 10.0, time: f32 = 0.0) -> vec3<f32> {
let grid = fract(uv * scale + time);
return vec3<f32>(grid, grid * 0.5, grid * 0.2);
}

46. Rainbow Gradient

<?php
// Default parameters: scale=10.0, offset=0.0
fn rainbowGradientTexture(uv: vec2<f32>, scale: f32 = 10.0, offset: f32 = 0.0) -> vec3<f32> {
    let rainbow = mod(uv.x * scale + offset, 1.0);
    return vec3<f32>(rainbow, 1.0 - rainbow, 0.5);
}

// Default parameters: scale=10.0, offset=0.0
fn rainbowGradientTexture(uv: vec2<f32>, scale: f32 = 10.0, offset: f32 = 0.0) -> vec3<f32> {
let rainbow = mod(uv.x * scale + offset, 1.0);
return vec3<f32>(rainbow, 1.0 - rainbow, 0.5);
}

47. Heatmap

<?php
// Default parameters: scale=10.0, intensity=0.8
fn heatmapTexture(uv: vec2<f32>, scale: f32 = 10.0, intensity: f32 = 0.8) -> vec3<f32> {
    let heat = smoothstep(0.0, intensity, uv.y * scale);
    return vec3<f32>(heat, 0.5, 1.0 - heat);
}

// Default parameters: scale=10.0, intensity=0.8
fn heatmapTexture(uv: vec2<f32>, scale: f32 = 10.0, intensity: f32 = 0.8) -> vec3<f32> {
let heat = smoothstep(0.0, intensity, uv.y * scale);
return vec3<f32>(heat, 0.5, 1.0 - heat);
}

48. Fluorescent Glow

<?php
// Default parameters: scale=10.0, glowIntensity=1.0
fn fluorescentGlowTexture(uv: vec2<f32>, scale: f32 = 10.0, glowIntensity: f32 = 1.0) -> vec3<f32> {
    let dist = length(uv - 0.5);
    let glow = smoothstep(0.0, glowIntensity, dist * scale);
    return vec3<f32>(glow, glow * 0.5, glow * 1.0);
}

// Default parameters: scale=10.0, glowIntensity=1.0
fn fluorescentGlowTexture(uv: vec2<f32>, scale: f32 = 10.0, glowIntensity: f32 = 1.0) -> vec3<f32> {
    let dist = length(uv - 0.5);
    let glow = smoothstep(0.0, glowIntensity, dist * scale);
    return vec3<f32>(glow, glow * 0.5, glow * 1.0);
}

49. Iridescence

<?php
// Default parameters: scale=10.0, filmThickness=0.1
fn iridescenceTexture(uv: vec2<f32>, scale: f32 = 10.0, filmThickness: f32 = 0.1) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    let iridescence = smoothstep(0.0, filmThickness, dist);
    return vec3<f32>(iridescence, iridescence * 0.5, iridescence * 0.7);
}

// Default parameters: scale=10.0, filmThickness=0.1
fn iridescenceTexture(uv: vec2<f32>, scale: f32 = 10.0, filmThickness: f32 = 0.1) -> vec3<f32> {
    let dist = length(uv - 0.5) * scale;
    let iridescence = smoothstep(0.0, filmThickness, dist);
    return vec3<f32>(iridescence, iridescence * 0.5, iridescence * 0.7);
}

50. Grayscale Noise

<?php
// Default parameters: scale=10.0, intensity=0.5
fn grayscaleNoiseTexture(uv: vec2<f32>, scale: f32 = 10.0, intensity: f32 = 0.5) -> vec3<f32> {
    let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
    return vec3<f32>(noise * intensity, noise * intensity, noise * intensity);
}

// Default parameters: scale=10.0, intensity=0.5
fn grayscaleNoiseTexture(uv: vec2<f32>, scale: f32 = 10.0, intensity: f32 = 0.5) -> vec3<f32> {
let noise = fract(sin(dot(uv, vec2<f32>(scale, scale))) * 43758.5453);
return vec3<f32>(noise * intensity, noise * intensity, noise * intensity);
}

Things to Try

These functions are only the the start of procedural textures - but they provide examples of just how easy it is to create textures instead of loading them from a file.

Some things to try:

• Add more texture types
• Play around with the default parameters (maybe add an interface to control them)
• Mix and combine the textures (e.g., wood with dirt)
• Explore 3D textures - instead of just a 2d uv seed - you can use a 3d seed (extra depth value) - which should represent the changes of the texture as you slice away the layers (think of it like a piece of wood - if you cut away layers of the wood - you'll see the wooden grain texture change)
• Try other color mixes

Resources & Links

• All Texture Generation Examples (LINK)

Advert (Support Website)

Visitor: