Three.js r184 accueille HTMLTexture : le DOM en direct comme surface 3D
Three.js r184 est sorti cette semaine. La grande nouveauté est une classe HTMLTexture qui permet de transmettre n'importe quel élément HTML actif à Three.js et de l'utiliser comme texture sur un maillage. Les boutons restent cliquables, les champs de saisie conservent le focus, les animations CSS continuent de s'exécuter, et le navigateur gère l'accessibilité et les méthodes de saisie (IME) comme d'habitude.
Présentation officielle par Chrome de l'API HTML-in-Canvas sur laquelle repose HTMLTexture de Three.js
HTMLTexture en un paragraphe
HTMLTexture encapsule l'API HTML-in-Canvas de Chrome 146. Vous lui transmettez un élément DOM. Three.js définit layoutsubtree sur le canevas, rattache l'élément au DOM du moteur de rendu et projette son rendu pixellisé dans une THREE.Texture que n'importe quel matériau peut échantillonner avec WebGL 2 ou WebGPU. Les exemples officiels (webgl_materials_texture_html et webgpu_materials_texture_html) comprennent du texte mis en forme, des images, du SVG, un champ de saisie fonctionnel et un bouton.
En pratique, cela signifie que des composants React, des widgets de design system, des lecteurs vidéo, des graphiques ou des pages intégrées complètes peuvent prendre place sur un écran incurvé, un panneau d'affichage ou un panneau d'interface dans une scène Three.js, sans le compromis habituel consistant à « pixelliser dans un canevas, puis renoncer à l'interactivité ».
Le revers de la médaille
La fonctionnalité ne s'active que lorsque l'API sous-jacente est disponible. Pour l'instant, cela concerne Chromium 146 et versions ultérieures avec l'option chrome://flags/#canvas-draw-element activée, ce qui signifie que les sites en production ont encore besoin d'une solution de repli. La PR laisse la porte ouverte en permettant à HTMLTexture d'échouer proprement lorsque l'API est absente, mais il faudra détecter la prise en charge de cette fonctionnalité avant de promettre aux clients un tableau de bord Three.js entièrement interactif.
Safari et Firefox n'ont communiqué aucun calendrier. Étant donné que WebGPU lui-même n'est devenu disponible par défaut dans les trois navigateurs que fin 2025, HTML-in-Canvas suivra probablement une trajectoire similaire sur deux ans.
Une démo communautaire de HTML-in-Canvas antérieure à l'arrivée de l'encapsulation Three.js
L'autre avancée : aucune allocation à chaque image
Le changement le moins spectaculaire, mais sans doute le plus important, se trouve dans le chemin critique du moteur de rendu. Avant r184, le rendu de 1 000 maillages à 60 FPS pouvait allouer entre 240 000 et 500 000 objets temporaires par seconde. Le ramasse-miettes devait ensuite les traiter dans chaque scène exécutée sur une longue durée. r184 élimine ces allocations de la boucle de rendu principale. Les longues sessions WebXR, les visualiseurs de construction denses et toutes les scènes qui restent ouvertes plus de 30 secondes bénéficient gratuitement d'une réelle amélioration du temps de rendu par image.
Autres changements à signaler
AnimationAction conserve désormais les paramètres d'interpolation lors de sa création, si bien qu'une inversion de timeScale ne provoque plus de saut. AudioLoader n'entre plus en concurrence avec le gestionnaire de chargement. BatchedMesh et InstancedMesh ne lèvent plus d'erreur depuis getColorAt lorsque les couleurs n'ont pas été définies. Les anciens chemins de rendu WebGL pour l'instanciation, désormais obsolètes, ont définitivement disparu. Les exemples accueillent une piscine à balles en SSGI, des nuages volumétriques dans le chargeur 3D Tiles et une inclinaison de la caméra des montagnes russes dans les virages.
Ce que nous en ferions
Pour Cinevva, le cas d'usage le plus intéressant est une interface intégrée au canevas pour le lecteur de reels et les outils de création. Actuellement, nous superposons du HTML à Three.js. Avec HTMLTexture, la fenêtre de discussion, le navigateur de ressources et le champ de saisie des prompts peuvent tous prendre place sur des objets géométriques dans la scène sans perdre la navigation au clavier. Dès que l'API sera disponible sans option expérimentale dans la version stable de Chrome, nous intégrerons une variante activable par feature flag.