1. Base de conocimiento
2. renderer

Modo GPU restringido

Los recintos grandes con imágenes de fondo de alta resolución pueden agotar la memoria de la GPU en dispositivos móviles, provocando el cierre de la pestaña del navegador. Ahora el renderizador detecta automáticamente las capacidades del dispositivo durante la inicialización y adapta su estrategia de renderizado. En dispositivos restringidos, un sistema de texturas de dos capas reemplaza la carga del fondo a resolución completa, manteniendo el uso de memoria de la GPU dentro de límites seguros y preservando la calidad visual cuando el usuario acerca la imagen.

No se requiere ningún cambio de código en las aplicaciones host: la optimización es automática y transparente.

Cómo funciona la detección

Al inicializar el renderizador se ejecuta un microbenchmark de GPU que clasifica el dispositivo en uno de dos niveles:

La detección utiliza una heurística de tres capas, evaluada en orden:

1. Basada en pantalla (la más rápida): los dispositivos con DPR >= 3 o un total de píxeles de pantalla > 8 millones se clasifican como constrained
2. Basada en WebGL: los dispositivos que reportan un tamaño máximo de textura <= 8192 se clasifican como constrained
3. Basada en benchmark: una textura RGBA de 512x512 se carga en la GPU 10 veces; los dispositivos con un resultado total superior a 30ms se clasifican como constrained

Si ninguna de las comprobaciones se activa, el dispositivo se clasifica como high.

Qué cambia en el modo restringido

Sistema de texturas de dos capas

En el modo restringido, el renderizador mantiene dos capas de texturas:

Capa 1 – Vista previa (permanente): una imagen de vista previa precomprimida (~1000px de ancho) permanece en la memoria de la GPU en todo momento. Esto proporciona la vista del recinto completo cuando se aleja la imagen.

Capa 2 – Detalle (bajo demanda): cuando el usuario hace zoom en una sección más allá de un umbral calculado, se genera un recorte de alta resolución del área visible y se carga en la GPU. El recorte se limita a 2048px en su lado más largo e incluye un margen del 30% alrededor de la ventana gráfica para reducir los nuevos recortes durante pequeños movimientos de paneo.

La textura de detalle se descarta automáticamente cuando el usuario aleja la imagen por debajo del umbral, liberando memoria de la GPU. Un contador de generación evita que se apliquen recortes obsoletos durante cambios rápidos de zoom.

Configuración

El nivel de GPU se resuelve en este orden de prioridad:

1. Detección automática (predeterminado)

No se necesita configuración. El renderizador ejecuta el microbenchmark y clasifica el dispositivo automáticamente.

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'your-public-key',
  // gpuTier not set -- auto-detected
});

2. Anulación en la configuración

Fuerza un nivel específico mediante el ajuste gpuTier. Útil para despliegues en quioscos o cuando se conoce el parque de dispositivos de destino.

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'your-public-key',
  gpuTier: 'constrained', // or 'high'
});

3. Parámetro de URL

Anulación mediante la cadena de consulta para pruebas o anulaciones por dispositivo en incrustaciones iframe:

https://your-site.com/venue/123?gpuTier=constrained

Cuándo forzar el modo restringido

La detección automática funciona bien en la mayoría de los escenarios. Considera forzar gpuTier: 'constrained' cuando:

• Quiosco / señalización digital: hardware conocido con memoria de GPU limitada
• Parque de dispositivos de gama baja: escáneres móviles de entradas o tabletas de punto de venta
• Fallos reportados por usuarios: una mitigación rápida mientras se investiga la causa raíz
• Pruebas: verificar que la ruta restringida funciona correctamente en una máquina de escritorio

Salida de depuración

Activa debug: true en la configuración del renderizador para ver los detalles de detección de GPU en la consola del navegador:

[seatmap] GPU tier: constrained (DPR=3, screen=8.5M px, maxCanvas=2048, source=auto)
[seatmap] GPU: Apple A15 (maxTex=4096, mem=6GB, bench=45ms)

El campo source muestra de dónde provino la decisión de nivel: settings (anulación explícita), url (parámetro de consulta) o auto (resultado del microbenchmark).

Los eventos de carga de la imagen de fondo incluyen el tipo de textura y el tiempo:

[seatmap] Background loaded: type=detail-crop, 1024x768, 3.0MB GPU, 87ms

Referencia del benchmark

Resultados típicos del microbenchmark como referencia:

El umbral de 30ms se eligió a partir de pruebas empíricas en varios dispositivos. Los dispositivos cercanos al umbral pueden variar entre sesiones: esto es esperable y ambos niveles ofrecen un renderizado correcto.