Sadece Wow olan 30 WebGL Deneyi!

Bakın, harika sözler veren harika bir araç için gözlerinize geliyor. Hızlı ve pürüzsüz. 3B oluşturur ve entegrasyonla canlandırır, ne olduğunu tahmin edin? HTML5? CSS3? Hayır, etkileşimli 3B grafikler oluşturmak için JavaScript'in kapasitesini artıran bir yazılım kütüphanesi olan WebGL'dir ve evet, hiçbir eklenti olmadan!

Bu vitrinde, size normal şeyleri göstermek istemiyoruz. Biz size göstermek istiyorum 30 WebGL deneyiProfesyonel geliştiriciler tarafından özenle hazırlanan ve WebGL'nin yalnızca ilham vermekle kalmayıp aynı zamanda webin geleceğinin nasıl göründüğü hakkında da bir fikir sahibi olmanızı sağlayan gerçek gücüne tanıklık etmeniz için özenle hazırlanmışlardır. Tıklamadan sonra geleceğe atla!

Google Chrome'un Geliştirici sürümünün en son sürümünü kullanarak bu demoları görüntülemeniz şiddetle tavsiye edilir. Demoların çoğu, en son Firefox, Google Chrome ve Safari sürümünü destekliyor..

3 siyah rüyalar

Google Data Arts Ekibi tarafından yazılan 3 Dreams of Black, sizi etkileşimli 3D dizileriyle iç içe geçmiş zengin 2D çizimleri ve animasyonları birleştirerek oluşturulmuş 3 hayal dünyasına getiriyor. Harika bir deneyim için harikaları göz atın!

Hareketli Hacim Parçacıkları

Bu, gerçekten sanatsal - hareketli dokular ve çerçeve tamponu nesneleri kullanılarak 3B parçacıklar tarafından oluşturulan hayvanlar. Fareyi hareket ettirirseniz daha çok sürpriz!

Akvaryum

Sualtı ortamını simüle etmek? Bu WebGL için bir sorun değil. Demoda yüksek kaliteli dokular, sahne animasyonu, piksel gölgelendirici animasyonu, yansımalar, kırılma ve kostik özellikli 3D modeller, gerçekçi sualtı sahnesini oluşturmak için her şey var!

Azatioprin

Muhtemelen en destansı olan WebGL demosunun yeterli olduğu söyleniyor. Yazarın yazarı Jochen Wilhelmy için şapka ucu.

Çekiciler Gezisi

Eğer 3D'yi deneyimlemek istiyorsanız, bu sizin için en iyi demo, ayrıca Martin Hopalong formülünü kullanarak WebGL tarafından üretilen grafiklerin büyük güzelliği ile meditasyon yapın..

Deniz anası

“Side FX Houdini ile işlemsel modelleme. Bir Python ihracatçısı ile json formatında dışa aktarılır. Autodesk Mudbox kullanarak doku boyalı. Bir köşe gölgelendiricisi ile animasyonlu.”

Chrysaora

Bu normal bir animasyon demosu değildir, ancak dinamik olarak simüle edilmiş iskeletler, kısmi sunucu tarafı simülasyonu ve WebSocket, kameraya bakan parçacık sistemi, hacimsel ışık efekti ve Vladimir Vukićević'in mjs matris kütüphanesi ile senkronizasyon özelliklerine sahiptir. Kısacası, karmaşık çalışmalar ile inanılmaz bir deney.

HelloRacer

Sadece HelloEnjoy tarafından size sunulan üst düzey etkileşimli araba simülasyonunu tanıtmak.

Malzemeler: Arabalar

Tarayıcınızda Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 ve Chevrolet Camaro bulunur. Gezintinizi seçin ve manzaranın tadını çıkarın. Heck, hatta renkleri seçebilirsiniz.

WebGL Arabaları

Need For Speed ​​serisinin geleceği web tarayıcısında olacak. Çok hırslı mısın? Kesinlikle, dinamik küp haritaları, gölge haritaları ve son işlem etkileri ile oluşturulan bu arabaları ziyaret ettiyseniz.

Robot Ulusum

Eğer rakam sizin favoriniz değilse, o zaman havalı ve büyüleyici bir robot kurmaya çalışın ve arkadaşınıza gösterin! Gerçek bir anlaşma yapmak için paranızı bile harcayabilirsiniz.

Pacmaze

3D Pac-Man oyununa ne dersiniz? Grafik ve oyun güzel ve en önemlisi eğlenceli!

Kırmızı Çekim başlık

Şimdi sevimli bir tane… ya da kanlı olanı. Bu oyun, yukarıdan aşağıya doğru nişan oyununda geliştirildiğinde size WebGL'in yeteneklerini göstermek için ilginç bir oyundan başka bir şey değildir. Eğlenceli ve eğlenceli.

TankWorld

Tahmin edersiniz, kullanmak için silah ve haritalarla eğlenceli bir tank shooter oyunu ve bazı seviyelerde dünyayı keşfetmek için bir helikopter bile alabilirsiniz! Gerçekten normal bir oyundan çok daha fazlası ve grafik rahat görünüyor!

Pulpo

Basit grafikler ve animasyonların insanları doğru yaptıklarında nasıl etkileyebileceğinin en iyi örneği.

Yüzey

Paul Lewis tarafından yapılan zarif ve ilham verici bir deney olan Surface'ı inceleyin. Demodaki yalnızca büyüklük, esneklik, otomatik yörünge, tel kafes ve yağmur damlalarını değiştiremezsiniz, aynı zamanda etkiyi farklı hissetmek için kendi resimlerinizi sürükleyip bırakabilirsiniz.

Fotoğraf Parçacıklar

En sevdiğiniz görüntüyü bu gösterinin içine bırakın ve tonlarca parçacıklar halinde patlamasını izlemenin ve bir çeşit manyetizma ile etkileşime girmenin keyfini çıkarın. Deneme, dört teknolojinin bir birleşimidir: HTML5'in Sürükle ve Bırak, Dosya API'si, Tuval ve WebGL.

Rutt-Etrak-İzer

Rutt-Etra-Izer, klasik Rutt-Etra video sentezleyicinin bir WebGL öykünmesidir. Demo, kendi resimlerinizi içine koymanıza ve üzerinde değişiklik yapmanıza olanak sağlar. Bu şeyle, bir 2D görüntü bir 3D gibi görünebilir!

Wobble Dance

WebGL'nin ne kadar sıvı olabileceğini gösteren anizotropik ışık gölgelendirici ve yalpalama tepe noktası deformasyonu ile dikkat çeken basit bir demo.

Ultranoir

WebGL'nin potansiyelini gösteren bir başka harika deney. Nouvelle Vague, Twitter'a dayalı şiirsel ve etkileşimli gerçek zamanlı bir 3B deneyimi sunuyor ve gördükleriniz farklı uçan cisimlerle yapılan tweetler olacak. Kesinlikle tweetlerin tadını çıkarmanın sanatsal bir yolu.

Dalgalı Maymun

“Bu sefer, doğrudan JavaScript'te kaç tane tepe noktası konumu ve normalini güncelleyebileceğimi görmek için bir test yapmak istedim. 2.000'in gayet iyi olduğu ortaya çıktı :) Ben de bir parça çevre haritası ekledim. Ve tuhaflık. Her zaman tuhaflık ekle.”

Video FX

Happy Feet 2 fragmanına aynı anda birden fazla işlem sonrası efekt uygulamanıza olanak sağlayan Daniel Pettersson tarafından yapılan etkileyici uygulama. Deneyin ve eğlenin!

Voksel Sıvı

Klasik 2B su efekti algoritmasının 3B gösterimi, ayrıca etkileşimli WebGL'nin ne olduğunu da gösterir..

WebGL Kitaplığı

Google Data Arts Ekibi tarafından geliştirilen bu WebGL Kitaplığı ile 10.000'in üzerinde kitap kapağına göz atın. Ayrıca konuya göre arama yapabilir, her birinin 3B modelini tıklatarak açabilir ve QR koduyla telefonunuzdaki kitapları indirebilirsiniz..

WebGL Globe

Güzel, zarif ve fütüristik veri görselleştirmesiyle sizi gelecekteki gibi hissetmenizi sağlayan harika bir Google ekibinin denemesi.

Dünya Uçuşları

Büyük havayollarının uçuş rotalarını görselleştiren bir başka görsel çekici veri görselleştirme uygulaması umut verici görünüyor!

WebGL Görüntü Filtresi

WebGL ile grafik editörü uygulaması? Asla imkansız değil. Hepsinden iyisi, hızlı ve pürüzsüz!

WebGL Su

“Yansıma, kırılma, kostik ve ortam tıkanması ile su birikintisi oluşturdu. Havuz bir yükseklik alanı ile simüle edilmiştir ve su yüzeyi ile etkileşime girebilen bir küre içermektedir..”

yansıma

WebGL'nin karşılaştığı en büyük sorun, belki de güvenliğidir. Wikipedia'ya göre, Birleşik Devletler Bilgisayar Acil Durum Hazırlık Ekibi (US-CERT), WebGL'nin keyfi kod yürütmesine, hizmet reddine ve hatta etki alanları arası saldırılara yol açabilecek birçok olası güvenlik sorunu içerdiği uyarısını yaptı. Bu, web sitesinin sahibine çok ama çok demek oluyor..

Bununla birlikte, Mozilla ve Google’ı içeren Khronos Grubu, olası güvenlik tehditlerine karşı güvenliği güçlendirmek için olası çözümler ve gelecekteki gelişme yaklaşımları önermektedir. WebGL'nin yetenekli ve profesyonel geliştiricilerin sergilediği pek çok olanağı olduğu için umarım sorunlar azaltılabilir ve gelecekte çözülebilir.!

Hangi denemenin sizi en çok şaşırttığını bize bildirin ve elbette bir tane varsa bize gösterin!

Daha fazla ilgili mesaj:

• HTML5 Web Sitesi: 48 Potansiyel Flash-Öldürme Demoları
• HTML5 Web Sitesi: 15 Daha Fazla Deney
• İlham Verici CSS3 Animasyon Demoları