Tarayıcıda açık dünya geliştirmek, bölüm 1: İşe onu bozmaya çalışarak başladık
Cinevva CTO'su ve Kurucu Ortağı Oleg Sidorkin tarafından
Burada yeni misiniz? Seri rehberine göz atın. Rehber, spike'ın ne olduğunu açıklıyor ve tüm bölümlere bağlantı veriyor.
Tamamen tarayıcıda çalışan çok oyunculu bir açık dünya geliştiriyoruz. Kurulum yok, uygulama mağazası yok; yalnızca bir URL var. Başlangıçtaki en büyük risk açıktı: Bir tarayıcı, oynanış, fizik ve ağ iletişimi için yeterli pay bırakırken kalıcı bir 3D dünyayı oynanabilir kare hızlarında işleyebilir mi?
Çoğu açık dünya projesi öngörülebilir bir sırayla başarısız olur. Önce güzel bir konsept elde edersiniz. Ardından hoş görünen bir sahne oluşturursunuz. Sonra da henüz oynanış ortada yokken kare bütçenizin çoktan tükendiğini fark edersiniz.
Başka herhangi bir şeye yatırım yapmadan önce render bütçesi sorusunu yanıtlamak istedik. Bu yüzden Spike 1, gösterişli fragmanı es geçti ve doğrudan ölçüm yapmaya odaklandı.
Spike 1'i yeni sekmede aç ↗ · Kaynak kodunu görüntüle
Kurulum bilerek basit tutuldu. 512 metrelik bir arazi mesh'i, ada kenarlarına doğru alçalan katmanlı sinüs gürültüsüyle oluşturulan prosedürel yükseklik, bir su düzlemi, atmosferik sis ve örneklenmiş 500 nesne. Three.js ile sade WebGL, ACES ton eşleme kullandık ve gölgeleri devre dışı bıraktık.
Nasıl göründüğünü önemsemedik. Kamerayı sahnede hareket ettirirken sahnenin kararlı kalıp kalmadığını önemsedik.
Bu spike'tan tüm projeye yön veren iki sonuç çıktı.
İlk olarak, ilk geçişi disiplinli tuttuğumuz sürece masaüstünde gerçekten yeterli performans payımız olduğunu doğruladık. Bu da daha sonra daha zorlu arazi mimarisini denemek için bize güven verdi.
İkinci olarak, bir temel performans sözleşmesi oluşturduk. Sonraki her spike, maliyetini bu sahneye kıyasla açıklamak zorundaydı. Yeni bir özellik iyi görünüyor ancak maliyeti çok yüksekse bir üst aşamaya geçirilmedi.
Bu temel ölçüm disiplini; daha sonra parça birleşim artefaktları, karma LOD geçişleri ve compute tabanlı mesh üretimiyle karşılaştığımızda kritik önem kazandı. Kararlı bir referans olmadan her hata gerçekte olduğundan daha büyük görünür.
- bölümde render'dan girdi hissine geçiyoruz. Worker fiziği, mimari belgelerinde kulağa harika gelir. Ancak bir tuşa bastığınızda karakter hâlâ anında tepki veriyorsa anlam taşır.
Bu bölümde değinilen teknolojiler
Heightmap arazisi. Her hücrenin tek bir yükseklik değeri sakladığı 2D bir ızgaradır. GPU, arazi yüzeyini oluşturmak için düz bir mesh'i vertex shader'da deforme eder. Heightmap'ler kompakttır (65x65'lik bir parça, 16 bitte yaklaşık 8 KB'dir), GPU dostudur ve hızlı işlenir. Sınırlamaları ise mağaraları, çıkıntıları veya kendi üzerine kıvrılan herhangi bir yüzeyi temsil edememeleridir. Heightmap kısıtlamaları ve bunlardan sonra gelen yaklaşımlar hakkında bilgi için arazi üretimi rehberimize bakın.
Three.js. Bu proje boyunca kullandığımız render kütüphanesidir. Three.js, WebGL 2'yi (ve daha sonra WebGPU'yu) kameralar, ışıklar, malzemeler ve geometri nesneleri içeren bir sahne grafiği hâlinde soyutlar. Aynı geometrinin çok sayıda kopyasını tek bir draw call ile işlemek için InstancedMesh, görüş hacmi ayıklama, PBR malzemeleri ve son işleme özellikleri sunar. Bkz. GitHub'da Three.js. Three.js'in tarayıcı tabanlı açık dünya teknoloji yığınındaki yeri için tarayıcıda 3D teknolojileri rehberimize bakın.
InstancedMesh. Aynı geometrinin N kopyasını, her biri farklı bir konumda/döndürmede/ölçekte olacak şekilde tek bir draw call ile işleyen bir Three.js özelliğidir. Örnek başına dönüşümler bir matris öznitelik tamponunda saklanır. Spike 1'de 500 nesneyi 500 ayrı draw call kullanmadan bu şekilde işledik. Büyük ölçekli bitki örtüsünde GPU tabanlı örnek ayıklama bu yaklaşımı daha da ileri taşır. GPU ile bitki örtüsü ayıklamayı ele alan arazi rehberimize bakın.
Kare bütçesi. 60 fps'de her karede JavaScript mantığı, fizik, render ve birleştirme dâhil her şey için
12 bölümün 1.'si.
Sıradaki: Bölüm 2 - Worker fiziği ve girdi gecikmesi korkusu
Seri rehberi: /tr/blog/2026-02-25-open-world-browser-series-guide