Hvordan lage flytende effekter med Webgl

Mange webdesignere ser etter måter å legge til stor innvirkning på deres nettsteddesign, slik at de tar oppmerksomheten til brukerne sine. Metoder har utviklet seg gjennom årene, fra å bruke en header grafikk, for å plassere en lysbildefremvisning under destinasjonssiden-menyen, for å bli full nettleserbredde - og nå følger det store flertallet av nettstedene dette samme formatet (lag ditt eget enkelt med a Nettstedbygger ).

I dag, designene som vinner "siden av dagen" på forskjellige webutmerkelser, prøver generelt og gjør noe som er litt mer unikt, og Webgl er flott for dette. Å legge til et interaktivt element kan virkelig få tak i brukernes oppmerksomhet og vise at dette ikke er det samme som de andre nettstedene de nettopp har besøkt. Det gjør et nettsted mye mer interessant enn bare å ha en gigantisk lysbildefremvisning og noen parallax rulling . Hvis du har et nettsted med komplekse behov, må du sørge for at du Web Hosting. Tjenesten er på punkt.

• 14 Great Landing Page Designs

For å lage en sprut effekt i denne opplæringen, vil en væske, reflekterende overflate bli tilsatt, og dette vil bli animert mot kameraet med rullende bølger fremover. Det vil også være partikler som beveger seg fremover for å fullføre utseendet og følelsen. I senteret vil det være nettstedets logo, og hele scenen vil reagere på brukerens musbevegelse, slik at innholdet skifter og gjør at 3D virkelig skiller seg ut.

De Logo Design blir gjengitt som en gjennomsiktig png (hold den trygg i skylagring ), så dette kan enkelt tilpasses ditt eget design. Lysene vil også animere slik at fargene vil bane rundt og markere forskjellige bølger i scenen.

Last ned filene for denne opplæringen.

01. Legg til initialvariabler

Åpne Start-mappen fra prosjektfilene og dra dette inn i kodeditoren din. Åpen ' index.html. 'Og du vil se at JavaScript-bibliotekene allerede har vært knyttet til deg. Inne i de tomme skriptmerkene er hvor koden skal gå. Her blir Webgl detektert for å sikre at prosjektet kan kjøres, så legges et stort utvalg av variabler som vil bli brukt i scenen.

 Hvis (! Detektor.webgl) detektor.addgetwebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.InnerHeight;
Var Renderer, kamera, scene, movergruppe, gulvgeometri, floormateriale, pointlight, pointlight2, pgeometri;
var gulv_res = 60;
var gulv_ht = 650;
VAR STEPCOUNT = 0;
var noisescale = 9,5;
Var noiseseed = Math.Random () * 100; 

02. Lag flere variabler

Den neste blokken med variabler håndterer hvor stor vanngulvet skal være og hastigheten som den vil bevege seg sammen med innledende museposisjoner. Senteret på skjermen er utarbeidet og det forbedrede støybiblioteket brukes til å skape overflaten av vannet.

 var floor_width = 3600;
var gulv_depth = 4800;
var move_spd = 1,9;
var mosex = 0;
var musy = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = ny forbedretnoise ();
var tekstureloader = ny tre.textureloader (); 

03. Beregn musen

Noen endelige variabler legges til for postbehandlingseffekter av scenen. En hendelseslytter er lagt til som kontrollerer musebevegelsen. Scenen kommer til å bevege seg i skjermporten for å reagere på musebevegelsen. Funksjonen som legges til her, fungerer ut hvor mye bevegelse som er tillatt.

04. Endre etterbehandlingsinnstillinger

' Params. 'Funksjon er der alle innstillingene for postbehandlingseffekter vil bli lagret. Hvis du trenger å endre noe, er dette stedet å gjøre det. Tiltskiftsskriften er dekket i de fire første linjene, så passerer filmen i de resterende linjene. Dette er hovedsakelig for skjermintensiteten og støyintensiteten.

05. Sett sluttparametere

Den siste av parametrene er for den mørke vignetten rundt kanten på skjermen. ' i det 'og' animere 'Funksjoner kalles for å kjøre. ' animere 'Funksjonen vil bli opprettet mye senere i opplæringen, men' i det 'Funksjonen er opprettet her. Kameraet og scenen er satt opp for å tillate visning av 3D-innholdet.

 EffetVignette.uniforms ["offset"]. Verdi = 1,0;
  effectvignette.uniforms ["mørke"].Value = 1,3;
}
i det();
animert ();
Funksjonsinit () {
  kamera = ny tre.perepectivecamera (70, window.Innerwidth / window.InnerHeight, 1, 4000);
  camera.position.z = 2750;
  scene = ny tre.scene ();
  scene.fog = ny tre.fogexp2 (0x1c3c4a, 0.00045); 

06. La lyset i

For å se innholdet i scenen, vil fire lys bli plassert. Den første er et halvkule lys, som brukes bare for å få den grunnleggende atmosfæren på scenen. Neste opp er senterlyset som legger til et lyseblått lys i midten av scenen. Dette er satt av til den ene siden for å gi litt lys til hele scenen.

 var hemispherelight = ny tre.hemispherelight (0xe3feff, 0xe6ddc8, 0,7);
scene.add (hemisferelight);
hemispherelight.position.y = 300;
var midtlys = ny tre.spotlight (0xb7f9ff, ​​1);
scene.add (pundlight);
centerlight.position.Set (2500, 300, 2000);
centlight.Penumbra = 1;
centlight.decay = 5; 

07. Animate Lights.

De neste to lysene som skal legges til. " Pointlight. 'og' Pointlight2. 'er fargede lys som vil sirkel i motsatte retninger rundt scenen, slik at lyset endres konstant i visningen. Den første er et rosa lys og det andre er et oransje lys. Banen og formatet for refleksjonsbildene er satt i de to siste linjene.

 pointlight = ny tre.punktlight (0xe07bff, 1.5);
pointlight.position.z = 200;
scene.add (pointlight);
pointlight2 = ny tre.punktlight (0xff4e00, 1.2);
pointlight2.position.z = 200;
scene.add (pointlight2);
var sti = "img /";
var format = '.jpg'; 

08. Skinnende overflater

Væskeoverflaten vil ha en reflekterende, skinnende overflate, og dette gjøres ved å skape en refleksjonskube. Dette er en kube med en 360 graders skybox plassert inne i den, som vil bli reflektert på overflaten av væsken. ' Nettadresser 'Array inneholder bildene som skal lastes, så materialet er satt opp.

09. Sett opp noen grupper

Movergruppen vil inneholde noen partikler som vil bli lagt til senere, mens gulvgruppen vil inneholde overflaten av væsken. Et nytt 3D-objekt er opprettet som vil holde den overflaten. Det vil være to flytende overflater; man vil ha reflekterende materiale og den andre vil ha wireframe ' Floormaterial ', som definert her.

 movergrupp = ny tre.object3d ();
scene.add (movergruppen);
var gulvgruppe = ny tre.object3d ();
var floormaterial = nytt tre.Meshphongmaterial ({
Farge: 0Exeeeee, Side: Three.Doubleside, Blending: Three.Additiveblending, Wireframe: True
});
gulvgeometri = ny tre.planeegeometri (floor_width + 1200, floor_depth, gulv_res, gulv_res); 

10. Lag overflatene

De to flytende overflatene er skapt her som " floormesh. 'og' floormesh2. '. De er plassert og plassert inne i " gulvgruppe 'Så roterte til en god visningsvinkel foran kameraet. Dette er ikke direkte flatt, men litt vinklet som det ser bedre ut som det.

 var floormesh = ny tre.mesh (gulvgeometri, cubematerial);
var floormesh2 = Ny tre.mesh (gulvgeometri, floormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
gulvgroup.add (floormesh);
gulvgroup.add (floormesh2);
scene.add (gulvgruppe);
floormesh.Rotation.x = Math.pi / 1.65;
floormesh2.Rotation.x = Math.pi / 1.65;
gulvgroup.position.y = 180; 

11. Legg til flytende partikler

Seksjonen av koden her skaper et tomt geometriobjekt og plasserer deretter i det 2000 hjørner som fungerer som partiklene. Disse fordeles i tilfeldige stillinger på X, Y og Z-aksen. Disse vil flyte rett over overflaten av flytende gulv.

 pgeometri = ny tre.geometri ();
sprite = textureloader.Load ("img / sprite.png");
for (i = 0; i ++) {
  var vertex = ny tre.Vector3 ();
  Vertex.x = 4000 * Math.Random () - 2000;
  VERTEX.Y = -200 + MATH.RANDOM () * 700;
  Vertex.z = 5000 * Math.Random () - 2000;
  pgeometry.vertices.push (vertex);
} 

12. Lag utseendet

Materialet som er definert her, vil sette hvordan partiklene ser ut. Et bilde ble lastet i forrige trinn, og som brukes som bildet på hver partikkel, når materialet er opprettet. Dette påføres deretter på hvert punkt av geometrien for alle partiklene. Disse blir så tilsatt i scenen.

13. Legg til logoen

En logo vil bli plassert i midten av skjermen, og dette vil bli lagt til et flattplan som vil møte kameraet. Logoen er laget litt gjennomsiktig og gitt en additivblanding slik at den er mer synlig når lettere gjenstander passerer bak den. Dette er plassert og plassert i scenen.

 sprite = textureloader.load ("img / logo.png");
geometri = ny tre.planebuffergeometri (500, 640, 1);
Materiale = Nytt tre.Meshlambertmaterial ({
  Transparent: True, Opacity: 0.8, Blanding: Tre.Additiveblending, Kart: Sprite, Side: Three.Doubleside
});
Var Plane = Ny tre.Mesh (geometri, materiale);
Plane.position.Set (0, 70, 1800);
scene.add (fly); 

14. Legg til gjengivelsesinnstillingene

Renderen er satt opp for å ha glatte, anti-aliased kanter, og nå er bakgrunnsfargen satt. Dette legges til i kroppen av dokumentet slik at scenen er på HTML-siden. Postbehandlingseffekter er opprettet ved å ha forskjellige gjengitte og skygger passerer initialisert.

15. Gjør passet

Når film- og glitch-passet er lagt til, opprettes en effektkomponist som komponerer alle passene sammen. Disse legges til en etter en til komponisten, og den vil etter hvert bli gjengitt på skjermen for publikumsdisplay.

16. Lukk "init" -funksjonen

De siste få innstillingene legges til for initialiseringen av scenen. Parametrene for postbehandling er angitt, innstillingen av bølgene kalles, og en hendelsestilling legges til for når nettleseren er endret. Dette gjør at displayet kan oppdateres for å passe til de nye dimensjonene.

17. Sett opp bølgene

Bølgene er opprettet nå for overflaten av væsken. Dette gjøres ved å bevege seg gjennom hvert toppunkt av gulvgeometrien på X- og Z-aksen og bevege den oppover på Y-aksen. På dette stadiet ' til 'Loops er laget for X- og Z-aksen.

 Funksjonssettwaves () {
  StepCount ++;
  movergroup.position.z = -move_spd;
  VAR I, IPOS;
  var Offset = StepCount * Move_SPD / Floor_depth * Floor_RES;
  for (i = 0; i & lt; floor_res + 1; i ++) {
  for (var j = 0; j & lt; floor_res + 1; j ++) {
  IPOS = I + Offset; 

18. Lag bølger

Ikke alle vertices vil bli skalert opp på samme måte. De lengst bort fra kameraet vil være stort, så sidene vil være litt mindre, og de nærmeste kameraet vil bli skalert minst. Dette gjør ryggen og sidene litt mer interessant å se på.

 Hvis ((I & GTT; 30) || (J & GT, 48)) {
  gulvgeometri.vertices [i * (floor_res + 1) + j] .z = snoise.noise (IPO / floor_res * noisescale, j / floor_res * noisescale, noisesed) * Floor_ht;
  } ellers hvis (i & gt; 25 & amp; i / lt; 30) {
  Gulvgeometri.vertices [i * (floor_res + 1) + j] .z = snoise.noise (IPO / floor_res * noisescale, j / floor_res * noisescale, noisesed) * (floor_ht / 1.2);
  } else {
  gulvgeometri.vertices [i * (floor_res + 1) + j] .z = snoise.noise (IPO / floor_res * noisescale, j / floor_res * noisescale, noisesed) * (floor_ht / 2);
  }
  }
  }
  Gulvgeometri.verticesNeedUpdate = sant;
} 

19. Endre størrelse og animere

Når vinduet er endret, blir funksjonen her kalt fra lytteren som ble satt opp i trinn 16. Kameraet, Renderer og Composer er alle tilbakestilt her for å matche de nye dimensjonene i vinduet i nettleseren. Den animere funksjonen setter seg selv på 60fps, og ringer til gjengivelsesfunksjonen for å oppdatere skjermen.

 Funksjon onwindowresize () {
  Camera.asPect = window.Innerwidth / window.InnerHeight;
  kamera.Updateprojectionmatrix ();
  Renderer.Setsize (window.Innerwidth, window.InnerHeight);
  komponist.Setize (window.Innerwidth, window.InnerHeight);
}
Funksjon animere () {
  requestanimationFrame (animate);
  gjengi ();
} 

20. Sett hver handlingsramme

Render-funksjonen kalles hver ramme. Punktlysene er satt til bane rundt i scenen, og kameraet er plassert i henhold til musebevegelsen, med litt lettelse slik at den beveger seg gradvis på plass. Kameraet er satt til alltid å se på midten av scenen.

funksjonen gjengivelse () {
  var timer = -0.0002 * Dato.now ();
  pointlight.position.x = 2400 * Math.cos (Timer);
  pointlight.position.z = 2400 * Math.sin (Timer);
  pointlight2.position.x = 1800 * Math.cos (-timer * 1.5);
  pointlight2.position.z = 1800 * Math.sin (-timer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  camera.position.y + = (-mousey - camera.position.y) * .05;
kamera.Lookat (scene.position); 

21. Gjør scenen

I det siste trinnet blir partiklene beveget fremover på deres individuelle toppunkt, og hvis de kommer til kameraet, plasseres de tilbake i avstanden. Dette er oppdatert og ' setwaves ' Funksjonen kalles for å gjøre bølgene rulle fremover. Scenen blir gjengitt av effekten komponisten.

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine Webdesigner . Abonner på webdesigner her .

Relaterte artikler:

• Kom i gang med WebGL ved hjelp av tre.js
• 11 trinn for å skape bedre logoer
• 18 Web Design YouTube-kanaler du trenger å se