30 Eksperimen WebGL Yang Hanya Wow!
Lihatlah, karena alat yang hebat dengan janji-janji besar datang ke mata Anda. Cepat dan halus. Itu membuat 3D, dan dengan integrasi itu menjiwainya, coba tebak apa itu? HTML5? CSS3? Tidak, itu disebut WebGL, perpustakaan perangkat lunak yang memperluas kemampuan JavaScript untuk menghasilkan grafik 3D interaktif, dan ya, tanpa plugin apa pun!
Dalam showcase ini, kami tidak ingin menunjukkan hal-hal biasa kepada Anda. Kami ingin menampilkan kepada Anda 30 percobaan WebGLYang dibuat dengan hati-hati oleh pengembang profesional agar Anda menyaksikan kekuatan sebenarnya dari WebGL yang tidak hanya menginspirasi tetapi juga memungkinkan Anda melihat sekilas seperti apa masa depan web itu. Lompat ke masa depan setelah klik!
Anda sangat disarankan untuk melihat demo ini menggunakan versi Pengembang versi terbaru Google Chrome. Namun, sebagian besar demo mendukung Firefox, Google Chrome, dan Safari versi terbaru.
3 Mimpi Hitam
Diciptakan oleh Tim Seni Data Google, 3 Dreams of Black membawa Anda ke dalam 3 dunia mimpi yang dibangun melalui kombinasi gambar 2D yang kaya dan animasi yang terjalin dengan urutan 3D interaktif. Lihatlah keajaiban untuk pengalaman indah!
Partikel Volume Animasi
Yang ini benar-benar artistik - hewan animasi yang dibangun oleh partikel 3D menggunakan tekstur mengambang dan objek penyangga bingkai. Lebih mengejutkan jika Anda menggerakkan mouse!
Akuarium
Mensimulasikan lingkungan bawah air? Itu bukan masalah untuk WebGL. Demo ini menampilkan model 3D dengan tekstur berkualitas tinggi, animasi adegan, animasi pixel shader, refleksi, refraksi dan kaustik, hanya segalanya untuk memasang adegan bawah air yang realistis!
Azathioprine
Mungkin demo WebGL paling epik, cukup kata. Kiat tip untuk penulis Jochen Wilhelmy.
Perjalanan Penarik
Jika Anda ingin mengalami 3D ini adalah demo terbaik untuk Anda, dapatkan juga meditasi dengan keindahan luar biasa dari grafis yang dihasilkan WebGL menggunakan rumus Martin Hopalong.
Ubur-ubur
“Pemodelan prosedural dilakukan dengan Side FX Houdini. Diekspor dengan eksportir Python ke dalam format json. Tekstur dicat menggunakan Autodesk Mudbox. Animasi dengan vertex shader.”
Chrysaora
Ini bukan demo animasi biasa, tetapi fitur kerangka yang disimulasikan secara dinamis, simulasi sisi-server dan sinkronisasi sebagian dengan WebSocket, sistem partikel yang menghadap kamera, efek cahaya volumetrik, dan perpustakaan matriks mjs Vladimir Vukićević. Singkatnya, sebuah eksperimen luar biasa dengan karya-karya kompleks.
HelloRacer
Memperkenalkan simulasi mobil interaktif kelas atas, dipersembahkan khusus untuk Anda oleh HelloEnjoy.
Bahan: Mobil
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 dan Chevrolet Camaro di browser Anda. Pilih perjalanan Anda dan nikmati pemandangannya. Heck, Anda bahkan dapat memilih warna mereka.
Mobil WebGL
Masa depan seri Need For Speed akan ada di browser web. Terlalu ambisius? Tentu saja tidak jika Anda telah mengunjungi mobil-mobil ini yang dirender dengan peta kubus dinamis, peta bayangan dan efek postprocessing.
Bangsa Robot saya
Nah, jika sosok itu bukan favorit Anda, maka cobalah untuk membangun robot keren dan menawan dan pamerkan ke teman Anda! Anda bahkan dapat menghabiskan uang Anda untuk membuatnya menjadi nyata.
Pacmaze
Bagaimana dengan game 3D Pac-Man? Grafik & gameplaynya bagus, dan yang paling penting menyenangkan!
Kap penembakan merah
Sekarang ini yang lucu ... atau yang berdarah. Yang satu ini tidak lain adalah game yang menarik untuk menunjukkan kepada Anda kemampuan WebGL ketika itu dikembangkan menjadi game top-down shooter. Pasti menyenangkan dan lucu.
TankWorld
Anda bisa menebaknya, permainan tank shooter yang menyenangkan dengan senjata untuk digunakan dan peta untuk dijelajahi, dan di beberapa level Anda bahkan bisa mendapatkan helikopter untuk menjelajahi dunia! Ini benar-benar lebih dari sekedar permainan biasa, dan grafiknya terlihat nyaman!
Pulpo
Contoh terbaik tentang bagaimana grafik dan animasi sederhana dapat membuat orang terkesan ketika mereka dilakukan dengan benar.
Permukaan
Lihatlah Surface, percobaan elegan dan inspiratif yang dilakukan oleh Paul Lewis. Anda tidak hanya dapat mengubah besarnya, elastisitas, orbit otomatis, bingkai gambar, dan tetesan hujan dalam demo, tetapi juga menyeret-dan-jatuhkan gambar Anda sendiri ke dalamnya untuk merasakan efeknya secara berbeda.
Partikel Foto
Cukup masukkan gambar favorit Anda ke dalam demo ini dan nikmati menontonnya meledak menjadi satu ton partikel dan berinteraksi dengan beberapa bentuk magnet. Eksperimen ini merupakan kombinasi dari empat teknologi: Drag dan Drop HTML5, File API, Canvas dan WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer adalah emulasi WebGL dari synthesizer video Rutt-Etra klasik. Demo ini memungkinkan Anda untuk memasukkan gambar Anda sendiri di dalam dan memanipulasi mereka. Dengan hal ini, gambar 2D bahkan dapat terlihat seperti 3D!
Tari Goyangan
Demo sederhana namun patut diperhatikan yang menunjukkan betapa cairnya WebGL, dengan anisotropic light shader dan deformasi goyangan vertex.
Ultranoir
Eksperimen hebat lain yang menunjukkan potensi WebGL. Nouvelle Vague menawarkan pengalaman 3D real-time yang puitis dan interaktif berdasarkan Twitter, dan apa yang Anda lihat adalah tweet yang dilakukan dengan objek terbang yang berbeda. Tentunya cara artistik untuk menikmati tweet.
Monyet bergelombang
“Kali ini saya hanya ingin melakukan tes untuk melihat berapa banyak posisi vertex dan normals yang dapat saya perbarui langsung dalam JavaScript. Ternyata 2.000 baik-baik saja :) Saya juga menambahkan sedikit pemetaan lingkungan. Dan keanehan. Selalu tambahkan keanehan.”
Video FX
Aplikasi mengesankan yang dilakukan oleh Daniel Pettersson yang memungkinkan Anda untuk menerapkan beberapa efek postprocessing simultan ke trailer Happy Feet 2. Cobalah dan bersenang-senanglah!
Cairan Voxels
Representasi 3D dari algoritma efek air 2D klasik, juga menunjukkan kepada Anda bagaimana WebGL interaktif.
Rak Buku WebGL
Jelajahi lebih dari 10.000 sampul buku dengan Rak Buku WebGL ini, yang dikembangkan oleh Tim Seni Data Google. Anda juga dapat mencari berdasarkan subjek, membuka model 3D masing-masing dengan mengkliknya, dan mengunduh buku di ponsel Anda dengan kode QR.
WebGL Globe
Eksperimen tim Google yang keren yang benar-benar membuat Anda merasa seperti di masa depan dengan visualisasi data yang indah, elegan, dan futuristik.
Penerbangan Dunia
Aplikasi visualisasi data visual-menarik lainnya yang memvisualisasikan rute penerbangan maskapai besar, terlihat menjanjikan!
Filter Gambar WebGL
Aplikasi editor grafis dengan WebGL? Tidak pernah mustahil. Yang terbaik dari semuanya, cepat dan halus!
WebGL Water
“Genangan air yang diberikan dengan refleksi, refraksi, kaustik, dan oklusi ambien. Kolam disimulasikan dengan bidang ketinggian dan berisi bola yang dapat berinteraksi dengan permukaan air.”
Refleksi
Masalah terbesar yang dihadapi WebGL, mungkin adalah keamanannya. Menurut Wikipedia, Tim Kesiapan Darurat Komputer Amerika Serikat (US-CERT) mengeluarkan peringatan bahwa WebGL mengandung beberapa masalah keamanan yang mungkin mengarah pada eksekusi kode arbitrer, penolakan layanan dan bahkan serangan lintas domain. Ini sangat berarti bagi pemilik situs web.
Namun, Grup Khronos yang meliputi Mozilla dan Google telah menyarankan solusi yang mungkin dan pendekatan pengembangan masa depan untuk memperkuat keamanan terhadap kemungkinan ancaman keamanan. Semoga masalah ini dapat dikurangi dan bahkan dipecahkan di masa depan, karena WebGL memiliki banyak kemungkinan yang ditunjukkan oleh pengembang yang berbakat dan profesional!
Beri tahu kami eksperimen mana yang paling memukau Anda, dan tentu saja, tunjukkan pada kami jika ada!
Posting terkait lainnya:
- Situs web HTML5: 48 Demo Flash-Pembunuhan Potensial
- Situs web HTML5: 15 Eksperimen Lainnya
- Demo Animasi CSS3 yang Menginspirasi
