This shows you the differences between two versions of the page.
gp:laboratoare:02 [2025/03/11 16:13] maria_anca.balutoiu [Implementare] |
gp:laboratoare:02 [2025/03/14 15:53] (current) maria_anca.balutoiu [Implementare] |
||
---|---|---|---|
Line 64: | Line 64: | ||
<code> | <code> | ||
- | int permutation[] = { 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, | + | X = floor(x) & 255 |
- | 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, | + | Y = floor(y) & 255 |
- | 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, | + | |
- | 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, | + | |
- | 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, | + | |
- | 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, | + | |
- | 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, | + | |
- | 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, | + | |
- | 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, | + | |
- | 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, | + | |
- | 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, | + | |
- | 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, | + | |
- | 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, | + | |
- | 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, | + | |
- | 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, | + | |
- | 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180 }; | + | |
- | </code> | + | |
valueTopRight = permutations[permutations[X+1]+Y+1]; | valueTopRight = permutations[permutations[X+1]+Y+1]; | ||
valueTopLeft = permutations[permutations[X]+Y+1]; | valueTopLeft = permutations[permutations[X]+Y+1]; | ||
valueBottomRight = permutations[permutations[X+1]+Y]; | valueBottomRight = permutations[permutations[X+1]+Y]; | ||
valueBottomLeft = permutations[permutations[X]+Y]; | valueBottomLeft = permutations[permutations[X]+Y]; | ||
- | <hidden> | + | </code> |
+ | Odată asignată colțului valoarea din tabelul de permutări, trebuie calculat vectorul gradient constant al colțului. Pentru a simplifica lucrurile, putem folosi următoarea funcție: | ||
+ | <code> | ||
+ | def getConstantVector(v): | ||
+ | h = v % 4 | ||
+ | if h == 0: | ||
+ | return Vector2(1.0, 1.0) | ||
+ | elif h == 1: | ||
+ | return Vector2(-1.0, 1.0) | ||
+ | elif h == 2: | ||
+ | return Vector2(-1.0, -1.0) | ||
+ | elif h == 3: | ||
+ | return Vector2(1.0, -1.0) | ||
+ | </code> | ||
- | Modul în care am selectat valorile pentru colțuri din codul de mai sus respectă această restricție. Dacă ne aflăm în celula grilă (0, 0), „valueBottomRight” va fi egal cu P[P[0+1]+0] = P[P[1]+0]. În timp ce în celula grilei (1, 0), „valueBottomLeft” va fi egal cu P[P[1]+0]. „valueBottomRight” și „valueBottomLeft” sunt aceleași. Restrictia este respectata. | + | Odată calculate cele 4 produse scalare pentru cele 4 colțuri, acestea se vor interpola pentru a obține valoarea finală. Însă, la un moment dat se pot interpola doar 2 valori. Astfel, se pot interpola mai întâi valorile din stânga celului și cele din dreapta, iar apoi se va realiza o interpolare între cele 2 rezultate sau se pot interpola mai întâi valori din partea de jos a celulei și cele din partea de sus, iar apoi se vor interpola cele 2 valori rezultate. |
- | De asemenea, dorim să dublăm tabelul pentru ca zgomotul să se înfășoare la fiecare multiplu de 256. Dacă calculăm P[X+1] și X este 255 (deci X+1 este 256), am obține un depășire dacă nu am dubla matricea, deoarece indicele maxim al unei matrice de dimensiunea 256 este 255. Ceea ce este important este că trebuie să dublăm și apoi să nu dublăm matricea. În schimb, trebuie să o amestecăm și apoi să o dublem. În exemplul lui P[X+1] unde X este 255, dorim ca P[X+1] să aibă aceeași valoare ca P[0], astfel încât zgomotul să se poată încheia. | + | <code> |
+ | def lerp(t, a1, a2): | ||
+ | return a1 + t * (a2 - a1) | ||
+ | </code> | ||
- | Acum este momentul să obținem acești vectori constanți. Implementarea originală a lui Ken Perlin a folosit o funcție ciudată numită „grad” care calcula produsul punctual pentru fiecare colț în mod direct. Vom simplifica lucrurile prin crearea unei funcții care returnează doar vectorul constant având o anumită valoare din tabelul de permutare și vom calcula produsul punctual mai târziu. | + | Dacă am folosi interpolarea liniară, aceasta nu ar da rezultate excelente, deoarece s-ar simți nenatural, trecerea de la o celulă la alta ar fi foarte bruscă: |
- | De asemenea, deoarece este mai ușor să le generezi, acei vectori constanți pot fi 1 din 4 vectori diferiți: (1.0, 1.0), (1.0, -1.0), (-1.0, -1.0) și (-1.0, 1.0). | + | {{ :gp:laboratoare:perlin_noise_liniar_interpolation.png?500 |}} |
- | Deoarece v este între 0 și 255 și avem 4 vectori posibili, putem face a & 3 (echivalent cu % 4) pentru a obține 4 valori posibile ale lui h (0, 1, 2 și 3). În funcție de această valoare, returnăm unul dintre vectorii posibili. | + | În schimb, ne-am dori un rezultat de genul: |
- | Acum că trebuie să punctăm un produs pentru fiecare colț, trebuie să le amestecăm cumva pentru a obține o singură valoare. Pentru aceasta, vom folosi interpolarea. Interpolarea este o modalitate de a afla ce valoare se află între alte 2 valori (să zicem, a1 și a2), având în vedere o altă valoare t între 0,0 și 1,0 (un procent, practic, unde 0,0 este 0% și 1,0 este 100%). De exemplu: dacă a1 este 10, a2 este 20 și t este 0,5 (deci 50%), valoarea interpolată ar fi 15 deoarece este la jumătatea distanței între 10 și 20 (50% sau 0,5). Un alt exemplu: a1=50, a2=100 și t=0,4. Atunci valoarea interpolată ar fi la 40% din distanță între 50 și 100, adică 70. Aceasta se numește interpolare liniară deoarece valorile interpolate sunt într-o curbă liniară. | + | {{ :gp:laboratoare:perlin_noise_nonlinear_interpolation.png?500 |}} |
- | Acum avem 4 valori pe care trebuie să le interpolăm, dar putem interpola doar 2 valori la un moment dat. Deci, modul în care folosim interpolarea pentru zgomotul Perlin este că interpolăm valorile din stânga sus și din stânga jos împreună pentru a obține o valoare pe care o vom numi v1. După aceea, facem același lucru pentru sus-dreapta și jos-dreapta pentru a obține v2. Apoi, în sfârșit, interpolăm între v1 și v2 pentru a obține o valoare finală. Aceasta este valoarea pe care dorim să o returneze funcția noastră de zgomot. | + | Pentru a obține de acest rezultat, Ken Perlin s-a folosit de funcția **fade** pentru a uniformiza valorile de input ale interpolării: |
- | Rețineți că dacă schimbăm puțin punctul de intrare, vectorii dintre fiecare colț și punctul de intrare se vor schimba puțin și ei, în timp ce vectorul constant nu se va schimba deloc. Produsele punctiforme se vor schimba, de asemenea, doar puțin, la fel și valoarea finală va reveni de către funcția de zgomot. Chiar dacă intrarea schimbă pătratul grilei, cum ar fi de la (3.01, 2.01) la (2.99, 1.99), valorile finale vor fi totuși foarte apropiate, deoarece chiar dacă 2 (sau 3) dintre colțuri se schimbă, celelalte 2 (sau 1) nu s-ar face și deoarece cu ambele intrări suntem aproape de colț(e), interpolarea va face ca valoarea finală a colțului să fie într-adevăr aproape de acea valoare. Deoarece cu ambele intrări acel colț va avea aceeași valoare, rezultatele finale vor fi foarte apropiate. | + | <code> |
- | + | def fade(t): | |
- | Am putea folosi interpolarea liniară, dar aceasta nu ar da rezultate excelente, deoarece s-ar simți nenatural, ca în această imagine care arată interpolarea liniară 1 dimensională: | + | return ((6 * t - 15) * t + 10) * t * t * t |
- | + | </code> | |
- | După cum puteți vedea, schimbarea dintre ceea ce este inferior lui 1 și ceea ce este superior lui 1 este bruscă. Ceea ce ne dorim este ceva mai lin, ca acesta: | + | |
- | + | ||
- | Cu interpolarea liniară, am folosi xf ca valoare de interpolare (t). În schimb, vom transforma xf și yf în u și v. O vom face astfel încât, având în vedere o valoare a t între 0,0 și 0,5 (exclus), valoarea transformată va fi ceva mai mică (dar plafonată la 0,0). De asemenea, având în vedere o valoare a t între 0,5 (exclus) și 1,0, valoarea transformată ar fi puțin mai mare (dar plafonată la 1,0). Pentru 0,5, valoarea transformată ar trebui să fie 0,5. Acest lucru va avea ca rezultat o tranziție curbată, ca în figurile 5 și 6. | + | |
- | + | ||
- | Pentru a face acest lucru, avem nevoie de ceva numit curbă de ușurință: este doar o curbă matematică care arată astfel: | + | |
- | Dacă te uiți cu atenție, poți vedea că pentru o intrare (xf sau yf, axa x) între 0,0 și 0,5, ieșirea (u sau v, axa y) este puțin mai aproape de 0,0. Și pentru o valoare între 0,5 și 1,0, ieșirea este puțin mai aproape de 1,0. Pentru x=0,5, y=0,5. Asta va face treaba perfect. | + | ==== Tasks ==== |
+ | - Implementați algoritmul Perlin Noise. Salvați rezultatul într-o imagine PNG. | ||
+ | - Într-un proiect Unity, generați un teren cu denivelări, folosind Perlin Noise. | ||
+ | - **Bonus 1.** Adăugați încă o octavă în implementarea algoritmului. | ||
+ | - **Bonus 2.** Implementați efectul de plasmă specific Perlin Noise. Exemplu: | ||
+ | <html> | ||
+ | <p style="text-align:center;margin:auto;"> | ||
+ | <iframe width="560" height="315" src="https://www.youtube.com/embed/9B89kwHvTN4?si=McVA2s62UZGbUNTF&start=242" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | ||
+ | </p> | ||
+ | </html> | ||
- | Curba de mai sus este funcția de ușurință folosită de Ken Perlin în implementarea lui Perlin Noise. Ecuația este 6t5-15t4+10t3. Aceasta se mai numește și funcție de estompare. În cod, arată așa:</hidden> | + | <note tip>În Unity C# există funcția **float Mathf.PerlinNoise(float x, float y)**</note> |
+ | ==== Resurse ==== | ||
+ | * [[https://www.youtube.com/watch?v=9B89kwHvTN4]] | ||
+ | * [[https://rtouti.github.io/graphics/perlin-noise-algorithm]] | ||
+ | * [[https://www.youtube.com/watch?v=vFvwyu_ZKfU]] |