Computergrafik

Prozedurale Muster

Wiederholung: Rauschen (Noise)

Rauschen ist in der Computergrafik eine wesentliche Voraussetzung zur Darstellung von u.a.:

  • Wolken
  • Berge
  • Lichteffekten
  • und vielen weiteren Effekten in der Natur

Alle Bilder sind gemeinfrei

Motivation

Wie kommen wir vom Rauschen (Noise)  zu komplexen prozeduralen Texturen? 

Alle Bilder sind gemeinfrei

Value noise

🤔

?

Foto: Inigo Quilez

Sinus-Funktion

Frequenz

Amplitude

Überlagern von Sinusfunktionen

Live Demo

Rauschen statt Sinus

Wir nutzen noise() anstelle von  sin()

Wir addieren Rauschmuster mit sukzessive (über mehrere Oktaven) variierenden Frequenzen und Amplituden:

  • Frequenzen werden größer ⬆️
  • Amplituden werden kleiner ⬇️
     

Fractial Brownian Motion

f*1.0
A*1.0

f*2.0
A*0.5

f*4.0
A*0.25

f*8.0
A*0.125

Fractial Brownian Motion (Code)

// Eigenschaften
const int octaves = 5;
float lacunarity = 2.0;
float gain = 0.5;
//
// Initiale Werte
float amplitude = 0.5;
float frequency = 1.0;

// Schleife über Oktaven
for (int i = 0; i < octaves; i++) {
	y += amplitude * noise(frequency*x);
	frequency *= lacunarity;
	amplitude *= gain;
}

 = Anzahl Rausch-Ebenen

 = "Lückenhaftigkeit"

 = Verstärkungsfaktor

 = Initiales Rausch-Muster

 = Frequenz wird erhöht ⬆️

 = Amplitude wird verringert ⬇️

⌨️ Von Value-Noise zu FBM 

10 Min

⌨️ Von Value-Noise zu FBM​ ​

Live
coding

⌨️ Wolkenhimmel 

Erweitern Sie Ihren Code dahingehend, dass sich die Wolken am Himmel bewegen.

 


​

10 Min

Beispiel

FBM-Adaptionen: Turbulences 

Bild: Patricio Gonzalez Vivo

Simplex Noise

FBM

FBM-Adaptionen: Turbulences 

// Eigenschaften
const int octaves = 5;
float lacunarity = 2.0;
float gain = 0.5;
//
// Initiale Werte
float amplitude = 0.5;
float frequency = 1.0;

// Schleife über Oktaven
for (int i = 0; i < octaves; i++) {
	y += amplitude * abs(snoise(frequency*x));
	frequency *= lacunarity;
	amplitude *= gain;
}

 = absolute Werte

Bild: Patricio Gonzalez Vivo

 = Simplex-Noise

 = Ergebnis

⌨️ FBM: Turbulences​ ​

Live
coding

FBM-Adaptionen: Domain Warping 

Bilder: Inigo Quiles

f(p) = fbm( p + fbm( p + fbm( p ) ) )
f(p) = fbm( p + fbm( p ) )
f(p) = fbm( p )
float dmWarping(vec2 p)
{
    vec2 q = vec2( fbm( p + vec2(0.0,0.0) ),
                   fbm( p + vec2(5.2,1.3) ) );

    vec2 r = vec2( fbm( p + 4.0*q + vec2(1.7,9.2) ),
                   fbm( p + 4.0*q + vec2(8.3,2.8) ) );

    return fbm( p + 4.0*r );
}

FBM-Adaptionen: Domain Warping 

Bild: Inigo Quiles

f(p) = fbm( p + fbm( p + fbm( p ) ) )

Ausblick

Source code (Inigo Quilez): https://www.shadertoy.com/view/4ttSWf

✅ Zusammenfassung

  • Komplexe Strukturen können nicht mit einfachem Rauschen modelliert werden
     
  • Stattdessen kombinieren (+) wir Rauschen mit unterschiedlichen Parametern
    (z.B. Frequenz, Amplitude)
    ➔ Fractional Brownian Motion (FBM)
     
  • FBM dienen als Basis zur Modellierung komplexer prozeduraler Muster / Texturen

FBM