Lesson 6 – Procedural Textures
PV227 – GPU Rendering
Jiˇrí Chmelík, Jan ˇCejka
Fakulta informatiky Masarykovy univerzity
3. 11. 2015
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 1 / 15
Textures
procedural textures,
stripes,
bricks,
“random” (fractal).
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 2 / 15
Texture Coordinates
usually model specific,
red → .s,
green → .t.
Figure: Visualization of texture coordinates
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 3 / 15
Texture Stripes
interleave two colors in regular pattern,
divide the [0,1] s-coordinate into multiple [0,1] ranges.
Figure: Stripe pattern
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 4 / 15
Texture Stripes – Color Mixing
mix the two colors based on the position inside range,
smooth the transition.
Figure: Taken from lighthouse3d.com
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 5 / 15
Texture Stripes – Smooth Interpolation
f = smoothstep(0.4f, 0.5f, x);
f = smoothstep(0.9f, 1.0f, x);
f = smoothstep(0.4f, 0.5f, x) − smoothstep(0.9f, 1.0f, x);
Figure: Taken from lighthouse3d.com
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 6 / 15
Brick 2D
generating brick pattern in 2D,
local space position or texture coordinate.
Figure: Brick pattern in 2D
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 7 / 15
Brick 2D – Schematics
uniforms define the brick pattern,
choose between the colors based on position relative to BrickPct.
Figure: Taken from pearsoncmg.com
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 8 / 15
Brick 2D – Offset
transform 3D space coordinates into 2D brick coordinates,
compute the zigzag brick offset.
Figure: Taken from pearsoncmg.com
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 9 / 15
Brick 3D
generate brick pattern in 3D,
local space position or texture coordinate.
Figure: Brick pattern in 3D
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 10 / 15
Brick 3D – Offset
same algorithm,
zigzag brick offset needs logical XOR: A != B.
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 11 / 15
Fractals
repeating the same pattern over and over,
often starts from random values.
Figure: Fractal
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 12 / 15
Fractional Brownian Motion
sum of a repeated pattern,
half the amplitude, twice the frequency.
1 f l o a t fbm ( vec3 p )
2 {
3 f l o a t f = 0. f ;
4 f += 0.5000 f ∗ cnoise ( p ) ; p ∗= 2.0 f ;
5 f += 0.2500 f ∗ cnoise ( p ) ; p ∗= 2.0 f ;
6 f += 0.1250 f ∗ cnoise ( p ) ; p ∗= 2.0 f ;
7 f += 0.0625 f ∗ cnoise ( p ) ; p ∗= 2.0 f ;
8 f /= 0.9375 f ;
9
10 return f ;
11 }
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 13 / 15
Fractional Brownian Motion – Iterations
fp = vec3(fbm(p));
ffp = vec3(fbm(p + fp));
fffp = vec3(fbm(p + ffp));
Figure: Increasingly detailed pattern
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 14 / 15
Good-looking Fractals
combination of fixed constants and fbms,
coefficients for mixing colors,
look into the source code.
PV227 – GPU Rendering (FI MUNI) Lesson 6 – Procedural Textures 3. 11. 2015 15 / 15