So erstellen Sie flüssige Effekte mit Webgl

Viele Webdesigner suchen nach Wegen, um ihren Standortdesigns einen großen Einfluss aufzunehmen, so dass sie die Aufmerksamkeit ihrer Benutzer auf sich ziehen werden. Die Methoden haben sich im Laufe der Jahre entwickelt, von der Verwendung einer Header-Grafik, um eine Diashow unter dem Menü "Landing Page" zu platzieren, um eine vollständige Browserbreite zu werden - und nun folgen die große Mehrheit der Websites das gleiche Format (erstellen Sie Ihre eigenen einfach mit a Webseitenersteller ).

Heute versuchen die Designs, die "Standort des Tages" auf verschiedenen Web-Awards-Standorten gewinnen, in der Regel versuchen, etwas zu tun, das ein wenig einzigartiger ist, und WebGL ist toll dafür. Das Hinzufügen eines interaktiven Elements kann die Aufmerksamkeit der Benutzer wirklich aufmerksam machen und zeigen, dass dies nicht derselbe der anderen Websites sind, die sie gerade besucht haben. Es macht eine Seite viel interessanter als nur eine riesige Diashow und einige Parallaxe Scrollen . Wenn Sie einen Standort mit komplexen Anforderungen haben, stellen Sie sicher, dass Sie sicher sind Web-Hosting Der Service ist auf dem Punkt.

• 14 Große Landing-Page-Designs

Um in diesem Tutorial einen Spritzwirkung zu erzielen, wird eine flüssige, reflektierende Oberfläche hinzugefügt, und dies wird in Richtung der Kamera mit Walzwellen animiert, die sich vorwärts bewegen. Es gibt auch Partikel, die sich vorwärts bewegen, um den Blick und das Gefühl zu fühlen. In der Mitte ist das Logo der Site, und die gesamte Szene reagiert auf die Mausbewegung des Benutzers, damit der Inhalt verschiebt und das 3D wirklich hervorsteht.

Das Logo Design wird als transparentes PNG gerendert (halten Sie es in Sicherheit in Cloud-Speicherung. ), so kann dies leicht an Ihr eigenes Design angepasst werden. Die Lichter werden auch animieren, so dass die Farben umkippen und verschiedene Wellen in der Szene hervorheben.

Laden Sie die Dateien herunter für dieses Tutorial.

01. Fügen Sie anfängliche Variablen hinzu

Öffnen Sie den Startordner aus den Projektdateien und ziehen Sie diese in Ihren Code-Editor. Offen ' index.html. "Und Sie werden sehen, dass die JavaScript-Bibliotheken bereits für Sie verbunden sind. In den leeren Skript-Tags wird der Code fortgesetzt. Hier wird WebGL erkannt, um sicherzustellen, dass das Projekt ausgeführt werden kann. Anschließend wird eine ganze Reihe von Variablen hinzugefügt, die in der Szene verwendet werden.

 Wenn (! Detektor.webgl) detektor.addgetwebglmessage ();
var screen_width = fenster.innerwidth;
var screen_hight = fenster.innerhöhe;
VAR Renderer, Kamera, Szene, MoveGroup, Etage, Floormaterial, Pointlight, Pointlight2, Pgeometrie;
var boden_res = 60;
VAR FOOD_HT = 650;
vaR stepcount = 0;
var noisescale = 9.5;
VAR NOISEEED = MATH.RANDOM () * 100; 

02. Erstellen Sie mehr Variablen

Der nächste Variablenblock verarbeiten, wie groß der Wasserboden sein sollte und die Geschwindigkeit, die sie mit den anfänglichen Mauspositionen bewegt. Die Mitte des Bildschirms wird ausgearbeitet und die verbesserte Rauschbibliothek wird verwendet, um die Oberfläche des Wassers zu erstellen.

 var boden_width = 3600;
var boden_depth = 4800;
var move_spd = 1,9;
var mousex = 0;
var mousey = 0;
var wechselnhalfx = fenster.innerwidth / 2;
var wechselnhalfy = fenster.innerhöhe / 2;
var snoise = neue verbessertecknoise ();
var textureloader = neuer drei.textureloader (); 

03. Berechnen Sie die Maus

Für die Nachbearbeitungseffekte der Szene werden einige endgültige Variablen hinzugefügt. Ein Ereignislistener wird hinzugefügt, der die Mausbewegung prüft. Die Szene wird sich in den Anzeigeanschluss bewegen, um auf die Mausbewegung zu reagieren. Die hier hinzugefügte Funktion erarbeitet die Bewegungsbetrag, die zulässig ist.

04. Ändern Sie die Einstellungen der Nachverarbeitungseinstellungen

Das ' Parameter Funktion ist, wo alle Einstellungen für die Nachbearbeitungseffekte gespeichert werden. Wenn Sie etwas ändern müssen, ist dies der richtige Ort, um es zu tun. Die Neigungsverschiebungsunschärfe ist in den ersten vier Zeilen bedeckt, dann passiert der Film in den verbleibenden Linien. Dies ist hauptsächlich für die Bildschirmintensität und die Geräuschintensität.

05. Setzen Sie die Endparameter ein

Der letzte der Parameter ist für die dunkle Vignette um den Rand des Bildschirms. Das ' drin ' und ' animieren 'Funktionen werden aufgerufen, um zu laufen. Das ' animieren 'Funktion wird später im Tutorial erstellt, aber das' drin Die Funktion wird hier erstellt. Die Kamera und die Szene sind eingerichtet, um den Betrachtung des 3D-Inhalts zu ermöglichen.

 EffektVignette.Uniforms ["Offset"]. Wert = 1,0;
  EffectVignette.Uniforms ["Darkness"].Value = 1.3;
}
drin();
animieren();
Funktion init () {
  kamera = neue drei.perspektivecamera (70, fenster.innerwidth / fenster.innerhöhe, 1, 4000);
  Kamera.Position.Z = 2750;
  Szene = neue drei.szene ();
  Szene.fog = new drei.fogExp2 (0x1c3c4a, 0,00045); 

06. Lass das Licht herein

Um den Inhalt der Szene zu sehen, werden vier Leuchten platziert. Das erste ist ein Hemisphäre-Licht, das gerade verwendet wird, um das grundlegende Ambiente der Szene zu erhalten. Als nächstes ist das Mittellicht, das in der Mitte der Szene ein hellblaues Licht hinzufügt. Dies ist auf der einen Seite abgelegt, um der gesamten Szene etwas Licht zu geben.

 var hemispherelight = new three.hemispherelight (0xe3feff, 0xe6ddc8, 0.7);
Szene.Add (Hemisphierhight);
hemispherelight.position.y = 300;
VAR Centerlight = NEUE TRITE.SPOTLIGHT (0xB7F9FF, 1);
Szene.Add (Mittellicht);
Centerlight.Position.Set (2500, 300, 2000);
Centerlight.Penumbra = 1;
Mittellicht.Decay = 5; 

07. Animate Lights.

Die nächsten zwei Lichter werden hinzugefügt. ' Spitzligel ' und ' Pointlight2. 'sind farbige Lichter, die sich in entgegengesetzten Richtungen um die Szene umkreisen, so dass das Licht ständig in der Ansicht ändert. Das erste ist ein rosa Licht und der zweite ist ein orangefarbenes Licht. Der Pfad und das Format für die Reflexionsbilder werden in den letzten beiden Zeilen eingestellt.

 Pointlight = Neue drei.Pointlight (0xE07BFF, 1.5);
Pointlight.Position.Z = 200;
Szene.de (Pointlight);
Pointlight2 = NEUE drei.Pointlight (0xFF4E00, 1.2);
Pointlight2.Position.Z = 200;
Szene.Add (Pointlight2);
VAR-Pfad = "IMG /";
VAR-Format = '.jpg'; 

08. Glänzende Oberflächen.

Die flüssige Oberfläche hat eine reflektierende, glänzende Oberfläche und dies ergibt sich durch Erstellen eines Reflexionswürfels. Dies ist ein Würfel mit einem 360-Grad-Skybox, der darin angeordnet ist, der auf der Oberfläche der Flüssigkeit reflektiert wird. Das ' Urls 'Array enthält die zu ladenden Bilder, dann wird das Material eingerichtet.

09. Richten Sie einige Gruppen ein

Die Mover-Gruppe enthält einige Partikel, die später hinzugefügt werden, während die Bodengruppe die Oberfläche der Flüssigkeit enthält. Ein neues 3D-Objekt wird erstellt, der diese Oberfläche enthält. Es gibt zwei flüssige Oberflächen; Man hat das reflektierende Material und der zweite wird den Wireframe haben ' floormaterial. ', wie hier definiert.

 moveGroup = neue drei.objekt3d ();
Szene.Add (MOVERGROUP);
VAR FOODGROUP = NEUE DREI.OBJECT3D ();
VAR FLOORMATERIAL = NEUE DREI.MESHGHONGMATERIAL ({
Farbe: 0xeeeeeee, Seite: drei.Doublyside, Mischung: drei.additivBlending, Wireframe: True
});
odogegeometry = new three.arbeitergeometrie (floor_width + 1200, floor_depth, floor_res, floor_res); 

10. Machen Sie die Oberflächen

Die beiden flüssigen Oberflächen werden hier als 'erstellt Floormesh ' und ' Floormesh2. '. Sie sind positioniert und in die " Grundriss 'Dann in einen guten Betrachtungswinkel vor der Kamera gedreht. Das ist nicht direkt flach, aber leicht abgewinkelt, da es so besser aussieht.

 VAR FLOORMESH = NEUE DREI.MESH (Bodengeometrie, KUBEMAGE);
VAR FLOORMESH2 = NEUE DREI.MESH (Bodengeometrie, Floormaterialial);
Floormesh2.Position.Y = 20;
Floormesh2.Position.Z = 5;
floorgroup.add (floormesh);
FloorGroup.add (Floormesh2);
Szene.de (Grundrasse);
Floormesh.Rotation.x = math.pi / 1.65;
Floormesh2.Rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; 

11. Fügen Sie Floating-Partikel hinzu

Der Codeabschnitt hier erstellt ein leeres Geometrieobjekt und setzt dann 2.000 Scheitelpunkte ein, die als Partikel dienen. Diese sind an zufälligen Positionen auf der X-, Y- und Z-Achse verteilt. Diese werden direkt über der Oberfläche des flüssigen Bodenes schweben.

 pggeometrie = neue drei.Geometrie ();
sprite = textureloader.load ("iMG / sprite.png");
für (i = 0; I & lt; 2000; i ++) {
  VAR-Vertex = neue drei.vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pggeometry.vertices.push (Scheitelpunkt);
} 

12. Erstellen Sie den Look

Das hier definierte Material stellt fest, wie die Partikel aussehen. Ein Bild wurde in den vorherigen Schritt geladen, und das wird als Bild auf jedem Teilchen verwendet, sobald das Material erzeugt wird. Dies wird dann auf jeden Punkt der Geometrie für alle Partikel angewendet. Diese werden dann in die Szene hinzugefügt.

13. Fügen Sie das Logo hinzu

Ein Logo wird in die Mitte des Bildschirms gelegt, und dies wird auf eine flache Ebene hinzugefügt, die der Kamera gegenüberliegt. Das Logo wird leicht transparent gemacht und mit einer additiven Mischung gegeben, so dass es sichtbarer ist, wenn leichtere Objekte hinter sich lassen. Dies ist positioniert und in die Szene gelegt.

 sprite = textureloader.load ("iMG / logo.png");
Geometrie = neue drei.Bleibfergegeometrie (500, 640, 1);
Material = neues drei.malshlambertmaterial ({
  transparent: true, opacity: 0.8, mischen: drei.additivblende, karte: sprite, seite: drei.doubleside
});
VAR-Flugzeug = neue drei.mesh (Geometrie, Material);
Ebene.Position.Set (0, 70, 1800);
Szene.Add (Flugzeug); 

14. Fügen Sie die Render-Einstellungen hinzu

Der Renderer ist eingerichtet, um glatte, anti-aliasierte Kanten zu haben, und jetzt ist die Hintergrundfarbe eingestellt. Dies wird in den Körper des Dokuments hinzugefügt, so dass sich die Szene auf der HTML-Seite befindet. Die Nachbearbeitungseffekte werden eingerichtet, indem verschiedene Render- und Shader-Pässe initialisiert wurden.

15. Machen Sie den Pass

Sobald der Film und der Glitchpass hinzugefügt werden, wird ein Effekt-Komponist erstellt, der alle Durchgänge zusammensetzt. Diese werden von einem an den Komponisten hinzugefügt, und es wird schließlich zum Bildschirm für die Publikumanzeige ausgerüstet.

16. Schließen Sie die "Init" -Funktion

Die letzten Einstellungen werden für die Initialisierung der Szene hinzugefügt. Die Parameter für die Nachbearbeitung sind eingestellt, die Einstellung der Wellen wird aufgerufen, und ein Ereignislistener wird hinzugefügt, wenn der Browser erneut geändert wird. Dadurch kann das Display aktualisiert werden, um die neuen Dimensionen anzupassen.

17. Richten Sie die Wellen ein

Die Wellen entstehen jetzt für die Oberfläche der Flüssigkeit. Dies geschieht, indem Sie sich durch jeden Scheitelpunkt der Bodengeometrie auf der X- und Z-Achse bewegen und auf der Y-Achse nach oben bewegen. Zu diesem Zeitpunkt der ' zum 'Loops werden für die X- und Z-Achse erstellt.

 Funktion setwaves () {
  Stepcount ++;
  moveGroup.Position.Z = -Move_spd;
  var i, ipos;
  var offset = stepcount * move_spd / floor_depth * boden_res;
  für (i = 0; i & lt; floor_res + 1; i ++) {
  für (var j = 0; j & lt; boden_res + 1; j ++) {
  IPOS = I + Offset; 

18. Wellen machen

Nicht alle Scheitelpunkte werden auf dieselbe Weise nach oben skaliert. Diejenigen, die von der Kamera entfernt sind, sind groß, dann werden die Seiten etwas weniger sein, und diese am nächsten, die die Kamera am nächsten ist, wird am wenigsten skaliert. Dies macht den Rücken und die Rücken und die Seiten etwas interessanter anzusehen.

 IF ((I & GT; 30) || (J & tig; 12) || (J & Gt; 48)) {
  odogegeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / bood_res * noisescale, noisesed) * floor_ht;
  }, wenn (i & gt; 25 & amp; & amp; I & lt; 30) {
  odogegeometry.vertizes [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / boden_res * noisescale, noisesed) * (floor_ht / 1.2);
  } else {
  odogegeometry.vertices [i * (floor_res + 1) + j] .z = snoise.Noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noisesed) * (floor_ht / 2);
  }
  }
  }
  foodgeometry.verticesneedupdate = true;
} 

19. Größenänderung und Animieren

Wenn das Fenster gegründet ist, wird die Funktion hier aus dem in Schritt 16 eingerichteten Hörer aufgerufen. Die Kamera, Renderer und Komponist werden hier eingerichtet, um die neuen Abmessungen des Fensters des Browsers anzupassen. Die Animate-Funktion setzt sich einfach bei 60fps und ruft die Render-Funktion auf, um das Display zu aktualisieren.

 Funktion onWindowResize () {
  camera.aspect = fenster.innerwidth / fenster.innerhöhe;
  camera.updateProjektionMatrix ();
  Renderer.Setsize (fenster.innerwidth, fenster.innerhöhe);
  Komponist.Setsize (fenster.innerwidth, fenster.innerhöhe);
}
Funktion animate () {
  Anfrageanimationsframe (animieren);
  machen();
} 

20. Setzen Sie jeden Actionrahmen ein

Die Render-Funktion wird als jeder Rahmen bezeichnet. Die Punkteuchten werden in der Szene umlaufende Umlaufbahn eingestellt, und die Kamera ist entsprechend der Mausbewegung positioniert, wobei es sich um ein wenig Lockerung so bewegt, dass er sich allmählich einrastet. Die Kamera ist eingestellt, um sich immer in die Mitte der Szene anzusehen.

Funktion Render () {
  VAR TIMER = -0.0002 * Date.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.Lobat (Szene.Position); 

21. Rendern Sie die Szene

Im letzten Schritt werden die Partikel auf ihrem individuellen Scheitelpunkt vorwärts bewegt, und wenn sie zur Kamera gelangen, werden sie wieder in die Ferne gelegt. Dies wird aktualisiert und das ' setwaves ' Die Funktion wird aufgerufen, um die Wellen vorwärts zu bringen. Die Szene wird vom Effektkomponistern gerendert.

Dieser Artikel wurde ursprünglich im Creative Web Design Magazine veröffentlicht Webdesigner . Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

• Beginnen Sie mit dem Webgl mit drei.js
• 11 Schritte, um bessere Logos zu erstellen
• 18 Webdesign YouTube-Kanäle Sie müssen ansehen