Three.js r184, HTMLTexture ile geldi: 3D yüzey olarak canlı DOM
Three.js r184 bu hafta yayımlandı. Öne çıkan yenilik, Three.js'e herhangi bir canlı HTML öğesini gösterip bunu bir mesh üzerinde doku olarak kullanmanızı sağlayan yeni HTMLTexture sınıfı. Düğmeler tıklanabilir, giriş alanları odaklanabilir durumda kalıyor; CSS animasyonları çalışmayı sürdürüyor ve tarayıcı erişilebilirlik ile IME'yi her zamanki gibi yönetiyor.
Three.js HTMLTexture'ın temelini oluşturan HTML-in-Canvas API'sine ilişkin Chrome'un resmî tanıtımı
Tek paragrafta HTMLTexture
HTMLTexture, Chrome 146'nın HTML-in-Canvas API'sini sarmalıyor. Ona bir DOM öğesi veriyorsunuz. Three.js, canvas üzerinde layoutsubtree özelliğini ayarlıyor, öğeyi işleyicinin DOM'una bağlıyor ve rasterleştirilmiş çıktısını WebGL 2 veya WebGPU'daki herhangi bir materyalden örnekleyebileceğiniz bir THREE.Texture içine yansıtıyor. Resmî örnekler (webgl_materials_texture_html ve webgpu_materials_texture_html) biçimlendirilmiş metin, görseller, SVG, çalışan bir giriş alanı ve bir düğme içeriyor.
Pratikte bu; React bileşenlerinin, tasarım sistemi widget'larının, video oynatıcıların, grafiklerin veya gömülü tam sayfaların, alışılagelmiş "canvas üzerine rasterleştir, sonra etkileşimi unut" ödününü vermeden Three.js sahnesindeki kavisli bir ekranda, reklam panosunda ya da kullanıcı arayüzü panelinde yer alabileceği anlamına geliyor.
Peki ya dezavantajı?
Bu özellik yalnızca temelindeki API'nin bulunduğu ortamlarda çalışıyor. Şu anda bu, chrome://flags/#canvas-draw-element bayrağı etkinleştirilmiş Chromium 146 ve üzeri sürümler anlamına geliyor; dolayısıyla üretim sitelerinin hâlâ bir geri dönüş çözümüne ihtiyacı var. PR, API mevcut olmadığında HTMLTexture sınıfının sorunsuz şekilde başarısız olmasını sağlayarak kapıyı açık bırakıyor; ancak müşterilere tamamen etkileşimli bir Three.js kontrol paneli vadetmeden önce özellik algılama kullanmanız gerekecek.
Safari ve Firefox henüz bir takvim açıklamadı. WebGPU'nun bile ancak 2025'in sonlarında üç tarayıcının tamamında temel destek düzeyine ulaştığı düşünülürse, HTML-in-Canvas'ın da muhtemelen benzer şekilde iki yıllık bir süreçten geçmesi gerekecek.
Three.js sarmalayıcısı gelmeden önce hazırlanmış bir topluluk HTML-in-Canvas demosu
Madalyonun diğer yüzü: kare başına sıfır bellek tahsisi
Daha az gösterişli ama tartışmasız daha önemli olan değişiklik, işleyicinin kritik kod yolunda. r184'ten önce 60 FPS'de 1.000 mesh işlemek, saniyede 240.000 ila 500.000 kullan-at nesne tahsis edebiliyordu. Çöp toplayıcının da uzun süre çalışan her sahnede bunlarla uğraşması gerekiyordu. r184, temel işleme döngüsündeki bu tahsisleri ortadan kaldırıyor. Uzun süreli WebXR oturumları, yoğun yapı görselleştiricileri ve ilk 30 saniyeden uzun süre açık kalan tüm sahneler, hiçbir ek çaba gerektirmeden kare süresinde gerçek bir iyileşme kazanıyor.
Dikkate değer küçük yenilikler
AnimationAction artık oluşturulurken interpolant ayarlarını koruyor; böylece timeScale tersine çevrildiğinde artık sıçrama yaşanmıyor. AudioLoader artık yükleme yöneticisiyle yarış durumuna girmiyor. BatchedMesh ve InstancedMesh, renkler ayarlanmamışken getColorAt çağrıldığında hata fırlatmıyor. Kullanımdan kaldırılmış WebGL örneklemeli işleme yolları tamamen kaldırıldı. Örneklere bir SSGI top havuzu, 3D Tiles yükleyicisinde hacimsel bulutlar ve hız treni kamerasında viraj yatışı eklendi.
Biz bununla ne yapardık?
Cinevva açısından en ilginç kullanım alanı, reels oynatıcısı ve içerik üretici araçları için canvas üzeri kullanıcı arayüzü. Şu anda HTML'yi Three.js üzerine bindiriyoruz. HTMLTexture sayesinde sohbet katmanı, varlık tarayıcısı ve istem giriş alanı, klavye navigasyonunu kaybetmeden sahne içindeki geometriler üzerinde yer alabilir. API, kararlı Chrome sürümünde bayraksız olarak kullanıma sunulur sunulmaz özellik bayrağıyla etkinleştirilen bir varyant hazırlayacağız.