Willow Ferry

Açıklama

Willow Ferry, tarayıcıda canlı olarak render edilen bir Jiangnan su kasabası: beyaz duvarlar ve koyu kiremitler, at başı biçimli kalkan duvarları, fenerler asılı saçakların altında kafes işlemeli dükkân cepheleri, kanalın üzerinde taş bir kemer köprü, basamaklara bağlanmış wupeng tekneleri ve yeşim yeşili suya sarkan söğütler. Yükleme ekranı havayı baştan belirliyor: “Follow the water. Come home a little late.”

Kasabanın kendine ait bir günü var — altın saat, mavi saat, mehtaplı gece, şafak, sabah, öğleden sonra — ve bu gün yaklaşık yedi dakikada dönüp tamamlanıyor; güneş ve ay hiç durmadan hareket ediyor, gölgeler de onların ardından ağır ağır dönüyor. Saatlerin daha hızlı akması için T’yi basılı tutun ya da 1–5 tuşlarıyla doğrudan öğleden sonraya, altın saate, mavi saate, ay ışığına veya puslu yağmura atlayın. Puslu yağmur bir saat dilimi değil, bir hava durumu: Onu seçtiğinizde, başka bir saat dilimi seçene kadar zaman duruyor.

←/→ tuşları altı bakış açısı arasında geçiş yapıyor: Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist ve The Slow Boat. Her birine kısa bir cümle eşlik ediyor, bazıları saate göre değişiyor — altın saatte Willow Bank için “The sun rests in the arch.” yazıyor — Moon Bridge’in cümlesi ise Bian Zhilin’in “Parça” (断章) adlı şiirinin bir yorumu: “You stand on the bridge to watch the view. / From a window, someone watches you.”

Etrafa bakmak için sürükleyin, ileri süzülmek için kaydırın, WASD ile yürüyün (hızlanmak için Shift, yükselip alçalmak için Q/E) ve odaklamak için tıklayın. Diyafram düğmesi f/1.4’ten f/16’ya kadar kademe kademe ilerliyor ve son kademe alan derinliğini kapatarak her şeyi net hâle getiriyor; kamerada kapatılabilen, elde çekimi andıran hafif bir salınım (Drift) var, H ise arayüzü gizliyor. “Ride the boat” düğmesine bastığınızda tekne kanal boyunca süzülürken kamera kayarak pruvaya iniyor: ←/→ (A/D) ile dümen kırılıyor, ↑ (W) ile kürek daha güçlü çekiliyor, ↓ (S) ile tekne yavaşlıyor; tuşları bıraktığınızda tekne kendi rotasını yeniden buluyor. Teknenin ne kadar sapabileceği güzergâh boyunca ölçüldüğü için tekne asla kıyı duvarlarına, bağlı teknelere ya da köprünün kemerine çarpmıyor.

Kasabanın tamamı kodla yapılmış: Evler, taş kemer köprü, wupeng tekneleri, fenerler, söğütler, şeftali ağaçları ve kıyı duvarının taş blokları ile basamakları tamamen Blender Python script’leriyle üretilip GLB olarak dışa aktarılmış. Ev üreteci arsaları yerleştiriyor, ev tiplerini seçiyor, at başı kalkan duvarlarını yüksekliğe göre ayarlıyor ve araya duvarla çevrili küçük bahçeler sıkıştırıyor; yalnızca iskele basamaklarının yanında başrolü üstlenen ev elle yerleştirilmiş. Gökyüzü ve sıva, taş, ahşap ve çakıl yüzeylerin bir kısmı için Poly Haven’ın CC0 fotoğraf gökyüzleri ve taranmış dokuları kullanılıyor; geri kalan tüm dokular ve seslerin tamamı da script’lerden geliyor.

Arayüz yalnızca İngilizce; ses ilk tıklamanızla başlıyor. En iyi masaüstünde Chrome, Edge veya Safari’de çalışıyor; WebGPU bulunmadığında WebGL2’ye geçiyor. İlk ziyarette 40 MB’ın biraz üzerinde veri indirildiği için yükleme ekranı bir süre açık kalıyor.

Tarayıcıda nasıl çalışır

Web tarafı, Vite ile three.js r186 sürümünün WebGPU renderer’ı üzerine kurulu; modeller meshopt ile sıkıştırılmış. Modeller Blender’dan gelirken materyalleri isimlerine göre TSL’de yeniden oluşturuluyor: Su çizgisi lekeleri, yosun, kostikler, yıpranma, rüzgârda salınma ve pencerelerle fenerlerin gece ışıltısı tamamen shader’larda hesaplanıyor; aynı TSL materyalleri WebGL2 altında da çalışıyor.

Emeğin büyük kısmı suya harcandı: yansıma, kırılma, bulanıklık ve soğurma, güneşin ve ayın sudaki pırıltısı ile ay ışığının yolu, yağmur halkaları, rüzgârın sudaki izleri, teknenin dümen suyu ve pruvasının yarıp ittiği su. Gökyüzü, saat dilimleri arasında çapraz geçişle değişen bir Poly Haven fotoğraf gökyüzü; ortam ışığını ve güneşle ayın yönünü de o belirliyor. Bulut gölgeleri kasabanın, tepelerin ve suyun üzerinden süzülüyor, kanalın üzerinde alçak sis tabakaları uzanıyor; ateş böcekleri, havada uçuşan zerreler ve yağmur çizgileri de var.

Son işleme aşamasında SSAO (yalnızca ortam ışığı üzerinde), sis tabakaları, bloom, alan derinliği, renk derecelendirme ve FXAA ekleniyor. Otomatik odak, DSLR fotoğraf makinelerindeki gibi kadrajın merkezinden bir ışın göndererek çalışıyor (three-mesh-bvh ile hızlandırılmış); dilerseniz odak noktasını tıklayarak da seçebilirsiniz. Performansı korumak için sahne katmanlara ayrılmış: Örtü kiremitleri, kafes işleri ve pirinç aksamlar gibi ince ayrıntılar yalnızca ana görünümde çiziliyor ve 28 metrenin ötesinde tamamen gizleniyor; kanal tabanı ve çakıllar yansımalara girmiyor; taş işçiliği ve ağaçlar da SSAO ön geçişinin dışında tutuluyor. Ana ışığın gölgeleri ışık hareket ettiğinde, diğer zamanlarda ise her beş karede bir yeniden çiziliyor; teknenin parçaları yüklenirken materyale göre birleştiriliyor, çimenler ve kıyı duvarı taşları ise instancing ile çiziliyor.

Tüm sesler Web Audio ile canlı olarak sentezleniyor — tek bir ses dosyası bile yok: kıyıya vuran ve damlayan su (suya yaklaştıkça daha yüksek), söğütlerin arasında esen rüzgâr, gündüz kuşlar, gece cırcır böcekleri ve kurbağalar, uzaktan gelen bir tapınak çanı, tekneye bindiğinizde kürek vuruşları ve müzik olarak seyrek aralıklarla çalan pentatonik tel tınıları.