WebGL Flash'ın Mirasını Nasıl Yeniden Keşfediyor?
Olağanüstü etkileşim, akıllara durgunluk veren animasyonlar ve heyecan verici bir kullanıcı deneyimi ile sonuçlanan heyecan verici ses efektlerine sahip tüm bu projeleri hatırlıyor musunuz? Evet, bunlar Flash'ın yardımıyla yaratıldı.
Ancak itiraf etmekten nefret ediyorum, bu zengin multimedya platformunun çağı sona ermiştir. Flash sonunda öldü. Ama korkma! Bir kapı kapandığında sık sık olduğu gibi, diğeri açılır ve Flash, daha taze, daha güçlü bir halefi ile değiştirilir. Teknolojiler gibi WebGL ve buna benzer JavaScript kütüphaneleri Three.js Hızla büyüyorlar - geliştiricilerin beraberindeki güvenlik sorunları olmadan Flash benzeri projeler oluşturmasını sağlayın.
Bugün WebGL ve Three.js üzerinde odaklanacağız. Bu eşleme, sürükleyici UX için güçlü bir seçenektir.
WebGL ve Three.js
WebGL etkileşimli 3D ve 2D bilgisayar grafikleri ile manipüle etmek için araçlar sunan bir temel olarak hizmet vermektedir. Öğelerini HTML öğeleriyle karıştırıp eşleştirmek ve bunları sayfanın veya arka planın diğer bileşenleriyle birleştirmek için bir fırsat verir.
Three.js, sahneler, kameralar, ışıklar, geometri ve daha fazlası ile çalışmanıza izin veren yüksek kaliteli özelliklerin bir listesiyle bir Javascript kütüphanesidir. Platforma ekstra işlevsellik ekleyerek WebGL'nin potansiyelinin kilidini açmak amaçlanmıştır. Tarayıcı eklentilerine dayanmadan GPU hızlandırılmış 3D animasyonlar oluşturmayı kolaylaştırır.
Uyumluluk sorunları
Modern teknolojilerle, her zaman bir ikilem içinde kalıyorsunuz: ya çeşitli cihazlarda çalışacak ve tutarlı bir kullanıcı deneyimi sunacak ya da her şeyi sıraya koyacak ve izleyebildiğiniz kitleyi anında etkileyecek bir “herkese uyar” projesi yaratın. .
WebGL ve Three.js ile aynı hikaye. Safari, Opera ve mobil tarayıcıların çoğunluğu (ve Internet Explorer hakkında hiçbir şey söylememek) Chardonnay'daki bir sinek gibidir. Ne yazık ki, çok sayıda kullanıcı eski tarayıcılarla takıldığından, uyumluluk oldukça engel teşkil ediyor - ancak destek büyüyor (Flash için söylenilenden daha fazlası) ve bunu kritik bir görev olan WebGL ve Three.js mükemmel seçenekler.
Örnekler
Geçersiz
Geçersiz Londra merkezli bir yaratıcı stüdyo olan Hi-ReS! 'in bir deneyidir. Geliştiriciler, modern platformların ve tarayıcıların getirdiği sınırlamalardan soyutlamayı ve mevcut teknolojilerin sınırlarını test etmeyi istediler. Görünüşe göre çivilenmiş.
WebGL ve Web Audio özellikleri tarafından desteklenen tamamen bir masaüstü uygulamasıdır. Howler.js, GSAP ve Coffee Collider ile birlikte Three.js, çevrimiçi ziyaretçileri dijital bir kitaba benzeyen bir yolculuğa inanılmaz bir şekilde çeken bu seçkin oyun alanının yapımında yer aldı.
Mükemmelliği Yeniden Şekillendirmek
Bu etkileşimli kampanya Sennheiser'ın yıldönümüne adanmış, sadece dramatik bilim-kurgu manzaralarını değil, aynı zamanda sayısız son teknoloji özelliklerini ve detaylarını bir araya getiren destansı bir odyssey. Ziyaretçilerin bir ses anıtı oluşturmaya ve şekillendirmeye katılmasına izin veren saf bir Chrome denemesi. Her ne kadar formasyon evresi tamamlanmış olsa da - Globe'un tümünde bir milyon insan bu etkinliğe katıldı - kayaları soldurdu. Kendi katkınızı oluşturmaya, bu büyük ses heykelini incelemeye ve tanıtım videosu ile en üst düzey yürütmenin tadını çıkarmaya davetlisiniz.
Bruno Quintela
Kişisel portföy Bruno Quintela Sanatçının potansiyelini ve mevcut web teknolojilerinin olanaklarını gösteren gerçek zamanlı bir WebGL denemesidir. Sahneyi iyice incelemek için farenizi kullanın. Parlak yüzeylerle doğru bir şekilde yerleştirilmiş olan 3 boyutlu poligonların içine bu gizli içinde gizlenmiş olanları görmek için farklı yönlere doğru sürükleyin. Fikir, güçlü ve kalıcı bir ilk izlenim bırakan web sitesi için mükemmel bir açılış işlevi görüyor.
Parçacık testi
Bu proje Yüksek teknoloji ürünü vibe yayılan daha az düzenli ve düzenli parçacık tüplerinin bir kasırgasını sergiler. Silindirik şekilli bir bulutun yarıçapı, tüplerin yoğunluğu, yükseklik, ölçek ve daha fazlası gibi özelliklerle oynamanızı sağlayan bir kontrol merkezi vardır. Kavrama büyüleyici.
Su Shader
Bu sanatçı başardı su yüzeyi taklit sıvının doğal davranışını taklit ederek. Son rötuşlar olarak güneş yansımaları ile dışbükey şekil ve dalgalı yüzey, ilk saniyeden itibaren göze çarpan gerçekten gerçekçi bir sahne yaratır.
WebGL Parçacık Kafası
Flaş başarılı olduğunda, parçacıklar günümüzde tüm öfke. Çeşitli boyut ve türdeki animasyonlar çeşitli projelerde görülebilir ve bu iş öyle biri. Isaac Asimov'un romanlarından akıllı insan benzeri bir robotu anımsatan bir başın ince versiyonu gerçek bir başyapıttır. Gerçekleşme sürpriz değil, aynı zamanda onun davranışıdır. Fare hareketlerine tepki verir, doğal olarak baş, sağa, sola, yukarı ve aşağı eğilir.
Dinamik 3D Konfeti Metin
Metin etkisi, oyunculuk ve serinlik notu ile sıkıcı arayüzleri canlandırmanın yanı sıra gerekli yazıyı vurgulamanın yollarından biridir. Rachel Smith konfeti esinli çözüm tasarımı parlak duygularla zenginleştirmeye ve başlığı merkeze yerleştirmeye kesinlikle yardımcı olacak. Bütün büyüyi görmek için aşağıdaki giriş alanına bir kelime yazın. Canlı ve canlı 3D geometrik parçalar talebi şekillendirecek ve sonucu güzel bir şekilde interaktif hale getirecektir.
3D Panorama Görüntüleyici
Max Chuhryaev'in kanıtladığı gibi, Three.js ortak projelerde işe yarar. Onun çözümü Panoramik görüntüleri kolayca kullanıcı deneyiminin önemli bir detayına dönüştürür. Hoş bir bakış açısına ve yavaş hareket eden bir kameraya sahiptir: birlikte sizi bileşimin bir parçası hissettirir. Kullanıcıların statik multimedya güzelliğinin tadını çıkarmasına izin veren manzaralar, şehir manzaraları ve iç mekanlar ile iyi gider.
Üçgen Desenli Jeneratör
Bu deney size güzel bir 3D duygu ile fantastik bir poligon arka plan verir. Ayrıca bazı bölgeleri daha parlak hale getirebileceğiniz bir oyun alanı gibi davranır ve diğerleri kısıktır: sadece farenizi kullanın. Seçenekler paneli, ışık, örgü, render ve hatta dışa aktarma ayarları dahil olmak üzere tuvalin ayrıntılarını bir araya getirmenizi sağlar.