Perlin Noise • Worley/Cellular Noise
Total Page:16
File Type:pdf, Size:1020Kb
CMSC427 Computer Graphics Matthias Zwicker Fall 2018 Introduction • Procedural modeling: generating 3D shapes, textures algorithmically • User writes program to generate graphics models 2 Today Procedural modeling • L-systems • Fractal terrain • Perlin noise • Worley/cellular noise 3 L-systems https://en.wikipedia.org/wiki/L-system • Developed by Aristid Lindenmayer (1968) to model the development of plants • Excellent for modelling organic objects and fractals 4 L-systems https://en.wikipedia.org/wiki/L-system • Type of formal grammar https://en.wikipedia.org/wiki/Formal_grammar • Consist of – Alphabet of symbols that can be used to make strings – Collection of production rules to expand each symbol into some larger string of symbols – Initial “axiom”, string from which to begin construction – Mechanism for translating the generated strings into geometric structure 5 More formally • L-system is Tuple G = (V,ω,P) – Alphabet V, containing symbols; two types: variables (can be replaced) and terminals – Axiom ω, initial state of system – Production rules P define how variables can be replaced with combinations of constants and other variables • Rules are applied iteratively starting from initial state • As many rules as possible are applied simultaneously in each step (difference to formal grammars, where only one rule is applied in each step) • Symbols refer to some type of instructions to draw (2D) or create geometry (3D) 6 Example • Alphabet: A,B,C • Axiom: AA • Rules: – B → ACA – A → B • Sequence: AA, BB, ACAACA, BCBBCB, etc. 7 Properties • Context free: each production rule refers only to an individual symbol and not to its neighbours (context free grammar) • Context sensitive: contains rules that depend not only on a single symbol but also on neighbours • Deterministic: exactly one production for each symbol • Stochastic: several rules for some symbols, each is chosen with a certain probability 8 2D curves via Turtle commands Drawing instructions • Fx: move forward one step, drawing a line • fx: move forward one step, without drawing a line • +x: turn left by angle ∂ • -x: turn right by angle ∂ 9 Koch snowflake https://en.wikipedia.org/wiki/Koch_snowflake • Alphabet: F, +, − (angle 60 degrees) • Axiom : F (Koch curve), F--F--F (Koch snowflake) • Production rule: F → F+F--F+F 10 Koch snowflake (variant) https://en.wikipedia.org/wiki/Koch_snowflake • Axiom: F-F-F-F ∂ :90 degrees • Rule: F -> F-F+F+FF-F-F+F 11 Bracketed L-system • Special symbols [ and ] • Save and restore drawing status – 2D turtle graphics: position and orientation of turtle – 3D: coordinate system 12 Fractal plant • Alphabet: X, F, +, −, [, ] – Angle 25 degrees – No drawing instruction for X • Axiom: X • Rules: X → F+[[X]-X]-F[-FX]+X, F → FF 6 steps 13 More examples • From http://algorithmicbotany.org/papers/abop/abop-ch1.pdf 14 L-systems for plants • Pioneered by Premislav Prusinkiewicz https://en.wikipedia.org/wiki/Przemys%C5%82aw_Prusinkiewicz • Free book “Algorithmic Beauty of Plants” http://algorithmicbotany.org/papers/#abop Nice plants still require modeling effort… 15 L-systems for buildings & cities • Early research articles Procedural modeling of cities, Procedural modeling of buildings, Parish et al. Muller et al. https://dl.acm.org/citation.cfm?id=383292 https://dl.acm.org/citation.cfm?id=1141931 • Many commercial modeling tools include procedural techniques for buildings and cities http://www.esri.com/software/cityengine https://www.youtube.com/watch?v=MlR2geuzPXI 16 Fractal landscapes https://en.wikipedia.org/wiki/Fractal_landscape • Surface generated using stochastic algorithm • Designed to produce fractal behavior https://en.wikipedia.org/wiki/Fractal – Fractal: self-similar across different scales computed in a recursive manner • Available in many commercial products https://planetside.co.uk/ 17 Diamond-square algorithm https://en.wikipedia.org/wiki/Diamond-square_algorithm • Landscape = 2D field of height values • Connect to triangle mesh Height field • First allocate square grid of height vlaues • Size (2^n+1) x (2^n+1) • Random height values, but „from coarse to fine“ – Self similarity across scales • Each height value is the average of 4 already computed height values plus a small random value – Decrease random values as you go to smaller scales 19 Height field Example: field with (2^3+1) x (2^3+1) values Height field Initialization: random heights at corners Height field Square step: compute green (average of four red plus random) Height field Diamond step: compute green (average of four red in diamond plus random) Height field Initial position for next iteration Height field Square step: compute green (average of four red plus random) Height field Diamond step: compute green (average of four red in diamond plus random) Height field Initial position for next iteration Algorithm • Iterate until all values are computed • Random deviations should become smaller over the iterations – Provides degree of freedom to modify look of landscape “Rockier” “Smoother” 28 Algorithm • Optional: set color dependent on height value – Include randomness • „Spikes“ are known artifacts of diamond-square algorithm, can be avoided with additional tricks • Compute normals on each vertex for realistic shading! 29 Interactive camera movement Camera coordinates z y x z y x World coordinates Interactive camera movement Camera coordinates z y press W / S: Go forward / backward x z y x World coordinates Interactive camera movement Camera coordinates z y Press A /D: go left /right x z y x World coordinates Interactive camera movement Camera coordinates z y mouse up/down: rotation around camera x x z y x World coordinates Interactive camera movement Camera coordinates z y Mouse left/right: rotate around world z x z y x World coordinates “Flight simulator” • Render airplane at fixed position relative to camera 35 Perlin noise https://en.wikipedia.org/wiki/Perlin_noise • Developed to avoid the “machine look” of computer graphics – Create fractal (self similar across different scales) random functions in 1D, 2D, 3D, etc. – Efficient, on the fly computation (almost no memory required) – Visualize in creative ways (textures, geometric displacements, BRDFs, etc.) 36 Perlin noise Examples constructed using Perlin noise 2D random noise 2D Perlin noise, each pixel has random, “randomness with visually grayscale value interesting structure” not interesting visually Height, color map 3D noise; 3D noise; 2D noise; 3D noise; marble wood fire color, normal map 37 Perlin noise: 1D, 2D, 3D, … • 1D: “sketch” • 2D: Terrain, textures • 3D: clouds, fire, solid textures 1D: “jittered” 2D: flat texture 3D: solid texture, can be sketch drawing evaluated at each 3D point 38 Intuition: fractal noise • Sum of random functions at different scales – scale = 1/frequency – Factor 2 between scales (octaves) i, frequency = 2i – Amplitude inversely related to frequency – 0<persistence<1 is free parameter amplitude = persistencei Double frequency, half amplitude (persistence=0.5) Fractal sum 39 2D visualization Fractal sum https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/procedural-patterns-noise-part-1/simple-pattern-examples 40 Turbulence • Take absolute value of noise at each scale • Fractal sum of absolute values 41 Perlin noise evaluation • Octaves defined by multiscale grid Distance between Distance between grid points divided in half grid points divided in half Etc. Coarsest, scale 0 Scale 1 Scale 2 42 Perlin noise evaluation • Key objective: efficiently evaluate smooth random function at each grid scale 1. Grid and evalution point 2. Random gradients on grid 3. Vectors to evaluation point 4. Intermediate values using dot products Material from https://mzucker.github.io/html/perlin-noise-math-faq.html 43 Perlin noise evaluation • Smooth interpolation 4. Intermediate values 3p2 − 2 p3 p Interpolant 5. 2D interpolation at (x,y) b 2 3 S y = 3(y − y0 ) − 2(y − y0 ) a Noise(x, y) = a + S y (b − a) Material from https://mzucker.github.io/html/perlin-noise-math-faq.html 44 Technically speaking… • Perlin noise is based on cubic Hermite splines https://en.wikipedia.org/wiki/Cubic_Hermite_spline • Piecewise polynomial curve (spline) where – Each piece is third degree (cubic) – Hermite form: given by its values (implicitly 0 in case of Perlin noise) and first derivatives (gradients) at end points (grid points) 45 Creating interesting noise • Combine with other functions; use as color, normal, height map marbletexture = colormap(cosine ( x + perlin(x,y,z) ) ) g = perlin(x,y,z) * 20 woodgrain = colormap(g - int(g)) 46 Implementation • GLSL shaders • Lots of code online • Shadertoy – Textures on sphere https://www.shadertoy.com/view/4sc3z2 – Terrain https://www.shadertoy.com/view/ldfXRr – Fire https://www.shadertoy.com/view/Mds3Wr – Etc. 47 Worley/cellular noise https://en.wikipedia.org/wiki/Worley_noise • Place random points in a grid • Use distance to neighbors x as a noise function Fn Random points in grid • Fast implementation: “A cellular texture basis function”, Steven Worley https://dl.acm.org/citation.cfm?id=237267 Cellular noise Worley F1 [Anson Chu] Cellular noise Worley F1 in 3D Cellular noise Worley F2 [Ansun Chu] Cellular noise Worley F2-F1 [Ansun Chu] Cellular noise Worley F2-F1 [Steve Worley] Cellular noise Manhattan Distance, F1 [Steve Worley] Fractal cellular noise Fractal F1-F4 combinations [Steve Worley] Fractal cellular noise Fractal F1 color and bump map [Steve Worley] Fractal cellular noise Fractal F1 bump map [Steve Worley] Fractal cellular noise Fractal F1 bump map [Steve Worley] Next time • 3D scanning 59.