holodepth

Three.js · Işıksız çizim

MeshBasicMaterial: Işığın Olmadığı Saf Renk Dünyası

Gölgelenme yok — piksel neyse o

Bir sahnede tüm ışıkları kapattığınızı hayal edin… Ama nesneler hâlâ ilk anki gibi görünür. Fiziksel evrende imkânsız olan bu davranış MeshBasicMaterial'in doğasıdır. Güneş mi var zifiri karanlık mı fark etmez; verilen renk veya doku her zaman aynı parlaklıkta ekrana yazılır. Bu yüzden renk ve parlaklık kararları tamamen sizin verdiğiniz veriye bağlıdır — sahne ışığı “ipucu” vermez, yalnızca yanınızdaki ışıklı materyallerde görünür.

Önkoşul: Materyal giriş; bu sayfada dizideki ilk somut materyal sınıfı. Aşağıdaki sahnede ışıksız küre ve panel ile MeshLambertMaterial torusu yan yana; ilk ışıklı tür için sıradaki başlık MeshLambertMaterial. Üçlü özet tablo: Basic vs. Lambert vs. Phong.

Nasıl düşünmelisin?

3D derinliği bir süreliğine bırak

  • Shading (gölgelenme): Yoktur.
  • Işık etkileşimi: Yoktur.
  • Sonuç: Yalnızca saf piksel verisi.

Tasarım açısından Basic, “bu nesne şu an ne renk olsun?” sorusunun cevabını tek kanaldan verir: ışık yönü, gölge yönü veya yüzey normallerinin aydınlatmadaki rolü devrededir. Bu, ürün görselleştirmede bazen istenen marka renginin ekranda birebir korunması, bazen de prototipte ışık değişkenliğini tamamen elemek için tercih edilir.

Çalışma mantığı: ışık ve gölge yokluğu

Gerçek dünyada her nesne ışığı yansıtır; dijitalde bazen yalnızca saf veri görmek isteriz. MeshBasicMaterial, GPU üzerindeki en hafif materyaldir: ışık için shader yükünü fiilen devre dışı bırakır.

Işıklı materyallerde her karede yüzey yönü, ışık vektörü ve mesafe gibi terimler bir araya gelir; Basic’te ise çoğu zaman fragment rengine doğrudan yaklaşırsınız. Bu, mobil veya düşük güçlü cihazlarda “bir nesneyi sabit renkle çizmek” senaryosunda hem maliyet hem de deterministik görünüm sağlar — aynı sahneyi kaydedip tekrar oynattığınızda Basic yüzeyin tonu, ışık listesi değişmedikçe aynı kalır.

Unutmayın: ışık yok demek “ekranda hiçbir şey etkilenmez” demek değildir. Örneğin sis (fog), tone mapping veya renderer’ın renk uzayı ayarları Basic üzerinden de uygulanabilir; fark, yüzeyin kendisinin ışık modeli hesaplamamasıdır.

  • Düz görünüm: Yüzeyde gölgelenme oluşmaz; küreye uygularsanız hacim yerine düz bir disk hissi oluşur.
  • Sabit renk: Tanımlanan renk neyse pikseller o tonla boyanır.

Ne kontrol edebilirsin?

Kısıtlı ama net

  • Color: Dış etkenden bağımsız ham renk.
  • Map: Doku; ışıkla solmadan dosyadaki renkleri görmek için.
  • Opacity & transparent: Şeffaf, “hayalet” benzeri görünüm.

wireframe ile geometri tel kafes olarak çizilir; bu da Basic’in “ham veri” felsefesiyle uyumludur — telin rengi yine ışıktan bağımsızdır. side (ör. çift yüz), depthTest / depthWrite ve blending gibi seçenekler ise görünürlük ve sıralama sorunlarını çözer; yine bunlar optik kontrol katmanıdır, gölge üretmezler.

Neden “düz” (flat) görünür?

Derinlik ipuçları

Beyin derinliği ışık–gölge kontrastıyla okur. Işık hesabı olmayan yüzeyde ton tek düze kalır; hacim çoğu zaman yalnızca hareket ve perspektifle fark edilir.

Bu yüzden aynı küreyi Basic ile “heykel” gibi okutmak zordur; kamera hareketi, arka plan kontrastı veya yanına ışıklı bir referans nesnesi koymak gibi bağlamsal ipuçları gerekir. Aşağıdaki interaktif sahnede tam olarak bu ayrımı gözlemleyebilirsiniz: torus parlaklığı ışıkla değişir, Basic küre ve panel aynı renkte kalır.

İnteraktif: “Işık yok” testi

Ölçüler demo sabitleri tablosunda diagram-basic-material.js ile eşlenir.

Üstteki kısa metin (readout) ışık anahtarının yalnızca MeshLambertMaterial torusuna etkisini hatırlatır; küre segmentini düşürüp önden bakmayı deneyerek poligon sayısı ile “düz disk” illüzyonunu ilişkilendirin. Doku paneli, harici dosya yüklemeden prosedürel bir örnektir — üretimde aynı mantıkla CanvasTexture veya küçük veri dokuları kullanılabilir.

Premium sahne · MeshBasicMaterial —

Düşük segmentte küre önden bakınca “düz disk”e yaklaşır. Doku paneli yalnızca yerel canvas desenidir (harici URL yok). Sahne ışıkları yalnızca yandaki MeshLambertMaterial torusu için görsel kanıt sağlar; Basic küre ve panelin rengi değişmez — ışık hesabı yoktur.

Demo sabitleri tablosu (MeshBasicMaterial sahnesi)

initBasicMaterialDemo · ışıksız küre ve panel ile MeshLambertMaterial referans torusu aynı karede.

initBasicMaterialDemo · Basic “ışık yok” lab
Sahne / rol Parametre Değer Tür
Renderer WebGLRenderer antialias: true · alpha: false · powerPreference: high-performance · setPixelRatio(min(dpr, 2)) · SRGBColorSpace · arka plan 0x05060c 🔒 Sabit
Izgara GridHelper boyut 14 · bölüm 28 · renkler 0x3a4a6a / 0x1a2030 · y = -0.52 🔒 Sabit
Basic küre MeshBasicMaterial / SphereGeometry renk 0x5ec8ff · yarıçap 1 · segment (UI) 4…64 · konum (-0.35, 0.62, 0) 🔒 + ↔ UI
Basic panel CanvasTexture / PlaneGeometry canvas 256×256 · dama 8×8 · renkler #2a3548 / #6eb8ff · düzlem 1.4×1.4 · konum (1.95, 0.62, 0.05) · rotation.y -0.42 🔒 Sabit + ↔ UI
Referans torus MeshLambertMaterial renk 0xd4a574 · TorusGeometry(0.36, 0.11, 18, 40) · konum (0.05, 0.62, 1.28) · rotation.x 0.35 🔒 Sabit
Sahne ışıkları AmbientLight / DirectionalLight ortam 0xffffff · 0.4 · yönlü 1.2 · konum (3.2, 5.5, 2.8) · grup başlangıçta kapalı 🔒 + ↔ UI
Kamera PerspectiveCamera FOV 42 · yakın/uzak 0.06 / 80 · konum (-0.35, 1.05, 4.85) · lookAt(-0.2, 0.55, 0) 🔒 Sabit
OrbitControls damping / mesafe enableDamping · 0.06 · hedef (-0.15, 0.55, 0) · mesafe 2.2…14 🔒 Sabit
Segment clamp applyGeometry max(4, min(64, round(range))) · varsayılan 14 🔒 + ↔ UI
HTML başlangıç toggles doku paneli açık · wireframe kapalı · sahne ışıkları kapalı 🔒 + ↔ UI

Önemli kod kesiti

Küre segmenti her değişimde geometri yeniden üretilir; taban renk MeshBasicMaterial ile ışıktan bağımsız kalır. 

function applyGeometry() {
  const segs = segRange
    ? Math.max(4, Math.min(64, Math.round(Number(segRange.value))))
    : 14;
  sphere.geometry.dispose();
  sphere.geometry = new THREE.SphereGeometry(1, segs, segs);
}

Yaygın hata: “Basic kalitesizdir”

Basit ≠ kötü

Skybox, sahne içi UI veya wireframe için gerçekçi ışık hesaplamak çoğu zaman gereksiz GPU harcamasıdır. Profesyonel geliştirici, nerede gerçekçilikten feragat edip hıza odaklanacağını bilir.

Tersine, “nesne gerçekten metal mi, mat mı, ortam ışığına göre nasıl soluyor?” gibi sorularınız varsa Basic doğru araç değildir; bu noktada Lambert veya PBR ailesine geçmek gerekir. Basic’i yanlış beklentiyle ışıklı sahneye gömmek, “materyal bozuk” hissi yaratır — oysa sorun çoğu zaman yanlış materyal seçimidir.

Basic vs. Lambert vs. Phong

Aşağıdaki tablo, üç sınıfı ışık modeli ve derinlik okuması açısından yan yana koyar; teknik parametre listesi değil, “hangi soruya hangi materyal cevap verir?” özetidir. HoloDepth akışında Basic’ten sonra tipik olarak Lambert ile mat ışık, ardından ihtiyaç halinde Phong veya daha modern yüzeylere geçilir.

Özet

Materyal
Işık durumu
Derinlik hissi
MeshBasicMaterial
Işık yok
Çok düşük (düz)
MeshLambertMaterial
Işık var (mat)
Orta (yumuşak)
MeshPhongMaterial
Işık + parlama
Yüksek (plastikimsi)

Uygulama: temel ve ileri kullanım

Aşağıdaki örnekler iki uç kullanımı gösterir: biri geometriyi şeffaflaştıran wireframe çizimi, diğeri doku haritalı yarı saydam bir yüzey. Üretimde doku yolu genelde TextureLoader veya önbelleğe alınmış bir atlas olur; burada yalnızca API şeklini hatırlatmak yeterli. Son satırlar, Basic’in “ışıktan muaf” olmadığı ama global sahne etkilerine (sis, ton eşleme) tabi kalabileceğine dair uyarıdır. 

// 1. Teknik gorunum (wireframe) — geometrinin iskeleti
const wireMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});

// 2. Saf doku (UI veya gokyuzu) — ışigin renkleri solgunlastirmasi istenmezse
const textureLoader = new THREE.TextureLoader();
const panelMaterial = new THREE.MeshBasicMaterial({
    map: textureLoader.load('/textures/ui-panel.png'),
    transparent: true,
    opacity: 0.9
});

// Ileri okuma: Fog aciksa Basic materyal de etkilenir.
// Renkler renderer tone mapping ayarlarindan gecerek son halini alir.

Holodepth production içgörüsü

Hız ve kontrol

Basic, performansın kritik olduğu yerlerde veya sahne içi UI katmanlarında sık sık en doğru seçimdir: öncelik gerçekçilik değil, kontrol ve hızdır. Sahne çok karanlıksa ve nesnelerin varlığını görmek istiyorsanız (debug), materyali geçici olarak Basic'e çekmek karanlıktaki feneriniz olur.

Yayında tuttuğunuz Basic materyalleri için renk uzayı ( colorSpace / doku ayarları) ve şeffaflık sıralaması ( renderOrder, derinlik yazımı) gibi konuları ayrı bir kontrol listesinde tutun; bunlar ışıkla ilgili değildir ama “neden bu UI rengi HDR’de farklı?” sorularının kaynağı olabilir.