VAKA ANALİZİ 03 / NEXUS INTERLINK
LOD küre: uzaydan sokağa.
Nexus, birbirine portallarla bağlı bağımsız 3D web mekânlarının haritası. Arayüzü bir dünya: uzaydan bakarsın, İstanbul'a inersin, sokağa kadar yaklaşınca harita mekâna dönüşür. "Google Earth gibi ama mesh olsun, sahiden yaklaşalım" isteğiyle başladı. Bu yazı, tek bir küre geometrisinin bunu nasıl yaptığını anlatıyor.
1. Küp → küre: eşit alanlı yama ağı
Klasik SphereGeometry kutuplarda sıkışır ve seviyeleri (LOD) böl-birleştir mantığıyla yönetmeye uygun değildir. Bunun yerine küpün altı yüzü, her biri bir dörtlü ağaç (quadtree) olarak, küreye eşit alanlı bir eşlemeyle sarıldı. Her yama kameraya uzaklığına göre dörde bölünüyor ya da geri birleşiyor; en ince seviyede bir yama birkaç yüz metreye denk geliyor.
// küp yüzündeki (x,y,z) noktasını küreye "eşit alanlı" taşır
out.set(
x*Math.sqrt(1 - y2/2 - z2/2 + y2*z2/3),
y*Math.sqrt(1 - z2/2 - x2/2 + z2*x2/3),
z*Math.sqrt(1 - x2/2 - y2/2 + x2*y2/3)).normalize();İlk denemede sarım yönü tersti (kürenin içini gördüm) ve yüzler köşelerde buluşmuyordu; ikisi de bu eşlemenin ve indeks sırasının düzeltilmesiyle bitti. Yamaların kenarlarında küçük "etek"ler (skirt) var; komşu yamalar farklı seviyedeyken oluşan çatlakları kapatıyor ama normal hesaplarına karışmıyor.
2. Kıta çizgileri: önce kaba, sonra 50 m
Sayfa ilk açıldığında kıyı şekli küçük bir yerleşik maskeden geliyor; arkada Natural Earth 50 m kara maskesi iniyor ve gelince yamalar yerinde yeniden kuruluyor. İlk sürümde bu yeniden kurulum yamaları silip sıfırdan diziyordu; kullanıcı bir saniye boyunca kürenin üstünde soluk bir kare görüyordu. Şimdi eski geometri, yenisi hazır olana kadar yerinde duruyor.
3. Mavi aura ve kuzey ışıkları: yalnızca shader
Atmosfer için doku yok. Kürenin biraz büyüğü, arka yüzleri çizilen ve toplamsal karıştırılan bir fresnel shader'ı: bakış açısıyla normal arasındaki açı büyüdükçe koyu maviden buz mavisine geçiyor. İnce bir iç katman yüzeyi hafifçe puslandırıyor. Kuzeyde 63°–78° enlemleri arasında bir LatheGeometry perdesi var; fbm gürültüsüyle dalgalanan yeşil-mor bir aurora. Kamera yüzeye indikçe aura kayboluyor, aurora kısılıyor.
float d = 1. - abs(dot(normalize(vN), normalize(vV)));
float f = pow(d, power);
gl_FragColor = vec4(mix(deep, edge, f) * (f*1.15 + pow(d, power*3.2)*1.6) * gain, 1.);4. Güneş sistemi ve tek kamera
Yedi gezegen ve Ay, sıkıştırılmış yörüngelerde aynı LOD küre sınıfından türetildi; her birine inilebiliyor. Tek bir perspektif kamera var: uzayda yüzlerce birim, yüzeyde santimetre. Yakın düzlem kameranın küreye uzaklığına göre her kare yeniden ayarlanıyor; aksi hâlde yüzeyde derinlik tamponu dağılıyor. Tekerlek "yakınlaştırma" değil, kameranın yüzeye doğru sürüklenmesi (dolly); İstanbul'a yeterince yaklaşınca kontrol şehir sahnesine devrediliyor.
5. Açık kaynak: kendi mekânını haritaya koy
Atlasın üstündeki "Mekân tasarla" sihirbazı, fotoğraf ve krokiden kendi 3D mekânını kuran herkesin kendi alan adıyla bu haritaya girmesini sağlıyor. Motor ZIP'i tarayıcıda paketleniyor, manifest kendi sitene koyuluyor, kayıt bir GitHub formuyla açılıyor. Kit ve kayıt deposu ayrı; herkes kendi API anahtarını ve alan adını kullanıyor.
Araçlar ve açık kaynak
- Three.js 0.180, GLSL shader'ları, Natural Earth 50 m (kamu malı) kara maskesi.
- Kurulum sihirbazı: /nexus/#kur. Nexus Kit ve kayıt deposu GitHub'da.
- Barındırma: Vercel, statik.