00:00:00Je pense qu'internet a cruellement besoin d'un peu plus de fantaisie, surtout maintenant que l'IA
00:00:03est capable de créer des sites web en un clin d'œil.
00:00:05Et si c'était plus facile de rendre le web plus amusant ? Comme ceci. Ne vous inquiétez pas, je ne
00:00:09vous retiens pas, je m'amuse juste un peu sur ce site. Vous pouvez voir que
00:00:13il y a plein de mes yeux en bas de l'écran. Et au fait, si je peux cliquer sur le bouton
00:00:17s'abonner, vous aussi.
00:00:18Au lieu de ça, vous voulez peut-être une interaction plus fonctionnelle mais esthétique pour votre site, ou
00:00:22vous voulez inventer de nouveaux "dark patterns" comme obliger l'utilisateur à jouer au flipper pour se désabonner. Ou alors,
00:00:27peut-être qu'après une longue journée de travail, vous voulez vous asseoir à votre ordinateur avec une bière, vous asseoir
00:00:30à votre ordinateur virtuel avec une bière et parcourir Twitter ou autre. Tout cela est
00:00:34possible grâce à quelque chose appelé HTML in Canvas. Parlons-en.
00:00:43Je n'ai découvert ça que récemment grâce à Matt Rothenberg sur Twitter. Et après avoir
00:00:46vu ce post, cela a semblé lancer une semaine sur Twitter où il y avait plein de démos géniales
00:00:50qui apparaissaient tout le temps. J'ai vu que Wes Boss s'y essayait et s'amusait beaucoup.
00:00:54Ensuite, j'ai aussi vu celle d'AA qui était un pistolet en forme de doigt. Et nos deux démos
00:00:58ont en fait inspiré celle de YouTube que j'avais dans l'intro. Donc, je mettrai tous les liens
00:01:02des sources des démos montrées dans la description ci-dessous si vous voulez aller en voir plus.
00:01:05Pour l'instant, qu'est-ce que HTML in Canvas ? En bref, cela vous permet simplement d'insérer de vrais éléments
00:01:10DOM interactifs directement dans vos canevas WebGL ou 2D. Et pour le moment, ce n'est qu'une proposition.
00:01:15Cela a été ajouté à Chrome Canary en tant qu'expérience, c'est pourquoi toutes ces démos
00:01:19sont apparues récemment et vous pouvez l'essayer dans Chrome Canary maintenant en activant ce flag.
00:01:24Votre prochaine question pourrait être : pourquoi ? Eh bien, c'est parce que Canvas peut permettre des
00:01:28interfaces et des personnalisations impressionnantes, comme nous l'avons déjà vu. Des choses qui sont plus difficiles, voire impossibles
00:01:32à faire en CSS. Mais ce que Canvas ne peut pas faire facilement, c'est le rendu de mises en page complexes de texte et de contenu HTML.
00:01:38Vous avez tendance à devoir les reconstruire de zéro en interne. Et cela a signifié que le contenu
00:01:42basé sur Canvas peut souffrir de problèmes d'accessibilité, d'internationalisation, de performance et de qualité.
00:01:47Et ce sont des choses que le HTML a largement résolues. Donc, HTML in Canvas, c'est le meilleur des
00:01:51deux mondes.
00:01:52Pour vous montrer comment cela fonctionne, laissez-moi vous présenter une démo. Et ce que
00:01:56j'ai ici, c'est un site d'horaires du métro de Londres que j'ai fait il y a des années, avant que l'IA
00:02:00ne puisse probablement créer ça en un coup. Et j'ai toujours pensé que ce serait cool de pouvoir avoir ces infos
00:02:02à l'intérieur d'une scène Three.js. Alors oui, techniquement, vous pouvez le faire avec Three.js, évidemment Three.js supporte
00:02:08le texte, mais ce sera beaucoup plus facile si je peux juste utiliser HTML in Canvas et prendre l'élément
00:02:12qui utilise l'horaire et le mettre directement à l'intérieur de ma scène. Donc, au lieu de cette image
00:02:16de Thomas le petit train ici, je veux juste voir mon HTML. Pour ce faire, la première étape
00:02:20va être de prendre le HTML que nous voulons réellement rendre dans la scène et de le mettre
00:02:24à l'intérieur du canevas. Donc voici le HTML qui a réellement construit ce tableau que nous
00:02:28venons de voir. Et nous le mettons en tant qu'élément enfant du canevas lui-même. Pour l'instant,
00:02:32cet élément sert en fait de solution de repli pour le canevas. Donc, si le canevas ne se charge pas sur le navigateur de l'utilisateur
00:02:36pour une raison quelconque, ils verront en fait cet élément. Et ce n'est pas ce que
00:02:39nous voulons. Pour corriger cela, ce que nous pouvons faire avec HTML in Canvas, c'est fournir sur notre élément canevas
00:02:44un attribut appelé layout subtree. Cela indique au navigateur de traiter tous les enfants du canevas
00:02:48comme de vrais participants à la mise en page. Ils sont donc intégrés dans l'arbre d'accessibilité, ils peuvent recevoir
00:02:52le focus, mais ils ne sont toujours pas peints à l'écran. On peut le voir sur ma démo ici
00:02:56où il n'y a toujours rien qui s'affiche. L'élément ne va s'afficher nulle part ici,
00:03:00mais nous l'avons dans inspecter l'élément et nous le survolons. Cela montre bien qu'il est techniquement
00:03:04en cours de rendu. Il est juste invisible. Donc, pour effectuer le rendu sur le canevas, nous devons le convertir
00:03:08en une texture, que nous pouvons ensuite utiliser à la place de l'image de Thomas le petit train. Et
00:03:12c'est exactement ce que je fais avec cette fonction ici. Maintenant, la plupart de ceci est en fait du Three.js,
00:03:15donc vous n'avez pas besoin de vous en soucier. La première consiste simplement à obtenir la texture, qui
00:03:19est une texture GL, et c'est l'image de Thomas le petit train pour le moment. Mais ensuite, ce que
00:03:22nous faisons sur cette ligne, c'est utiliser une fonction HTML in Canvas appelée drawElementImage2D.
00:03:27Cela semble assez complexe, mais tout ce que nous faisons, c'est prendre la texture Three.js
00:03:30à laquelle nous voulons appliquer l'élément. Nous fournissons des informations sur la façon dont il se rend,
00:03:34comme l'espace colorimétrique et d'autres choses pour le GPU, mais nous n'avons pas trop à nous en soucier.
00:03:38Et ensuite, nous fournissons également l'élément HTML que nous voulons rendre. Dans ce cas,
00:03:42c'est le tableau. Et cela provient simplement de cette ligne ici où nous utilisons simplement document.getElementById
00:03:45pour obtenir l'élément que nous avons mis à l'intérieur du canevas. Avec cela
00:03:49dans notre démo, vous pouvez voir que nous avons maintenant l'horaire à la place de cette image et qu'il est
00:03:53mis à jour en temps réel. L'horloge se met à jour et j'ai vu les heures se mettre à jour également. Donc, ceci utilise maintenant
00:03:57notre élément HTML, mais il est fourni en tant que texture sur ce canevas. Maintenant, nous allons
00:04:02dans inspecter l'élément. Vous pouvez réellement voir que nous survolons l'élément qui est ce tableau, qui
00:04:06est toujours rendu d'une manière invisible. Et c'est parce que vous pouvez considérer cela
00:04:09comme essentiellement regarder ce que serait cet élément, en prendre une capture d'écran, puis
00:04:14la placer à la place de la texture. Donc, cela va se mettre à jour chaque fois que l'un de ces éléments est re-rendu.
00:04:19Ceci est en fait fait avec un événement paint dans HTML in Canvas qui déclenche les mises à jour lorsque
00:04:22il détecte que l'un des éléments enfants du canevas a été re-rendu, mais vous pouvez
00:04:26aussi demander un repaint si vous le souhaitez, de la même manière qu'avec requestAnimationFrame.
00:04:30Maintenant, si vous êtes encore un peu confus, je recommande vivement de consulter cette proposition sur GitHub.
00:04:34Elle contient énormément d'informations et de démos. Et pour être honnête avec vous, j'ai pris une voie
00:04:38un peu plus complexe, en choisissant Three.js et WebGL. Mais si vous voulez voir l'exemple le plus
00:04:42simple, tout ce que vous avez à faire est d'insérer quelque chose comme un élément de formulaire à l'intérieur d'un canevas
00:04:46ici. Et si vous voulez rendre cela sur le canevas, nous pouvons simplement dire context.drawElementImage,
00:04:49puis fournir un élément de formulaire et aussi l'endroit où nous voulons le mettre. Donc, ça
00:04:54c'est la forme la plus simple de HTML in Canvas. Je veux aussi très rapidement vous montrer
00:04:58cette démo. Je pense que c'est très amusant. Vous pouvez voir qu'elle utilise WebGPU et la fonction copyElementImage
00:05:02de HTML in Canvas pour dessiner une div sous un curseur gelée. Et c'est vraiment très amusant.
00:05:07Mais le truc vraiment cool à ce sujet, c'est qu'il utilise en fait toujours une entrée en arrière-plan.
00:05:11C'est juste une entrée personnalisée très cool. C'est le genre de choses que HTML in Canvas peut permettre.
00:05:16Il y a quand même quelques inconvénients que la proposition essaie de régler. L'un des principaux
00:05:19étant évidemment la performance. C'est un peu instable pour le moment. Il y a aussi quelques
00:05:24bugs comme drawElementImage qui a une frame de retard par rapport à l'état du DOM. C'est un léger
00:05:28décalage visuel. Et apparemment, si vous essayez de mettre une barre de défilement à l'intérieur des enfants du canevas,
00:05:32ça va tout simplement planter. Mais c'est pourquoi c'est une expérience pour l'instant.
00:05:36C'est exactement ce qu'ils recherchent. Il y a aussi eu des préoccupations en matière de confidentialité : si
00:05:40cela peut rendre un élément HTML, vous ne voulez pas qu'il divulgue plus d'informations que ce que vous
00:05:44pourriez obtenir habituellement via JavaScript. Ils ont donc des risques de peinture préservant la confidentialité,
00:05:48excluant les infos sensibles comme les couleurs système, les thèmes, les préférences, les marqueurs d'orthographe et
00:05:52de grammaire, les infos sur les liens visités, et ainsi de suite. Et je pense que la crainte principale ici est que
00:05:56ils ne veulent pas ajouter un autre point de collecte de données pour le fingerprinting. Quoi qu'il en soit,
00:06:00j'aime ce que j'ai vu jusqu'à présent. Donc j'adorerais que cela puisse sortir du simple stade d'expérience,
00:06:04mais je suis super curieux de savoir ce que vous en pensez. Dites-le-moi dans les commentaires ci-dessous, pourquoi pas
00:06:07s'abonner et comme toujours, à la prochaine.