Procedural Texturing By Madis Janno What do I mean by Procedural - - PowerPoint PPT Presentation

▶
procedural texturing
SMART_READER_LITE
LIVE PREVIEW

Procedural Texturing By Madis Janno What do I mean by Procedural - - PowerPoint PPT Presentation

Aug 15, 2022 626 likes •1.34k views

Procedural Texturing By Madis Janno What do I mean by Procedural Texturing? Two possible things: Procedurally generating textures Procedurally applying textures Todays focus is: Applying existing textures in a way that creates new textures

slide-1
SLIDE 1

Procedural Texturing

By Madis Janno

slide-2
SLIDE 2

What do I mean by Procedural Texturing?

slide-3
SLIDE 3

Two possible things:

Procedurally generating textures Procedurally applying textures

slide-4
SLIDE 4

Todays focus is: Applying existing textures in a way that creates new textures

slide-5
SLIDE 5

Why?

slide-6
SLIDE 6

Why?

Tiling

slide-7
SLIDE 7

Why?

Procedural geometry

slide-8
SLIDE 8

Why?

Making custom textures for everything is difficult

slide-9
SLIDE 9

Topics are:

Texture blending basics Texture splatting Contrast correction Height blending Texture bombing (+ workshop) Triplanar texturing (pretty much just showing off my project)

slide-10
SLIDE 10

Will post shadertoy links in chat + top of slides

Will pause at the end of each chapter to let you look at code, ask any questions

slide-11
SLIDE 11

Texture blending basics

slide-12
SLIDE 12

Simple blending www.shadertoy.com/view/WdSczc

Texture1*w + Texture2*(1-w)

slide-13
SLIDE 13

Simple blending www.shadertoy.com/view/WdSczc

Texture1*w + Texture2*(1-w) Seems off somehow?

slide-14
SLIDE 14

Simple blending www.shadertoy.com/view/WdSczc

Texture1*w + Texture2*(1-w) Darker in the middle

slide-15
SLIDE 15

Simple blending www.shadertoy.com/view/WdSczc

Colours in images and on screen are not linear (sRBG) (0.5, 0, 0.5) is darker than (1, 0, 0)

slide-16
SLIDE 16

Simple blending www.shadertoy.com/view/WdSczc

Colours in images and on screen are not linear (sRBG) (0.5, 0, 0.5) is darker than (1, 0, 0)

How to fix?

slide-17
SLIDE 17

Simple blending www.shadertoy.com/view/WdSczc

Colours in images and on screen are not linear (0.5, 0, 0.5) is darker than (1, 0, 0)

How to fix?

Convert to linear: lin_rgb = rgb^2.2 Display on screen: rgb = lin_rgb^(1.0/2.2)

slide-18
SLIDE 18
slide-19
SLIDE 19

Effect less pronounced when textures have similar colours Look at middle, without gamma correction tile texture nearly invisible

slide-20
SLIDE 20

Lesson www.shadertoy.com/view/WdSczc

Gamma correct before anything (images sRBG by default) Always convert back at the end Darker regions when blending or blurring means a lack of gamma correction Easy to forget, even image editing software screws up

slide-21
SLIDE 21

Texture splatting

slide-22
SLIDE 22

Texture splatting www.shadertoy.com/view/3s2yzc

Texture weights can be read from textures A single texture can contain weights for up to 5 textures Data textures should not be gamma corrected on read

slide-23
SLIDE 23

Texture splatting www.shadertoy.com/view/3s2yzc

Can construct textures from this Can add splat texture to linear blend to make more natural looking blends

slide-24
SLIDE 24

Lesson www.shadertoy.com/view/3s2yzc

Any sort of data can come from textures

slide-25
SLIDE 25

Contrast correction

slide-26
SLIDE 26

Contrast correction www.shadertoy.com/view/td2cRV

Lagrangian Texture Advection: Preserving both Spectrum and Velocity Field

slide-27
SLIDE 27

Contrast correction www.shadertoy.com/view/td2cRV

Blended textures lose contrast Values pushed towards mean

slide-28
SLIDE 28

Contrast correction www.shadertoy.com/view/td2cRV

Blended textures lose contrast Values pushed towards mean Multiplying by values <1 lowers contrast, adding two reduced contrast images together does not restore all

slide-29
SLIDE 29

Contrast correction www.shadertoy.com/view/td2cRV

One example of correcting this: “On Histogram-preserving Blending for Randomized Texture Tiling” from Disney Convert textures into gaussian distributions and store previous histograms, blend gaussians and restore variance, restore histograms

slide-30
SLIDE 30

Contrast correction www.shadertoy.com/view/td2cRV

One example of correcting this: “On Histogram-preserving Blending for Randomized Texture Tiling” from Disney Convert textures into gaussian distributions and store previous histograms, blend gaussians and restore variance, restore histograms Way too complicated

slide-31
SLIDE 31

Contrast correction www.shadertoy.com/view/td2cRV

Simpler method from: Lagrangian Texture Advection: Preserving both Spectrum and Velocity Field In simpler terms: final color = (blended color-mean)/sqrt(sum(w^2)) + mean

slide-32
SLIDE 32

Contrast correction www.shadertoy.com/view/td2cRV

Simpler method from: Lagrangian Texture Advection: Preserving both Spectrum and Velocity Field In simpler terms: final color = (blended color-mean)/sqrt(sum(w^2)) + mean Mean value of a texture can be grabbed from the highest mipmap, or precomputed

slide-33
SLIDE 33

Contrast correction www.shadertoy.com/view/td2cRV

Simpler method from: Lagrangian Texture Advection: Preserving both Spectrum and Velocity Field Mathematically: corrects new blended texture to have the same variance as

  • riginal
slide-34
SLIDE 34

Contrast correction www.shadertoy.com/view/td2cRV

Problems: Assumes colour distributions have a normal distribution

slide-35
SLIDE 35

Contrast correction www.shadertoy.com/view/td2cRV

Problems: Assumes colour distributions have a normal distribution Assumes blended colors are independant, overcorrects if blended textures correlate

slide-36
SLIDE 36

Contrast correction www.shadertoy.com/view/td2cRV

Problems: Assumes colour distributions have a normal distribution Assumes blended colors are independant, overcorrects if blended textures correlate Can generate values not present in original textures, causes clipping when values go negative or too high

slide-37
SLIDE 37

Contrast correction www.shadertoy.com/view/td2cRV

Sometimes good: www.shadertoy.com/view/tsVGRd

slide-38
SLIDE 38

Contrast correction www.shadertoy.com/view/td2cRV

Sometimes good: www.shadertoy.com/view/tsVGRd Problem: Example hasn’t gamma corrected

slide-39
SLIDE 39

Example with 3 textures www.shadertoy.com/view/ts2cRV

slide-40
SLIDE 40

Contrast correction

Tends to overcompensate in practise Used in my CGP work, toned down by using fifth root instead of square root

slide-41
SLIDE 41

Lesson

There are ways of boosting contrast if the texture creation or blending process removes too much. Don’t go overboard.

slide-42
SLIDE 42

Height blending

slide-43
SLIDE 43

Height blending www.shadertoy.com/view/wdSczc

In reality things don’t blend smoothly If blending between smaller and bigger rocks, bigger rocks just “phase” out

slide-44
SLIDE 44

Height blending www.shadertoy.com/view/wdSczc

Solution?

slide-45
SLIDE 45

Height blending www.shadertoy.com/view/wdSczc

Account for the heights of the textures.

slide-46
SLIDE 46

Height blending www.shadertoy.com/view/wdSczc

Account for the heights of the textures. Requires heightmaps

slide-47
SLIDE 47

Height blending www.shadertoy.com/view/wdSczc

Account for the heights of the textures. Requires heightmaps Greyscale can work in a pinch

slide-48
SLIDE 48

Height blending www.shadertoy.com/view/wdSczc

Principle: Multiply heights by weights Compare heights -> texture weights

slide-49
SLIDE 49

Height blending www.shadertoy.com/view/wdSczc

Way 1: Heights*Weights -> Compare ratios

slide-50
SLIDE 50

Height blending www.shadertoy.com/view/wdSczc

Way 2: Heights*Weights

slide-51
SLIDE 51

Height blending www.shadertoy.com/view/wdSczc

Way 2: Heights*Weights Floor = (highest height - blend factor)

slide-52
SLIDE 52

Height blending www.shadertoy.com/view/wdSczc

Way 2: Heights*Weights Floor = (highest height - blend factor) Heights -= Floor

slide-53
SLIDE 53

Height blending www.shadertoy.com/view/wdSczc

Way 2: Heights*Weights Floor = (highest height - blend factor) Heights -= Floor Compare Height ratios

slide-54
SLIDE 54

Height blending www.shadertoy.com/view/wdSczc

Way 2: Allows for sharper borders Can tweak by altering blend factor

slide-55
SLIDE 55

Lesson www.shadertoy.com/view/wdSczc

You can use extra data to alter blending Thinking in real world terms can help

slide-56
SLIDE 56

Texture bombing

slide-57
SLIDE 57

Texture bombing www.shadertoy.com/view/tsVGRd

A way of removing/reducing tiling A way of adding elements to random locations on texture

developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch20.html

slide-58
SLIDE 58

Texture bombing www.shadertoy.com/view/tsVGRd

Principle:

  • Divide area into cells (can be 3D)
  • During rendering get data from corners of current cell
  • Blend or draw stuff based on data
slide-59
SLIDE 59

Texture bombing www.shadertoy.com/view/tsVGRd

Data can include:

  • Rotations
  • UV coordinates of some shape in atlas
  • UV coordinates of location on tiling texture
  • Colors
  • Etc
slide-60
SLIDE 60

Workshop

www.shadertoy.com/view/3d2cRc

Implement height blending and/or contrast correction

slide-61
SLIDE 61

Lesson www.shadertoy.com/view/3d2cRc

You can combine everything we have talked about

slide-62
SLIDE 62

Triplanar texturing madisjanno.github.io/Hexi/

Applicable for terrain, buildings

slide-63
SLIDE 63

Triplanar texturing madisjanno.github.io/Hexi/

Applicable for terrain, buildings Basic principle is to combine 3 textures to texture all sides of some shape

slide-64
SLIDE 64

Triplanar texturing madisjanno.github.io/Hexi/

3 textures, 1 for each plane XY, YZ, XZ Coordinates on that plane determine texture UV’s We use surface normal as blend weights

slide-65
SLIDE 65

Triplanar texturing madisjanno.github.io/Hexi/

End result smoothly combines all 3 textures There are some artifacts when surface normals don’t point at planes

slide-66
SLIDE 66

Lesson madisjanno.github.io/Hexi/

Everything you learned also applies to 3d

slide-67
SLIDE 67

Stuff you can use all this for:

Automatically adding details to roads and streets Dynamically “damaging” enemies Easily texturing procedurally generated building And more!

slide-68
SLIDE 68

Any questions?

slide-69
SLIDE 69

Thanks for listening!