Extension Sistemi — glTF materyal uzantıları · Holodepth

Gezinme

Site yapısı

Ana sayfa Dokümantasyon Playground Örnekler Akademi

ByteOmi Köprü · Holodepth

Köprü İçerik Konulara girmeden önce genel bilgi edinmek ve sahne görsellerini incelemek için bu sıralamayı gez; ardından aşağıdaki Three.js konularına geç.

Canvas vs WebGL
GPU vs CPU
Three.js nedir?
Koordinat sistemleri
Vektör mantığı
Matrix nedir?
Shader nedir?
Render loop mantığı
requestAnimationFrame
Core & Script Base

Byteomi Algoritmaları

Elektronik simülasyonları

Bilim temelleri

Matematik

Vektörler, uzunluk & normalize
Matris çarpımı & 4×4 model–görüntü
İnterpolasyon: lerp, eğri & zaman
Trigonometri & döngüsel hareket

Fizik

Yerçekimi, ivme & kuvvet (motorlarda)
Kütle, momentum & sürtünme
Enerji & iş (basit model)
Çarpışma & tepki kütüphane köprüsü

Geometri

Koordinat sistemleri: dünya, nesne, clip
Öklid uzayı, mesafe & açı
Eğriler & yüzeyler (Bezier, üçgen ağı)
Normaller, teğet & yüzey yönü

Kütüphaneler & Motor

Three.js Ana Omurga

Kurulum & Çekirdek
- Geliştirme Ortamı
- Sahne & Renderer
  - Sahne
  - Renderer
- Kamera Giriş
- Kamera Türleri
Zaman & Hareket
- Animasyon Döngüsü & Zaman
- Lerp, Easing & Animasyon Mixer
Sahne & Geometri
- Object3D & Sahne Hiyerarşisi
- Geometri Giriş
- Geometri Alt Konuları
Materyal, Işık & Doku
- Işık Kaynakları
- Materyal Türleri
- Gölgeler
- İleri Geometri
- Environment & HDRI
- Doku & UV
  - Texture Temelleri
  - UV Mapping Mantığı
  - Wrapping & Repeat
  - Texture Optimizasyonu
  - Texture Türleri
    
    Albedo / Base Color
    
    Normal Map
    
    Roughness Map
    
    Metalness Map
    
    Ambient Occlusion (AO)
    
    Height / Displacement
Varlık & Etkileşim
- Yükleme & varlıklar
  - GlTF Pipeline (Görsel + Demo)
    
    Animation clips
    
    Material Mapping
    
    Node Hiyerarşi
    
    Skinning sistemi
    
    Scene Graph
    
    Texture Bağlama
  - Draco (Görsel + Karşılaştırma)
    
    Mesh sıkıştırma
    
    Öznitelik sıkıştırma
    
    Vertex quantization
    
    Sıkıştırma parametreleri
    
    Encode süreci
    
    Decode süreci
    
    Performans ve Web Worker
    
    Draco vs standart glTF
    
    Karar verme noktası
    
    Limitler ve trade-off
  - KTX2 Dokular (Görsel + Performans)
    
    KTX2 nedir?
    
    Basis Universal
    
    Transcoding süreci
    
    KTX2 encode süreci
    
    Doku boyutu & kalite dengesi
    
    Performance analizi
    
    Ne zaman KTX2?
    
    Limitler ve trade-off
  - Asset optimizasyonu (Kritik Blok)
    
    Doku formatları: performans vs. kalite
    
    Texture atlas
    
    Materyal optimizasyonu
    
    Geometri karmaşıklığı
    
    Overdraw problemi
    
    LOD sistemi
    
    CPU vs GPU darboğazı
- Çoklu model & sahne birleştirme
- Raycaster
Etkileşim ve Kontroller
Görüntü Sonrası
Motor, Performans & Yayın
- Fizik Motorları
- Profiling & Performans Analizi
  - FPS
  - CPU/GPU
- Yayın
  - Hosting
  - CDN
  - Önbellekleme
  - Bundle
İleri Konular

WebGL

WebGL Giriş
GPU & Render Pipeline
Buffer & Attribute Mantığı
Shader Sistemi (GLSL)
Matrisler & Dönüşümler
Texture Mapping
Lighting Modelleri
Framebuffer & Render Target
WebGL 2 (Gelişmiş Özellikler)

Babylon.js

Animation
EngineAndScene
GuiAndUi
MeshAndMaterial
Physics
Xr

HTML5 Canvas

Canvas Api And Context
Canvas Drawing And Paths
Render Loop And Animation
Performance And Optimization
Sprite And Asset System
Game Logic And Collision
Input And Interaction
Bridge From 2D To Webgl

İçerik & Üretim

Shader & GLSL

GLSL Sözdizimi & Türler
Vertex / Fragment

3D model formatları

glTF / GLB
OBJ
FBX

3D modelleme araçları

Blender pipeline
Diğer DCC (C4D, Maya…)

Platform & kalite

WebXR (VR / AR)

Giriş & VR / AR
Oturum, poz & XR karesi
Holodepth · mekânsal deneyim
Stereo & gecikme bütçesi

Performans & optimizasyon

FPS mantığı
CPU / GPU
Asset sıkıştırma & LOD

Ekosistem

Framework entegrasyonları

React Three Fiber
Vue + Three
Angular + Three

Oyun geliştirme

Oyun döngüsü & durum
Hareket & fizik

Asset pipeline

Model → optimize → export
CDN & dağıtım
Varlık yönetimi

Uygulama

Yakında Gerçek proje senaryoları izleği ayrıca hazırlanacak; şimdilik placeholder senaryolar kaldırıldı.

Gelecek & bonus

AI + 3D Yakında

AI destekli texture & materyal
Prosedürel sahneler

Hedef: Türkiye’de 3D web dokümantasyonunda referans olmak içerik sürekli genişleyecek.

holodepth

Three.js · WebGL · 3D web için Türkçe içerik haritası. Kayıt yok, odak kalitede.

Z-Axis yolculuğu Orbit vitrin HoloDepth katmanları

Bu sitedeki metin ve kod örneklerinin oluşturulmasında ChatGPT ve Google Gemini gibi yapay zeka araçlarından yararlanılmış; içerikler düzenlenerek yayımlanmıştır. Kodları kendi projelerinizde kullanmadan önce güvenlik, hata ayıklama ve performans açısından test etmeniz önerilir.

İkonlar: Harici bir ikon kütüphanesi (ör. Font Awesome) kullanılmamaktadır; arayüzde gördüğünüz ikonların çoğu satır içi SVG ile üretilmiştir.

Tarayıcı ve API uyumluluğu için referans: Can I use

Gizlilik politikası

Holodepth statik bir içerik sitesidir; ziyaretçi hesabı veya çerez tabanlı izleme sunulmamaktadır. Kişisel veri toplama veya üçüncü taraflarla profilleme yapılmaz. Yayınlanan bilgiler genel eğitim amaçlıdır.

Son güncelleme: 15.04.2026

Kullanım koşulları

İçerikler eğitim ve kişisel öğrenim için sunulur. Bilgiler ve kod örnekleri her zaman güncel veya hatasız olmayabilir; yapay zeka destekli üretimlerde ek doğrulama gerekebilir.

İçeriği kendi projelerinizde kullanırken doğrulama, güvenlik incelemesi ve uyumluluk testleri size aittir. Site sahipleri, içeriğin kullanımından doğabilecek doğrudan veya dolaylı zararlardan sorumlu tutulamaz.

Son güncelleme: 15.04.2026

Marka bildirimi

Bildirim: «Holodepth» ismi, tarafımızca yürütülen bir marka çalışmasının konusudur. Olası bir marka tescil çakışması veya isim benzerliği durumunda, yasal süreçlere başvurmadan önce tarafımızla iletişime geçmenizi rica ederiz. Amacımız, her iki taraf için de en uygun çözümü birlikte bulmaktır. İletişim: qubytstudio@gmail.com

Notice: The name «Holodepth» is the subject of a brand initiative undertaken by us. In the event of a potential trademark conflict or name similarity, we kindly ask that you contact us before initiating legal proceedings. Our aim is to find the most suitable solution together for both parties. Contact: qubytstudio@gmail.com

Statik site · çerez / hesap yok