Πώς να δημιουργήσετε υγρά αποτελέσματα με το WebGL

Πολλοί σχεδιαστές ιστοσελίδων αναζητούν τρόπους για να προσθέσουν μια μεγάλη επίδραση στα σχέδια ιστοσελίδων τους, έτσι ώστε να αρπάξουν την προσοχή των χρηστών τους. Μέθοδοι έχουν εξελιχθεί κατά τη διάρκεια των ετών, από τη χρήση ενός γραφικού κεφαλίδας, για την τοποθέτηση μιας παρουσίασης κάτω από το μενού της σελίδας προσγείωσης, για να γίνει πλήρες πλάτος του προγράμματος περιήγησης - και τώρα η συντριπτική πλειοψηφία των ιστότοπων ακολουθεί αυτή την ίδια μορφή (δημιουργήστε το δικό σας οικοδόμος ιστότοπου ).

Σήμερα, τα σχέδια που κερδίζουν τον ιστότοπο της ημέρας σε διαφορετικές τοποθεσίες βραβείων στο διαδίκτυο προσπαθούν γενικά και κάνουν κάτι που είναι λίγο πιο μοναδικό, και το WebGL είναι εξαιρετικό για αυτό. Η προσθήκη ενός διαδραστικού στοιχείου μπορεί πραγματικά να τραβήξει την προσοχή των χρηστών και να δείξει ότι αυτό δεν είναι το ίδιο με τις άλλες τοποθεσίες που έχουν μόλις επισκεφθεί. Κάνει έναν ιστότοπο πολύ πιο ενδιαφέρον από το να έχει μια γιγαντιαία παρουσίαση και μερικά Παράλληλα κύλιση . Εάν έχετε έναν ιστότοπο με σύνθετες ανάγκες, βεβαιωθείτε ότι έχετε web hosting Η υπηρεσία είναι στο σημείο.

• 14 μεγάλα σχέδια προσγείωσης σελίδων

Για να κάνετε μια επίδραση splash σε αυτό το σεμινάριο, θα προστεθεί μια υγρή, ανακλαστική επιφάνεια και αυτό θα κινηθεί προς την κάμερα με κύματα που κινούνται προς τα εμπρός. Θα υπάρχουν επίσης σωματίδια που προχωρούν για να ολοκληρώσουν την εμφάνιση και την αίσθηση. Στο κέντρο θα είναι το λογότυπο του ιστότοπου και ολόκληρη η σκηνή θα αντιδράσει στην κίνηση του ποντικιού του χρήστη έτσι ώστε το περιεχόμενο να μετατοπίσει και να κάνει το 3D να ξεχωρίζει πραγματικά.

ο σχεδιασμός λογότυπου αποδίδεται ως διαφανές PNG (κρατήστε το ασφαλές αποθήκευση σύννεφων ), οπότε αυτό μπορεί εύκολα να προσαρμοστεί στο δικό σας σχέδιο. Τα φώτα θα ζωντανεύουν επίσης έτσι ώστε τα χρώματα να περιστρέφονται γύρω και να επισημάνουν διαφορετικά κύματα μέσα στη σκηνή.

Κατεβάστε τα αρχεία για αυτό το σεμινάριο.

01. Προσθέστε τις αρχικές μεταβλητές

Ανοίξτε το φάκελο Έναρξη από τα αρχεία του έργου και σύρετέ σύρετε αυτό στον επεξεργαστή κωδικών. Ανοιξε ' index.html «Και θα δείτε ότι οι βιβλιοθήκες JavaScript έχουν ήδη συνδεθεί για εσάς. Μέσα στις κενές ετικέτες δέσμης ενεργειών είναι όπου ο κώδικας θα πάει. Εδώ ανιχνεύεται WebGL για να βεβαιωθείτε ότι το έργο μπορεί να εκτελεστεί, στη συνέχεια προστίθενται ένα ολόκληρο φάσμα μεταβλητών που θα χρησιμοποιηθούν στη σκηνή.

 εάν (! Ανιχνευτής.Webgl) ανιχνευτής.AddgetWebGleSage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheheight?
var renderer, κάμερα, σκηνή, movergroup, δάπεδα, floberialial, poidbile, proidlight2, pgeometry?
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var noisescale = 9,5;
var noiseseed = math.random () * 100; 

02. Δημιουργήστε περισσότερες μεταβλητές

Το επόμενο μπλοκ μεταβλητών χειρίζεται πόσο μεγάλο θα πρέπει να είναι το δάπεδο νερού και η ταχύτητα που θα μετακινηθεί μαζί με τις αρχικές θέσεις του ποντικιού. Το κέντρο της οθόνης επεξεργάζεται και η βελτιωμένη βιβλιοθήκη θορύβου χρησιμοποιείται για τη δημιουργία της επιφάνειας του νερού.

 var floor_width = 3600;
var floor_depth = 4800;
var move_spd = 1.9;
var mousex = 0;
var mousey = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = νέα improvedNoise ();
var textureLoader = νέος τριών.TextureLoader (); 

03. Υπολογίστε το ποντίκι

Ορισμένες τελικές μεταβλητές προστίθενται για τις επιδράσεις μετά την επεξεργασία της σκηνής. Προστίθεται ένας ακροατής συμβάντος που ελέγχει την κίνηση του ποντικιού. Η σκηνή πρόκειται να μετακινηθεί στη θύρα οθόνης για να αντιδράσει στην κίνηση του ποντικιού. Η λειτουργία που προστίθεται εδώ λειτουργεί το ποσό της κίνησης που επιτρέπεται.

04. Αλλαγή ρυθμίσεων επεξεργασίας μετά την επεξεργασία

Ο ' παραμέτρους 'Η λειτουργία είναι όπου θα αποθηκευτούν όλες οι ρυθμίσεις για τις επιπτώσεις μετά την επεξεργασία. Εάν πρέπει να αλλάξετε οτιδήποτε, αυτό είναι το μέρος για να το κάνετε. Η θολούρα μετατόπισης κλίσης καλύπτεται στις πρώτες τέσσερις γραμμές, τότε η μεμβράνη περνά στις υπόλοιπες γραμμές. Αυτό είναι κυρίως για την ένταση της οθόνης και την ένταση θορύβου.

05. Ορίστε τις τελικές παραμέτρους

Η τελευταία από τις παραμέτρους είναι για το σκοτεινό βινιέτα γύρω από την άκρη της οθόνης. Ο ' μέσα σε αυτό ' και ' έμψυχος «Οι λειτουργίες καλούνται να τρέξουν. Ο ' έμψυχος Η λειτουργία θα δημιουργηθεί πολύ αργότερα στο σεμινάριο, αλλά το ' μέσα σε αυτό 'Η λειτουργία δημιουργείται εδώ. Η κάμερα και η σκηνή ρυθμίζονται για να επιτρέπουν την προβολή του περιεχομένου 3D.

 Extrvignette.uniforms ["offset"]. Αξία = 1.0;
  effectvignette.uniforms ["σκοτάδι"].Value = 1.3;
}
μέσα σε αυτό();
έμψυχος();
Λειτουργία Init () {
  Camera = new three.perspectivevera (70, window.innerwidth / window.innerhehight, 1, 4000);
  camera.position.z = 2750;
  σκηνή = νέα τρία.Scene ();
  scene.fog = νέα τρία.Fogexp2 (0x1c3c4a, 0.00045); 

06. Αφήστε το φως στο

Για να δείτε το περιεχόμενο της σκηνής, θα τοποθετηθούν τέσσερα φώτα. Το πρώτο είναι ένα φως ημισφαίρων, το οποίο χρησιμοποιείται μόνο για να πάρει τη βασική ατμόσφαιρα της σκηνής. Το επόμενο είναι το κεντρικό φως που προσθέτει ένα γαλάζιο φως στη μέση της σκηνής. Αυτό ξεκίνησε στη μία πλευρά για να δώσει λίγο φως σε ολόκληρη τη σκηνή.

 var hemispherelight = νέα τρία.hemispherelight (0xe3feff, 0xe6dc8, 0,7).
scene.add (ημισφαιρικό);
hemispherelight.position.y = 300;
VAR Centerlight = Νέο τριών.Spotlight (0xB7F9FF, 1).
scene.add (Centerlight);
Centerlight.Position.Set (2500, 300, 2000).
creathlight.penumbra = 1;
creathlight.decay = 5; 

07. Ζωντανά φώτα

Τα επόμενα δύο φώτα που πρέπει να προστεθούν. ' Προκλητήριο ' και ' Poidlight2 'Είναι χρωματιστά φώτα που θα κυκλώσουν σε αντίθετες κατευθύνσεις γύρω από τη σκηνή, έτσι ώστε το φως να αλλάξει συνεχώς κατά την άποψη. Το πρώτο είναι ένα ροζ φως και το δεύτερο είναι ένα πορτοκαλί φως. Η διαδρομή και η μορφή για τις εικόνες προβληματισμού τοποθετούνται στις δύο τελευταίες γραμμές.

 PODELLIGHT = Νέο τρία.Boadlight (0xe07bff, 1.5);
poidlight.position.z = 200;
scene.add (poidbile);
Poidlight2 = Νέο τρία.Boadlight (0xFF4E00, 1.2);
poidlight2.position.z = 200;
scene.add (poidlight2);
var path = "img /";
var μορφή = '.jpg'. 

08. Λαμπερές επιφάνειες

Η υγρή επιφάνεια θα έχει αντανακλαστική, λαμπερή επιφάνεια και αυτό γίνεται με τη δημιουργία ενός κύβου αντανάκλασης. Αυτός είναι ένας κύβος με ένα skybox 360 μοιρών που τοποθετείται μέσα του, το οποίο θα αντικατοπτρίζεται στην επιφάνεια του υγρού. Ο ' urls «Ο πίνακας περιέχει τις εικόνες που πρόκειται να φορτωθούν, τότε το υλικό έχει ρυθμιστεί.

09. Ρυθμίστε μερικές ομάδες

Η ομάδα Mover θα περιέχει μερικά σωματίδια που θα προστεθούν αργότερα, ενώ η ομάδα δαπέδου θα περιέχει την επιφάνεια του υγρού. Δημιουργείται ένα νέο αντικείμενο 3D που θα κρατήσει αυτή την επιφάνεια. Θα υπάρχουν δύο υγρές επιφάνειες. Κάποιος θα έχει το ανακλαστικό υλικό και το δεύτερο θα έχει το wireframe ' επιδεικτικός «, όπως ορίζεται εδώ.

 Movergroup = New Three.Object3D ();
scene.add (movergroup);
VAR Floorgroup = Νέα τρία.Object3D ();
var floormaterial = νέα τρία.
Χρώμα: 0xeeeeee, πλευρά: τριών.Doubleside, ανάμειξη: τριών.Addendending, wireframe:
});
Floorgeometry = Νέα τρία .Planegeometry (Floor_Width + 1200, Floor_Depth, Floor_res, Floor_res); 

10. Κάντε τις επιφάνειες

Οι δύο υγρές επιφάνειες δημιουργούνται εδώ ως " φαινομενικά ' και ' floormesh2 '. Είναι τοποθετημένα και τοποθετούνται μέσα στο ' ορμή δαπέδου 'στη συνέχεια περιστρέφεται σε μια καλή γωνία θέασης μπροστά από την κάμερα. Αυτό δεν είναι άμεσα επίπεδο, αλλά ελαφρώς γωνιακό, καθώς φαίνεται καλύτερα έτσι.

 VAR Floormesh = Νέο τριών μ.μ. (δάπεδα, απόκλιση);
VAR Floormesh2 = Νέο τρία μ.μ. (δάπεδα, φλοιό);
floromsh2.position.y = 20;
floorormesh2.position.z = 5;
Floorgroup.add (floormesh);
Floorgroup.add (Floromsh2);
scene.add (οροφή);
floormesh.Rotation.x = math.pi / 1,65;
floromsh2.rotation.x = math.pi / 1,65;
flowergroup.position.y = 180; 

11. Προσθέστε πλωτά σωματίδια

Το τμήμα του κώδικα Εδώ δημιουργεί ένα άδειο αντικείμενο γεωμετρίας και στη συνέχεια τοποθετεί σε αυτό 2.000 κορυφές που δρουν ως σωματίδια. Αυτά διανέμονται σε τυχαίες θέσεις στον άξονα Χ, Υ και Ζ. Αυτά θα επιπλέουν ακριβώς πάνω από την επιφάνεια του υγρού δαπέδου.

 pgeometry = Νέες τρεις. Στιγμή ();
sprite = textureLoader.Lload ("img / sprite.png");
για (i = 0, i & lt; 2000; i ++) {
  var vertex = νέα τρία.Vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pgeometry.erverices.pus (κορυφή);
} 

12. Δημιουργήστε το βλέμμα

Το υλικό που ορίζεται εδώ θα ρυθμίσει τον τρόπο εμφάνισης των σωματιδίων. Μια εικόνα φορτώθηκε στο προηγούμενο στάδιο και χρησιμοποιείται ως η εικόνα σε κάθε σωματίδιο, μόλις δημιουργηθεί το υλικό. Αυτό στη συνέχεια εφαρμόζεται σε κάθε σημείο της γεωμετρίας για όλα τα σωματίδια. Αυτά προστίθενται στη σκηνή.

13. Προσθέστε το λογότυπο

Ένα λογότυπο θα τοποθετηθεί στο κέντρο της οθόνης και αυτό θα προστεθεί σε ένα επίπεδο επίπεδο που θα αντιμετωπίσει την κάμερα. Το λογότυπο γίνεται ελαφρώς διαφανές και δίνεται ένα μίγμα πρόσθετου, έτσι ώστε να είναι πιο ορατό όταν τα ελαφρύτερα αντικείμενα περνούν πίσω από αυτό. Αυτό είναι τοποθετημένο και τοποθετείται στη σκηνή.

 Sprite = textureLoader.load ("img / logo.png");
Γεωμετρία = Νέες τρεις.PlaneBuffergeometry (500, 640, 1).
Υλικό = Νέο Τρίτο Meshlambertmaterial ({
  Διαφανής: Αληθινή, αδιαφάνεια: 0.8, ανάμειξη: τριών.AdDendending, χάρτης: Sprite, Side: Three.doubleside
});
VAR PLANE = Νέο τριών γραμμών (γεωμετρία, υλικό).
Αεροπλάνο.Position.Set (0, 70, 1800).
scene.add (αεροπλάνο); 

14. Προσθέστε τις ρυθμίσεις απόδοσης

Ο refererer έχει ρυθμιστεί ώστε να έχει ομαλές, αντιπαριστικές άκρες και τώρα το χρώμα του φόντου έχει οριστεί. Αυτό προστίθεται στο σώμα του εγγράφου έτσι ώστε η σκηνή να βρίσκεται στη σελίδα HTML. Οι επιδράσεις μετά τη μεταποίηση δημιουργούνται με διάφορα προγράμματα καθιστών και ο Shader Passised.

15. Κάντε το πέρασμα

Μόλις προστεθούν το πέρασμα της ταινίας και λάμψης, δημιουργείται ένας συνθέτης εφέ που συνθέτει όλα τα περάσματα μαζί. Αυτά προστίθενται ένα προς ένα προς τον συνθέτη και τελικά θα παραμείνει στην οθόνη για την οθόνη του κοινού.

16. Κλείστε τη λειτουργία "init"

Οι τελευταίες ρυθμίσεις προστίθενται για την αρχικοποίηση της σκηνής. Οι παράμετροι για την επεξεργασία μετά την επεξεργασία ρυθμίζονται, η ρύθμιση των κυμάτων ονομάζεται και προστίθεται ένας ακροατής συμβάντος για κάθε φορά που το πρόγραμμα περιήγησης έχει αλλάξει. Αυτό επιτρέπει την ενημέρωση της οθόνης ώστε να ταιριάζει στις νέες διαστάσεις.

17. Ρυθμίστε τα κύματα

Τα κύματα δημιουργούνται τώρα για την επιφάνεια του υγρού. Αυτό γίνεται μετακινώντας από κάθε κορυφή της γεωμετρίας του δαπέδου στον άξονα Χ και Ζ και μετακινούνται προς τα πάνω στον άξονα Υ. Σε αυτό το στάδιο το ' Για Οι βρόχοι δημιουργούνται για τον άξονα Χ και Ζ.

 Λειτουργία Setwaves () {
  stepcount ++;
  movergroup.position.z = -Move_spd;
  var i, ipos;
  var offset = stepcount * move_spd / floor_depth * floor_res;
  για (i = 0, i & lt; floor_res + 1; i ++) {
  για (var j = 0, j & lt; floor_res + 1; j ++) {
  ipos = i + offset · 

18. Κάνετε τα κύματα

Όχι όλες οι κορυφές θα κλιμακωθούν προς τα πάνω με τον ίδιο τρόπο. Εκείνοι που βρίσκονται πιο μακριά από την κάμερα θα είναι μεγάλες, τότε οι πλευρές θα είναι ελαφρώς μικρότερες και εκείνες που βρίσκονται κοντά στην κάμερα θα κλιμακωθούν το λιγότερο. Αυτό κάνει την πλάτη και τις πλευρές ελαφρώς πιο ενδιαφέρουσα να εξετάσουμε.

 Εάν ((i & gt, 30) || (J & LT, 12) || (J & GT, 48)) {
  Floorgeometry.Το διάστημα [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * floor_ht;
  } αλλιώς εάν (i & gt, 25 & amp; & amp; i & lt; 30) {
  Floorgeometry.Τοι λόγοι [i * (floor_res + 1) + j] .z = snoise.noise (iPOS / Floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 1.2);
  } αλλιώς {
  Floorgeometry.Τοι λόγοι [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 2);
  }
  }
  }
  floorgeometry.erlicesneedupdate = true;
} 

19. Αλλαγή μεγέθους και ζωντανά

Όταν το παράθυρο Απελευθερώνεται, η λειτουργία εδώ καλείται από τον ακροατή που ρυθμίζεται στο βήμα 16. Η κάμερα, ο renderer και ο συνθέτης επαναφέρονται εδώ για να ταιριάζουν με τις νέες διαστάσεις του παραθύρου του προγράμματος περιήγησης. Η λειτουργία Animate απλά τοποθετείται σε 60fps, καλώντας τη λειτουργία δημιουργίας για την ενημέρωση της οθόνης.

 λειτουργία onwindowresize () {
  Camera.aspect = window.innerwidth / window.innerheight;
  camera.updatepropectionMatrix ();
  renderer.Setsize (window.innerwidth, window.innerhehight)?
  συνθέτης.Setsize (window.innerwidth, window.innerhehight);
}
Λειτουργία ζωντανή () {
  Αιθέσιον αιτήματος (Animate).
  καθιστώ();
} 

20. Ορίστε κάθε πλαίσιο δράσης

Η λειτουργία απόδοσης ονομάζεται κάθε πλαίσιο. Οι φώτα σημείων έχουν ρυθμιστεί σε τροχιά γύρω από τη σκηνή και η κάμερα τοποθετείται σύμφωνα με την κίνηση του ποντικιού, με λίγη χαλάρωση έτσι ώστε να κινείται σταδιακά στη θέση του. Η κάμερα έχει οριστεί πάντα το κέντρο της σκηνής.

Λειτουργία () {
  VAR TIMER = -0.0002 * Ημερομηνία.Now ();
  poidlight.position.x = 2400 * math.cos (χρονοδιακόπτης);
  poidlight.position.z = 2400 * math.sin (χρονοδιακόπτης);
  poidlight2.position.x = 1800 * math.cos (-Timer * 1.5);
  poidlight2.position.z = 1800 * math.sin (-Timer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  Camera.position.y + = (-Mousey - camera.position.y) * .05;
Camera.Lookat (σκηνή.position); 

21. καθιστούν τη σκηνή

Στο τελικό βήμα τα σωματίδια μετακινούνται προς τα εμπρός στην ατομική τους κορυφή και αν φτάσουν στην κάμερα, τοποθετούνται πίσω στην απόσταση. Αυτό ενημερώνεται και το ' setwaves ' Η λειτουργία καλείται να κάνει τα κύματα να κυλήσουν προς τα εμπρός. Η σκηνή αποδίδεται από τους συνθέτες εφέ.

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine Σχεδιαστής ιστοσελίδων . Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• Ξεκινήστε με το WebGL χρησιμοποιώντας τρεις
• 11 βήματα για να δημιουργήσετε καλύτερα λογότυπα
• 18 Σχεδιασμός ιστοσελίδων YouTube Τα κανάλια πρέπει να παρακολουθήσετε