1. База знаний
2. renderer

Ограниченный режим GPU

Крупные площадки с фоновыми изображениями высокого разрешения могут исчерпать память GPU на мобильных устройствах, из-за чего вкладка браузера аварийно завершается. Теперь рендерер автоматически определяет возможности устройства при инициализации и адаптирует стратегию рендеринга. На устройствах с ограниченными ресурсами двухслойная система текстур заменяет загрузку фона в полном разрешении, удерживая использование памяти GPU в безопасных пределах и сохраняя качество изображения при увеличении масштаба.

Изменения кода в host-приложениях не требуются – оптимизация выполняется автоматически и прозрачно.

Как работает определение

При инициализации рендерера запускается микробенчмарк GPU, который классифицирует устройство по одному из двух уровней:

В определении используется трёхслойная эвристика, оцениваемая по порядку:

1. На основе экрана (самый быстрый): устройства с DPR >= 3 или общим числом пикселей экрана > 8 миллионов классифицируются как constrained
2. На основе WebGL: устройства, сообщающие о максимальном размере текстуры <= 8192, классифицируются как constrained
3. На основе бенчмарка: текстура RGBA 512x512 загружается в GPU 10 раз; устройства с суммарным результатом выше 30ms классифицируются как constrained

Если ни одна из проверок не срабатывает, устройство классифицируется как high.

Что меняется в ограниченном режиме

Двухслойная система текстур

В ограниченном режиме рендерер поддерживает два слоя текстур:

Слой 1 – Превью (постоянный): предварительно сжатое изображение превью (~1000px в ширину) постоянно находится в памяти GPU. Оно обеспечивает обзор всей площадки при уменьшении масштаба.

Слой 2 – Детализация (по запросу): когда пользователь увеличивает масштаб секции выше вычисленного порога, генерируется обрезка видимой области в высоком разрешении и загружается в GPU. Обрезка ограничена 2048px по длинной стороне и включает 30% отступа вокруг области просмотра, чтобы сократить число повторных обрезок при небольших перемещениях.

Текстура детализации автоматически удаляется, когда пользователь уменьшает масштаб ниже порога, освобождая память GPU. Счётчик поколений предотвращает применение устаревших обрезок при быстрых изменениях масштаба.

Конфигурация

Уровень GPU определяется в следующем порядке приоритета:

1. Автоопределение (по умолчанию)

Конфигурация не требуется. Рендерер запускает микробенчмарк и классифицирует устройство автоматически.

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

2. Переопределение в настройках

Принудительно задайте конкретный уровень через настройку gpuTier. Полезно для развёртываний в режиме киоска или когда известен парк целевых устройств.

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

3. Параметр URL

Переопределение через строку запроса для тестирования или индивидуальных переопределений в iframe-встраиваниях:

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

Когда принудительно включать ограниченный режим

Автоопределение хорошо работает в большинстве сценариев. Рассмотрите принудительное включение gpuTier: 'constrained', когда:

• Киоск / цифровые вывески: известное оборудование с ограниченной памятью GPU
• Парк маломощных устройств: мобильные сканеры билетов или планшеты точек продаж
• Сбои по сообщениям пользователей: быстрое смягчение проблемы на время расследования первопричины
• Тестирование: проверка корректной работы ограниченного пути на десктопной машине

Отладочный вывод

Включите debug: true в настройках рендерера, чтобы видеть детали определения GPU в консоли браузера:

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

Поле source показывает, откуда поступило решение об уровне: settings (явное переопределение), url (параметр запроса) или auto (результат микробенчмарка).

События загрузки фонового изображения включают тип текстуры и тайминг:

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

Справочник по бенчмарку

Типичные результаты микробенчмарка для справки:

Порог в 30ms был выбран на основе эмпирического тестирования на разных устройствах. Устройства вблизи порога могут вести себя по-разному между сессиями – это ожидаемо, и оба уровня обеспечивают корректный рендеринг.