Cum se creează efecte lichide cu WebGL

Mulți designeri web caută modalități de a adăuga un impact mare pe site-ul lor, astfel încât să le aducă atenția utilizatorilor lor. Metodele au evoluat de-a lungul anilor, de la utilizarea unui header grafic, pentru a plasa o slideshow sub meniul paginii de destinație, pentru a deveni o lățime completă a browserului - și acum marea majoritate a site-urilor urmează același format (creați-vă cu ușurință propria dvs. cu un curent propriu Builder de site-uri web ).

Astăzi, desenele care câștigă "site-ul zilei" pe diferite site-uri de premii web încearcă, în general, să facă ceva care este un pic maiic, iar WebGL este minunat pentru asta. Adăugarea unui element interactiv poate atrage atenția utilizatorilor și poate arăta că acest lucru nu este același cu celelalte site-uri pe care tocmai le-au vizitat. Ea face un site mult mai interesant decât să ai doar o slideshow gigant și unii Parallax defilând . Dacă aveți un site cu nevoi complexe, asigurați-vă că sunteți web hosting Serviciul este la punct.

• 14 design de pagini de aterizare excelente

Pentru a face un efect de stropire în acest tutorial, se va adăuga o suprafață lichidă, reflectorizantă, iar aceasta va fi animată spre aparatul foto cu valuri de rulare care se deplasează înainte. De asemenea, vor exista particule care avansează pentru a finaliza aspectul și simțul. În centru va fi logo-ul site-ului, iar întreaga scenă va reacționa la mișcarea mouse-ului utilizatorului, astfel încât conținutul să se schimbe și face ca 3D să iasă în evidență.

logo design este redat ca un PNG transparent (păstrați-l în siguranță Stocare in cloud ), astfel încât acest lucru poate fi personalizat cu ușurință pentru propriul dvs. design. Luminile vor anima, de asemenea, astfel încât culorile să fie orbite și să evidențieze diferite valuri în scenă.

Descărcați fișierele pentru acest tutorial.

01. Adăugați variabilele inițiale

Deschideți dosarul de pornire din fișierele de proiect și trageți acest lucru în editorul de coduri. Deschis ' index.html. "Și veți vedea că bibliotecile JavaScript au fost deja legate de dvs. În interiorul etichetelor de script goale este locul în care codul va merge. Aici WebGL este detectat pentru a vă asigura că proiectul poate fi rulat, apoi se adaugă o gamă largă de variabile care vor fi utilizate în scenă.

 dacă (! Detector.webgl) detector.Adgetwebglmessage ();
VAR screen_width = fereastră.Innerwidth;
Var Screen_Height = Window.Innerheaight;
Var Renderer, camera, scena, grupul de mover, pardoseală, flotor, punct de bază, punct de bază2, pgeometrie;
VARLY_RES = 60;
VARLOST_HT = 650;
var stepcount = 0;
var nisicscale = 9,5;
Var Noiseseed = Math.random () * 100; 

02. Creați mai multe variabile

Următorul bloc de variabile se ocupă cât de mare ar trebui să fie podeaua apei și viteza pe care o va mișca împreună cu pozițiile inițiale ale mouse-ului. Centrul ecranului este elaborat și biblioteca de zgomot îmbunătățită este utilizată pentru a crea suprafața apei.

 VARLOR_Width = 3600;
VARLY_DEPTH = 4800;
var mov_spd = 1.9;
var mousex = 0;
var mousey = 0;
Var WindowHalfx = Window.Innerwidth / 2;
var fereastră = fereastră.innerhight / 2;
VAR SNOISE = Noua îmbunătățire ();
Var TextureLoader = New Three.Textiment (); 

03. Calculați mouse-ul

Unele variabile finale sunt adăugate pentru efectele post-procesare ale scenei. Se adaugă un ascultător de evenimente care verifică mișcarea mouse-ului. Scena se va deplasa în portul de afișare pentru a reacționa la mișcarea mouse-ului. Funcția care este adăugată aici funcționează cu cantitatea de mișcare permisă.

04. Schimbați setările post-procesare

" Paramale "Funcția este locul în care vor fi stocate toate setările pentru efectele post-procesare. Dacă trebuie să schimbați nimic, acesta este locul unde o faceți. Blurul de schimb de înclinare este acoperit în primele patru linii, apoi filmul trece în liniile rămase. Aceasta este în principal pentru intensitatea ecranului și intensitatea zgomotului.

05. Setați parametrii finali

Ultimul parametrilor este pentru vignetul întunecat în jurul marginii ecranului. " init. ' și ' anima Funcțiile sunt chemate să funcționeze. " anima "Funcția va fi creată mult mai târziu în tutorial, dar" init. Funcția este creată aici. Camera și scena sunt configurate pentru a permite vizualizarea conținutului 3D.

 EfectVignette.uniforms ["Offset"]. Valoare = 1.0;
  EfectVignette.uniforms ["întuneric"].val = 1.3;
}
init ();
anima();
Funcție init () {
  Camera = New Three.PerspectiveCamera (70, fereastră.innerwidth / fereastră.InnerReight, 1, 4000);
  camera.position.z = 2750;
  scena = nouă trei.Scene ();
  scena.fog = nou trei.fogexp2 (0x1c3c4a, 0,00045); 

06. Lăsați lumina înăuntru

Pentru a vedea conținutul scenei, vor fi plasate patru lumini. Prima este o lumină emisfera, care este folosită doar pentru a obține ambianța de bază a scenei. Apoi, este lumina centrală care adaugă o lumină albastră ușoară în mijlocul scenei. Acesta este pornit într-o parte pentru a da o lumină întregului scenă.

 Var hemispherelight = Noua triumimii (0xe3feff, 0xe6ddc8, 0,7);
scena.add (hemispherelight);
hemispherelight.position.y = 300;
Var CenterLight = Noua Lumina de trei.Spot (0xb7f9ff, ​​1);
scena.add (centru);
centerlight.position.set (2500, 300, 2000);
CenterLight.penumbra = 1;
Centerlight.decay = 5; 

07. Lumini animate

Următoarele două lumini trebuie adăugate. " Punct de vedere ' și ' Punct de bază "Sunt lumini colorate care vor circula în direcții opuse în jurul scenei, astfel încât lumina să se schimbe în mod constant în vizualizare. Primul este o lumină roz, iar al doilea este o lumină portocalie. Calea și formatul imaginilor de reflecție sunt setate în ultimele două linii.

 Luminlight = noul trei. (0xe07b, 1,5);
punctlight.position.z = 200;
scena.add (punct de intrare);
Poiclight2 = Noua 3 Indicații (0xFF4E00, 1.2);
punctlight2.position.z = 200;
scena.add (punct de bază);
VAR PATH = "IMG /";
Var Format = '.jpg'; 

08. Suprafețe strălucitoare

Suprafața lichidă va avea o suprafață reflectivă, strălucitoare și acest lucru se face prin crearea unui cub de reflecție. Acesta este un cub cu o cutie de 360 ​​de grade plasată în interiorul acestuia, care va fi reflectată pe suprafața lichidului. " URL-uri "ARRAY conține imaginile care trebuie încărcate, apoi materialul este configurat.

09. Creați unele grupuri

Grupul de mover va conține unele particule care vor fi adăugate mai târziu, în timp ce grupul de podea va conține suprafața lichidului. Se creează un nou obiect 3D care va păstra acea suprafață. Vor exista două suprafețe lichide; unul va avea materialul reflectorizant, iar al doilea va avea firul " Floormaterial ", așa cum este definit aici.

 MOVERGROUP = New Three.Object3D ();
scena.add (grupul de mover);
VAR Poolgroup = New Three.Object3D ();
VAR FLOORMATEREA = Nou trei.meshphongmaterial ({{
Culoare: 0xeeeee, Side: Trei.Doubleside, Amestecare: Trei.Additivilator, Wireframe: Adevărat
});
FLOORGEOMETRIE = Noua Trei.PlaneGeometrie (podea_width + 1200, podea_depth, podea_res, podea_res); 

10. Faceți suprafețele

Cele două suprafețe lichide sunt create aici ca " podea ' și ' PodeleMesh2. ". Ele sunt poziționate și plasate în interiorul " Grupul de podea "Apoi se rotește într-un unghi de vizualizare bun în fața camerei. Acest lucru nu este direct plat, dar ușor înclinat, deoarece pare mai bine așa.

 VAR PoLYMESH = Nou trei.Mesh (pardoseală, cubematerial);
VAR PoLOMESH2 = Nou trei.Mesh (Podea, Floormaterial);
podeaMesh2.pozition.y = 20;
podeaMesh2.position.z = 5;
Podea Grome.Add (pardoseală);
PodeaGroup.Add (pardoseală2);
scena.add (grup de podea);
podeaMeh.rotation.x = Math.pi / 1.65;
podeaMash2.rotation.x = mateth.pi / 1,65;
PodeaGroup.pozition.y = 180; 

11. Adăugați particule plutitoare

Secțiunea de cod creează aici un obiect de geometrie gol și apoi pune în ea 2.000 de noduri care acționează ca particule. Acestea sunt distribuite în poziții aleatorii pe axa X, Y și Z. Acestea vor pluti chiar deasupra suprafeței podelei lichide.

 Pgeometrie = Noua trei.Geometrie ();
sprite = texturăloader.load ("img / sprite.png");
pentru (i = 0; i & lt; 2000; i ++) {
  var vertex = nou trei.vector3 ();
  vertex.x = 4000 * matemath.random () - 2000;
  vertex.y = -200 + mateth.random () * 700;
  vertex.z = 5000 * matemath.random () - 2000;
  pgeometry.vertes.push (vertex);
} 

12. Creați aspectul

Materialul definit aici va stabili modul în care particulele arată. O imagine a fost încărcată în etapa anterioară și care este utilizată ca imagine pe fiecare particulă, odată ce materialul este creat. Acest lucru este apoi aplicat fiecărui punct al geometriei pentru toate particulele. Acestea sunt apoi adăugate în scenă.

13. Adăugați logo-ul

Un logo va fi plasat în centrul ecranului și acest lucru va fi adăugat pe un plan plat care se va confrunta cu camera. Logo-ul este făcut ușor transparent și având în vedere un amestec aditiv, astfel încât să fie mai vizibil atunci când obiectele mai ușoare trec în spatele ei. Acest lucru este poziționat și plasat în scenă.

 Sprite = TextureLoader.load ("img / logo.png");
Geometria = Noua Trei.PlaneBufferGeometrie (500, 640, 1);
material = nou trei.meshlambertateriale ({{
  Transparent: Adevărat, Opacitate: 0.8, Amestecare: Trei.Additivilator, Harta: Sprite, Side: Trei.Doubleside
});
Var plan = nou trei.Mesh (geometrie, material);
plan.position.set (0, 70, 1800);
scena.add (plan); 

14. Adăugați setările de redare

Rendererul este configurat pentru a avea margini netede, anti-aliacate și acum culoarea de fundal este setată. Acesta este adăugat în corpul documentului, astfel încât scena să fie pe pagina HTML. Efectele post-procesare sunt configurate prin faptul că au fost inițializate diverse randuri și shader.

15. Faceți trecerea

Odată ce filmul și trecerea cu glitch sunt adăugate, este creat un compozitor de efect care compune toate trecerile împreună. Acestea sunt adăugate unul câte unul la compozitor și în cele din urmă vor fi redate pe ecran pentru afișarea publicului.

16. Închideți funcția "init"

Ultimele câteva setări sunt adăugate pentru inițializarea scenei. Parametrii pentru procesarea post este setată, se numește setarea valurilor și se adaugă un ascultător de evenimente pentru ori de câte ori browserul este redimensionat. Acest lucru permite ca afișajul să fie actualizat pentru a se potrivi noilor dimensiuni.

17. Configurați valurile

Valurile sunt create acum pentru suprafața lichidului. Acest lucru se face prin deplasarea prin fiecare vârf al geometriei podelei pe axa X și Z și mutați-o în sus pe axa y. În acest stadiu " pentru "Buclele sunt create pentru axa X și Z.

 Setwaves () {
  StepCount ++;
  movergroup.position.z = -move_spd;
  Var I, IPO;
  Var offset = StepCount * Move_Spd / Floor_Depth * Floor_res;
  pentru (i = 0; i & lt; podea_res + 1; i ++) {
  pentru (var j = 0; j & lt; etaj_res + 1; j ++) {
  iPos = I + offset; 

18. Faceți valuri

Nu toate vârfurile vor fi scalate în sus în același mod. Cei mai îndepărtați de camera vor fi mari, atunci părțile vor fi puțin mai puțin, iar cele mai apropiate aparatul foto vor fi scalate cel mai puțin. Acest lucru face ca spatele și părțile să fie ușor mai interesante să se uite la.

 Dacă ((I & 30) || (J & Lt; 12) || (J & GT; 48)) {
  FLOORGEOMETRING.Ventutes [I * (etaj_res + 1) + j]
  altfel dacă (i & gt; 25 & amp; & amp; i & lt; 30) {
  FLOORGEOMETRIE.Ventutes [I * (etaj_res + 1) + j]
  } altfel {
  FLOORGEOWERTY.Ventile [I * (etaj_res + 1) + j]
  }
  }
  }
  FLOORGEOMETRING.VstICESNEEDUPDATE = TRUE;
} 

19. Redimensionați și animați

Când fereastra este redimensionată, funcția de aici este apelată de la ascultător care a fost configurată la pasul 16. Camera, Renderer și compozitor sunt toate resetate aici pentru a se potrivi cu noile dimensiuni ale ferestrei browserului. Funcția animată se stabilește doar la 60fps, apelând funcția de redare pentru a actualiza afișajul.

 Funcția onWindowresize () {
  camera.aspect = fereastră.Innerwidth / fereastră.innerhight;
  camera.updateproficematrix ();
  Renderer.setsize (fereastră.Innerwidth, fereastră.innerheaight);
  compozitor.setize (fereastră.Innerwidth, fereastră.innerheaight);
}
Funcția animată () {
  CerereanimațieFrame (animată);
  face();
} 

20. Setați fiecare cadru de acțiune

Funcția de redare este numită fiecare cadru. Luminile punctuale sunt setate pe orbită în jurul scenei, iar camera este poziționată în funcție de mișcarea mouse-ului, cu puțin ușurință, astfel încât să se deplaseze treptat în poziție. Camera este setată să se uite întotdeauna la centrul scenei.

Funcție Render () {
  var timer = -0.0002 * data.now ();
  punctlight.position.x = 2400 * Math.cos (cronometru);
  punctlight.position.z = 2400 * Math.sin (cronometru);
  punctlight2position.x = 1800 * Math.cos (-Timer * 1.5);
  punctlight2position.z = 1800 * Math.sin (-Timer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  Camera.Position.Y + = (-Mousey - cameră.poziție.y) * .05;
camera.Lookat (scena.poziție); 

21. Realizați scena

În ultimul pas, particulele sunt deplasate înainte pe vertexul lor individual și dacă ajung la cameră, ele sunt plasate înapoi în depărtare. Acest lucru este actualizat și " Setwaves ' Funcția este chemată să facă valurile să se rostogolească înainte. Scena este redată de compozitorul de efecte.

Acest articol a fost publicat inițial în revista Creative Web Design Web designer . Aboneaza-te la designerul web aici .

Articole similare:

• Începeți cu WebGL folosind trei.js
• 11 pași pentru a crea logo-uri mai bune
• 18 Web Design Canale YouTube Trebuie să urmăriți