00:00:00Creo que Internet necesita desesperadamente un poco más de fantasía, especialmente ahora que la IA
00:00:03es buena para hacer sitios web al instante.
00:00:05¿Y si fuera más fácil hacer que la web fuera más divertida? Como esto. No se preocupen,
00:00:09no los estoy deteniendo ni nada, solo me estoy divirtiendo un poco en este sitio web. Pueden ver ahora
00:00:13que hay un montón de ojos míos en la parte inferior. Y por cierto, si puedo presionar el botón
00:00:17de suscribirse, ustedes también pueden.
00:00:18En lugar de eso, tal vez quieran una interacción más funcional pero hermosa para su sitio, o
00:00:22quieran inventar nuevos patrones oscuros como hacer que el usuario juegue al pinball para darse de baja. O simplemente
00:00:27tal vez después de un largo día de trabajo quieran sentarse frente a su computadora con una cerveza, sentarse
00:00:30frente a su computadora virtual con una cerveza y navegar por Twitter o algo así. Todo eso es
00:00:34posible gracias a algo llamado HTML in Canvas. Vamos a hablar de ello.
00:00:43Así que me enteré de esto recientemente gracias a Matt Rothenberg en Twitter. Y después de que
00:00:46vi esta publicación, pareció dar inicio a una semana en Twitter donde aparecían un montón de demos
00:00:50geniales todo el tiempo. Vi que Wes Boss lo estaba intentando y divirtiéndose un montón.
00:00:54Luego también vi este de AA que era uno de pistolas de dedo. Y ambas demos nuestras
00:00:58de hecho inspiraron esa de YouTube que tuve en la introducción. Así que dejaré todos los enlaces a las fuentes
00:01:02de las demos mostradas en la descripción de abajo si quieren ir a ver más.
00:01:05¿Por ahora, qué es HTML in Canvas? Bueno, en resumen, simplemente les permite incluir elementos DOM
00:01:10reales e interactivos directamente en sus lienzos WebGL o 2D. Y por el momento es solo una propuesta.
00:01:15De hecho, se agregó a Chrome Canary como un experimento, que es la razón por la que todas estas demos
00:01:19han aparecido recientemente y pueden probarlo en Chrome Canary ahora habilitando esta bandera.
00:01:24Sin embargo, su siguiente pregunta podría ser ¿por qué? Bueno, es porque Canvas puede habilitar interfaces de usuario
00:01:28y personalizaciones increíbles como las que ya hemos visto. Cosas que son más difíciles de hacer, si no imposibles,
00:01:32en CSS. Pero lo que Canvas no puede hacer es renderizar fácilmente diseños complejos de texto y contenido HTML.
00:01:38Tienden a tener que reconstruirlos desde cero internamente. Y esto ha significado que el contenido basado en
00:01:42Canvas puede sufrir en aspectos como la accesibilidad, la internacionalización, el rendimiento y la calidad.
00:01:47Y estas son cosas que HTML ha resuelto en gran medida. Así que HTML in Canvas es lo mejor de ambos
00:01:51mundos.
00:01:52Para mostrarles cómo funciona esto, déjenme guiarlos a través de una demostración de cómo usarlo. Y lo que
00:01:56tengo aquí es un sitio de horarios del metro de Londres que hice hace años antes de que la IA pudiera
00:02:00probablemente hacer esto al instante. Y siempre pensé que sería genial si pudiéramos tener esta información
00:02:02dentro de una escena de Three.js. Ahora sí, técnicamente pueden hacer esto con Three.js, obviamente Three.js soporta
00:02:08texto, pero será mucho más fácil si simplemente puedo usar HTML in Canvas y tomar el elemento
00:02:12que usa el horario y ponerlo directamente dentro de mi escena. Así que en lugar de esta imagen
00:02:16de Thomas el Tren aquí, solo quiero ver mi HTML. Para hacer eso, el primer paso
00:02:20va a ser tomar el HTML que queremos renderizar realmente en la escena y ponerlo
00:02:24dentro del lienzo. Así que este es el HTML que realmente construyó ese panel que
00:02:28acabamos de ver. Y lo pusimos como un elemento hijo del propio lienzo. Ahora, por el momento, este
00:02:32elemento en realidad sirve como respaldo del lienzo. Así que si el lienzo no se carga en el navegador del usuario
00:02:36por cualquier motivo, en realidad van a ver este elemento. Y eso no es lo
00:02:39que queremos. Para solucionar eso, lo que podemos hacer con HTML in Canvas es proporcionar en nuestro elemento canvas
00:02:44un atributo llamado layout subtree. Esto le dice al navegador que trate a los hijos del canvas
00:02:48como participantes reales del diseño. Así que se ponen en el árbol de accesibilidad, pueden recibir
00:02:52foco, pero aún no se pintan en la pantalla. Podemos ver eso en mi demo aquí,
00:02:56donde todavía no aparece nada. El elemento no se mostrará en ninguna parte aquí,
00:03:00pero lo tenemos en "inspect element" y cuando pasamos el cursor sobre él, sí muestra que técnicamente
00:03:04está renderizando. Es solo que es invisible. Así que para renderizar realmente en el lienzo, necesitamos convertirlo
00:03:08en una textura, que luego podemos usar en lugar de la imagen de Thomas el Tren. Y
00:03:12eso es exactamente lo que estoy haciendo con esta función aquí. Ahora, la mayor parte de esto es Three.js,
00:03:15así que no necesitan preocuparse por ello. Lo primero es simplemente obtener la textura, que
00:03:19es una textura GL, y esa es la imagen de Thomas el Tren en este momento. Pero luego, lo
00:03:22que estamos haciendo en esta línea es usar una función de HTML in Canvas llamada textElementImage2D.
00:03:27Ahora, se ve bastante complejo, pero todo lo que estamos haciendo es tomar la textura de Three.js
00:03:30a la que queremos aplicar el elemento. Estamos proporcionando información sobre cómo se renderiza, como
00:03:34el espacio de color y otras cosas para la GPU, pero no necesitamos preocuparnos demasiado por eso.
00:03:38Y luego también estamos proporcionando el elemento HTML que queremos renderizar. En este caso,
00:03:42es el panel. Y eso simplemente viene de esta línea donde estamos usando document.getElementById
00:03:45para obtener el elemento que pusimos dentro del lienzo. Con eso de vuelta
00:03:49en nuestra demo, pueden ver que ahora realmente tenemos el horario en lugar de esa imagen y está
00:03:53actualizándose en vivo. El reloj se está actualizando y he visto que los horarios también se actualizan. Así que esto ahora
00:03:57está usando nuestro elemento HTML, pero se está proporcionando como una textura en este lienzo. Ahora, si vamos
00:04:02a "inspect element", pueden ver que al pasar el cursor sobre el elemento, ese panel
00:04:06todavía se está renderizando de forma invisible. Y eso es porque pueden pensar en esto
00:04:09esencialmente como simplemente mirar lo que sería este elemento, tomar una captura de pantalla de esto y luego
00:04:14colocarla en el lugar de la textura. Así que se actualizará cada vez que cualquiera de esos elementos se vuelva a renderizar.
00:04:19Esto en realidad se hace con un evento de pintura en HTML Canvas que activa las actualizaciones cuando
00:04:22detecta que cualquiera de los elementos hijos del canvas se ha vuelto a renderizar, pero también pueden
00:04:26solicitar un repintado si quieren, de forma similar a como pueden con requestAnimationFrame.
00:04:30Ahora, si todavía están un poco confundidos, les recomiendo encarecidamente consultar esa propuesta en GitHub.
00:04:34Tiene un montón de información y demos. Y para ser honesto con ustedes, elegí una
00:04:38ruta un poco más compleja, usando Three.js y WebGL. Pero si quieren ver el
00:04:42ejemplo más básico, todo lo que necesitan hacer es, dentro de un lienzo, poner algo como un elemento de formulario
00:04:46aquí. Y si quieren renderizar eso en el lienzo, simplemente podemos decir context.drawElementImage,
00:04:49luego proporcionar un elemento de formulario y también dónde queremos poner eso. Así que esa
00:04:54es la forma más simple de HTML in Canvas. También quiero mostrarles muy rápidamente
00:04:58esta demo. Creo que es muy divertida. Pueden ver que usa WebGPU y la función copyElementImage
00:05:02de HTML in Canvas para dibujar un div debajo de un deslizador tipo gelatina. Y es simplemente muy divertido.
00:05:07Pero lo realmente genial de esto es que en realidad todavía está usando una entrada detrás de escena.
00:05:11Es solo una entrada personalizada muy genial. Ese es el tipo de cosas que HTML in Canvas puede habilitar.
00:05:16Sin embargo, hay algunos inconvenientes que la propuesta está tratando de solucionar. Uno de los principales
00:05:19obviamente es el rendimiento. Es un poco inestable en este momento. También hay algunos
00:05:24errores como que drawElementImage tiene un marco de retraso en comparación con el estado del DOM. Esto es un poco
00:05:28de desincronización visual. Y aparentemente, si intentan poner una barra de desplazamiento dentro de los elementos hijos
00:05:32del canvas, simplemente se va a bloquear. Pero es por esto que es un experimento por ahora.
00:05:36Esto es exactamente lo que están buscando. También ha habido algunas preocupaciones de privacidad sobre que si
00:05:40esto puede renderizar un elemento HTML, no quieren que filtre más información de la que
00:05:44usualmente podrían obtener a través de JavaScript. Así que tienen un riesgo de pintura que preserva la privacidad,
00:05:48excluyendo información confidencial como colores del sistema, temas, preferencias, marcadores de ortografía y
00:05:52gramática, información de enlaces visitados, etcétera. Y creo que la preocupación clave aquí es que
00:05:56no quieren agregar otro punto de recolección de datos para la toma de huellas digitales. De cualquier manera,
00:06:00me gusta lo que he visto hasta ahora. Así que me encantaría que esto pudiera dejar de ser solo un experimento,
00:06:04pero tengo mucha curiosidad por saber qué piensan. Háganmelo saber en los comentarios de abajo, por qué no se suscriben
00:06:07y como siempre, nos vemos en la próxima.