30 Percubaan WebGL Itu Hanya Wow!
Lihatlah, untuk alat yang hebat dengan janji-janji besar datang ke mata anda. Ia pantas dan licin. Ia menjadikan 3D, dan dengan integrasi ia menghidupkan, meneka apa itu? HTML5? CSS3? Tidak, itu dipanggil WebGL, sebuah perpustakaan perisian yang memanjangkan keupayaan JavaScript untuk menghasilkan grafik 3D interaktif, dan ya, tanpa sebarang plugin!
Dalam pameran ini, kami tidak mahu menunjukkan kepada anda perkara-perkara biasa. Kami mahu mempamerkan kepada anda 30 percubaan WebGLyang dibuat dengan teliti oleh pemaju profesional untuk anda menyaksikan kekuatan sebenar WebGL yang bukan hanya memberi inspirasi tetapi juga memberi anda gambaran mengenai bagaimana masa depan web kelihatan seperti. Lompat ke masa depan selepas klik!
Anda sangat disyorkan untuk melihat demo ini menggunakan versi terkini versi Pembangun Google Chrome. Kebanyakan demo menyokong versi terbaru Firefox, Google Chrome dan Safari, walaupun.
3 Mimpi Hitam
Ditulis oleh Pasukan Seni Data Google, 3 Dreams of Black membawa anda ke dalam 3 dunia impian yang dibina melalui gabungan lukisan dan animasi 2D yang kaya dan animasi yang dipadankan dengan urutan 3D interaktif. Lihat keajaiban untuk pengalaman yang hebat!
Zarah Beranak animasi
Ini adalah haiwan yang sangat artistik - animasi yang dibina oleh zarah 3D menggunakan tekstur terapung dan objek penampan bingkai. Lebih mengejutkan jika anda menggerakkan tetikus!
Akuarium
Meniru persekitaran bawah air? Itu bukan masalah untuk WebGL. Demo ini menampilkan model 3D dengan tekstur berkualiti tinggi, animasi adegan, animasi piksel shader, refleksi, pembiasan dan caustics, hanya segalanya untuk meletakkan pemandangan bawah laut yang realistik!
Azathioprine
Mungkin demo WebGL yang paling epik, cukup berkata. Petunjuk untuk penulis Jochen Wilhelmy.
Perjalanan menarik
Sekiranya anda ingin mengalami 3D ini adalah demo terbaik untuk anda, anda juga akan bermeditasi dengan keindahan grafik yang dihasilkan oleh WebGL dengan menggunakan formula Martin Hopalong.
Ubur-ubur
“Pemodelan prosedur dilakukan dengan Side FX Houdini. Dieksport dengan pengeksport Python ke dalam format json. Tekstur dicat menggunakan Autodesk Mudbox. Animasi dengan shader vertex.”
Chrysaora
Ini bukan demo animasi yang biasa, tetapi ciri-ciri skeleton simulasi dinamik, simulasi sisi separa server dan penyegerakan dengan WebSocket, sistem zarah yang menghadap kamera, kesan cahaya volumetrik, dan perpustakaan matriks mjs Vladimir Vukićević. Ringkasnya, percubaan yang luar biasa dengan kerja-kerja kompleks.
HelloRacer
Memperkenalkan simulasi kereta interaktif mewah, dibawa kepada anda secara eksklusif oleh HelloEnjoy.
Bahan: Kereta
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 dan Chevrolet Camaro dalam penyemak imbas anda. Pilih perjalanan anda dan nikmati pemandangan. Heck, anda juga boleh memilih warna mereka.
Kereta WebGL
Masa depan keperluan Need For Speed akan berada dalam pelayar web. Terlalu bercita-cita tinggi? Sudah tentu tidak jika anda telah melawat kereta-kereta ini yang diberikan dengan peta kiub dinamik, peta bayangan dan kesan postprocessing.
Negara Robot saya
Nah, jika angka bukan kegemaran anda, maka cuba untuk membina robot yang sejuk dan menawan dan tunjukkan kepada rakan anda! Anda juga boleh membelanjakan wang anda untuk menjadikan ia satu perjanjian yang sebenar.
Pacmaze
Bagaimana pula dengan permainan Pac-Man 3D? Grafik & permainan bagus, dan yang paling penting adalah menyeronokkan!
Hud menembak merah
Kini ada yang comel ... atau berdarah. Yang satu ini hanyalah permainan yang menarik untuk menunjukkan keupayaan WebGL apabila ia berkembang menjadi permainan penembak di atas. Senang dan lucu pasti.
TankWorld
Anda rasa, permainan penembak tangki yang menyeronokkan dengan senjata untuk digunakan dan peta untuk diterokai, dan dalam beberapa tahap, anda juga boleh mendapatkan helikopter untuk meneroka dunia! Ini benar-benar lebih daripada sekadar permainan biasa, dan grafik kelihatan selesa!
Pulpo
Contoh terbaik tentang bagaimana grafik dan animasi mudah dapat menarik perhatian orang apabila ia dilakukan dengan betul.
Surface
Lihat Surface, percubaan elegan dan inspirasi yang dibuat oleh Paul Lewis. Anda tidak boleh mengubah magnitud, keanjalan, orbit auto, rentetan perisai, dan hujan di dalam demo, tetapi juga seret-dan-lepas imej anda sendiri ke dalamnya untuk merasakan kesannya secara berbeza.
Zarah Foto
Hanya jatuhkan imej kegemaran anda ke dalam demo ini dan nikmati menontonnya meletup menjadi satu ton zarah dan berinteraksi dengan beberapa bentuk magnet. Eksperimen ini adalah gabungan empat teknologi: Seret dan Drop HTML5, API Fail, Kanvas dan WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer adalah satu peradaban WebGL dari video synthesizer Rutt-Etra klasik. Demo membolehkan anda meletakkan imej anda sendiri di dalam dan memanipulasinya. Dengan hal ini, imej 2D boleh kelihatan seperti 3D!
Tarian yang goyah
Satu demo mudah namun penting yang menunjukkan bagaimana cecair WebGL boleh, dengan shader cahaya anisotropik dan ubah bentuk verteks.
Ultranoir
Satu lagi percubaan hebat yang mempamerkan potensi WebGL. Nouvelle Vague menawarkan pengalaman 3D masa puitis dan interaktif berasaskan Twitter, dan apa yang anda lihat akan menjadi tweet yang dijalankan dengan objek terbang yang berbeza. Sudah tentu cara yang artistik untuk menikmati tweet.
Melengkapkan Monyet
“Kali ini saya hanya mahu melakukan ujian untuk melihat berapa banyak kedudukan dan normal yang boleh saya kemaskini terus dalam JavaScript. Ternyata 2,000 baik saja :) Saya juga menambah sedikit pemetaan persekitaran. Dan anehnya. Sentiasa menambah kekasaran.”
Video FX
Aplikasi yang mengagumkan yang dilakukan oleh Daniel Pettersson yang membolehkan anda menggunakan beberapa kesan postprocessing serentak kepada treler Happy Feet 2. Cuba dan bersenang-senang!
Voxels Liquid
Perwakilan 3D algoritma kesan air klasik 2D, juga menunjukkan bagaimana WebGL interaktif.
Rak buku WebGL
Semak imbas lebih 10,000 helai buku dengan Buku WebGL ini, yang dibangunkan oleh Pasukan Seni Data Google. Anda juga boleh mencari mengikut subjek, buka model 3D masing-masing dengan mengkliknya, dan memuat turun buku-buku pada telefon anda dengan kod QR.
WebGL Globe
Percubaan pasukan Google sejuk yang sebenarnya membuatkan anda merasa seperti anda berada di masa depan dengan visualisasi data yang indah, elegan dan futuristik.
Penerbangan Dunia
Satu lagi aplikasi visualisasi data menarik yang menggambarkan laluan penerbangan syarikat penerbangan utama, kelihatan menjanjikan!
Penapis Imej WebGL
Permohonan editor grafik dengan WebGL? Ia tidak mustahil. Paling penting, ia pantas dan lancar!
Air WebGL
“Kolam air yang diberikan dengan refleksi, pembiasan, caustik, dan oklusi ambien. Kolam ini disimulasikan dengan medan ketinggian dan mengandungi sfera yang dapat berinteraksi dengan permukaan air.”
Refleksi
Isu terbesar yang dihadapi oleh WebGL, mungkin keselamatannya. Menurut Wikipedia, Pasukan Kesediaan Kecemasan Komputer Amerika Syarikat (US-CERT) mengeluarkan amaran bahawa WebGL mengandungi beberapa isu keselamatan yang mungkin menyebabkan pelaksanaan kode sewenang-wenang, penolakan perkhidmatan dan serangan lintas domain. Ini bermakna sangat, sangat kepada pemilik laman web.
Walau bagaimanapun, Kumpulan Khronos yang termasuk Mozilla dan Google telah mencadangkan penyelesaian yang mungkin dan pendekatan pembangunan masa depan untuk mengukuhkan keselamatan terhadap kemungkinan ancaman keselamatan. Semoga isu-isu ini dapat dikurangkan dan dapat diselesaikan di masa depan, kerana WebGL mempunyai begitu banyak kemungkinan seperti yang dipamerkan oleh pemaju berbakat dan profesional!
Marilah kita tahu eksperimen mana yang paling mengagumi anda, dan sudah tentu, tunjukkan kepada kami jika anda mendapat satu!
Lebih banyak siaran yang berkaitan:
- Laman Web HTML5: 48 Potensi Demo Flash-Membunuh
- Laman web HTML5: 15 Lebih Eksperimen
- Demi animasi Animasi CSS3
