Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SER431 Lecture 03

SER431 Lecture 03

Advanced Graphics
Noise
(201808)

B546a9b97d993392e4b22b74b99b91fe?s=128

Javier Gonzalez

August 20, 2018
Tweet

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.