SER431 Lecture 03

Advanced Graphics
Noise
(201808)

Transcript

1. jgs SER 431 Advanced Graphics Lecture 03: Noise Javier Gonzalez-Sanchez javiergs@asu.edu 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)
13. jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
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 javiergs@asu.edu 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.