Skip to content

Three.js r183: PostProcessing, RenderPipeline oluyor

Three.js r183, 18 Şubat'ta yayımlandı ve çoğu ara sürümden daha büyük bir mimari değişim getiriyor. En önemli değişiklik: PostProcessing, RenderPipeline olarak yeniden adlandırıldı. Bu yalnızca bir ad değişikliği değil. Sınıfın basit bir son işleme yönetiminden, birden fazla render geçişini ve geçmiş tamponlarını yöneten eksiksiz bir işlem hattı sistemine nasıl evrildiğini yansıtıyor.

Three.js WebGPU ve TSL shader düğüm sistemine giriş

RenderPipeline, PostProcessing'in yerini alıyor

Yeni RenderPipeline sınıfı özellikle WebGPURenderer için tasarlandı. Eksiksiz render işlem hattı kurulumunu ve son işleme efekt zincirlerini yönetiyor, ayrıca nihai çıktıyı bir outputNode üzerinden tanımlıyor. outputColorTransform özelliği, varsayılan ton eşlemeyi ve renk uzayı dönüşümünü kontrol ediyor.

Bu önemli, çünkü eski PostProcessing adı yanıltıcıydı. Hacimsel aydınlatma için zamansal kenar yumuşatma (TRAA) entegrasyonu, zamansal kararlılığa sahip ekran uzayı yansımaları ve HalfFloatType çıktı tamponlarını kullanan HDR işlem hattı desteğiyle sınıf zaten son işlemeden çok daha fazlasını yapıyordu. Yeni ad gerçeği yansıtıyor.

Clock kullanımdan kaldırıldı, Timer geldi

Clock sınıfı artık kullanımdan kaldırıldı ve yerine yeni Timer sınıfı getirildi. Animasyon döngülerinizde Clock kullanıyorsanız geçişe başlamalısınız. Yeni Timer, aynı zaman izleme işlevi için daha sade bir API sunuyor.

BatchedMesh, örnek başına denetim kazanıyor

BatchedMesh, örnek başına opaklık ve tel kafes malzeme desteği kazandı. Bu, ayrı malzemeler oluşturmadan tek tek örnekleri kademeli olarak görünür veya görünmez hâle getirmeniz gereken açık dünya sahneleri ve şehir kurma oyunları için önemli bir yenilik. Ayrıca hata ayıklama veya stilistik efektler amacıyla belirli örneklere seçici biçimde tel kafes render uygulayabilirsiniz.

React Three Fiber ile Three.js'te WebGPU son işleme

Malzeme iyileştirmeleri

MeshLambertMaterial ve MeshPhongMaterial artık scene.environment görüntü tabanlı aydınlatmayı (IBL) destekliyor. Daha önce bu düşük maliyetli malzemeler ortam aydınlatması için ortam haritalarını kullanamıyor ve geliştiricileri daha maliyetli MeshStandardMaterial'a yöneltiyordu. Artık PBR doğruluğunun gerekmediği durumlarda eski malzemelerle IBL kullanabilirsiniz.

MeshPhysicalMaterial, dikdörtgen alan ışıkları için vernik katmanı desteği ekliyor. Alan ışıklarıyla aydınlatılan otomobil boyası veya cilalı yüzeyler render ediyorsanız vernik katmanı artık doğru tepki veriyor.

Performans optimizasyonları

Matrix4.decompose() artık determinant hesaplamasını önbelleğe alıyor ve invert() optimize edildi. Bunlar çok sayıda nesne içeren sahnelerde kare başına binlerce kez çağrıldığından, biriken tasarruf kayda değer bir fark yaratıyor.

TSL spesifikasyonu ve clipSpace düğümü

Three.js r183, resmî bir TSL spesifikasyon belgesi (TSL.md) ve yeni bir clipSpace düğümü sunuyor. TSL (Three.js Shading Language), JavaScript'te WebGPU için WGSL'ye veya WebGL için GLSL'ye derlenen shader kodu yazmanızı sağlıyor. Yeni spesifikasyon, düğüm sisteminin API'sini resmîleştirerek üçüncü taraf kütüphanelerin bunun üzerine geliştirme yapmasını kolaylaştırıyor.

clipSpace düğümü, TSL içinde kırpma uzayı koordinatlarına doğrudan erişim sağlıyor; bu da ekran uzayı efektleri ve özel projeksiyon teknikleri için kullanışlı.

Kaynaklar