holodepth

ByteOmi × Holodepth · Three.js

ByteOmi Engine Presets

byteomi.com üzerindeki Core & Script Base içeriği kuramsal omurgayı anlatır; bu sayfa ise aynı çizgide Holodepth’ta çalışan sahne ve kod örnekleri toplayan preset alanıdır. Aşağıda kısa bağlam, planlanan görsel preset’ler ve ileride eklenecek canlı sahne yer tutucusu bulunur.

ByteOmi ile hizalama

Ana sitedeki Core & Script Base akışı; sırasıyla entry point, sahne bootstrap, renderer, kamera, resize ve pixel ratio disiplinini işler. Holodepth tarafında bu sayfa, her biri için ayrı ayrıntı sayfalarına (Sahne, Renderer, Kamera vb.) köprü kurar; burada ise tek bakışta anlaşılan küçük sahnelerle aynı fikirleri pekiştireceğiz.

Metin ağırlıklı içerik ByteOmi’de kalır; Holodepth’te odak görsel doğrulama ve kopyalanabilir minimal kod üzerindedir.

Preset yol haritası

  1. Önyükleme sırası (boot): Core → Resource → World → Interaction → Loop adımlarının sahne üzerinde sırayla vurgulanması; ByteOmi’deki boot diyagramıyla aynı fikir, CameraHelper frustum çizgisi olmadan.
  2. Resize & DPR: pencere veya konteyner boyutu değişince sahne ve kameranın birlikte güncellenmesi; ByteOmi’deki ilgili başlıklarla bire bir.
  3. Boot sırası: Core → kaynak → dünya → etkileşim → döngü; görsel akış şemasına denk kısa animasyon veya adım adım vurgu.

Sahne model önerileri

A. Önyükleme sırası (boot lane)

ByteOmi Core & Script Base girişindeki Boot Sequence (Core → Resource → World → Interaction → Loop) akışını, sahne üzerinde beş düğüm + bağlayıcı hat ile okuturuz. Bu, “entry point’ten döngüye hangi sırayla gidilir?” sorusunun görsel karşılığıdır; CameraHelper kullanmadığımız için yakın düzlem / merkez çizgileri gibi yanlışlıkla UI sanılabilecek wireframe yoktur.

  • Core — clock, renderer, kamera temeli.
  • Resource — yükleyici ve varlıklar (burada yalnızca adım vurgusu).
  • World — ışık, zemin, ilk objeler.
  • Interaction — girdi ve kontroller (son aşama).
  • Loop — requestAnimationFrame ile güncelle / çiz.

Canlı sahne

Zemin GridHelper, kısa AxesHelper, beş OctahedronGeometry işaretçi ve aralarında ince bir Line “ray”. Aktif adım parlaklaşır; zaman delta ile akar (hareketi azalt açıksa sadece adım sırası ilerler, ölçek animasyonu yumuşar).

Konteyner ResizeObserver; sekme gizliyken rAF durur; pagehide ile dispose. İstersen aynı kalıba Sprite ile etiket metni eklenebilir.

B. “The Bounding Box” (soyut çekirdek)

İstersen düşük poligonlu, yarı saydam bir soyut motor çekirdeği (kutu veya wireframe kombinasyonu); etrafında hafif dönen çizgiler veya basit bir materyal ile yaşam döngüsü akışı hissedilebilir. İleri aşamada shader ile “enerji halkası” sade tutulabilir; UI’ı şişirmeden güven veren bir odak noktası olur.

Etkileşim fikri: ByteOmi’de “Resize” başlığına gidildiğinde (veya hash / mesaj ile) bu sayfadaki sahne kısa bir ölçek uyum animasyonu ile tepki verebilir — teoride anlatılan resize disiplininin canlı kanıtı.

Canlı sahne

Birinci preset ile aynı viewport / resize / dispose altyapısı: GridHelper, AxesHelper, hafif ışık. Üzerine yarı saydam kutu + EdgesGeometry. CameraHelper yok — sahne sade kalır. Aşağıdaki düğme, “resize / ölçek uyumu” fikrine paralel kısa bir ölçek uyarımı animasyonu tetikler.

İleride postMessage veya ortak hash ile ByteOmi sayfasından tetiklenebilir.

İleride genişletilebilecek fikirler

  • Pixel ratio barı: cihaz DPR’sini ve setPixelRatio tavanını gösteren küçük HUD.
  • Etiketli boot: her düğümde Sprite veya HTML overlay ile Core / Resource / … metinleri.
  • İkinci kamera: Orthographic vs Perspective karşılaştırması için çift görünüm.

Özet ve sonraki adımlar

İki preset yukarıda çalışır: Boot sırası (ByteOmi boot diyagramı, CameraHelper yok) ve Bounding Core (soyut kutu + ölçek demosu). Üçüncü aşamada DPR HUD, CameraHelper ile ayrı bir frustum derinlemesi veya çift kamera karşılaştırması aynı doc-byteomi-presets.js kalıbıyla eklenebilir.