Three.js r184 menghadirkan HTMLTexture: DOM aktif sebagai permukaan 3D
Three.js r184 dirilis minggu ini. Sorotan utamanya adalah kelas HTMLTexture baru yang memungkinkan Anda mengarahkan Three.js ke elemen HTML aktif apa pun dan menggunakannya sebagai tekstur pada mesh. Tombol tetap dapat diklik, input tetap dapat difokuskan, animasi CSS terus berjalan, dan browser menangani aksesibilitas serta IME seperti biasa.
Panduan resmi Chrome untuk API HTML-in-Canvas yang mendasari HTMLTexture dari Three.js
HTMLTexture dalam satu paragraf
HTMLTexture membungkus API HTML-in-Canvas di Chrome 146. Anda cukup memberinya sebuah elemen DOM. Three.js menetapkan layoutsubtree pada canvas, menempatkan elemen tersebut sebagai anak di DOM milik renderer, lalu memproyeksikan hasil rasterisasinya ke dalam THREE.Texture yang dapat digunakan oleh material apa pun di WebGL 2 atau WebGPU. Contoh resminya (webgl_materials_texture_html dan webgpu_materials_texture_html) mencakup teks berformat, gambar, SVG, input yang berfungsi, dan tombol.
Dalam praktiknya, ini berarti komponen React, widget sistem desain, pemutar video, grafik, atau halaman tersemat utuh dapat ditempatkan pada layar melengkung, papan reklame, atau panel UI di dalam adegan Three.js tanpa kompromi yang biasanya terjadi saat harus “merasterisasi ke canvas, lalu melupakan interaktivitas”.
Keterbatasannya
Fitur ini hanya aktif jika API yang mendasarinya tersedia. Saat ini, API tersebut tersedia di Chromium 146 dan yang lebih baru dengan flag chrome://flags/#canvas-draw-element diaktifkan, yang berarti situs produksi masih memerlukan fallback. PR tersebut tetap membuka kemungkinan penggunaan dengan memastikan HTMLTexture gagal secara aman saat API tidak tersedia, tetapi Anda sebaiknya melakukan deteksi fitur sebelum menjanjikan dasbor Three.js yang sepenuhnya interaktif kepada klien.
Safari dan Firefox belum mengumumkan jadwal. Mengingat WebGPU sendiri baru mencapai dukungan dasar di ketiga browser pada akhir 2025, HTML-in-Canvas kemungkinan akan menempuh perjalanan serupa selama dua tahun.
Demo komunitas HTML-in-Canvas sebelum wrapper Three.js hadir
Perubahan penting lainnya: tanpa alokasi per frame
Perubahan yang tidak terlalu mencolok, tetapi bisa dibilang lebih penting, ada pada jalur utama renderer. Sebelum r184, rendering 1.000 mesh pada 60 FPS dapat mengalokasikan 240.000 hingga 500.000 objek sementara per detik. Garbage collector kemudian harus menanganinya di setiap adegan yang berjalan lama. r184 menghapus alokasi tersebut dari loop rendering inti. Sesi WebXR berdurasi panjang, penampil konstruksi yang padat, dan adegan apa pun yang bertahan melewati 30 detik pertama kini mendapatkan peningkatan nyata pada waktu frame tanpa biaya tambahan.
Hal-hal kecil yang patut diperhatikan
AnimationAction kini mempertahankan pengaturan interpolant saat dibuat, sehingga pembalikan timeScale tidak lagi menyebabkan lompatan. AudioLoader tidak lagi mengalami race condition dengan loading manager. BatchedMesh dan InstancedMesh tidak lagi melempar error dari getColorAt ketika warna belum ditetapkan. Jalur rendering instancing WebGL yang telah usang kini dihapus sepenuhnya. Contoh-contohnya kini mencakup kolam bola SSGI, awan volumetrik pada loader 3D Tiles, dan efek miring pada kamera roller coaster.
Cara kami akan menggunakannya
Bagi Cinevva, kasus penggunaan yang paling menarik adalah UI di dalam canvas untuk pemutar reels dan alat kreator. Saat ini kami mengomposisikan HTML di atas Three.js. Dengan HTMLTexture, overlay obrolan, peramban aset, dan input prompt semuanya dapat ditempatkan pada geometri di dalam adegan tanpa kehilangan navigasi keyboard. Begitu API ini tersedia tanpa flag di Chrome stabil, kami akan mengintegrasikan varian yang dikendalikan oleh feature flag.