Een vloeibare effecten maken met WebGL

Veel webontwerpers zoeken naar manieren om een ​​grote impact toe te voegen aan hun site-ontwerpen, zodat ze de aandacht van hun gebruikers zullen pakken. Methoden zijn in de loop der jaren geëvolueerd, van het gebruik van een koptekstafbeelding, naar het plaatsen van een diavoorstelling onder het bestemmingspagina-menu, om volledige browserbreedte te worden - en nu de overgrote meerderheid van de sites ditzelfde formaat website bouwer ​

Tegenwoordig proberen de ontwerpen die 'site of the day' op verschillende websites sites winnen, over het algemeen iets doen dat iets unieker is, en WebGL is hier geweldig voor. Het toevoegen van een interactief element kan de aandacht van gebruikers echt grijpen en laten zien dat dit niet hetzelfde is als de andere sites die ze net hebben bezocht. Het maakt een site veel interessanter dan alleen maar een gigantische diavoorstelling en sommige hebben parallax scrollen ​Als je een site hebt met complexe behoeften, zorg dan voor dat je web hosting Service is op het punt.

• 14 Geweldige bestemmingspaginaontwerpen

Om een ​​splash-effect in deze tutorial te maken, wordt een vloeistof, reflecterend oppervlak toegevoegd, en dit wordt geanimeerd naar de camera met rolgolven die verder gaan. Er zullen ook deeltjes zijn die verder gaan om het uiterlijk en het gevoel te voltooien. In het centrum wordt het logo van de site en reageert de hele scène op de muisbeweging van de gebruiker, zodat de inhoud verschuift en de 3D echt opvalt.

De logo ontwerp wordt weergegeven als een transparante PNG (houd het veilig in cloud opslag ), dus dit kan eenvoudig worden aangepast aan uw eigen ontwerp. De lichten zullen ook animeren, zodat de kleuren rondlopen en verschillende golven binnen de scène markeren.

Download de bestanden voor deze tutorial.

01. Voeg initiële variabelen toe

Open de startmap uit de projectbestanden en sleep dit naar uw code-editor. Open ' index.html 'En u zult zien dat de JavaScript-bibliotheken al voor u zijn gekoppeld. In de lege script-tags is waar de code gaat. Hier wordt WebGL gedetecteerd om ervoor te zorgen dat het project kan worden uitgevoerd, dan wordt een hele reeks variabelen toegevoegd die in de scène zal worden gebruikt.

 Indien (! Detector.webgl) detector.ADDGETWEBGLMESSAGE ();
Var Screen_Widdh = Window.innerwidth;
Var Screen_Height = window.innerHoogte;
Var renderer, camera, scène, Movergroep, vloergeometrie, floormaterial, poortlichting, pointlight2, peenometrie;
var vloer_res = 60;
var vloer_ht = 650;
var stepcount = 0;
var noisescale = 9.5;
var noiseseed = math.random () * 100; 

02. Maak meer variabelen

Het volgende blok van variabelen hanteren hoe groot de watervloer moet zijn en de snelheid die het zal bewegen met initiële muisposities. Het midden van het scherm wordt uitgewerkt en de verbeterde geluidsbibliotheek wordt gebruikt om het oppervlak van het water te creëren.

 VAC-vloer_width = 3600;
var vloer_depth = 4800;
Var Move_SPD = 1.9;
var Mousex = 0;
var mousey = 0;
var windowhalfx = venster.innerwedding / 2;
var windowhalfy = venster.innerHeight / 2;
var snoise = nieuwe verbeterdnoise ();
var textureloader = nieuwe drie.textureloader (); 

03. Bereken de muis

Sommige definitieve variabelen worden toegevoegd voor de nabewerkingseffecten van de scène. Een gebeurtenisluisteraar wordt toegevoegd die de muisbeweging controleert. De scène gaat in de displaypoort verplaatsen om te reageren op de muisbeweging. De functie die hier wordt toegevoegd, werkt de hoeveelheid beweging die is toegestaan.

04. Wijzig de instellingen na de verwerking

De ' paramets 'Functie is waar alle instellingen voor de nabehandelingseffecten worden opgeslagen. Als je iets moet veranderen, is dit de plek om het te doen. De kantelverschuiving vervaagd is bedekt met de eerste vier regels, dan de film passeert de resterende lijnen. Dit is voornamelijk voor de schermintensiteit en geluidsintensiteit.

05. Stel de laatste parameters in

De laatste van de parameters is voor het donkere vignet rond de rand van het scherm. De ' in het 'en' animeren 'Functies worden geroepen om te rennen. De ' animeren 'functie zal veel later in de tutorial worden gecreëerd, maar de' in het 'functie wordt hier gemaakt. De camera en scène zijn ingesteld om het bekijken van de 3D-inhoud mogelijk te maken.

 Effectvignette.uniforms ["offset"]. Waarde = 1.0;
  effectvignette.uniforms ["duisternis"].value = 1.3;
​
in het();
animate ();
functie init () {
  Camera = Nieuwe Three.PerspectiveCamera (70, venster.innerwidth / window.innerHoogte, 1, 4000);
  camera.position.z = 2750;
  scène = nieuwe three.scene ();
  scène.fog = nieuwe three.fogexp2 (0x1c3c4a, 0,00045); 

06. Laat het licht in

Om de inhoud van de scène te zien, worden vier lichten geplaatst. De eerste is een halfrondlicht, dat wordt gebruikt om de basis sfeer van de scène te krijgen. Volgende is het middelste licht dat een lichtblauw licht in het midden van de scène toevoegt. Dit is naar de ene kant gezet om wat licht aan de hele scène te geven.

 Var Hemisperelight = NIEUWE DRIEHANDIGHEIDSHODIPHERLIGHT (0xE3FeFF, 0xE6DDC8, 0.7);
scène.Ard (halfisperelement);
hemisperelight.position.y = 300;
varcentrale = nieuwe drie.spotlight (0xb7f9ff, ​​1);
scène.ADD (CenterLight);
CenterLight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
centerlight.decay = 5; 

07. ANIMATE LIGHTEN

De volgende twee lichten die moeten worden toegevoegd.​ Pointlight 'en' Pointlight2 'Zijn gekleurde lichten die in tegengestelde richtingen rond de scène worden omcirkels, zodat het licht constant verandert in het zicht. De eerste is een roze licht en de tweede is een oranje licht. Het pad en de indeling voor de reflectiebeelden zijn ingesteld in de laatste twee regels.

 Puntslicht = Nieuwe Three.PointLight (0xe07BFF, 1.5);
PuntLight.position.z = 200;
scène.add (pointlight);
PuntLight2 = Nieuwe Three.PointLight (0xFF4E00, 1.2);
pointlight2.position.z = 200;
scène.add (pointlight2);
var pad = "img /";
Var-indeling = '.jpg'; 

08. Glanzende oppervlakken

Het vloeibare oppervlak heeft een reflecterend, glanzend oppervlak en dit wordt gedaan door een reflectie-kubus te maken. Dit is een kubus met een skybox van 360 graden die erin wordt geplaatst, die wordt weerspiegeld op het oppervlak van de vloeistof. De ' URL's 'Array bevat de afbeeldingen die moeten worden geladen, dan is het materiaal opgezet.

09. Sommige groepen opzetten

De Mover Group zal enkele deeltjes bevatten die later worden toegevoegd, terwijl de vloergroep het oppervlak van de vloeistof zal bevatten. Er wordt een nieuw 3D-object gemaakt dat dat oppervlak vasthoudt. Er zullen twee vloeibare oppervlakken zijn; Men zal het reflecterende materiaal hebben en de tweede zal de Wireframe hebben ' vloer ', zoals hier gedefinieerd.

 Movergroup = Nieuwe Three.Object3D ();
scène.ADD (Movergroup);
var vloergroup = nieuwe three.object3d ();
Var Floormaterial = NIEUWE DRIE SHIPPONGMATERIAL ({
Kleur: 0xeeeeee, Side: Three.Doubleside, Blending: Three.AdditiveBlending, Wireframe: TRUE
​
vloergeometrie = nieuwe drie.planegewatRy (Floor_width + 1200, Floor_depth, Floor_res, Floor_RES); 

10. Maak de oppervlakken

De twee vloeistofoppervlakken worden hier gemaakt als ' floveresh 'en' Floormesh2 ​Ze zijn gepositioneerd en geplaatst in de ' vloergroep 'Dan geroteerd naar een goede kijkhoek voor de camera. Dit is niet direct vlak, maar enigszins hoekig als het er beter uitziet.

 Var Floormesh = NIEUWE DRIEF MESH (Vloergeometrie, Cubemateriaal);
Var Floormesh2 = NIEUWE DRIE SCHUS (Vloergeometrie, Floormaterial);
Flomormesh2.position.y = 20;
flomormesh2.position.z = 5;
Floorgroup.add (Floormesh);
Floorgroup.add (Floormesh2);
scène.ADD (Floorgroup);
flomormesh.rotation.x = math.pi / 1,65;
flommesh2.rotation.x = math.pi / 1.65;
vloergroep.positie.y = 180; 

11. Voeg drijvende deeltjes toe

Het gedeelte van de code hier creëert een leeg geometrie-object en plaatst vervolgens naar het 2.000 hoekpunten die fungeren als de deeltjes. Deze worden gedistribueerd op willekeurige posities op de X-, Y- en Z-as. Deze zullen net boven het oppervlak van de vloeibare vloer drijven.

 PEGOMETRY = NIEUWE DRIE DRIE.GEOMMETRY ();
Sprite = Textureloader.load ("img / sprite.png");
voor (i = 0; i & lt; 2000; i ++) {
  Var-vertex = nieuwe drie.vector3 ();
  vertex.x = 4000 * Math.Random () - 2000;
  vertex.y = -200 + MATH.RANDOM () * 700;
  vertex.z = 5000 * Math.Random () - 2000;
  peenometrie.vertics.push (vertex);
} 

12. Maak de look

Het hier gedefinieerde materiaal zal instellen hoe de deeltjes eruit zien. Een beeld werd geladen in de vorige stap en dat wordt gebruikt als de afbeelding op elk deeltje, zodra het materiaal is gemaakt. Dit wordt vervolgens op elk punt van de geometrie toegepast voor alle deeltjes. Deze worden vervolgens in de scène toegevoegd.

13. Voeg het logo toe

Een logo wordt in het midden van het scherm geplaatst en dit wordt toegevoegd aan een vlak vlak dat de camera zal onder ogen zien. Het logo is enigszins transparant gemaakt en gegeven een additieve mengsel zodat het zichtbaarder is wanneer lichtere objecten erachter gaan. Dit is gepositioneerd en in de scène geplaatst.

 Sprite = Textureloader.load ("img / logo.png");
geometrie = nieuwe drie.PlaneBuffergeometrie (500, 640, 1);
Materiaal = nieuwe drie.lambertmateriaal ({
  Transparant: True, Dekking: 0.8, Blending: Three.AdditiveBlending, Kaart: Sprite, Side: Three.Doubleside
​
Var-vlak = nieuwe driedelen (geometrie, materiaal);
vliegtuig.position.set (0, 70, 1800);
scène.ADD (vlak); 

14. Voeg de renderinstellingen toe

De renderer is opgezet om gladde, anti-aliased randen te hebben en nu is de achtergrondkleur ingesteld. Dit wordt toegevoegd aan het lichaam van het document, zodat de scène op de HTML-pagina staat. De nabehandelingseffecten worden opgezet door verschillende render- en schaduwpassen initialiseert.

15. Maak de pas

Zodra de film en Glitch Pass worden toegevoegd, wordt een effectcomponist gemaakt die alle passes samen samenstellen. Deze worden één voor één toegevoegd aan de componist en zal uiteindelijk worden weergegeven op het scherm voor het weergeven van het publiek.

16. Sluit de functie 'init'

De laatste paar instellingen worden toegevoegd voor de initialisatie van de scène. De parameters voor postverwerking zijn ingesteld, de instelling van de golven wordt genoemd en er wordt een gebeurtenisluisteraar toegevoegd voor wanneer de browser is verkleind. Hierdoor kan het display worden bijgewerkt om aan de nieuwe dimensies te passen.

17. Zet de golven op

De golven worden nu gemaakt voor het oppervlak van de vloeistof. Dit wordt gedaan door elke vertex van de vloergeometrie op de X- en Z-as te bewegen en naar boven te bewegen op de Y-as. In dit stadium is het ' voor 'Loops worden gemaakt voor de X- en Z-as.

 Functie Setgaves () {
  Stepcount ++;
  Movergroup.position.z = -move_spd;
  var I, IPOS;
  Var Offset = Stepcount * Move_SPD / Floor_Depth * Floor_RES;
  voor (i = 0; i & lt; floor_res + 1; i ++) {
  voor (var j = 0; j & lt; floor_res + 1; j ++) {
  iPOS = I + OFFSET; 

18. Maak golven

Niet alle hoekpunten zullen op dezelfde manier naar boven worden geschaald. Die het verst van de camera zullen groot zijn, dan zullen de zijkanten iets minder zijn en die het dichtst bij de camera zullen het minst worden geschaald. Dit maakt de achterkant en zijkanten iets interessanter om naar te kijken.

 If ((I & GT; 30) || (J & LT; 12) || (J & GT; 48)) {
  Vloergeometrie.vertices [I * (Floor_RES + 1) + J] .z = Snoise.noise (IPOS / Floor_res * Noisescale, J / Floor_res * Noisescale, Noordeseed) * Floor_ht;
  } anders als (I & GT; 25 & amp; & amp; i & lt; 30) {
  Vloergeometrie.vertices [I * (Floor_res + 1) + J] .z = Snoise.noise (IPOS / Floor_res * Noisescale, J / Floor_res * Noisescale, Noiseseed) * (Floor_HT / 1.2);
  } anders {
  Vloergeometrie.vertices [I * (Floor_res + 1) + J] .z = Snoise.noise (IPOS / Floor_res * Noisescale, J / Floor_res * Noisescale, Noordeseed) * (Floor_HT / 2);
  ​
  ​
  ​
  Vloergeometrie.verticsNeedupdate = waar;
} 

19. Geveeld en animeer

Wanneer het venster is verkleind, wordt de functie hier gebeld van de luisteraar die in stap 16 is ingesteld. De camera, renderer en componist zijn allemaal gereset naar hier om overeen te komen met de nieuwe dimensies van het venster van de browser. De animatiefunctie stelt zichzelf gewoon in op 60 fps, belt de renderfunctie om het display bij te werken.

 Functie OnWINDOWRESIZE () {
  camera.aspect = window.innerwedding / window.innerHeight;
  camera.updateProjectionMatrix ();
  renderer.setsize (venster.innerwidth, window.innerHeight);
  Componist.setsize (venster.innerwidth, window.innerheid);
​
functie animate () {
  aanvrager (animate);
  render ();
} 

20. Stel elk frame van actie in

De renderfunctie wordt elk frame genoemd. De puntslichten zijn ingesteld op een baan in de scène en de camera is gepositioneerd volgens de muisbeweging, met een beetje versoepeling, zodat het geleidelijk op zijn plaats gaat. De camera is ingesteld om altijd naar het midden van de scène te kijken.

functie render () {
  var timer = -0.0002 * datum.now ();
  PuntLight.position.x = 2400 * MATH.COS (TIMER);
  PuntLight.position.z = 2400 * MATH.SIN (TIMER);
  PuntLight2.position.x = 1800 * MATH.COS (-timer * 1.5);
  Puntlight2.position.z = 1800 * MATH.SIN (-timer * 1.5);
  camera.position.x + = (Mousex - Camera.position.x) * .05;
  camera.position.y + = (-muisy - camera.positie.y) * .05;
camera.Lookat (scène.positie); 

21. Render de scène

In de laatste stap worden de deeltjes naar voren gebracht op hun individuele vertex, en als ze naar de camera komen, worden ze weer in de verte geplaatst. Dit is bijgewerkt en de ' Setgorts ' functie wordt geroepen om de golven naar voren te laten rollen. De scène wordt weergegeven door de effectencomponist.

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​ Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• Ga aan de slag met WebGL met behulp van Three.js
• 11 stappen om betere logo's te maken
• 18 Web Design YouTube-kanalen die u moet bekijken