holodepth

Three.js · WebGL · 3D Web

Derinlik & detay 3D web rehberi

Kütüphanelerin mantığını, örnekleri ve en iyi uygulamaları tek yerde toplayan statik kaynak. Kayıt yok, gürültü yok.

Rehberlere göz at Kod örnekleri

Hızlı keşif

Z-Axis yolculuğu

Dört ana kulvara genel bakış: hangi araç ne işe yarar, tek cümlede. Detaylı içerik aşağıdaki katmanlarda açılıyor.

T.js

Three.js

En yaygın soyutlama: sahne grafiği, materyaller ve WebGL’i okunaklı kılar.

Detaya incele
WGL

WebGL

Tarayıcıdaki düşük seviye GPU API’si; shader ve buffer’ların doğrudan kontrolü.

Detaya incele
B.js

Babylon.js

Oyun ve üretim odaklı motor: fizik, araçlar ve playground ile hızlı iterasyon.

Detaya incele
GLSL

Shader’lar

Vertex ve fragment programlarıyla görüntüyü piksel düzeyinde şekillendirmek.

Detaya incele

Sahne içi kontrol

Orbit — iframe yok, doğrudan sayfada

Aynı origin üzerinde çalışan Three.js modülleri (OrbitControls) harici içerik yüklemeden, tipik dokümantasyon sitesi kadar güvenli bir yüzey sunar. Aşağıdaki alanda sahneyi sürükleyerek döndürün; kaydırma ile çakışmaz.

Çekirdek içerik

HoloDepth kütüphanesi

Softyla’daki gibi katmanlı derinleşme: zeminden ileri tekniğe doğru sıralı modüller. Her katman, bir sonrakinin önkoşulu gibi düşünülebilir.

Katman 0 — Temeller Zemini anlamak
  • HTML5 Canvas ve piksel koordinatları
  • Vektör, matris, dönüşüm (3B matematik girişi)
  • Koordinat sistemleri: dünya, kamera, clip alanı
Katman 1 — Three.js temelleri İlk kodlar
  • Scene, camera, renderer döngüsü
  • Işık, mesh, materyal, geometri
  • İlk animasyon ve kontroller
Katman 2 — İleri Three.js & Babylon.js Performans ve üretim
  • LOD, instancing, asset pipeline
  • Fizik, post-processing, XR girişi
  • Motor karşılaştırması ve seçim kriterleri
Katman 3 — Shader & WebGPU Katı teknik
  • GLSL: vertex ve fragment shader akışı
  • Gelişmiş efektler ve prosedürel içerik
  • WebGPU’ya geçiş ve compute düşüncesi