Cara membuat efek cair dengan WebGL

Banyak desainer web mencari cara untuk menambahkan dampak besar pada desain situs mereka, sehingga mereka akan menarik perhatian penggunanya. Metode telah berevolusi selama bertahun-tahun, dari menggunakan grafik header, untuk menempatkan tayangan slide di bawah menu halaman arahan, untuk menjadi lebar browser penuh - dan sekarang sebagian besar situs mengikuti format yang sama (buat sendiri dengan mudah dengan a Pembangun Situs Web ).

Hari ini, desain yang memenangkan 'situs hari' di situs penghargaan Web yang berbeda biasanya mencoba dan melakukan sesuatu yang sedikit lebih unik, dan WebGL sangat bagus untuk ini. Menambahkan elemen interaktif dapat benar-benar menarik perhatian pengguna dan menunjukkan bahwa ini tidak sama dengan situs lain yang baru saja mereka kunjungi. Itu membuat situs jauh lebih menarik daripada hanya memiliki slideshow raksasa dan beberapa Parallax Scrolling . Jika Anda punya situs dengan kebutuhan kompleks, pastikan Anda hosting web. Layanan tepat.

• 14 Desain Halaman Landing yang hebat

Untuk membuat efek splash dalam tutorial ini, cairan, permukaan reflektif akan ditambahkan, dan ini akan dianimasikan ke arah kamera dengan gelombang bergulir bergerak maju. Juga akan ada partikel yang bergerak maju untuk menyelesaikan tampilan dan nuansa. Di tengah akan menjadi logo situs, dan seluruh adegan akan bereaksi terhadap gerakan mouse pengguna sehingga konten bergeser dan membuat 3D benar-benar menonjol.

Itu desain logo diterjemahkan sebagai PNG transparan (tetap aman penyimpanan awan ), Jadi ini dapat dengan mudah disesuaikan dengan desain Anda sendiri. Lampu juga akan menghidupkan sehingga warna akan mengorbit dan menyorot gelombang yang berbeda dalam adegan.

Unduh file untuk tutorial ini.

01. Tambahkan variabel awal

Buka folder Start dari file proyek dan seret ini ke editor kode Anda. Buka ' index.html 'Dan Anda akan melihat bahwa perpustakaan JavaScript telah ditautkan untuk Anda. Di dalam tag skrip kosong adalah tempat kode akan pergi. Di sini WebGL terdeteksi untuk memastikan proyek dapat dijalankan, maka seluruh rentang variabel ditambahkan yang akan digunakan dalam adegan.

 Jika (! Detector.webgl) detector.addgetwebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.inneright;
Var Renderer, Kamera, Scene, Movergroup, Fortorometry, Floormaterial, Pointlight, Pointlight2, PGometry;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var noisescale = 9.5;
var noiseseed = math.random () * 100; 

02. Buat lebih banyak variabel

Blok variabel berikutnya menangani seberapa besar lantai air harus dan kecepatan yang akan bergerak bersama dengan posisi mouse awal. Pusat layar dikerjakan dan perpustakaan suara yang ditingkatkan digunakan untuk membuat permukaan air.

 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 = baru disetujui ();
var textureloader = New threen.textureLoader (); 

03. Hitung mouse

Beberapa variabel akhir ditambahkan untuk efek pemrosesan pos adegan. Seorang pendengar acara ditambahkan yang memeriksa gerakan mouse. Adegan akan bergerak di port tampilan untuk bereaksi terhadap gerakan mouse. Fungsi yang ditambahkan di sini berhasil dalam jumlah gerakan yang diizinkan.

04. Ubah pengaturan Post Processing

' params. 'Fungsi adalah di mana semua pengaturan untuk efek pemrosesan pos akan disimpan. Jika Anda perlu mengubah apa pun, ini adalah tempat untuk melakukannya. Tilt Shift Blur ditutupi dalam empat baris pertama, kemudian film ini melewati garis yang tersisa. Ini terutama untuk intensitas layar dan intensitas kebisingan.

05. Tetapkan parameter akhir

Parameter terakhir adalah untuk sketsa gelap di sekitar tepi layar. ' init 'dan' menghidupkan 'Fungsi dipanggil untuk dijalankan. ' menghidupkan 'Fungsi akan dibuat jauh kemudian di tutorial, tetapi' init 'Fungsi dibuat di sini. Kamera dan adegan diatur untuk memungkinkan tampilan konten 3D.

 EffectVignette.uniforms ["Offset"]. Nilai = 1.0;
  EffectVignette.Uliforms ["Darkness"].value = 1.3;
}
init ();
menghidupkan();
Fungsi init () {
  kamera = baru tiga.perpectiveCamera (70, window.innerwidth / window.innerheight, 1, 4000);
  camera.position.z = 2750;
  adegan = tiga baru.Scene ();
  adegan.fog = baru tiga.fogexp2 (0x1c3c4a, 0,00045); 

06. Biarkan lampu masuk

Untuk melihat konten adegan, empat lampu akan ditempatkan. Yang pertama adalah light hemisphere, yang digunakan hanya untuk mendapatkan suasana dasar adegan. Selanjutnya adalah lampu tengah yang menambahkan cahaya biru muda di tengah-tengah pemandangan. Ini diatur ke satu sisi untuk memberikan cahaya ke seluruh adegan.

 var hemispherelight = new threen.hemispherelight (0xe3feff, 0xE6ddc8, 0.7);
adegan.add (hemispherelight);
hemispherelight.position.y = 300;
var centerlight = baru tiga.spotlight (0xb7f9ff, ​​1);
adegan.add (Centerlight);
centerlight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
centerlight.decay = 5; 

07. Animate Lights.

Dua lampu berikutnya ditambahkan. ' Pointlight. 'dan' Pointlight2. 'Apakah lampu berwarna yang akan berputar di arah yang berlawanan di sekitar pemandangan sehingga cahaya berubah terus dalam tampilan. Yang pertama adalah cahaya merah muda dan yang kedua adalah cahaya oranye. Jalur dan format untuk gambar refleksi diatur dalam dua baris terakhir.

 Pointlight = New Three.pointlight (0xE07BFF, 1.5);
pointlight.position.z = 200;
adegan.add (Pointlight);
Pointlight2 = New Three.pointlight (0xFF4E00, 1.2);
pointlight2.position.z = 200;
adegan.add (pointlight2);
var path = "img /";
var format = '.jpg'; 

08. Permukaan mengkilap

Permukaan cair akan memiliki permukaan reflektif dan mengkilap dan ini dilakukan dengan menciptakan kubus refleksi. Ini adalah kubus dengan skybox 360 derajat yang ditempatkan di dalamnya, yang akan tercermin ke permukaan cairan. ' URL. 'Array berisi gambar yang akan dimuat, maka bahan diatur.

09. Mendirikan beberapa grup

Grup penggerak akan berisi beberapa partikel yang akan ditambahkan kemudian, sedangkan grup lantai akan berisi permukaan cairan. Objek 3D baru dibuat yang akan menahan permukaan itu. Akan ada dua permukaan cair; satu akan memiliki bahan reflektif dan yang kedua akan memiliki bingkai kawat ' Floormatterial. ', sebagaimana didefinisikan di sini.

 MELOVERGROUP = BARU Tiga.Object3D ();
adegan.add (movergroup);
var floorgroup = New Three.Object3D ();
var floormaterial = baru tiga.meshphongmaterial ({
Warna: 0xEEEEE, Sisi: Tiga. Lubang, Blending: Tiga
});
Floorgometry = New Three.Planegometry (Floor_Width + 1200, Floor_Depth, Floor_Res, Floor_Res); 

10. Buat permukaannya

Dua permukaan cair dibuat di sini sebagai ' Floormesh 'dan' Floormesh2. '. Mereka diposisikan dan ditempatkan di dalam ' FloorGroup. 'Kemudian diputar ke sudut pandang yang bagus di depan kamera. Ini tidak langsung datar, tetapi sedikit miring karena terlihat lebih baik seperti itu.

 var floormesh = New Three.mesh (Forlowerometry, Cubematerial);
var floormesh2 = baru tiga.mesh (Forlowerometry, Floumbahan);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
FloorGroup.add (Floormesh);
FloorGroup.Add (Floormesh2);
adegan.add (Floorgroup);
Floormesh.rotation.x = math.pi / 1.65;
Floormesh2.rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; 

11. Tambahkan partikel terapung

Bagian kode di sini membuat objek geometri kosong dan kemudian menempatkan 2.000 simpul yang bertindak sebagai partikel. Ini didistribusikan pada posisi acak pada sumbu X, Y dan Z. Ini akan mengapung tepat di atas permukaan lantai cair.

 PGOMETRI = Tiga Baru. Bentuknya ();
sprite = textureloader.load ("img / sprite.png");
untuk (i = 0; i & lt; 2000; i ++) {
  var vertex = new threen.vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  PGOMETRY.BRICE.BERION (VERTEX);
} 

12. Buat tampilan

Bahan yang didefinisikan di sini akan menetapkan bagaimana partikel terlihat. Sebuah gambar dimuat pada langkah sebelumnya dan itu digunakan sebagai gambar pada setiap partikel, setelah bahan dibuat. Ini kemudian diterapkan untuk setiap titik geometri untuk semua partikel. Ini kemudian ditambahkan ke dalam adegan.

13. Tambahkan logo

Logo akan ditempatkan di tengah layar dan ini akan ditambahkan ke bidang datar yang akan menghadap kamera. Logo dibuat sedikit transparan dan diberi campuran aditif sehingga lebih terlihat ketika benda-benda ringan lewat di belakangnya. Ini diposisikan dan ditempatkan ke dalam adegan.

 sprite = textureloader.load ("img / logo.png");
Geometri = Tiga Baru. PlanebufferGeometry (500, 640, 1);
Bahan = baru tiga.meshlambertmaterial ({{
  Transparan: Benar, Opacity: 0.8, Blending: three.adgitalbling, Peta: sprite, Sisi: tiga.
});
var pesawat = baru tiga.mesh (geometri, material);
Pesawat.Sempinta.Set (0, 70, 1800);
adegan.add (pesawat); 

14. Tambahkan pengaturan Render

Renderer diatur untuk memiliki tepi yang halus dan anti-alias dan sekarang warna latar belakang diatur. Ini ditambahkan ke dalam tubuh dokumen sehingga adegan ada di halaman HTML. Efek pemrosesan pasca diatur dengan memiliki berbagai kelebihan render dan shader diinisialisasi.

15. Jadikan Pass

Setelah film dan slitch pass ditambahkan, komposer efek dibuat yang menyusun semua lintasan bersama. Ini ditambahkan satu per satu ke komposer dan pada akhirnya akan dirender keluar ke layar untuk tampilan audiens.

16. Tutup fungsi 'init'

Beberapa pengaturan terakhir ditambahkan untuk inisialisasi adegan. Parameter untuk pemrosesan pos diatur, pengaturan ombak disebut dan pendengar acara ditambahkan untuk setiap kali browser diubah ukurannya. Ini memungkinkan tampilan untuk diperbarui agar sesuai dengan dimensi baru.

17. Atur ombak

Gelombang dibuat sekarang untuk permukaan cairan. Ini dilakukan dengan bergerak melalui setiap titik geometri lantai pada sumbu X dan Z dan memindahkannya ke atas pada sumbu Y. Pada tahap ini ' untuk 'Loop dibuat untuk sumbu x dan z.

 Fungsi Setwaves () {
  Stepcount ++;
  movergroup.position.z = -move_spd;
  var i, IPO;
  var offset = stepcount * move_spd / floor_depth * floor_res;
  untuk (i = 0; i & lt; floor_res + 1; i ++) {
  untuk (var j = 0; j & lt; floor_res + 1; j ++) {
  IPO = i + offset; 

18. Buat gelombang

Tidak semua simpul akan ditingkatkan ke atas dengan cara yang sama. Itu yang paling jauh dari kamera akan besar, maka sisinya akan sedikit kurang, dan yang terdekat dengan kamera akan sedikit lebih rendah. Ini membuat punggung dan samping sedikit lebih menarik untuk dilihat.

 Jika ((I & GT; 30) || (J & LT; 12) || (j & gt; 48)) {
  Florgeometry.Berny [i * (floor_res + 1) + j]
  } else if (i & gt; 25 & amp; & amp; i & lt; 30) {
  Florgeometry.Bricses [i * (floor_res + 1) + j]
  } lain {
  Florgeometry.vercome [i * (floor_res + 1) + j]
  }
  }
  }
  Florgeometry.vertedneedupdate = true;
} 

19. Ubah ukuran dan animasi

Ketika jendela diubah ukurannya, fungsi di sini disebut dari pendengar yang diatur pada langkah 16. Kamera, Renderer dan komposer semuanya diatur ulang di sini untuk mencocokkan dimensi baru dari jendela browser. Fungsi Animate hanya menetapkan dirinya pada 60fps, memanggil fungsi render untuk memperbarui tampilan.

 Fungsi OnWindowResize () {
  camera.aspect = window.innerwidth / window.inneright;
  camera.updateProjedMatrix ();
  renderer.setsize (window.innerwidth, window.innerheight);
  komposer.Setsize (window.innerwidth, window.innerheight);
}
fungsi animate () {
  PermintaanImationFrame (Animate);
  memberikan();
} 

20. Tetapkan setiap frame tindakan

Fungsi render disebut setiap frame. Lampu titik diatur ke orbit di sekitar adegan dan kamera diposisikan sesuai dengan gerakan mouse, dengan sedikit pelonggaran sehingga bergerak secara bertahap ke tempatnya. Kamera diatur untuk selalu melihat pusat adegan.

fungsi render () {
  var timer = -0.0002 * tanggal. Sekarang ();
  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;
Camera.Lookat (Scene.Position); 

21. Render adegan

Pada langkah terakhir partikel-partikel dipindahkan ke depan pada vertex individu mereka, dan jika mereka sampai ke kamera, mereka ditempatkan kembali ke kejauhan. Ini diperbarui dan ' setwaves ' Fungsi dipanggil untuk membuat ombak bergulir ke depan. Adegan ini diberikan oleh komposer efek.

Artikel ini awalnya diterbitkan di Majalah Desain Web Kreatif Desainer web . Berlangganan desainer web di sini .

Artikel terkait:

• Mulailah dengan WebGL menggunakan three.js
• 11 langkah untuk membuat logo yang lebih baik
• 18 Desain Web Saluran YouTube yang perlu Anda tonton