Kako sam obnovio glazbeni videozapis Gorillaz Andromeda pomoću WebGL-a

Imala sam 14 godina kad sam prvi put vidjela video spot Gorillaz - Feel Good Inc. Zaljubio sam se u to govoreći: "Whaatt? Crtani glazbeni video? Kako strašno! ”. Sljedeće sam znao da kupujem album Demon Days.

Godinama kasnije ... Prije otprilike 4 mjeseca YouTube mi je pokazao novi glazbeni video, Gorillaz, Andromeda. Po završetku punjenja odmah sam pomislio da se ovaj videozapis može prikazati u preglednicima.

Tada sam počeo rekreirati glazbeni videozapis Andromeda s WebGL-a. Slobodno to provjerite Gorillaz - Andromeda na WebGL-u.

Kad sam započeo rekreirati, prvo što sam učinio bilo je preuzimanje tri.js, što je solidna 3D biblioteka JavaScript. Preuzeo sam izvor i započeo s jednostavnom scenom "Hello World". Tada sam počeo planirati predmete, teksture i animacije.

Projekt sam podijelio u četiri glavna dijela. To su pozadinska scena, scena meteora, Saturn scena i animacije.

Analiziranje glazbenog videa

Glazbeni video Andromeda zapravo ima jednostavan prizor. Slika pozadinske galaksije koja se kreće s lijeva na desno. Sfera s tekirnom teksturom koju ću nazvati Saturn. A meteori koji plešu sprijeda. S vremena na vrijeme, kada se glazba poveća, meteor dolazi iz gornjeg lijevog ugla i provali u Saturn te ga čini blistavijim.

Namjeravao sam oponašati slično. Stoga sam skicirao scenu ispod s komponentama poput pozadine, Saturna i meteora.

Pozadinska scena

Čini se da je to najjednostavniji dio scene i nekako je istina. Tehnički je to lako. Prvo napravite ravninu. Animirajte ga s lijeva na desno. Napravite još jedan i stavite ga iza prvog. Postavite svoje načine miješanja na aditiv tako da izgledaju spojeno. Na kraju dodajte neke teksture.

Ali što je s pronalaženjem prave, stvarne 4K, prekrasne i šarene galaksije?

Pa, to je bilo teško.

Potražio sam oko tisuću web lokacija za licencirane ili besplatne slike. Ali sve što sam mogao pronaći su nekoliko lijepih, oštrih 4K pozadina, a ne prave teksture.

Ovo je bilo loše. Morao sam ih kupiti i preuzeti ih jednu po jednu. Zatim ih pokušajte pretvoriti u kontinuirane teksture. I uredite njihove postavke svjetline i kontrasta. Nakon svih tih koraka testirao sam ih u sceni, pokušavajući vidjeti da li izgledaju dobro ili ne.

Prošlo je neko vrijeme, ali uspio sam pronaći savršenu sliku. Što se potpuno isplatilo i bio sam jako sretan kad vidim rezultate:

Morao sam dodati neke efekte nakon obrade, kao što je promjena nijanse mom projektu. Koristio sam EffectComposer (Detaljan udžbenik možete pronaći ovdje.), Koji nije dio tri.js, ali dolazi s njegovim primjerima. Koristeći EffectComposer, lako sam uspio dodati efekte nijansi na pozadinsku scenu.

Meteorski prizor

Meteori su bili najjednostavniji dio projekta. Oni su istovremeno bili neprijatelji performansi. 500 ih se kreće i okreće u sceni! Trebala sam pronaći model meteora na najjednostavniji način da bih imala glatke animacije.

Nevjerovatno je što možete napraviti s geometrijama zaliha u tri.js. Pomoću OctahedronGeometry ja sam deformirao sve njegove vrhove. U osnovi izgleda kao stijena:

Kao što sam već rekao, ovaj projekt ima 500 meteora. Svaka od njih ima različitu brzinu kretanja, brzinu rotacije i slučajnu veličinu. Pomiču se s desna na lijevo. Kada se odmaknu od pogleda, teleportiraju se s desne strane pogleda.

Meteori iza Saturna zapravo su jedna jedina statična slika. Prvo sam pokušao stvoriti ovu statičku sliku ispočetka. Nacrtao sam neke nasumične krugove s efektom sjaja, ali tada mi se nije svidjelo kako izgledaju u sceni. Tada sam pronašao zvijezdu teksturu. Nijansirao sam ga u žuto i način rada mješavine postavio na aditiv.

Saturn scena

Bez sumnje, ovo je bio najteži dio scene. Da biste shvatili zašto, morate provjeriti njegove značajke u glazbenom videu:

  • Tekstura animira na način da se njen gornji dio kreće brže od donjeg dijela.
  • Saturn se ne rotira, ali tekstura čini da se ljulja.
  • Saturn ima unutarnji sjaj. Rubovi i središnji dijelovi su svjetliji.
  • Saturn ima i vanjski sjaj. Zapravo postoje dva vanjska sjaja. Jedna od njih je svjetlija i bliža rubovima, a druga je veća i tamnija.

Tekstura

Pronalaženje pravog lijepog teksa ... Pa, već znate da je ovo teško. Ali jedan moj kolega dao mi je najjednostavniju ideju za pretraživanje "Saturnove teksture" na Google Imagesima. Bila sam šokirana onim što sam našla.

Prva slika koja se pojavila bila je potpuno ista slika koja je korištena u glazbenom videu Andromeda. Je li umjetnik / dizajner pretraživao "Saturnovu teksturu" na Google Imagesima i odabrao prvu u produkciji? Je li to uobičajeno?

Svejedno otkad sam pronašao svoju Saturnovu teksturu, sljedeći dio je bio animiranje. To je bio najveći izazov. Nakon što sam malo istraživao, shvatio sam da trebam upotrijebiti nešto što se naziva fragment shader. Ali što je to, dovraga? Koliko sam shvatio, to je kôd koji živi u .js / .html, ali pokreće se u GPU-u.

Kad se 3D model prikazuje, svaki piksel na ovom modelu mora znati koju boju teksture treba koristiti. Jedan od načina za to je korištenje UV mapiranja. Animiram koordinate UV karte eksponencijalno. Tako je gornji dio postao brži od donjeg. Bilo je pokusa i pogreške malo, ali mislim da sam to zabio.

U videu se i Saturn ljulja. Da bih postigao taj pokret, dobio sam pomoć od funkcije grijeha. Jedan od ulaza ove funkcije grijeha je vrijeme okvira, koje se vremenom povećava. Dakle, sfera izgleda kao da se ljulja.

svijetli

U projektu postoje tri vrste sjaja, unutarnji, veliki vanjski i mali vanjski sjaj.

Za unutarnji sjaj stvorio sam jednostavnu crno-bijelu gradijentnu teksturu. Tada sam dodao svoje pikselne boje izvornoj boji teksture Saturna u shaderu fragmenta:

U početku sam mislio da mogu stvoriti vanjske sjajeve pomoću fragmenta sjenila. Ali zaključio sam da će to biti previše, jer se kamera i Saturn ne rotiraju.

Tako sam stvorio crno-bijele kružne teksture gradijenta. Smjestio sam ih iza Saturna i način njihova miješanja postavio na aditiv. To mi je uštedjelo ogromnu količinu vremena za razvoj.

Možete vidjeti veći sjaj u akciji. Ne zaboravite da je zapravo Saturn iza planeta:

Ovo je manji, ali svjetliji sjaj stvoren istom tehnikom:

Ovo je krajnji rezultat Saturna sa svim omogućenim svjetlima:

Animacija

Završni dio projekta bio je stvaranje animacija koje su sinkronizirane s pjesmom.

U videu meteor dolazi iz gornjeg lijevog ugla i tri puta se ruši u Saturn. Tijekom prvog pada, stvarna Saturnova tekstura, efekti sjaja i pozadina postaju vidljivi. Tijekom drugog i trećeg sudara, Saturnova tekstura i sjaji postaju svjetliji.

Odabrao sam tween.js, JavaScript animacijsku biblioteku, koja je super jednostavna za korištenje. Čitavom scenom dinamički se upravljaju parametri poput pozadinske neprozirnosti, brzine protoka teksture i unutarnje i vanjske svjetline sjaja. Potom sam pratio trenutačno vrijeme YouTube playera i počeo animirati te parametre u pravim sekundama.

Drugu eksploziju u akciji možete vidjeti dolje:

Spajajući ih sve zajedno

Dok sam povezivao sve svoje komponente, svoj projekt stalno sam uspoređivao s stvarnim glazbenim videom. Slušao sam istu pjesmu i gledao isti video iznova i iznova kako bih bio siguran da se moje animacije podudaraju sa stvarnim videozapisom. Mnogo puta sam u potpunosti mijenjao vrijednosti efekata kako bih učinio da oni postanu privlačni oku gledatelja.

Nakon mnogih preinaka i kretanja po sceni, bio sam vrlo zadovoljan krajnjim rezultatom, svojim krajnjim proizvodom. Čak nisam ni očekivao da ću vidjeti nešto ovako lijepo kad sam prvi put započeo.

Testiranje projekta na mobilnim uređajima je također bilo zadovoljavajuće. Da biste vidjeli kako animacije teče kako glatko kao na radnoj površini, bilo je sjajno. Nisam morao izvoditi nikakve trikove sa performansama za mobitel.

Moram reći, eksperimentiranje s 3D-om bilo je nevjerojatno iskustvo. Ako ste dobri s JavaScript-om i matematikom, ali nemate puno iskustva s 3D-om, toplo vam savjetujem da se igrate s njim. Korisno je vidjeti što možete učiniti s nekim avionima i sferama.

  • Programer: Yagiz Gurgul
  • Link projekta: http://yagiz.me/andromeda/
  • Izvor projekta: https://github.com/yagiz/andromeda