330

SER431 Lecture 03

Noise
(201808)

August 20, 2018

Transcript

1. jgs SER 431 Advanced Graphics Lecture 03: Noise Javier Gonzalez-Sanchez

[email protected] PERALTA 230U Office Hours: By appointment
2. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 1 jgs

Clouds, Water, Fire, and Marble
3. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2 jgs

How to do that? 1. Load and image from file and use it as texture 2. Generate a texture (and/or a surface) § texture = 2D array of colors § surface = 2D array of altitudes
4. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3 jgs

Procedural texture § Define a 2D function f(s, t) § Sample the function at each texel (texture pixel)
5. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 4 jgs

Noise for Textures Marble Fire Clouds Wood
6. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5 jgs

Noise for Surfaces
7. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6 jgs

A Texture in Memory const int TexHeight = 128; const int TexWidth = 128; GLubyte textureImage[TexHeight][TexWidth][3]; Vec3f pixelColor; for( i = 0; i < TexHeight ; i++) { for(j = 0; j < TexWidth; j++) { pixelColor = myFunction (i, j); // a value 0 to 1 per pixel textureImage[i][j][0] = pixelColor[0]*255; // red 0-255 textureImage[i][j][1] = pixelColor[1]*255; // green 0-255 textureImage[i][j][2] = pixelColor[2]*255; // blue 0-255 } }
8. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 7 jgs

Linear Color Interpolation • Example: Wood colored color table x=0; myFunction1(x, y) // brown "early wood" x=1; myFunction1(x, y) // tan "latewood" • Code Example: Vec3f myFuntion1(float i, float j) { Vec3f earlywood( .. , .. , ..); vec3f latewood ( .. , .. , ..); return( (1-i) * earlywood + i * latewood); }  
9. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 8 jgs

Circle Color Interpolation • Example: Wood colored color table x=0; y=0; myFunction2(x, y) // brown "early wood" myFunction2(n, n) // tan "latewood" • Code Example: Vec3f myFunction2(float a, float b) { int length = 3 // #color changes pos = (a*a + b*b) % length); return myFunction1(pos/length); }
10. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9 jgs

Adding Noise • Add noise to cylinders to warp wood Vec3f myFunction3(float a, float b) { int length = 3 // #color changes pos = (a*a + b*b + noise() ) % length); // -n <= noise <= n return myFunction1(pos/length); }
11. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 10 jgs

Ken Perlin § Perlin Noise (1983) § 1997 Academy Award for Technical Achievement § http://mrl.nyu.edu/~perlin/
12. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11 jgs

Noise Parameters • Amplitude A: power of noise effect A * noise(i, j) • Frequency fa, fb, fc: coarse vs fine detail A * noise(fa * i, fb * j) • Phase pa , pb , pc: location of noise peaks A * noise(i * fa + pa, j * fb + pb)

14. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13 jgs

Noise Function texture(i, j) = // RGB value j i
15. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14 jgs

Create a texture using a noise function // calculate texture pixel by pixel texture (i, j)= colorMap( scale( PerlinNoise (i * 5, j * 5) // -2 to 2 ) ); // scale [-2,2] range to [0,1] float scale(float x) { return (x + 2) / 4; } // interpolates two colors Vec3f colorMap(float a) { Vec3f white = Vec3f(1, 1, 1); Vec3f color = Vec3f(1, 0, 0); return ((1 - a) * white + a * color); }
16. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15 jgs

Multi-scale Function Adding Noise over diverse frequencies and amplitudes )) * , * , * ( * ) , , ( 1 r scale t scale s scale noise amplitude r t s f i i i bands i i å = - =
17. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 16 jgs

Example Multi-scale Function double perlinMultiscale(float x, float y) { double total = 0; double scale = 0.005; double p = 2.0; //persistence double n = 7.0; // number of octaves double frequency, amplitude; for (int i = 0; i<n; i++) { frequency = pow(2, (double)i); amplitude = pow(p, (double)-i) * 2; total = total + noise(scale*frequency* x, scale*frequency* y, 11.5) * amplitude; } return total; }
18. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 17 jgs

Sum of Absolute Values Adding Noise over absolute values is Good for fire )) , , ( ( ) , , ( 1 r scale t scale s scale noise amplitude r t s f i i i bands i i å = - =
19. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 18 jgs

Marble Principle ))) , , ( ( * sin( ) , , ( 4 1 r scale t scale s scale noise amplitude s r t s f i i i i i å = - = Using sin( ) function plus noise
20. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 19 jgs

Marble Example § MarbleMap is from black to white § Scale scales [min, max] to [0,1] § u and v are in range [0,1] § Does not look that great, maybe a more complex color ramp is needed )) ) 5 . 11 , * 2 * 5 , * 2 * 5 ( * 2 * 6 * 20 sin ( ( ) , ( 4 1 ÷ ø ö ç è æ + = å = - v u PNoise u Scale MarbleMap v u Texture i i i i
21. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 20 jgs

Example Marble //scale scales from [min, max] to [0,1]; //u and v are in the range [0, 1] double perlinMarble(float x, float y) { double total = 0; double scale = 0.005; double p = 2.0; //0.1; //persistence double n = 4.0; // number of octaves double frequency, amplitude; for (int i = 0; i<n; i++) { frequency = pow(2, (double)i); amplitude = pow(p, (double)-i) * 2; total = total + noise(scale*frequency* x, scale*frequency* y, 11.5) * amplitude; } return sin( 2 * (x*scale) + total ); }
22. jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21

• Single Band of Noise • Higher Frequency • Single Band of Noise Height Field
23. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 22 jgs

Height Field - Multiscale § Multi-scale Noise § Multiple bands are added together § Start with the highest amplitude and lowest frequency § Amplitude decreases and frequency increases for subsequent bands
24. jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23

• Low Quality • Bad parameter settings • Medium Quality • Better parameter settings • Note the two valleys from the sine function Height Field - Marble
25. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 24 jgs

Implementation of noise function https://github.com/javiergs/SER431/blob/master/Lecture03 class ImprovedNoise { ImprovedNoise() {} double perlinMarble(float x, float y) {} double perlinMultiscale(float x, float y) {} double noise(double x, double y, double z) {} }
26. Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 25 jgs

Homework Review the source code in GitHub It shows how to use noise to create textures, Can you use it to create surfaces?
27. jgs SER431 Advanced Graphics Javier Gonzalez-Sanchez [email protected] Fall 2018 Disclaimer.

These slides can only be used as study material for the class SER431 at ASU. They cannot be distributed or used for another purpose.