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

SER431 Lecture 03

SER431 Lecture 03

Advanced Graphics
Noise
(201808)

Javier Gonzalez-Sanchez
PRO

August 20, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. jgs
    SER 431
    Advanced Graphics
    Lecture 03: Noise
    Javier Gonzalez-Sanchez
    [email protected]
    PERALTA 230U
    Office Hours: By appointment

    View Slide

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

    View Slide

  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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

  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
    }
    }

    View Slide

  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);
    }

    View Slide

  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);
    }

    View Slide

  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);
    }

    View Slide

  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/

    View Slide

  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)

    View Slide

  13. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12

    View Slide

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

    View Slide

  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);
    }

    View Slide

  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
    å
    =
    -
    =

    View Slide

  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; ifrequency = pow(2, (double)i);
    amplitude = pow(p, (double)-i) * 2;
    total = total +
    noise(scale*frequency* x, scale*frequency* y, 11.5) * amplitude;
    }
    return total;
    }

    View Slide

  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
    å
    =
    -
    =

    View Slide

  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

    View Slide

  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

    View Slide

  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; ifrequency = 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 );
    }

    View Slide

  22. jgs
    Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21
    • Single Band of Noise
    • Higher Frequency
    • Single Band of Noise
    Height Field

    View Slide

  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

    View Slide

  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

    View Slide

  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) {}
    }

    View Slide

  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?

    View Slide

  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.

    View Slide