{"id":1193,"date":"2025-04-22T21:48:22","date_gmt":"2025-04-22T21:48:22","guid":{"rendered":"https:\/\/cloudlab.urv.cat\/catedracloud\/?p=1193"},"modified":"2025-04-22T21:48:27","modified_gmt":"2025-04-22T21:48:27","slug":"webassembly-aumentando-el-rendimiento-de-las-aplicaciones-graficas-en-el-navegador","status":"publish","type":"post","link":"https:\/\/cloudlab.urv.cat\/catedracloud\/2025\/04\/22\/webassembly-aumentando-el-rendimiento-de-las-aplicaciones-graficas-en-el-navegador\/","title":{"rendered":"WebAssembly – Aumentando el rendimiento de las aplicaciones gr\u00e1ficas en el navegador"},"content":{"rendered":"\n

Entre los casos de uso en el navegador en los que WebAssembly (Wasm) ha logrado hacerse un hueco destacan las aplicaciones gr\u00e1ficas. Aunque Wasm no puede utilizar unidades de procesamiento de gr\u00e1ficos (GPU) por s\u00ed solo, es utilizado en combinaci\u00f3n con otras tecnolog\u00edas que facilitan la interacci\u00f3n con dichos recursos. Este art\u00edculo muestra como a trav\u00e9s de Wasm y WebGL se ha logrado portar Doom3 al navegador con un rendimiento similar al nativo.<\/p><\/blockquote><\/figure>\n\n\n\n

El desaf\u00edo de los gr\u00e1ficos en el navegador<\/h2>\n\n\n\n

Hasta la introducci\u00f3n de APIs especializadas con aceleraci\u00f3n por hardware, el renderizado de gr\u00e1ficos en el navegador era rudimentario: desde HTML y CSS planos a im\u00e1genes pre-renderizadas, Flash o Canvas 2D, ninguno de estos m\u00e9todos proporcionaba el rendimiento requerido por aplicaciones con gr\u00e1ficos en 3D. <\/p>\n\n\n\n

En 2011 se introduce WebGL, una API que permite renderizar gr\u00e1ficos 2D y 3D dentro de los navegadores web. WebGL se basa en OpenGL ES 2.0 y proporciona aceleraci\u00f3n por hardware para renderizar los gr\u00e1ficos de forma eficiente. Esta nueva tecnolog\u00eda permiti\u00f3 por primera vez, y de forma realista y eficiente mostrar gr\u00e1ficos en 3D en el navegador. Sin embargo, los motores gr\u00e1ficos utilizados en aplicaciones como videojuegos se componen de mucho m\u00e1s que de c\u00f3digo a ejecutar en GPUs. Aqu\u00ed es donde entra WebAssembly.<\/p>\n\n\n\n

\u00bfPuede ejecutar Doom? <\/em> Y otras aplicaciones gr\u00e1ficas en el navegador<\/h2>\n\n\n\n

Con la introducci\u00f3n de una nueva plataforma siempre surge una pregunta: \u00bfpuede ejecutar Doom? Desde calculadoras<\/a> y c\u00e1maras de fotos<\/a> a tests de embarazo<\/a>, Doom ha sido portado con \u00e9xito a todo tipo de plataformas, incluyendo WebAssembly. El caso de WebAssembly es algo m\u00e1s interesante, puesto que no ha sido portada la versi\u00f3n original del juego de 1993, sino Doom 3, un juego m\u00e1s exigente gr\u00e1ficamente, bajo el nombre de d3wasm. <\/p>\n\n\n\n

Este proyecto de c\u00f3digo abierto y disponible en Github<\/a> fue introducido en el a\u00f1o 2018 por Continuation Labs y se trata de un porte del motor gr\u00e1fico id Tech 4 sobre el que se construye Doom 3. Fue desarrollado como una prueba de concepto para demostrar que motores de juegos complejos escritos en C++ pueden compilarse y ejecutarse eficientemente en navegadores modernos. A lo largo de 4 a\u00f1os y a trav\u00e9s de varias iteraciones sobre la implementaci\u00f3n inicial, esta versi\u00f3n de Doom 3 es capaz de alcanzar velocidades de fotogramas de 60 fotogramas por segundo (FPS) estables en el navegador respetando la est\u00e9tica original del juego y utilizando buena parte del c\u00f3digo fuente original.<\/p>\n\n\n\n

D3wasm utiliza Emscripten para la traducci\u00f3n del c\u00f3digo C++ del motor a WebAssembly, mientras que las partes del c\u00f3digo que utilizan llamadas a OpenGL para el renderizado fueron remplazadas por WebGL. Esta combinaci\u00f3n permite acelerar las computaciones que requieren de uso intensivo de CPU mediante WebAssembly, mientras que se sigue pudiendo aprovechar la GPU mediante WebGL, haciendo posible esta implementaci\u00f3n. A pesar del buen funcionamiento de esta soluci\u00f3n, a\u00fan existe margen de mejora, puesto que existen nuevas APIs sucesoras de WebGL que proporcionan un mejor rendimiento, como se muestra en la siguiente secci\u00f3n.<\/p>\n\n\n\n

Puedes probar este porte de Doom 3 sobre WebAssembly en el enlace siguiente<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Doom 3 en el navegador sobre WebAssembly.<\/p>\n\n\n\n

WebGPU: el futuro de los gr\u00e1ficos en el navegador<\/h2><\/div>\n\n\n\n

WebGPU es una API en desarrollo e introducida en 2021 que permite la utilizaci\u00f3n de unidades de procesamiento de gr\u00e1ficos de manera portable y eficiente. Ciertas implementaciones de WebGPU, como la de JavaScript, proporcionan al navegador la capacidad de interactuar con GPUs desde el navegador. WebGPU es considerada la evoluci\u00f3n de WebGL, y a\u00f1ade un gran n\u00famero de funciones que permiten la utilizaci\u00f3n de los recursos de GPU a bajo nivel, mejorando significativamente el rendimiento de los programas que requieren de dichos recursos. Las implementaciones de WebGPU se basan en Vulkan, Metal o Direct3D 12. <\/p>\n\n\n\n

WebGPU no solamente permite realizar computaciones relacionadas con los gr\u00e1ficos, sino que abre tambi\u00e9n la puerta a todo tipo de computaciones de prop\u00f3sito general sobre GPUs. Empresas como Google ya est\u00e1n trabajando en una integraci\u00f3n de WebAssembly con esta tecnolog\u00eda<\/a> para acelerar cargas de trabajo de IA en el navegador.<\/p>\n\n\n\n

Esta tecnolog\u00eda todav\u00eda se encuentra en adopci\u00f3n, y \u00fanicamente es soportada por Google Chrome en la actualidad.<\/p>\n\n\n\n

Conclusi\u00f3n<\/h2><\/div>\n\n\n\n

Desde las primeras aplicaciones basadas en WebGL al desarrollo de nuevas APIs a bajo nivel como WebGPU, las aplicaciones gr\u00e1ficas en el navegador han sufrido una gran evoluci\u00f3n en los \u00faltimos a\u00f1os. En medio de esta evoluci\u00f3n se encuentra WebAssembly, que aunque no es capaz de utilizar GPUs de manera nativa, es capaz de mejorar el rendimiento de aquellas partes del c\u00f3digo que son m\u00e1s dependientes de la CPU. La combinaci\u00f3n de ambas tecnolog\u00edas est\u00e1 acelerando significativamente las cargas de trabajo que utilizan las GPU tanto para gr\u00e1ficos como para otro tipo de computaciones como la IA.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Entre los casos de uso en el navegador en los que WebAssembly (Wasm) ha logrado hacerse un hueco destacan las aplicaciones gr\u00e1ficas. Aunque Wasm no puede utilizar unidades de procesamiento de gr\u00e1ficos (GPU) por s\u00ed solo, es utilizado en combinaci\u00f3n con otras tecnolog\u00edas que facilitan la interacci\u00f3n con dichos recursos. Este art\u00edculo muestra como a […]<\/p>\n","protected":false},"author":8,"featured_media":1197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_swt_meta_header_display":false,"_swt_meta_footer_display":false,"_swt_meta_site_title_display":false,"_swt_meta_sticky_header":false,"_swt_meta_transparent_header":false,"footnotes":""},"categories":[42,1,43,35,33],"tags":[],"class_list":["post-1193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entretenimiento","category-uncategorized","category-videojuegos","category-virtualizacion","category-webassembly"],"jetpack_featured_media_url":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom.png","uagb_featured_image_src":{"full":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom.png",1024,1024,false],"thumbnail":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom-150x150.png",150,150,true],"medium":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom-300x300.png",300,300,true],"medium_large":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom-768x768.png",768,768,true],"large":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom.png",1024,1024,false],"1536x1536":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom.png",1024,1024,false],"2048x2048":["https:\/\/cloudlab.urv.cat\/catedracloud\/wp-content\/uploads\/2025\/04\/wasmdoom.png",1024,1024,false]},"uagb_author_info":{"display_name":"Pablo Gimeno Sarroca","author_link":"https:\/\/cloudlab.urv.cat\/catedracloud\/author\/pgimeno\/"},"uagb_comment_info":5,"uagb_excerpt":"Entre los casos de uso en el navegador en los que WebAssembly (Wasm) ha logrado hacerse un hueco destacan las aplicaciones gr\u00e1ficas. Aunque Wasm no puede utilizar unidades de procesamiento de gr\u00e1ficos (GPU) por s\u00ed solo, es utilizado en combinaci\u00f3n con otras tecnolog\u00edas que facilitan la interacci\u00f3n con dichos recursos. Este art\u00edculo muestra como a…","_links":{"self":[{"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/posts\/1193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/comments?post=1193"}],"version-history":[{"count":3,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/posts\/1193\/revisions"}],"predecessor-version":[{"id":1198,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/posts\/1193\/revisions\/1198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/media\/1197"}],"wp:attachment":[{"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/media?parent=1193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/categories?post=1193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudlab.urv.cat\/catedracloud\/wp-json\/wp\/v2\/tags?post=1193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}