Menggunakan Shader untuk Membuat Efek Khusus yang Realistis dalam Desain Web

WebGL telah menjadi subjek eksperimen dan pengujian batas dari apa yang mungkin dilakukan di web. Hampir setiap hari kita menemukan solusi muluk yang didukung olehnya. Buktinya, beberapa proyek nyata sudah kami teliti.

Hari ini kita akan mengeksplorasi beberapa konsep yang menunjukkan manfaat menggunakan shader. Kami akan fokus pada GLSL.

GLSL adalah singkatan dari Graphics Library Shader Language. Ini adalah bagian integral dari WebGL, dan bertanggung jawab atas sebagian besar solusi menakjubkan yang kita lihat di alam liar. Sesuai dengan namanya, ini memberi pengembang alat untuk memanipulasi grafik secara intuitif. Di tangan yang tepat, ia mampu mewujudkan hampir semua ide.

Codepen sudah penuh dengan proyek menarik yang dibuat dengan bantuan shader. Namun, yang menunjukkan efek realistis adalah yang paling mengesankan dan menginspirasi. Dan kita akan membuktikan ini dalam koleksi hari ini. Mari selami.

Tetesan Air WebGL Shader oleh Stefan Weck

Stefan Werk membuka kumpulan kami dengan mahakaryanya, membuktikan kepada semua orang bahwa teknologi kelas atas adalah keajaiban yang nyata. Dia berhasil menciptakan kembali hujan yang jatuh di jendela (atau dalam kasus kami, layar). Perilaku dan realisasi tetesan hujan begitu nyata sehingga Anda ingin menyentuhnya. Di sini, JavaScript berdiri di belakang simulasi hujan sedangkan shader WebGL bertanggung jawab atas efek lengket dan refraksi.

Three js water shader oleh Jonathan Blair / ShaderToy Compilation oleh David Hartley

Mungkin dua proyek berikutnya adalah salah satu contoh penggunaan shader yang paling mengesankan dalam koleksi kami. Meskipun masing-masing memaksa komputer Anda untuk beroperasi pada kapasitas penuh untuk mengatasi segala sesuatu yang terjadi di belakang layar, namun, itu sepadan. Setiap konsep, dengan semua riak itu, gelombang kecil dan besar, bersama dengan perubahan warna, terlihat sangat realistis dan sangat menginspirasi.

Sementara Jonathan Blair hanya menciptakan kembali permukaan air, David Hartley telah membuat hal-hal sedikit menarik dengan memberikan yang terakhir bentuk bola, sehingga dengan terampil meniru Bumi. Kedua proyek ini sangat menakjubkan.

Contoh Shader Pixijs.v3 oleh Omar Shehata

Didukung oleh Pixi.js, konsep menarik dari Omar Shehata ini akan mengejutkan Anda dengan simulasi efek kabut yang sangat mendetail. Dibumbui dengan warna keunguan yang indah dan latar belakang gelap, awan asap ini terlihat sangat otentik. Perilaku ini dipikirkan dengan baik. Konsepnya hanya menghipnotis.

Snowfall WebGL Shader oleh Boris ehovac

Konsep ini sesuai dengan namanya. Hal ini sangat realistis. Boris Sehovac telah menggunakan ukuran kepingan salju yang berbeda, tingkat keburaman yang berbeda, dan kecepatan yang berbeda untuk menciptakan kedalaman. Terlebih lagi, ia juga mencoba mensimulasikan angin dengan memaksa komposisi untuk mengubah arahnya dari kiri ke kanan dan sebaliknya. Akibatnya, kita bisa menyaksikan semacam badai salju kecil. Sebuah shader WebGL asli berdiri di belakang keindahan ini.

Konsep oleh Anand Davaasuren

Jika contoh sebelumnya telah meninggalkan kesan yang baik pada Anda, maka konsep Anand Davaasuren pasti akan menyenangkan mata Anda. Solusinya didasarkan pada ide yang sama. Efek salju yang turun terletak di jantungnya: meskipun dengan satu pengecualian. Contoh ini menggunakan hati, bukan kepingan salju. Alhasil, konsep tersebut memiliki atmosfir indah yang sulit ditolak. Mungkin itu tidak realistis secara brutal, tapi tetap saja, efek jatuh serta perilaku hati sangat halus.

Clouds Shader oleh David Hartley

Ini adalah mahakarya lain yang diciptakan oleh David Hartley. Kali ini sang seniman mendemonstrasikan pandangannya tentang awan dan perilaku mengambangnya. Sekali lagi, Pixi.js berdiri di belakang proyek megah ini. Di sini, kamera menembus awan, membiarkan Anda merasakan seluruh keindahan ide. Tapi itu tidak cukup bagi David. Dia juga memberi kami kesempatan untuk menjelajahi pemandangan dengan menggerakkan kursor. Luar biasa.

Fire shader oleh 14 pulau

Dari badai salju yang membekukan dan awan halus yang dingin hingga hal-hal yang panas, berikut adalah upaya yang berhasil untuk mensimulasikan api. Tim di balik 14islands menggunakan sekumpulan partikel dan shader khusus untuk mewujudkan ide ini. Alhasil, kita bisa menyaksikan api unggun kecil dengan asap yang memancarkan kehangatan di segala penjuru.

GLSL: Chrome oleh Liam Egan

Chrome oleh Liam Egan menampilkan cairan dengan kepadatan tinggi. Proyek ini sedikit mengingatkan adegan dari epik Terminator 2, ketika T-1000 jahat menunjukkan komposisi logam cairnya. Konsepnya terasa artifisial, tanpa keraguan. Namun perilaku dan permukaan mengkilap terlihat sangat hidup. Terlebih lagi, Anda dipersilakan untuk bermain-main dengan menggerakkan mouse Anda ke atas dan ke bawah untuk mengubah parameter smoothing.

Efek riak oleh Martin Laxenaire

Proyek oleh Martin Laxenaire ini adalah contoh sempurna dari shader yang dipraktikkan. Di sini, penulis berhasil membuat efek riak nyata yang membuat gambar bergerak seperti tirai saat mouse dilayangkan. Curtains.js mendukung konsep ini. Satu-satunya kelemahan adalah mungkin terlalu dini untuk menyediakan setiap gambar di situs web dengan efek ini karena masih terlalu berat untuk komputer kelas bawah untuk "mencerna" itu.

Kunang-Kunang Glitched oleh Fabien Motte

Proyek Fabien Motte juga menampilkan solusi praktis. Namun, yang kami maksud bukan kunang-kunang terang yang bergerak kacau di sekitar sumbu vertikal. Kita berbicara tentang efek glitch yang terkadang mengenai layar. Ini luar biasa. Dan karena populer akhir-akhir ini, konsep ini dapat berfungsi sebagai dasar yang sempurna untuk eksperimen Anda.

Lempar Beberapa Naungan

Shader adalah alat yang ampuh. Meskipun kami telah berfokus pada solusi realistis dalam artikel ini, ada banyak konsep menakjubkan lainnya yang terlihat lebih artifisial. Anda dapat membuat adegan dan komposisi yang benar-benar berbeda – di sinilah imajinasi Anda dapat menjadi liar.

Namun, dengan kekuatan besar datang tanggung jawab besar. Ada beberapa masalah yang perlu Anda perhitungkan sebelum terjun ke seluruh hal shader ini.

Pertama, ada masalah dengan kompatibilitas browser. Tidak semua orang bisa menikmati keindahannya. Dan kedua, tidak setiap komputer dapat menanganinya tanpa hambatan. Ini berarti bahwa shader bukanlah alat universal – setidaknya belum.