Tarayıcı Oyunları: Relic Hunter'ı Three.js ve Yapay Zeka Görselleriyle Nasıl Yaptık?

Relic Hunter: Tapınak Çöküşü'nün gerçek bir tapınak gibi görünmesini istedim, bir video oyunu taklidi gibi değil. Yapay zeka görsellerinde oyma taşlar, sıcak meşale ışığı ve derin gölgeler vardı. İlk Three.js sürümümde ise tekrar eden kahverengi bir dokuyla kaplı kutular.

Bu farkı nasıl kapattığımı ve yapay zekayla üretilmiş tek bir koridoru gezilebilir bir labirente nasıl çevirdiğimi anlatıyorum. Relic Hunter, bilgisayarda ve mobilde çalışan, indirme ya da kurulum gerektirmeyen ücretsiz bir tarayıcı oyunu. O basit bağlantının altında bir izdüşüm sistemi, özel bir shader ve tek bir soruya göre tasarlanmış bir dizi pratik uzlaşma var: sinematik bir 3D oyunu bir web tarayıcısında nasıl hızlı yükletirsin?

Neden tarayıcı için bir 3D oyun yaptık?

Tarayıcı oyunlarının en büyük avantajı erişim. Oyuncu bir bağlantıya tıklayıp hemen başlayabilir. Merak ile ilk koşu arasında yükleyici, uygulama mağazası sayfası ya da hesap yok. Bu da ücretsiz tarayıcı oyunlarını keşfetmeyi, denemeyi ve paylaşmayı kolaylaştırıyor.

Kısıt şu: her ek model, doku ve animasyon oynamadan önceki bekleyişi uzatıyor. Bu yüzden Relic Hunter'ın, altı seviye boyunca az sayıda varlığı yeniden kullanabilen ama her koridoru kopyala yapıştır gibi göstermeyen bir görsel sisteme ihtiyacı vardı.

Görsel deneyin altındaki oyun

Relic Hunter, labirent gibi boyanmış sonsuz düz bir koridor değil. Altı seviyesinin her biri; kavşakları, alternatif yolları ve gerçek çıkmazları olan, üretilmiş bir labirentten kuruluyor. Koşudan önce haritayı incelemen için birkaç saniyen oluyor. Sayaç başlayınca rotayı hatırlaman, her kavşakta doğru yöne dönmen ve durmadan ilerlemen gerekiyor.

Bu onu kısmen labirent koşusu oyunu, kısmen hafıza sınavı, kısmen de tapınaktan kaçış yapıyor. Yanlış dönüş birkaç adımdan fazlasına mal oluyor: çöküş sayacı yanmaya devam ederken geri dönmen gerekiyor. M tuşuna basılı tutup haritaya yeniden bakabilirsin ama koşarken harita okumanın kendine ait bir baskısı var.

Kampanya boyunca üç ortak can taşınıyor. Tehlikeler önce teker teker geliyor, sonra iç içe geçmeye başlıyor: sallanan bıçaklara eğilmen, düşmüş kirişleri ve kırık zeminleri atlaman gerekiyor, oyma aslan başları da yolun üstüne ateş püskürtüyor. Beşinci seviyede Mira ya da Vikram sonunda Surya'nın güneş mücevheri Syamantaka'yı alıyor. Altıncı, tapınak arkanda yıkılırken kaçış.

Sıradan 3D dokular neden yanlış göründü?

Görsel yön, oyma taştan koridorların, sıcak meşale ışığının ve derin gölgenin yapay zekayla üretilmiş görselleriyle başladı. Durağan görüntü olarak ikna ediciydiler. İlk oynanabilir sürüm öyle değildi. Taşı sıradan bir doku olarak tekrarlamak karo gibi bir kutu verdi ve kaynak görüntünün en önemli kısmını, ışığını çöpe attı.

Bir fotoğraf büyük ölçüde ışığı sayesinde gerçek görünür: duvarın zeminle buluştuğu yerdeki yumuşak gölge, meşalenin etrafındaki parıltı ve salonun ucundaki karanlık. Tekrarlanabilir bir doku, dikişsiz döşenebilsin diye bilerek düzleştirilmiştir. Görüntüyü tekrar ettirmek için ışığı kaldırdığımda, onu gerçek hissettiren kısmı da kaldırmış oldum.

Tour Into the Picture: görüntüyü 3D'ye yansıtmak

Çözüm, Tour Into the Picture ya da kısaca TIP denen bir bilgisayar grafiği tekniğinden geldi. Kaynak görüntünün gerçek bir kamerayla çekildiğini düşün. Three.js sahnesinde karşılık gelen noktaya sanal bir kamera koyuyorum, ona eşleşen bir görüş veriyorum ve görüntüyü, bir slayt projektörü gibi, basit zemin, duvar ve tavan geometrisine yansıtıyorum.

O bakış noktasının yakınında koridor, orijinal görüntünün gölgelerini, parıltısını ve derinliğini korurken oyuncunun içinde gezebileceği bir mekan gibi davranıyor. Shader'da yüzeydeki her nokta projektörün görüntüsünde nereye düştüğünü soruyor ve o rengi örnekliyor. İlk başarılı prototip, bir tablonun içine yürümek gibi hissettirdi.

Oyuncu hareket edince çıkan beş sorun

1. Gerilme: oyuncu projektörden uzaklaştıkça görüntü daha çok bozuluyordu.
2. Delikler: yan açıklıklarda ve kaynak kameranın görüşü dışında kalan uzak yüzeylerde yansıtılmış ayrıntı yoktu.
3. Titreme: kavşaklarda izdüşüm yönü değiştirmek duvarların sıçramasına ya da pırıldamasına yol açıyordu.
4. Hareket bulanıklığı: zeminlerde ve yan duvarlarda tek bir kaynak piksel birçok ekran pikseline yayılabiliyordu.
5. Görüntüye gömülü ışık: yansıtılan görüntü zaten ışık içerdiği için sıradan gerçek zamanlı meşaleler onu yeniden aydınlatamıyordu.

Bu sorunları ekran görüntülerinde kaçırmak kolaydı, koşarken ise görmezden gelmek imkansız. Bu, grafikleri değerlendirme biçimimi değiştirdi: her iyileştirmenin, özenle seçilmiş tek bir kareyi değil, harekete, dönüşlere ve geri dönüşlere dayanması gerekiyordu.

Yayına giren karma sistem

Oyun uzun bir salon için tek bir projektör yerine, açık her koridor boyunca iki yönde projektörler yerleştiriyor. Her karede oyuncuyla aynı yöne bakan yakındaki projektörleri seçip sınırlı sayıda tanesini harmanlıyor. Oyuncu, görüntünün gerilmiş bir bulanıklığa dönüşeceği kadar işe yarar bir kaynaktan hiçbir zaman uzak kalmıyor.

Zor mimari noktalarda gerçek geometri kullanılıyor. Uç duvarlar, koridorun sonsuza uzadığı izlenimi vermesin diye oyma panolar alıyor. Yan açıklıklarda gerçekten delikli kemer panoları kullanılıyor ve her dönüş okunur oluyor. En iyi izdüşümün dışında kalan yüzeyler siyah yerine taşa dönüyor.

Son shader karma bir yapı. Her pikselde yansıtılan fotoğrafın ne kadar gerildiğini ölçüyor. Keskin kısımlar fotoğrafı koruyor. Dik, bulanıklaşmış yüzeylere net bir taş karosu harmanlanıyor. Bu karo, fotoğraftan bulanık bir aydınlatma ödünç alıyor. Koridorun nerede sıcak ya da karanlık olduğuna yine yapay zeka görüntüsü karar veriyor; karo hareket sırasında ince ayrıntıyı geri getiriyor. Anizotropik filtreleme ve mipmap'ler kalan dik açılı örnekleri keskinleştiriyor.

Karakterleri ve tuzakları ayrı tutmak

Koridor sahne. Mira, Vikram, sallanan bıçaklar, ateş püskürten aslan başları, düşmüş kirişler ve kırık zeminler ayrı etkileşimli katmanlar. Oyuncunun çarpabileceği, kaçabileceği ya da animasyonunu izleyebileceği her şeyin kendi nesnesi olması gerekiyor; bir tehlikeyi koridor görüntüsüne gömmek etkileşimi yassı gösteriyor.

Animasyonlu parçalar ayrı bir hattan geçiyor: ChatGPT ile hazırlanmış temiz kareler, Grok ile canlandırılmış kısa klipler ve Three.js sahnesine yerleştirilmeden önce yeşil perde temizliği. Dünyayı ve hareketli parçalarını ayrı tutmak ikisini de ayarlamayı kolaylaştırdı.

Bu yaklaşım web tarayıcı oyunları için ne anlama geliyor?

Modern web tarayıcı oyunları, sıradan bir sayfanın içinde gerçek zamanlı 3D grafik, özel shader'lar, animasyon, ses ve duyarlı girdi sunabiliyor. Relic Hunter bunu, ayrıntılı 3D ortamlardan oluşan ağır bir kütüphane yerine tek bir ana koridor görüntüsü, bir kemer panosu ve küçük bir taş doku seti ile yapıyor.

Sonuç, oyuncu koşup dönüp geri gelirken koridorları yapay zeka çizimlerinin havasını koruyan kompakt bir Three.js oyunu. Bu varlık tasarrufu indirme gerektirmeyen oyunlar için önemli: dosyalar küçüldükçe sayfayı açmakla gerçekten oynamak arasındaki boşluk kısalıyor.

Relic Hunter online nasıl oynanır?

1. Tarayıcında Relic Hunter: Tapınak Çöküşü'nü aç.
2. Kalıntı avcın olarak Mira'yı ya da Vikram'ı seç.
3. Her seviye başlamadan önce haritayı incele.
4. Kavşaklarda dön, tuzakların üstünden zıpla ya da altından eğil ve süre dolmadan çıkışa ulaş.
5. Syamantaka Mücevheri'ni al ve son çöküşten kaç.

Bir ücretsiz 3D tarayıcı oyunu, hızlı bir tapınak labirenti koşusu ya da hesap açmadan başlayabileceğin ücretsiz online tarayıcı oyunlarından biri arıyorsan bir koşuya başla ve güneş mücevherini gün ışığına çıkarıp çıkaramayacağını gör.

Relic Hunter'ı şimdi oyna. Ücretsiz, online ve indirme gerektirmiyor. · Daha fazla tarayıcı oyununa göz at · İndirmesiz ücretsiz oyunlar hakkında oku.