{"id":5781,"date":"2026-01-31T11:00:46","date_gmt":"2026-01-31T18:00:46","guid":{"rendered":"https:\/\/rec0m88.com\/?p=5781"},"modified":"2026-02-02T10:57:31","modified_gmt":"2026-02-02T17:57:31","slug":"beyond-the-pixels-the-science-of-crt-shaders-in-the-browser","status":"publish","type":"post","link":"https:\/\/rec0m88.com\/es\/beyond-the-pixels-the-science-of-crt-shaders-in-the-browser\/","title":{"rendered":"M\u00e1s all\u00e1 de los p\u00edxeles: la ciencia de los sombreadores CRT en el navegador"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#the-lcd-problem-the-square-pixel-fallacy\">El problema de las pantallas LCD: la falacia del \u201cp\u00edxel cuadrado\u201d<\/a><\/li><li><a href=\"#the-solution-glsl-shaders-in-the-html-5-canvas\">La soluci\u00f3n: sombreadores GLSL en el lienzo HTML5<\/a><ul><li><a href=\"#1-the-scanline-overlay\">1. La superposici\u00f3n de l\u00edneas de exploraci\u00f3n<\/a><\/li><li><a href=\"#2-aperture-grille-and-shadow-mask-simulation\">2. Simulaci\u00f3n de rejilla de apertura y m\u00e1scara de sombra<\/a><\/li><li><a href=\"#3-curvature-and-corner-rounding\">3. Curvatura y redondeo de esquinas<\/a><\/li><\/ul><\/li><li><a href=\"#balancing-fidelity-and-performance\">Equilibrio entre fidelidad y rendimiento<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando abres un juego cl\u00e1sico de 8 o 16 bits en un monitor 4K moderno o en la pantalla OLED de alta densidad de un tel\u00e9fono inteligente, hay algo que \u201cno encaja\u201d. Los colores se ven \u00e1speros, los bordes son irregulares y los gr\u00e1ficos parecen m\u00e1s pixelados de lo que recordabas. No se trata solo de que la nostalgia te juegue una mala pasada: es una incompatibilidad fundamental del hardware.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En <strong>Recomendaci\u00f3n 88<\/strong>, no solo queremos que los juegos funcionen; queremos que se vean tal y como los concibieron los artistas originales. Para lograrlo, hemos integrado <strong>GLSL (Lenguaje de sombreado de OpenGL)<\/strong> se introduce en nuestra \u201csala de m\u00e1quinas\u201d para simular la compleja f\u00edsica de un tubo de rayos cat\u00f3dicos (CRT). A continuaci\u00f3n, te ofrecemos un desglose t\u00e9cnico de c\u00f3mo utilizamos los c\u00e1lculos de la GPU para salvar la brecha entre 1992 y 2026.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-lcd-problem-the-square-pixel-fallacy\">El problema de las pantallas LCD: la falacia del \u201cp\u00edxel cuadrado\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los juegos retro nunca fueron concebidos para verse como una cuadr\u00edcula perfecta de cuadrados n\u00edtidos. En un monitor CRT de la vieja escuela, los \u201cp\u00edxeles\u201d no eran cuadrados en absoluto; eran f\u00f3sforos luminosos sobre los que incid\u00eda un haz de electrones. Esto generaba varios efectos visuales naturales:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>L\u00edneas de exploraci\u00f3n:<\/strong> Espacios oscuros entre las l\u00edneas, donde el haz de electrones volv\u00eda a atravesar la pantalla.<\/li>\n\n\n\n<li><strong>Sangrado de color:<\/strong> Los f\u00f3sforos rojo, verde y azul se superponen ligeramente, creando \u201cnuevos\u201d colores que no existen en el archivo digital.<\/li>\n\n\n\n<li><strong>El resplandor:<\/strong> Las zonas de alto brillo se \u201cextender\u00edan\u201d hacia las zonas oscuras circundantes.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando se muestran esos mismos p\u00edxeles en una pantalla LCD moderna, cada uno de ellos se ve como un bloque est\u00e9ril de contornos definidos. Esto hace que la obra parezca \u201cinacabada\u201d, ya que los artistas originales utilizaban el desenfoque natural del CRT para lograr <strong>\u201ctrucos de transparencia\u201d<\/strong> y la mezcla de colores.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-solution-glsl-shaders-in-the-html-5-canvas\">La soluci\u00f3n: sombreadores GLSL en el lienzo HTML5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para solucionar esto, nuestra sala de juegos moderna no se limita a \u201cestirar\u201d la imagen para llenar la pantalla. Hacemos pasar la salida de v\u00eddeo del juego por un proceso de posprocesamiento utilizando <strong>WebGL 2.0<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>Shader<\/strong> es un peque\u00f1o programa que se ejecuta directamente en tu tarjeta gr\u00e1fica (GPU). En lugar de que la CPU calcule cada p\u00edxel uno por uno, la GPU calcula miles de p\u00edxeles al mismo tiempo utilizando geometr\u00eda coordinada. En Rec0m88, utilizamos varias capas de sombreadores:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-the-scanline-overlay\">1. La superposici\u00f3n de l\u00edneas de exploraci\u00f3n<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Calculamos la coordenada vertical de cada p\u00edxel. Si la coordenada se encuentra en una l\u00ednea \u201cpar\u201d, aplicamos un ligero factor de oscurecimiento. Esto recrea los espacios horizontales que daban a los juegos retro su textura y profundidad. Sin embargo, una simple l\u00ednea negra resulta demasiado brusca. Nuestros sombreadores utilizan <strong>Desenfoque gaussiano<\/strong> para que las l\u00edneas de exploraci\u00f3n se vean naturales, y no como una jaula sobre la pantalla.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-aperture-grille-and-shadow-mask-simulation\">2. Simulaci\u00f3n de rejilla de apertura y m\u00e1scara de sombra<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Los monitores \u201cTrinitron\u201d de gama alta utilizaban una rejilla de apertura, es decir, finos hilos verticales que separaban los f\u00f3sforos. Nuestros sombreadores avanzados simulan este efecto aplicando una m\u00e1scara de subp\u00edxeles. Si ampl\u00edas la imagen de un juego de Rec0m88 que utilice nuestro sombreador \u201cPro\u201d, ver\u00e1s unas rayas verticales microsc\u00f3picas de color rojo, verde y azul que imitan la estructura f\u00edsica de un monitor de arcade de gama alta.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-curvature-and-corner-rounding\">3. Curvatura y redondeo de esquinas<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">El cristal de los televisores antiguos no era plano, sino que ten\u00eda forma de bombilla convexa. Nuestro motor puede aplicar una <strong>coordenada de urdimbre<\/strong> que curva sutilmente los bordes de la ventana del juego. Aunque esto parezca algo puramente est\u00e9tico, en realidad ayuda a \u201cseguir con la vista\u201d durante las partidas de ritmo r\u00e1pido, ya que mantiene la atenci\u00f3n centrada donde la acci\u00f3n es m\u00e1s intensa.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"balancing-fidelity-and-performance\">Equilibrio entre fidelidad y rendimiento<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El mayor desaf\u00edo a la hora de ejecutar shaders en un navegador es <strong>sobrecarga de rendimiento<\/strong>. Un sombreador complejo como \u201cCRT-Geom\u201d o \u201cCRT-Royale\u201d requiere una cantidad significativa de operaciones matem\u00e1ticas de la GPU en cada fotograma. Si el sombreador tarda m\u00e1s de 2 o 3 milisegundos en ejecutarse, consume parte del \u201cpresupuesto de fotogramas\u201d de 16,6 ms que necesitamos para el n\u00facleo del emulador de WebAssembly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para resolver esto, Rec0m88 utiliza <strong>Sombreado adaptativo<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Optimizado para dispositivos m\u00f3viles:<\/strong> Si nuestro motor detecta un navegador m\u00f3vil, cambia a una versi\u00f3n \u201cligera\u201d del sombreador que utiliza una tabla de consulta (LUT) precalculada en lugar de c\u00e1lculos f\u00edsicos en tiempo real.<\/li>\n\n\n\n<li><strong>Desktop Ultra:<\/strong> Para los usuarios con GPU dedicadas, habilitamos el sombreado multipaso, lo que permite el efecto bloom, la persistencia del f\u00f3sforo (el \u201crastro\u201d que dejan los objetos brillantes) e incluso los reflejos en el vidrio.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Cuando cargas un juego cl\u00e1sico de 8 o 16 bits en un monitor 4K moderno o en la pantalla OLED de alta densidad de un tel\u00e9fono inteligente, algo parece \u201craro\u201d. Los colores se ven intensos, los bordes son irregulares y el dise\u00f1o parece m\u00e1s pixelado de lo que recuerdas. No se trata solo de la nostalgia jug\u00e1ndote una mala pasada, sino de una incompatibilidad fundamental del hardware. En Rec0m88, nosotros...<\/p>","protected":false},"author":1,"featured_media":5764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[40],"tags":[],"class_list":["post-5781","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-meta"],"_links":{"self":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/posts\/5781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/comments?post=5781"}],"version-history":[{"count":1,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/posts\/5781\/revisions"}],"predecessor-version":[{"id":5782,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/posts\/5781\/revisions\/5782"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/media\/5764"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/media?parent=5781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/categories?post=5781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/tags?post=5781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}