FPS vs MS: La Guía Definitiva de Rendimiento

En el fascinante mundo del desarrollo de videojuegos y el análisis de rendimiento gráfico, dos siglas reinan supremas: FPS y MS. A primera vista, parecen simples métricas, pero la relación entre ellas es una fuente constante de confusión, incluso para desarrolladores experimentados. Es común realizar un cálculo rápido, ver que los números no cuadran y preguntarse: ¿qué estoy pasando por alto? Si alguna vez has pensado "si un fotograma tarda 4 milisegundos en renderizarse, debería obtener 250 fotogramas por segundo", pero tu monitor de estadísticas te muestra una cifra drásticamente inferior, no estás solo. Este artículo está diseñado para desmitificar por completo esta relación, aclarar una confusión muy común con otra unidad de medida y darte las herramientas para entender qué sucede realmente bajo el capó de tu motor gráfico.

¿Qué son Realmente los FPS (Fotogramas por Segundo)?

Los FPS, o Frames Per Second (Fotogramas por Segundo), son la medida más popular para cuantificar la fluidez de un videojuego o cualquier aplicación gráfica. En esencia, nos dice cuántas imágenes completas y únicas es capaz de generar tu tarjeta gráfica (GPU) y mostrar en tu monitor en el lapso de un segundo. Imagina una libreta de esas en las que dibujas una figura en cada página con una ligera variación; al pasar las páginas rápidamente, creas la ilusión de movimiento. Cada página de esa libreta es un "fotograma".

Cuantos más fotogramas se muestren por segundo, más suave y natural parecerá el movimiento. Menos fotogramas resultarán en una experiencia entrecortada o "lageada". Los estándares comunes en la industria son:

• 30 FPS: Considerado el mínimo aceptable para una experiencia jugable en muchas consolas.
• 60 FPS: El estándar de oro para la mayoría de los jugadores de PC y consolas de nueva generación, ofrece una fluidez y respuesta muy superiores.
• 120 FPS / 144 FPS / 240 FPS: Objetivos para jugadores competitivos con monitores de alta tasa de refresco, donde cada milisegundo de ventaja en la respuesta es crucial.

El Otro Lado de la Moneda: Los MS (Milisegundos por Fotograma)

Mientras que los FPS miden cuántos fotogramas se completan en un segundo, los MS, o milisegundos, miden el tiempo exacto que se tarda en completar un solo fotograma. Esta métrica, a menudo llamada tiempo de fotograma o frame time, es en realidad una visión mucho más precisa y granular del rendimiento. Nos dice exactamente cuánto trabajo le está costando a tu hardware producir cada imagen.

La relación matemática entre ambos es, en teoría, muy simple y directa:

• Hay 1000 milisegundos en 1 segundo.
• Para calcular los FPS teóricos a partir de los MS: FPS = 1000 / MS
• Para calcular los MS teóricos a partir de los FPS: MS = 1000 / FPS

Siguiendo esta lógica, un tiempo de fotograma de 4 ms debería dar como resultado 1000 / 4 = 250 FPS. Y aquí es donde comienza el misterio que muchos desarrolladores y entusiastas enfrentan. ¿Por qué las herramientas de monitoreo como Stats.js muestran cifras mucho más bajas?

La Confusión Fatal: ¿Fotogramas o Pies por Segundo?

Antes de sumergirnos en los factores técnicos, es crucial abordar una ambigüedad que a menudo desvía a la gente. Las siglas "fps" también se utilizan comúnmente en física e ingeniería para referirse a Feet Per Second (Pies por Segundo), una unidad de velocidad. Si buscas en internet "convertir fps", es muy probable que te encuentres con conversores que te dicen que 1 fps equivale a 0.3048 m/s. Esto no tiene absolutamente nada que ver con el rendimiento gráfico.

Es vital diferenciar estos dos conceptos para no caer en un pozo de confusión. Aquí tienes una tabla para dejarlo meridianamente claro:

Una vez aclarado que estamos hablando exclusivamente de Fotogramas por Segundo, podemos abordar el problema real.

Resolviendo el Misterio: ¿Por qué mis Cálculos de FPS no Coinciden?

La razón por la que tus 4 ms no se traducen en 250 FPS en la práctica se debe a una serie de limitaciones y mecanismos tanto del software como del hardware. El cálculo teórico es solo eso, teórico. En el mundo real, entran en juego varios factores limitantes.

1. Sincronización Vertical (V-Sync) y la Tasa de Refresco del Monitor

Este es, con diferencia, el factor más importante y común. La mayoría de las aplicaciones gráficas, especialmente las que se ejecutan en un navegador a través de tecnologías como WebGL (usado por Three.js), utilizan una función llamada requestAnimationFrame. Esta función sincroniza el renderizado de la aplicación con la tasa de refresco del monitor del usuario. La tasa de refresco (medida en Hercios, Hz) es la cantidad de veces que la pantalla se actualiza físicamente por segundo.

• Un monitor estándar tiene una tasa de refresco de 60 Hz. Esto significa que, físicamente, no puede mostrar más de 60 imágenes por segundo.
• Incluso si tu GPU es capaz de renderizar a 250 FPS, requestAnimationFrame y la V-Sync (Sincronización Vertical) limitarán la salida a 60 FPS para que coincida con el monitor.

La V-Sync existe para prevenir un artefacto visual llamado "screen tearing" (desgarro de pantalla), que ocurre cuando el monitor intenta mostrar dos o más fotogramas diferentes al mismo tiempo. Al forzar la sincronización, se garantiza una imagen limpia, pero a costa de limitar el rendimiento máximo a la capacidad del monitor.

2. Cuellos de Botella (Bottlenecks)

El tiempo de fotograma (MS) que te muestra una herramienta puede no contar toda la historia. El proceso de renderizar un fotograma es una cadena de montaje compleja que involucra tanto a la CPU como a la GPU.

• Cuello de botella de CPU: La CPU se encarga de la lógica del juego, la física, la IA, la preparación de los datos que se enviarán a la GPU, etc. Si la CPU está sobrecargada y tarda mucho en preparar los datos para un fotograma, la GPU estará inactiva esperando. Tu medidor de MS podría estar mostrando solo el tiempo de GPU, ocultando el verdadero cuello de botella en la CPU.
• Cuello de botella de GPU: Esto es lo que normalmente asociamos con el rendimiento. La GPU está demasiado ocupada dibujando triángulos, aplicando shaders, texturas, etc. Si un fotograma tarda 50 ms en la GPU, tus FPS caerán a 20 (1000 / 50 = 20), sin importar qué tan rápida sea la CPU.

3. Inconsistencia en el Tiempo de Fotograma

El valor de 4 ms que observas puede ser un promedio o el valor en un momento de baja carga. Las escenas en los juegos rara vez tienen una complejidad constante. Un fotograma puede tardar 4 ms cuando miras a una pared, pero el siguiente puede tardar 50 ms cuando una explosión llena la pantalla de partículas y efectos de luz. La cifra de FPS que ves es un promedio del último segundo. Si en ese segundo hubo un pico de 58 ms (que equivale a 17 FPS por sí solo), ese único fotograma pesado arrastrará el promedio general hacia abajo drásticamente.

4. Sobrecarga del Navegador y del Sistema Operativo

Cuando trabajas con tecnologías web como Three.js, no estás operando en un entorno aislado. El navegador tiene sus propios procesos: gestionar otras pestañas, ejecutar extensiones, la recolección de basura de JavaScript (Garbage Collection), que puede causar pausas momentáneas pero significativas. El propio sistema operativo también está gestionando cientos de procesos en segundo plano. Todo esto consume recursos y puede interferir con el bucle de renderizado de tu aplicación.

Tabla Comparativa: FPS Teóricos vs. FPS Reales (en un monitor de 60 Hz)

Para visualizar mejor el impacto de estos factores, veamos una tabla:

Preguntas Frecuentes (FAQ)

P: ¿Tener más FPS de los que mi monitor puede mostrar sirve para algo?

R: Sí, hasta cierto punto. Incluso si tu monitor es de 60 Hz, renderizar internamente a, por ejemplo, 120 FPS puede reducir la latencia de entrada (input lag), ya que el fotograma más reciente siempre está disponible para ser mostrado en el siguiente ciclo de refresco. Sin embargo, esto puede causar "screen tearing" si la V-Sync está desactivada.

P: ¿Cómo puedo saber si mi cuello de botella es la CPU o la GPU?

R: Las herramientas de desarrollo avanzadas y los monitores de rendimiento en juegos suelen ofrecer métricas separadas para el tiempo de CPU y el tiempo de GPU por fotograma. Si el tiempo de la CPU es consistentemente más alto, ese es tu cuello de botella, y optimizar los shaders de la GPU no ayudará mucho.

P: Mi aplicación muestra 17 FPS con un tiempo de 4 ms. ¿Qué está pasando exactamente?

R: Lo más probable es que estés midiendo un valor mínimo o promedio engañoso. Los 17 FPS indican que el tiempo de fotograma promedio real es de aproximadamente 58.8 ms (1000 / 17). Esto sugiere que, aunque algunos fotogramas son muy rápidos (4 ms), hay otros que son extremadamente lentos, y son estos los que están destruyendo tu rendimiento. Debes usar las herramientas de perfilado (profiling) del navegador para encontrar qué funciones están causando esos picos tan largos.

P: ¿Es mejor centrarse en mejorar los FPS o en reducir los MS?

R: Es mejor centrarse en reducir los MS y, sobre todo, en hacer que el tiempo de fotograma sea estable. Un juego que corre a 40 FPS estables (25 ms por fotograma) se siente mucho mejor que uno que fluctúa salvajemente entre 80 FPS (12.5 ms) y 20 FPS (50 ms). La consistencia es la clave para una experiencia fluida.