Para além dos pixéis: A Ciência dos Shaders CRT no Browser

When you load a classic 8-bit or 16-bit game on a modern 4K monitor or a high-density OLED smartphone screen, something feels “off.” The colors look harsh, the edges are jagged, and the art seems blockier than you remember. This isn’t just nostalgia playing tricks on your mind—it’s a fundamental hardware mismatch.

Em Rec0m88, we don’t just want the games to run; we want them to look the way the original artists intended. To achieve this, we’ve integrated advanced GLSL (OpenGL Shading Language) filters into our “Engine Room” to simulate the complex physics of a Cathode Ray Tube (CRT). Here is the technical breakdown of how we use GPU math to bridge the gap between 1992 and 2026.

---

The LCD Problem: The “Square Pixel” Fallacy

Retro games were never meant to be seen as a perfect grid of sharp squares. On an old-school CRT monitor, the “pixels” weren’t squares at all; they were glowing phosphors hit by an electron beam. This created several natural visual effects:

• Scanlines: Dark gaps between the lines where the electron beam moved back across the screen.
• Color Bleeding: The red, green, and blue phosphors would slightly overlap, creating “new” colors that don’t exist in the digital file.
• The Glow: High-brightness areas would “bloom” into the surrounding dark areas.

When you put those same pixels on a modern LCD, every pixel is a hard-edged, sterile block. This makes the art look “unfinished” because the original artists used the CRT’s natural blur to perform “transparency tricks” and color blending.

---

The Solution: GLSL Shaders in the HTML5 Canvas

To fix this, our modern arcade doesn’t just “stretch” the image to fill your screen. We pass the game’s video output through a post-processing pipeline using WebGL 2.0.

A Shader is a small program that runs directly on your graphics card (GPU). Instead of the CPU calculating every pixel one by one, the GPU calculates thousands of pixels simultaneously using coordinate geometry. On Rec0m88, we utilize several layers of shaders:

1. The Scanline Overlay

We calculate the vertical coordinate of every pixel. If the coordinate falls on an “even” line, we apply a slight darkening factor. This recreates the horizontal gaps that gave retro games their texture and depth. However, a simple black line is too harsh. Our shaders use Gaussian blurring to ensure the scanlines look organic, not like a cage over the screen.

2. Aperture Grille and Shadow Mask Simulation

High-end “Trinitron” monitors used an aperture grille—fine vertical wires that separated the phosphors. Our advanced shaders simulate this by applying a sub-pixel mask. If you zoom in on a Rec0m88 game running our “Pro” shader, you’ll see the microscopic red, green, and blue vertical stripes that mimic the physical structure of a high-end arcade monitor.

3. Curvature and Corner Rounding

The glass on an old TV wasn’t flat; it was a convex bulb. Our engine can apply a coordinate warp that subtly curves the edges of the game window. While this seems purely aesthetic, it actually helps with “eye-tracking” during fast-paced gameplay, as it keeps the focus centered where the action is most intense.

---

Balancing Fidelity and Performance

The biggest challenge of running shaders in a browser is performance overhead. A complex shader like “CRT-Geom” or “CRT-Royale” requires a significant amount of GPU math for every single frame. If the shader takes more than 2-3 milliseconds to compute, it eats into the 16.6ms “frame budget” we need for the WebAssembly emulator core.

To solve this, Rec0m88 uses Adaptive Shading:

• Mobile Optimized: If our engine detects a mobile browser, it switches to a “light” version of the shader that uses a pre-baked lookup table (LUT) instead of real-time physics calculations.
• Desktop Ultra: For users with dedicated GPUs, we enable multi-pass shading, allowing for bloom, phosphor persistence (the “trail” left by bright objects), and even glass reflections.

---