Bluestone Lane

Açıklama

Bluestone Lane, tarayıcıda çalışan, üç ila dört dakika süren gerçek zamanlı bir eser. Yıkılmayı bekleyen eski bir sokağa alacakaranlık çökmüş: Yolun karşısındaki bütün kepenkler inik, duvarlarda boyayla daire içine alınmış 拆 (“yıkılacak”) karakteri var ve binalardan biri şimdiden yarı yarıya yıkılmış. Hâlâ yarı açık duran tek kepenk küçük bir ev aletleri tamirhanesine ait; yaşlı bir tamircinin bir radyo kasası, bir fotoğraf makinesi objektifi ve su borusundan bir araya getirdiği robot, içeride tezgâhın yanındaki bir taburede hâlâ oturuyor.

Başlamak için tıklayın; kamera sokaktan yürüyerek içeri giriyor ve dolaşıp robotun yüzünün karşısına geliyor. Robotun objektifindeki diyaframı açmak için farenin sol tuşunu ya da boşluk tuşunu basılı tutun — ilk deneme her zaman başarısız oluyor, bu yüzden bırakıp yeniden basılı tutun. Basılı tutmaya devam ederek fareyi hareket ettirin: Robot başını fareyle birlikte çeviriyor ve ışığı nereye düşerse geçmiş orada geri geliyor.

Birinci perde dükkânda geçiyor. Huzmenin dışında kalan her yer bugüne ait: Her şey tozlu ve solmuş, raflarda örümcek ağları, yerde sıva parçaları ve kırık camlar var; kolinin üstündeki televizyon, duvar saati, masa vantilatörü ve lambalı radyonun hepsi bozuk. Işığın düştüğü yerdeyse her şey eskisi gibi: Televizyonda programlar oynuyor, radyonun kadranı ışıldıyor ve bir melodi çalıyor, duvar saatinin sarkacı sallanıyor.

Bir süre sonra aynı melodi yolun karşısından belli belirsiz süzülüp geliyor. Robot dinlemek için başını çevirirken kadraj kapı ağzına doğru geri çekiliyor; ışığı tekliyor, şarkıya parazit karışıyor, görüntü durmadan senkronunu kaybediyor ve son bir yırtılmayla ikinci perdeye geçiliyor.

İkinci perde sokakta geçiyor. Huzme yolun karşısındaki beş dükkândan hangisine düşerse o dükkân 1990’ların ortasından bir akşama geri dönüyor — içeride ışıklar yanıyor, balkonlarda çamaşırlar asılı, kapı önündeki alçak taburelerde komşular oturuyor — ve o dükkânın seslerini duyuyorsunuz. Bulduğunuz dükkânlar ışıklı kalıyor; henüz bulmadıklarınız tabelaları ve sesleriyle sizi çağırıyor. Siz baktıkça enerji azalıyor. Robotun son bakışı melodinin geldiği elektronik dükkânına dönüyor ve bütün sokak bir anlığına aydınlanıyor; ardından enerji tükeniyor, huzme kesik kesik titreyip sönüyor, şarkı yarıda kesiliyor ve sokak bugünkü hâline dönüyor. Final sahnesi dükkânın içinden dışarıya bakıyor: Robot hâlâ karanlık sokağa dönük, yolun karşısında bir lamba yanıyor ve son satırda şöyle yazıyor: “Sokağı ışıkları yanan hâliyle hatırlıyor.”

Kapanış kartından sonra tıklayarak yeniden izleyebilirsiniz. Arayüz varsayılan olarak İngilizce, başlık ekranındaki bir bağlantıyla Çinceye geçilebiliyor; telefonda ekrana basılı tutup parmağınızı kaydırın. Kulaklık takmanız ve güncel bir Chrome ya da Edge gibi WebGPU destekli bir tarayıcı kullanmanız öneriliyor; WebGPU desteklemeyen tarayıcılar otomatik olarak WebGL2’ye geçiyor. İlk yüklemede modellerin indirilmesi ve shader’ların önceden derlenmesi biraz zaman alıyor.

Tripo nasıl kullanıldı

Tripo, tamirhanedeki yirmiden fazla nesneyi üretti: robot, iki lambalı radyo (biri tamir için açılmış, diğeri kapalı), iki CRT televizyon, bir masa vantilatörü, bir duvar saati, bir çalar saat, bir kasetçalar, bir masa lambası, bir havya, bir büyüteç, bir alet çantası, bir parça dolabı, çalışma tezgâhı, 28 jant klasik bir bisiklet, bir termos, bir emaye kupa ile yedek kol, bacak ve gövde — bunlara özel olarak hazırlanmış dört bozuk versiyon da ekleniyor. Odanın duvarları ve zemini, raflar ve üzerlerindeki koliler, kablolar, alet duvarı ve tezgâhın üstündeki küçük eşyalar kodla oluşturulmuş geometri; yolun karşısındaki dükkân sırası ise model değil, üretilmiş iki fotoğraf (“şimdi” ve “o zamanlar”).

• Referanstan modele: Her nesnenin ilk hâli, düz açık gri bir arka plan üzerinde bir ürün render’ı; bu görsel ardından Tripo’ya veriliyor. Modellemeye geçmeden önce tamir için açılmış radyo üzerinde üç yaklaşım karşılaştırıldı — doğrudan image-to-3D, görselden çoklu görünüm üzerinden 3D’ye ve elle birleştirilmiş dört görünümlü bir sayfadan 3D’ye — ve modellerin çoğu görsel → çoklu görünüm → 3D yolunu izledi; geometri ve dokular ayrıntılı ayarda üretildi, PBR haritaları eklendi ve dokulara pişirilmiş aydınlatma kaldırıldı, böylece aydınlatmayı masa lambası, dışarıdaki alacakaranlık ve robotun huzmesi üstleniyor.
• Robot: Tripo robotu tek bir mesh olarak teslim etti — baş, gövde ve tabure birbirine kaynaşmış hâldeydi. Yazar başı kesip ayırmak yerine vertex shader’da robota bir “yumuşak boyun” verdi: Konumdan hesaplanan bir ağırlık, radyo kasasından yapılmış başta 1, gövdede ve omuzlarda 0 değerini alıyor, boyunda ve çevresindeki kablolarda ise kademeli olarak değişiyor; böylece baş döndüğünde her köşe noktası, açıdan kendine düşen pay kadar boyun etrafında burkuluyor. Hiçbir yer kesilmediği için hiçbir dikiş açılamıyor ve baş döndükçe kablolar boynun etrafına sarılıyor. Tabure bir Blender script’iyle ayrıldı; böylece ikinci perdede robotun tamamı tabure üzerinde dönerek sokağa yöneliyor. Yüzündeki krom “上海” (Şanghay) amblemi ve göğsündeki “人民电器” (Halk Elektrik) plakası modelin kendi geometrisinin parçası; duvar kancalarında asılı duran ve tezgâha yaslanmış yedek kol, bacak ve gövde de aynı tasarımdan üretildi.
• Bozuk versiyonlar: Huzmenin dışındaki bugün ile içindeki geçmiş birbirini tutsun diye kolinin üstündeki televizyon, duvar saati, masa vantilatörü ve lambalı radyonun her biri için ikinci, yıpranmış bir versiyon yapıldı — referans görsel hasarlı görünecek şekilde yeniden düzenlendi, ardından aynı Tripo ayarlarıyla modellendi. İki versiyon da aynı noktada duruyor: Huzmenin değdiği pikseller sağlam olanı, geri kalanlar bozuk olanı gösteriyor.
• Ham mesh’ler web’de: Her ham Tripo modelinde yaklaşık 1,9 milyon üçgen ve 4K dokular var (robotta 8K). Yazar bunları Blender’da decimate etmek yerine — bu yöntem doku dikişlerini yırtıyor ve yakından bakınca beyaz çatlaklar bırakıyor — dikişleri koruyarak meshopt ile sadeleştirdi ve her birinin hatası ölçülmüş birkaç ayrıntı düzeyine ayırdı. Çalışma zamanında her nesne yalnızca hatası bir ekran pikselinin altında kalan ve dokusu ekrandan daha kaba olmayan düzeyi gösteriyor: uzakta daha basit düzeyler, yaklaştıkça daha ince olanlar. Canlı sitede en ince düzey ham mesh’ten yalnızca milimetrenin küçük bir kesri kadar sapıyor. Önce daha kaba düzeyler yükleniyor, geri kalanlar gerektikçe akış hâlinde geliyor ve video belleği bütçesini aştığında yeniden serbest bırakılıyor.
• Model görüntüleyici: İnceleme modu için adrese ?review ekleyin; bu modda sahne parlak bir inceleme ışığıyla aydınlatılıyor. Kamerayı döndürmek için sürükleyin, yakınlaştırmak için kaydırın ve hazır görünümler için 1–8 tuşlarına basın. Herhangi bir modele çift tıkladığınızda kamera süzülerek ona yaklaşıyor; sol alt köşede modelin adı ve ham Tripo üçgen sayısı beliriyor.

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

Oyun motoru yok: Eser, Vite ile doğrudan three.js’in WebGPU renderer’ı üzerine kurulu; WebGPU desteklemeyen tarayıcılar otomatik olarak WebGL2’ye geçiyor.

Geçmiş piksel piksel hesaplanıyor. Robotun gözü bir ışık konisi yayıyor ve render sırasında her pikselin bu koninin içinde olup olmadığı test ediliyor: Koninin içinde sağlam modeller, açık televizyonlar ve daha sıcak bir renk derecelendirmesi var; dışında ise tozlu, solmuş bugün — bozuk ve sağlam versiyonlar da aynı maskeye göre yer değiştiriyor. Yolun karşısındaki iki fotoğraf da şimdi ile o zamanlar arasında aynı şekilde geçiş yapıyor; elektronik dükkânının vitrini ise gerçek, küçük bir 3D dükkân ve içindeki televizyonlarda da programlar oynuyor.

Hızlı açılmasını ve akıcı oynamasını üç şeye borçlu. Tüm shader’lar asenkron ve paralel olarak derleniyor; shader’ı henüz hazır olmayan bir nesne, kareyi bekletmek yerine o karede basitçe atlanıyor. Yükleme ekranı her nesneyi her geçişte (derinlik ön geçişi, ana geçiş ve her bir gölge haritası) birer kez çiziyor; böylece başlamak için tıkladıktan sonra hikâyenin ortasında hiçbir şey derlenmiyor. Son olarak render yaklaşık 2,1 milyon pikselle (kabaca 1080p) sınırlanıyor ve kareler uzun sürdüğünde çözünürlük otomatik olarak düşüyor. Bir model ayrıntı düzeyi değiştirdiğinde iki düzey, birbirini tamamlayan rastgele piksel kümeleri üzerinde aynı anda çiziliyor ve 0,35 saniye içinde çapraz geçişle birbirine karışıyor; zamansal kenar yumuşatma geçişi pürüzsüzleştirdiği için yakından bakıldığında hiçbir şey bir anda “sıçramıyor”. Düşük kalite modu için adrese ?q=low ekleyin (ortam perdeleme ve ekran uzayı yansımaları kapalı, gölge haritaları yarı boyutta).

Ses, CC0 saha kayıtlarını Web Audio sentezleriyle katman katman birleştiriyor: dışarıda alacakaranlıktaki sokak, floresan lambanın ve şebeke elektriğinin uğultusu, sarkacın tıkırtısı, bir televizyon test tonu, robotun servo motorları ve gözünün açılma sesi — radyodaki melodi ise özgün bir pentatonik ezgi. İkinci perdede yolun karşısındaki her dükkânın kendine ait bir sesi var.

Yazar bu süreçte three.js r186 sürümünün WebGPU renderer’ındaki bir hatayı da düzeltti: İki model yalnızca normallerinin saklanma biçiminde (Int8’e karşı Int16) farklı olduğunda renderer onların tek bir pipeline’ı paylaşmasına izin veriyor; bu yüzden hangisi ikinci çizilirse köşe noktalarını yanlış formatta okuyor ve yüzeyi kamuflajı andıran karmakarışık bir ışıkla aydınlanıyor. WebGL2 bundan etkilenmiyor.