de Yağız Gürgül

Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Aveam 14 ani când am văzut videoclipul muzical Gorillaz – Feel Good Inc. M-am îndrăgostit de el spunând „Whaatt? Un videoclip muzical animat? Ce tare!”. Următorul lucru pe care l-am știut că cumpăr albumul Demon Days.

Ani mai târziu … Acum aproximativ 4 luni, YouTube mi-a arătat noul videoclip muzical Gorillaz, Andromeda. Când a finalizat tamponarea, m-am gândit imediat că acest videoclip ar putea fi redat pe browsere.

Atunci am început să recreez videoclipul Andromeda cu WebGL. Simțiți-vă liber să o verificați Gorillaz – Andromeda în WebGL.

Când am început să recreez, primul lucru pe care l-am făcut a fost să descarc three.js, care este o bibliotecă solidă JavaScript 3D. Am descărcat sursa și am început cu o scenă simplă „Hello World”. Apoi am început să planific obiectele, texturile și animațiile.

Mi-am împărțit proiectul în patru părți majore. Acestea sunt scena de fundal, scena meteorilor, scena lui Saturn și animațiile.

Analiza videoclipului muzical

Videoclipul Andromeda are de fapt o scenă simplă. O imagine de galaxie de fundal care se mișcă de la stânga la dreapta. O sferă cu o textură curgătoare pe care o voi numi Saturn. Și meteori dansând în față. Din când în când, când muzica devine mai mare, un meteor vine din colțul din stânga sus și se zdrobește în Saturn și îl face să strălucească.

Urma să imit una similară. Așa că am schițat scena de mai jos cu componente precum fundal, Saturn și meteori.

1611443647 236 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Scena de fundal

Aceasta pare a fi cea mai simplă parte a scenei și este cam adevărat. Din punct de vedere tehnic este ușor. Mai întâi creați un avion. Animează-l de la stânga la dreapta. Creați altul și plasați-l în spatele primului. Setați modurile de amestecare la aditiv, astfel încât să pară combinate. În cele din urmă, adăugați câteva texturi.

Dar ce zici de găsirea unei texturi de galaxie potrivite, reale 4K, frumoase și colorate?

Ei bine, a fost greu.

Am căutat în jurul a o mie de site-uri pentru a obține imagini licențiate sau gratuite. Dar tot ce am putut găsi a fost câteva imagini de fundal frumoase, ascuțite, 4K, nu texturi reale.

A fost rău. A trebuit să le cumpăr și să le descarc pe rând. Apoi încercați să le convertiți în texturi continue. Și modificați setările de luminozitate și contrast. După toți acei pași, i-am testat în scenă, încercând să văd dacă arată bine sau nu.

A durat ceva timp, dar am reușit să găsesc imaginea perfectă. Ceea ce a meritat în totalitate și am fost cu adevărat fericit să văd rezultatele:

Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Trebuia să adaug câteva efecte de post-procesare, cum ar fi schimbarea nuanței în proiectul meu. Am folosit EffectComposer (Puteți găsi un tutorial detaliat aici.), care nu face parte din three.js, dar vine cu exemplele sale. Prin utilizarea EffectComposer am reușit cu ușurință să adaug efecte de nuanță pe scena mea de fundal.

Scena Meteorilor

Meteorii au fost cea mai simplă parte a proiectului. În același timp, au fost dușmanii performanței. Sunt 500 dintre ei care se mișcă și se rotesc în scenă! Aveam nevoie să găsesc un model de meteor în modul cel mai simplu pentru a avea animații fluide.

Este uimitor ce puteți face cu geometriile stocului în three.js. Cu OctahedronGeometryAm deformat fiecare vârf al acestuia. Practic, arată ca o piatră:

1611443649 729 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

După cum am spus mai înainte, acest proiect are 500 de meteori. Fiecare are o viteză de mișcare diferită, viteza de rotație și o dimensiune aleatorie. Se deplasează de la dreapta la stânga. Când se deplasează din vizualizare, se teleportează în partea dreaptă a vizualizării.

1611443650 61 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Meteorii din spatele lui Saturn sunt de fapt o singură imagine statică. Mai întâi am încercat să creez această imagine statică de la zero. Am desenat câteva cercuri aleatorii cu efect de strălucire, dar apoi nu mi-a plăcut cum arătau în scenă. Apoi am găsit o textură de stele. L-am colorat în galben și i-am setat modul de amestecare la aditiv.

Scena lui Saturn

Fără îndoială, aceasta a fost cea mai grea parte a scenei. Pentru a înțelege de ce, trebuie să inspectați caracteristicile acestuia în videoclipul muzical:

  • Textura se animă într-un mod în care partea de sus a acesteia se mișcă mai repede decât partea de jos.
  • Saturn nu se rotește, dar textura face să pară că se leagănă.
  • Saturn are o strălucire interioară. Marginile și părțile centrale sunt mai luminoase.
  • Saturn are, de asemenea, o strălucire exterioară. De fapt, există două străluciri exterioare. Una dintre ele este mai strălucitoare și aproape de margini, cealaltă este mai mare și mai întunecată.

Textură

Găsirea unui text frumos adecvat … Ei bine, știți deja că este greu. Dar unul dintre colegii mei mi-a dat cea mai simplă idee, să caut „Textura saturn” pe Google Images. Am fost șocat de ceea ce am găsit.

Prima imagine care a apărut a fost exact aceeași imagine folosită în videoclipul Andromeda. Artistul / designerul a căutat „textura saturn” pe Google Images și l-a ales pe primul din producție? Este ceva obișnuit?

Oricum, de când mi-am găsit textura Saturn, următoarea parte a fost să o anim. Aceasta a fost cea mai mare provocare. După ce am cercetat puțin, am înțeles că trebuie să folosesc ceva numit fragment de umbră. Dar ce naiba a fost asta? Din câte am înțeles este un cod care trăiește în .js / .html, dar rulează în GPU.

Când este redat un model 3D, fiecare pixel al acestui model trebuie să știe ce culoare de textură ar trebui să utilizeze. O modalitate de a face acest lucru este de a utiliza Cartografiere UV. Animez coordonatele hărții UV în mod exponențial. Deci, partea de sus a devenit mai rapidă decât cea de jos. Au fost puțin încercări și erori, dar cred că am pus-o în cuie.

1611443652 575 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

În videoclip, și Saturn leagănă. Pentru a realiza această mișcare, am primit ajutor de la o funcție de păcat. Una dintre intrările acestei funcții de păcat este timpul de cadru, care crește în timp. Deci, sfera pare să se balanseze.

1611443655 814 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Străluceste

Există trei tipuri de străluciri în proiect: strălucirea interioară, cea exterioară mare și cea exterioară mică.

Pentru strălucirea interioară, am creat o textură simplă de gradient alb-negru. Apoi i-am adăugat culorile pixelilor la culoarea originală a texturii Saturn în fragmentul de umbrire:

1611443659 528 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

La început am crezut că pot crea strălucirile exterioare folosind fragmentele de umbrire. Dar am decis că ar fi exagerat, deoarece camera și Saturn nu se rotesc.

Așa că am creat texturi cu gradient circular negru și alb. Le-am așezat în spatele lui Saturn și le-am setat modurile de amestecare la aditiv. Acest lucru mi-a salvat o cantitate imensă de timp de dezvoltare.

Puteți vedea strălucirea mai mare în acțiune. Nu uitați că este de fapt un avion în spatele lui Saturn:

1611443661 144 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Aceasta este strălucirea mai mică, dar mai strălucitoare creată cu aceeași tehnică:

1611443663 59 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Acesta este rezultatul final al lui Saturn cu toate strălucirile activate:

1611443663 894 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Animaţie

Ultima parte a proiectului a fost crearea de animații care au fost sincronizate cu melodia.

În videoclip, un meteor vine din colțul din stânga sus și se lovește de Saturn de trei ori. În timpul primului accident, textura reală a lui Saturn, efectele de strălucire și fundalul devin vizibile. În timpul celui de-al doilea și al treilea accident, textura și strălucirile lui Saturn devin mai strălucitoare.

am ales tween.js, o bibliotecă de animație JavaScript, care este foarte ușor de utilizat. Întreaga scenă este controlată dinamic de parametri precum, opacitatea fundalului, viteza de curgere a texturii și luminozitatea interioară și exterioară. Apoi am urmărit ora curentă a playerului YouTube și am început să anim acești parametri în secundele potrivite.

A doua explozie o puteți vedea în acțiune mai jos:

1611443664 54 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

Aducându-i pe toți împreună

1611443666 56 Cum am recreat videoclipul muzical Gorillaz Andromeda folosind WebGL

În timp ce mi-am reunit toate componentele, mi-am comparat în mod constant proiectul cu videoclipul real. Am ascultat aceeași melodie și am urmărit același videoclip din nou și din nou pentru a mă asigura că animațiile mele se potrivesc cu videoclipul real. De multe ori am schimbat în totalitate valorile efectelor pentru a le face atrăgătoare privitorului.

După multe modificări și mișcări înainte și înapoi în jurul scenei, am fost foarte mulțumit de rezultatul final, produsul meu final. Chiar și nu mă așteptam să văd ceva atât de frumos când am început.

Testarea proiectului pe dispozitive mobile a fost, de asemenea, satisfăcătoare. Pentru a vedea animațiile care rulează la fel de netede pe desktop, mi s-a părut grozav. Nu a trebuit să fac trucuri de performanță pentru mobil.

Trebuie să spun că experimentarea cu 3D a fost o experiență uimitoare. Dacă ești bun cu JavaScript și matematică, dar nu ai multă experiență în 3D, îți recomand cu tărie să te joci cu el. Este satisfăcător să vezi ce poți face cu unele planuri și sfere.