VAKA ANALİZİ 01 / THREE.JS

Gezilebilir atölye: performans bütçesi.

GÖKHAN BIYIK · 20 EYLÜL 2026 · THREE.JS 0.180 · VITE 7 · VANILLA JS

biyikgokhan.com bir "kaydır ve oku" sitesi değil; Karagümrük'teki atölyemin birinci şahıs kamerayla gezilen bir kopyası. Sokakta başlarsın, sarı lambanın altından geçer, masaya oturur, portaldan Esatpaşa'daki gökdelene atlarsın. Bu yazı, o deneyimi telefonda ve eski dizüstülerde 60 fps'ye yakın tutmak için verdiğim kararları anlatıyor.

1. Tek sahne, tek çizim listesi: statik mesh birleştirme

Atölyede yüzlerce küçük obje var: raflar, kutular, lehim büyüteci, kahve cezvesi, Telefunken stereo. Hepsi ayrı bir Mesh olsaydı her karede yüzlerce draw call doğardı. Sahne kurulduktan sonra bir batchStaticMeshes geçişi, aynı malzemeyi paylaşan ve hareket etmeyen her şeyi tek bir geometriye topluyor. Hareket edecek, tıklanacak ya da bir "istasyon" olacak objeler userData ile işaretlenip birleştirmenin dışında kalıyor.

// Bir objeyi birleştirmenin dışında bırakmak için tek satır yeter:
mesh.userData.dynamic = true;      // her kare hareket eder
mesh.userData.interaction = 'cezve'; // raycaster hedefi
mesh.userData.keep = true;         // kendi başına kalsın

Kural basit: obje sahneye "ne" olarak girdiğini kendisi söyler. Böylece yeni bir masa aksesuarı eklemek, birleştirme listesini elle düzenlemeyi gerektirmiyor.

2. Dünyalar ayrı parçalar: kod bölme ile tembel yükleme

Karagümrük atölyesi, Esatpaşa terminali ve ASML hologramı ayrı Vite parçalarında (chunk). Ana paket yalnızca sokak sahnesini ve HUD'u getiriyor; portal seçildiğinde diğer dünya import() ile iniyor. Modeller GLB, dokular WebP; ses dosyaları kullanıcı "SESİ AÇ" demeden yüklenmiyor.

3. Düşük sistem modu ve hologram optimizasyonu

Sitedeki en pahalı obje, evin karşısındaki arsada duran ASML litografi hologramı: yarı saydam katmanlar, canvas'a çizilen bir sayaç, dönen parçalar. İlk sürümde her kare çift taraflı çiziliyor ve kamera nerede olursa olsun güncelleniyordu. Optimizasyon üç adımdı:

• Yalnızca ön yüzler. side: FrontSide ve her parça için hesaplanmış sınır küresi; kamera görmüyorsa GPU'ya gitmiyor.
• Mesafeye göre kapat. Kamera evin içindeyken ya da 60 metreden uzaktayken hologramın update döngüsü hiç çalışmıyor.
• Canvas dokusunu seyrelt. Sayaç dokusu 512×128'e indirildi ve saniyede bir yeniden çiziliyor; her kare değil.

Sonuç: entegre grafikli bir dizüstünde hologram sahnesi 20 fps'den 55 fps'ye çıktı. Ölçüm için Chrome'un performans paneli ve sahne içindeki gizli fps sayacı kullanıldı.

4. Canvas SEO'ya kapalıdır: DOM yansıtma katmanı

Googlebot JavaScript'i çalıştırır ama canvas'ın içini okuyamaz. Bu yüzden ana sayfada, canvas'ın arkasında, aynı bilgiyi anlatan semantik bir HTML katmanı var: kim olduğum, atölyedeki mekânlar, seçili işler (alt metinli görsellerle) ve iletişim. Katman display:none değil; canvas'ın altında, gerçek bir bölüm olarak duruyor. WebGL açılamazsa kullanıcı da onu görüyor. Ek olarak Person ve WebSite için JSON-LD, llms.txt ve düz bir site haritası var.

5. Yapay zekâ bu mutfakta nerede?

Modelleme Blender'da, arka planda çalışan Python betikleriyle yapılıyor (kamera açıları, bölge isimleri ve yansıma pişirme dahil). Yapay zekâ; referans görsellerden malzeme paletleri çıkarmak, sahne betiklerini yazmak ve test etmek, seslendirme ve alt yazı üretmek için devrede. Kreatif kararlar (kadraj, ışık yönü, hangi obje nerede) her zaman elle veriliyor. Bu iş bölümü Nexus Kit'in harness paketinin de temeli.

Araçlar ve açık kaynak

• Three.js 0.180, Vite 7, vanilla JavaScript; React ya da SSR yok. Metin katmanı statik HTML olduğu için sunucu tarafı render'a gerek kalmadı.
• Blender 4.5 arka plan betikleri → GLB.
• Vercel üzerinde statik barındırma; kenar fonksiyonları yalnızca küçük bir API rölesi için.
• Kurulum sihirbazı ve harness: Nexus / Mekân tasarla.