Versión en EspañolES

HTML en Canvas: Uniendo UI y GPU en la Web

Sentry

Promoted

Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

El desarrollo web moderno todavía se basa en una fuerte separación entre HTML/CSS para UI y Canvas/WebGL para renderizado. En la práctica, combinar ambos a menudo lleva a una lógica de sincronización compleja y una serie de soluciones alternativas.

En esta charla, primero recorreremos cómo se suelen resolver estos problemas hoy en día, incluyendo la sincronización de desplazamiento, el tiempo de bucle de fotogramas, el renderizado basado en tijeras y el mapeo de elementos DOM en una escena WebGL, y por qué estos enfoques tienden a ser frágiles y difíciles de escalar.

Usando un conjunto de experimentos y sitios web desarrollados en basement.studio, mostraremos estos patrones en la práctica, combinando diseños reales con shaders y efectos interactivos.

A partir de ahí, presentaremos HTML-en-Canvas y mostraremos cómo simplifica muchos de estos problemas, no como una solución finalizada, sino como una dirección que elimina la necesidad de la mayoría de las soluciones alternativas de sincronización y renderizado de las que dependemos hoy en día.

También cubriremos los desafíos de construir UI directamente en WebGL, donde el diseño, el texto y la interactividad se vuelven difíciles de manejar, especialmente en entornos como WebXR.

This talk has been presented at Web Engineering Summit 2026, check out the latest edition of this Tech Conference.

webgl

Santiago Colombatto

Tomas Ferreras

17 min

15 Jun, 2026

Comments

Video Summary and Transcription

Santiago Colombato discute los desafíos en la sincronización de DOM y WebGL para sitios web visualmente pesados, centrándose en la sincronización de desplazamiento y los conceptos básicos del proceso de renderizado de WebGL. La charla aborda las complejidades de renderizar texto en GPU en WebGL y los desafíos de la implementación de HTML en canvas. La propuesta introduce características avanzadas como un evento de pintura y captura de imagen de elementos para permitir la sincronización de cambios en HTML y instantáneas de elementos. Las perspectivas emocionantes incluyen difuminar las líneas entre DOM y canvas, mostrando escenas 3D, texto distorsionado y efectos de GPU, ofreciendo nuevas posibilidades para la generación de sitios web.

Available in English: HTML in Canvas: Bridging UI and GPU on the Web

Video transcription and chapters available for users with access.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

¡Mejora el Rendimiento de Tus Juegos WebGL Unity!

JS GameDev Summit 2023

7 min

¡Mejora el Rendimiento de Tus Juegos WebGL Unity!

Top Content

Florin Ciornei

CrazyGames

The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

performance webgl game development react unity webgl

Unreal Engine en WebAssembly/WebGPU

JS GameDev Summit 2022

33 min

Unreal Engine en WebAssembly/WebGPU

Top Content

Alex St. Louis

Co-founder and Chief Operating Officer @ Wonder Interactive

Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.

webgl webassembly game development webgpu game engine

Detectar y evitar problemas comunes de rendimiento y memoria en compilaciones de Unity WebGL

JS GameDev Summit 2022

10 min

Detectar y evitar problemas comunes de rendimiento y memoria en compilaciones de Unity WebGL

Top Content

Oz Syed

Sauce Labs

Today's Talk focuses on avoiding performance and memory issues in Unity WebGL builds. The importance of managing memory and keeping the heap size small is highlighted. Techniques such as using asset bundles or an addressable system can help reduce memory usage. The limitations of garbage collection in WebGL builds are discussed, along with tips for optimizing Unity code. Tools like Backtrace can assist in debugging memory and performance issues.

performance webgl game development game server react unity webgl

Ampliando Unity WebGL con Javascript

JS GameDev Summit 2022

32 min

Ampliando Unity WebGL con Javascript

Top Content

Brendan Duncan

Senior Software Engineer @ Unity Technologies

Unity targets over 25 platforms and technologies, including desktop, mobile, and virtual reality. They use Emscripten to compile the engine and game logic into WebAssembly for web development. Unity can be extended with plugins to access browser features like WebXR's augmented reality mode. The speaker demonstrates intercepting Unity's calls to the browser to modify its behavior. Unity is actively working on mobile support for web export and improving documentation for extending Unity with web plugins.

webgl game development webgpu game engine react unity webgl

¡Potenciadores de Pixi!

JSNation Live 2021

30 min

¡Potenciadores de Pixi!

Mat Groves

Goodboy Digital

Pixie is a powerful tool for creating scenes and effects in software development. It supports features like texture mapping, Spine animation, and filters for creating cool effects. The talk also covers the use of render textures to capture and download images, as well as the importance of communication and a positive attitude in software development. The speaker shares their journey into coding and discusses the potential for porting Unity games to JavaScript using technologies like web GL and web GPU.

webgl game development

Casar juegos WASM/WebGL con interfaz de React

React Summit 2022

22 min

Casar juegos WASM/WebGL con interfaz de React

Johannes Goslar

Synthesia

Jonny discusses marrying WebAssembly and WebGL games with React, emphasizing the importance of choosing the right tool for game development. He introduces the Godot game engine as a powerful choice for game development and highlights the limitations of Godot. Jonny demonstrates how to combine React with Godot and showcases the ability to dynamically switch between different games on the same website. He explains the process of exporting a Godot game to the web using WebAssembly. Jonny also discusses the communication between React and Godot games and highlights the benefits and future improvements of using this approach.

react webgl webassembly game development react games react unity webgl

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas

JSNation 2023

116 min

Crea un Juego Con PlayCanvas en 2 Horas

Top Content

Featured WorkshopFree

Steven Yau

En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.

webgl game development

Cómo crear arte generativo increíble con código JavaScript simple

JS GameDev Summit 2022

165 min

Cómo crear arte generativo increíble con código JavaScript simple

Top Content

Workshop

Frank Force

En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.

webgl animations 3d