Jak vytvořit tekuté účinky s webglem

Mnoho webových designérů hledá způsoby, jak přidat velký dopad na jejich návrhy stránek, takže udělají pozornost svých uživatelů. Metody se vyvíjely v průběhu let, z používání grafiky záhlaví, pro umístění prezentace v nabídce přistání stránky, aby se stal úplnou šířkou prohlížeče - a nyní drtivá většina stránek následuje tento stejný formát (snadno vytvořit vlastní snadno pomocí Webové stránky Builder. ).

Dnes, návrhy, které vyhrávají 'stránky dne' na různých webových stránkách, se obecně snaží a dělat něco, co je o něco více jedinečnější a Webgl je pro to skvělý. Přidání interaktivního prvku může opravdu chytit pozornost uživatelů a ukázat, že to není stejné jako ostatní stránky, které právě navštívili. To dělá místo mnohem zajímavější, než jen mít obří slideshow a některé paralaxační rolování . Pokud máte stránky s komplexními potřebami, ujistěte se web hosting Služba je na místě.

• 14 Skvělé vzory přistání

Chcete-li provést úvodní účinek v tomto tutoriálu, bude přidána kapalina, reflexní povrch, a to bude animováno směrem k fotoaparátu s válcovacími vlnami, které se pohybují vpřed. Budou také částice, které se pohybují vpřed k dokončení vzhledu a pocitu. V centru bude logo webu a celá scéna bude reagovat na pohyb uživatele, takže se obsah směje a dělá 3D skutečně vyniknout.

. \ T vzhled loga je vykreslen jako transparentní png (udržujte to v bezpečí cloudové úložiště ), takže to lze snadno přizpůsobit svůj vlastní design. Světla budou také oživit tak, že barvy budou oběžné oběžné a zvýraznit různé vlny uvnitř scény.

Stáhněte si soubory pro tento tutoriál.

01. Přidat počáteční proměnné

Otevřete složku Start z souborů projektu a přetáhněte jej do editoru kódu. Otevřeno ' index.html. "A uvidíte, že knihovny JavaScriptu již byly propojeny. Uvnitř prázdných značek skriptu je místo, kde kód půjde. Zde je detekován WebGL, aby se ujistil, že projekt může být spuštěn, pak se přidává celá řada proměnných, které budou použity ve scéně.

 Pokud (! Detector.webgl) detektor.Addgetwebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerHeight;
var renderer, fotoaparát, scéna, movergroup, floorgeometrie, flooraterální, bodový světlomet, pointlight2, pgeometrie;
VAR FLOOR_RES = 60;
var foor_ht = 650;
var stoupcount = 0;
var noisescale = 9,5;
var Noiseseed = math.random () * 100; 

02. Vytvořte více proměnných

Další blok proměnných zvládne, jak velká by měla být vodní podlaha a rychlost, kterou se bude pohybovat spolu s počátečními polohami myši. Střed obrazovky je vypracován a zlepšená šumová knihovna se používá k vytvoření povrchu vody.

 var foor_width = 3600;
var flood_depth = 4800;
var mover_spd = 1.9;
var mousex = 0;
var mousy = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerHeight / 2;
var snoise = Nový Improvednoise ();
var textuReloader = nové tři.textureloader (); 

03. Vypočítejte myš

Pro účinky scény jsou přidány některé konečné proměnné. Přidá se posluchač událostí, který kontroluje pohyb myši. Scéna se bude pohybovat do displeje portu, aby reagoval na pohyb myši. Funkce, která je přidána zde, funguje, že je povoleno množství pohybu.

04. Změnit nastavení zpracování

" Params. 'Funkce je místo, kde budou uložena všechna nastavení efektů po zpracování. Pokud potřebujete něco změnit, je to místo, kde to udělat. Rozostření Shape Shift je pokryto v prvních čtyřech linkách, pak film prochází zbývajícími liniemi. Jedná se především o intenzitu obrazovky a intenzitou hluku.

05. Nastavte konečné parametry

Poslední z parametrů je pro tmavou viněta kolem okraje obrazovky. " init ' a ' animovat "Funkce jsou volány ke spuštění. " animovat "Funkce bude vytvořena mnohem později v tutoriálu, ale" init "Zde je vytvořena funkce. Fotoaparát a scéna jsou nastaveny tak, aby umožnily prohlížení 3D obsahu.

 EffectVignette.Uniforms ["ofset"]. Hodnota = 1,0;
  Effectvignette.Uniforms ["Temnota"].value = 1,3;
}
init ();
animovat();
Funkce init () {
  Fotoaparát = nové tři.perspectiveCamera (70, window.innerwidth / window.innerHeight, 1, 4000);
  Camera.Position.z = 2750;
  scéna = nové tři.Scene ();
  scéna.fog = nové tři.fogexp2 (0x1c3c4a, 0.00045); 

06. Nechte světlo

Pro zobrazení obsahu scény budou umístěna čtyři světla. První je polokoule, která se používá jen pro získání základního prostředí scény. Další nahoru je středové světlo, které přidává světle modré světlo uprostřed scény. To je vyloženo na jednu stranu, aby bylo možné dát nějaké světlo na celou scénu.

 var hemisferelight = nové tři.hemisferelight (0xe3feff, 0xe6ddc8, 0,7);
scéna.add (hemisferelight);
hemispherelight.pozice.y = 300;
var center = nové tři.spotlight (0xb7f9ff, ​​1);
scéna.add (centright);
Centerlight.Position.SET (2500, 300, 2000);
Centerlight.penumbra = 1;
Centerlight.Decay = 5; 

07. Animová světla

Další dvě světla, která mají být přidána. " Světlomet ' a ' Pointlight2. "Jsou barevná světla, která bude kroužit v opačných směrech kolem scény, takže světelné změny se v zobrazení neustále mění. První je růžové světlo a druhý je oranžové světlo. Cesta a formát pro snímky odrazu jsou nastaveny v posledních dvou řádcích.

 Pointlight = New Three.pointight (0xe07BFF, 1.5);
Pointlight.Position.z = 200;
scéna.add (Pointight);
Pointlight2 = nové tři.pointight (0xFF4E00, 1.2);
Pointlight2.Position.z = 200;
scéna.add (Pointlight2);
var cestě = "img /";
var formát = '.jpg'; 

08. Lesklé povrchy

Kapalný povrch bude mít reflexní, lesklý povrch a to se provádí vytvořením krychle odrazu. Jedná se o kostku s 360 stupňovou Skybox umístěnou uvnitř It, který se odráží na povrch kapaliny. " URLS. 'Pole obsahuje snímky, které mají být vloženy, pak je materiál nastaven.

09. Nastavte některé skupiny

Skupina Mover bude obsahovat některé částice, které budou přidány později, zatímco podlahová skupina bude obsahovat povrch kapaliny. Je vytvořen nový 3D objekt, který tento povrch bude držet. Budou dvě kapalné povrchy; Jeden bude mít reflexní materiál a druhý bude mít drátovýroba ' flooraterální ', jak je definováno zde.

 movergroup = nové tři.Object3d ();
scéna.add (movergroup);
var floorgroup = nové tři.Object3d ();
var flooraterial = nové tři.meshphongmaterial ({
Barva: 0xeeeeeee, Side: Three.doubleside, míchání: tři.Additiverblending, drátěný: pravda
});
floorgeometrie = nové tři.planegeometrie (floor_width + 1200, floor_depth, floor_res, floor_res); 

10. Udělejte povrchy

Dvě kapalné povrchy jsou zde vytvořeny jako " floormesh ' a ' floormesh2. ". Jsou umístěny a umístěny uvnitř ' FloorGroup. 'Poté se otočila na dobrý pozorovací úhel před kamerou. To není přímo ploché, ale mírně šikmé, protože to vypadá lépe.

 var floormesh = nové tři.mesh (pod floorometrie, kubemateriální);
var floormesh2 = nové tři.mesh (floorgeometrie, flooraterie);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
FloorGroup.Add (floormesh);
FloorGroup.Add (floormesh2);
scéna.add (FloorGroup);
floormesh.rotation.x = math.pi / 1,65;
floormesh2.rotation.x = math.pi / 1,65;
FloorGroup.Position.y = 180; 

11. Přidejte plovoucí částice

Sekce kódu Zde vytváří prázdnou geometrii objektu a pak umístí do IT 2 000 vrcholů, které působí jako částice. Ty jsou distribuovány v náhodných polohách na ose X, Y a Z. Ty se plují těsně nad povrchem tekuté podlahy.

 PGEOMETRY = NOVINKA TŘI.GEETRY ();
sprite = textureloader.load ("img / sprite.png");
pro (i = 0; i ++) {
  var vrchol = nové tři.vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  PGEOMETRY.VERTY.PUSH (vrchol);
} 

12. Vytvořte vzhled

Zde definovaný materiál nastaví, jak vzhled částic. Obraz byl vložen v předchozím kroku a který se používá jako obraz na každé částice, jakmile je materiál vytvořen. To se pak aplikuje na každý bod geometrie pro všechny částice. Ty jsou pak přidány do scény.

13. Přidat logo

Logo bude umístěno do středu obrazovky a bude přidána do roviny ploché roviny, které bude čelit fotoaparátu. Logo je vyrobeno mírně transparentní a vzhledem k aditivní směsi, takže je viditelnější, když lehčí objekty projít za ním. To je umístěno a umístěno do scény.

 Sprite = textureloader.load ("img / logo.png");
geometrie = nové tři.planebuffergeometrie (500, 640, 1);
materiál = nové tři.meshlambertmaterial ({
  Transparentní: true, opacity: 0.8, míchání: tři.Additivertblending, mapa: sprite, strana: tři
});
var roviny = nové tři.mesh (geometrie, materiál);
Plane.Position.SET (0, 70, 1800);
scéna.add (letadlo); 

14. Přidejte nastavení vykreslení

Renderer je nastaven tak, aby měl hladké, anti-aliased hrany a nyní je nastavena barva pozadí. Toto je přidáno do těla dokumentu, takže scéna je na stránce HTML. Účinky post zpracování jsou nastaveny tím, že mají různé render a shader projde inicializován.

15. Udělejte průchod

Jakmile se přidá film a glitp projít, je vytvořen komponovaný komponent, který skládá všechny průchody dohromady. Ty jsou přidány jeden po druhém do skladatele a bude nakonec vykreslen na obrazovku pro zobrazení publika.

16. Zavřete funkci 'init'

Pro inicializaci scény se přidá posledních několik nastavení. Parametry pro zpracování po zpracování jsou nastaveny, nastavení vln se nazývá a posluchač událostí je přidán vždy, když je prohlížeč změněna. To umožňuje aktualizaci displeje, aby se vešly nové rozměry.

17. Nastavte vlny

Vlny jsou nyní vytvořeny pro povrch kapaliny. To se provádí pohybem každého vrcholu podlahové geometrie na ose X a Z a pohybuje se nahoru na ose Y. V této fázi ' pro "Smyčky jsou vytvořeny pro osu X a Z.

 Funkční setwaves () {
  stepcount ++;
  movergroup.pozice.z = -move_spd;
  var I, IPOS;
  var ofset = stepcount * move_spd / flood_depth * floor_res;
  pro (i = 0; I & lt; floor_res + 1; i ++) {
  pro (var j = 0; j 

18. Make vlny

Ne všechny vrcholy budou zmenšeny směrem nahoru stejným způsobem. Ty nejdále od fotoaparátu budou velké, pak strany budou o něco méně, a ty nejbližší kamera budou nejméně rozmazané. To dělá záda a strany o něco zajímavější, jak se podívat.

 jestliže ((I & gt; 30) || (J. 12) || (J & Gt; 48)) {
  Floorgeometrie.vertices [I * (Floor_res + 1) + J] .z = Snoise.noise (IPOS / Floor_res * Noisescale, J / Floor_res * Noisescale, Noiseseed) * Floor_ht;
  } Jinak, pokud (I & Gt; 25 & Amp; A & lt; 30) {
  Floorgeometry.vertices [I * (Floor_res + 1) + J] .z = snoise.noise (IPOS / Floor_res * Noisescale, J / Floor_res * Noisescale, Noiseseed) * (FLOOR_HT / 1.2);
  } else {
  Floorgeometrie.verty [I * (Floor_res + 1) + J] .z = Snoise.noise (IPOS / Floor_res * Noisescale, J / Floor_res * Noisescale, Noiseseed) * (Floor_ht / 2);
  }
  }
  }
  floorgeometrie.verticesneedUpdate = true;
} 

19. Změna velikosti a animace

Když je okno změněno, funkce zde je volána z posluchače, který byl nastaven v kroku 16. Fotoaparát, Renderer a Composer jsou všechny resetovány zde, aby odpovídaly novým rozměrům okna prohlížeče. Funkce animace se stává pouze na 60fps, volání funkce render pro aktualizaci zobrazení.

 Funkce Onwindowresize () {
  fotoaparát.aspect = window.innerwidth / window.innerHeight;
  Fotoaparát.UpdateProjectionMatrix ();
  renderer.setsize (window.innerwidth, window.innerHeight);
  composer.setsize (window.innerwidth, window.innerHeight);
}
Funkce animovat () {
  recipsanimationFrame (animát);
  poskytnout();
} 

20. Nastavte každý akci

Funkce vykreslování se nazývá každý snímek. Světla bodů jsou nastavena na oběžnou dráhu kolem ve scéně a fotoaparát je umístěn podle pohybu myši, s trochou uvolňování, takže se pohybuje postupně na místo. Fotoaparát je nastaven tak, aby se vždy podíval do středu scény.

funkce render () {
  var timer = -0.0002 * date.now ();
  Pointlight.Position.x = 2400 * math.cos (časovač);
  Pointlight.Position.z = 2400 * math.sin (časovač);
  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 - fotoaparát.position.y) * .05;
Camera.Lookat (scene.position); 

21. Vykreslte scénu

V posledním kroku se částice pohybují vpřed na jejich individuálním vrcholem, a pokud se dostanou do kamery, jsou umístěny zpět do dálky. To je aktualizováno a ' setwaves ' Funkce je volána, aby vlny válcovali dopředu. Scéna je poskytována komponentem efektů.

Tento článek byl původně publikován v časopisu Creative Web Design Web Designer. . Přihlásit se zde web designer zde .

Související články:

• Začněte s WebGL pomocí tří.js
• 11 Kroky pro vytvoření lepších log
• 18 Web Design YouTube kanály, které potřebujete sledovat