Hardware Scaling Level

В графических приложениях на базе WebGL значительную роль играет баланс между качеством изображения и производительностью. В библиотеке Babylon.js этот баланс регулируется рядом параметров движка, одним из ключевых является Hardware Scaling Level — коэффициент аппаратного масштабирования рендера.

Hardware Scaling Level определяет, в каком разрешении сцена фактически рендерится по отношению к размеру canvas, после чего полученное изображение масштабируется до реального размера экрана. Такой подход позволяет существенно снижать нагрузку на графический процессор.

Фактически параметр управляет внутренним разрешением рендеринга:

  • Меньшее значение → выше внутреннее разрешение → лучшее качество изображения
  • Большее значение → ниже внутреннее разрешение → выше производительность

Если canvas имеет разрешение 1920×1080 и используется масштабирование 2, реальный рендеринг сцены будет происходить в разрешении:

960 × 540

После рендера изображение увеличивается до размеров canvas.

Роль Hardware Scaling Level в архитектуре Babylon.js

В Babylon.js рендеринг сцены осуществляется через объект Engine, который управляет WebGL-контекстом, кадрами рендера и взаимодействием с GPU.

Параметр аппаратного масштабирования хранится внутри движка и влияет на:

  • размер render target
  • нагрузку на GPU
  • частоту кадров
  • использование fill rate

Fill rate — это скорость, с которой GPU может заполнять пиксели. Именно этот показатель часто становится узким местом в WebGL-сценах с большим количеством пиксельных операций: освещение, пост-эффекты, прозрачность, PBR-материалы.

Уменьшение внутреннего разрешения напрямую уменьшает количество вычисляемых пикселей.

Например:

Разрешение Количество пикселей
1920×1080 2 073 600
1280×720 921 600
960×540 518 400

Снижение разрешения до 960×540 уменьшает вычисления примерно в 4 раза.

Установка Hardware Scaling Level

В Babylon.js изменение коэффициента выполняется через метод setHardwareScalingLevel() объекта Engine.

Пример:

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);

engine.setHardwareScalingLevel(1);

Значение 1 означает отсутствие масштабирования — сцена рендерится в полном разрешении canvas.

Примеры различных значений

Полное разрешение

engine.setHardwareScalingLevel(1);

Особенности:

  • максимальная детализация
  • высокая нагрузка на GPU
  • подходит для мощных устройств

Умеренное снижение разрешения

engine.setHardwareScalingLevel(1.5);

Характеристики:

  • небольшая потеря четкости
  • заметный прирост FPS
  • часто используется на ноутбуках и средних GPU

Агрессивная оптимизация

engine.setHardwareScalingLevel(2);

Особенности:

  • сильное снижение нагрузки
  • изображение может стать немного размытым
  • полезно для мобильных устройств

Получение текущего уровня масштабирования

Babylon.js предоставляет метод для получения текущего значения:

const scale = engine.getHardwareScalingLevel();

Это полезно при создании систем динамической оптимизации производительности.

Динамическое изменение масштабирования

Hardware Scaling Level может изменяться во время работы сцены. Такой подход используется в адаптивных системах производительности.

Пример простой логики:

scene.onBeforeRenderObservable.add(() => {
    const fps = engine.getFps();

    if (fps < 40) {
        engine.setHardwareScalingLevel(2);
    } else if (fps > 55) {
        engine.setHardwareScalingLevel(1);
    }
});

Принцип работы:

  1. измеряется FPS
  2. при падении производительности уменьшается внутреннее разрешение
  3. при повышении FPS возвращается более качественный рендеринг

Связь с DPI и устройствами с высокой плотностью пикселей

На устройствах с высоким devicePixelRatio (например Retina-дисплеи) canvas автоматически масштабируется, чтобы изображение оставалось резким.

Babylon.js может учитывать DPI при создании движка:

const engine = new BABYLON.Engine(canvas, true, {
    adaptToDeviceRatio: true
});

В этом случае фактическое разрешение canvas увеличивается пропорционально devicePixelRatio.

Например:

Экран devicePixelRatio Реальный canvas
1920×1080 2 3840×2160

Без использования Hardware Scaling Level это может резко увеличить нагрузку на GPU.

Поэтому часто применяется комбинация:

engine.setHardwareScalingLevel(1.5);

Связь с размером canvas

Hardware Scaling Level влияет на внутренний render buffer, но не изменяет физический размер canvas.

Алгоритм работы движка:

  1. определяется размер canvas
  2. применяется коэффициент масштабирования
  3. создаётся render target уменьшенного размера
  4. изображение масштабируется до canvas

Схема:

Canvas (1920x1080)
        ↓
Hardware Scaling = 2
        ↓
Render Buffer (960x540)
        ↓
Upscale
        ↓
Display (1920x1080)

Использование в мобильных приложениях

Мобильные GPU значительно слабее настольных. Основные ограничения:

  • низкий fill rate
  • ограниченная память
  • слабая производительность шейдеров

Поэтому для мобильных устройств часто используется масштабирование:

engine.setHardwareScalingLevel(2);

Иногда применяется даже более высокий коэффициент:

engine.setHardwareScalingLevel(3);

Это уменьшает рендеринг в 9 раз по количеству пикселей, что резко повышает FPS.

Адаптация под тип устройства

Babylon.js позволяет определить тип устройства через JavaScript и применить разные параметры.

Пример:

const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);

if (isMobile) {
    engine.setHardwareScalingLevel(2);
} else {
    engine.setHardwareScalingLevel(1);
}

Такой подход используется во многих WebGL-проектах.

Интеграция с системой адаптивного качества

В крупных сценах Babylon.js применяется Adaptive Quality System, которая может автоматически изменять различные параметры:

  • уровень пост-эффектов
  • количество теней
  • качество текстур
  • Hardware Scaling Level

Пример адаптивной системы:

let scaling = 1;

scene.onBeforeRenderObservable.add(() => {

    const fps = engine.getFps();

    if (fps < 45 && scaling < 2.5) {
        scaling += 0.1;
        engine.setHardwareScalingLevel(scaling);
    }

    if (fps > 58 && scaling > 1) {
        scaling -= 0.1;
        engine.setHardwareScalingLevel(scaling);
    }

});

Плавное изменение коэффициента позволяет избежать резких скачков качества изображения.

Влияние на пост-процессинг

Hardware Scaling Level влияет на работу post-processing effects:

  • Bloom
  • Depth of Field
  • Motion Blur
  • Screen Space Reflections
  • SSAO

Эти эффекты выполняются в пространстве экрана. При уменьшении внутреннего разрешения:

  • уменьшается стоимость эффектов
  • снижается точность вычислений
  • может появляться размытость

Поэтому в проектах с большим количеством пост-эффектов масштабирование часто является главным инструментом оптимизации.

Влияние на антиалиасинг

Если используется MSAA или FXAA, снижение разрешения может влиять на качество сглаживания.

Например:

  • при scaling = 2 edges становятся более мягкими
  • FXAA может частично компенсировать потерю детализации

Комбинация:

Hardware Scaling + FXAA

часто используется для балансировки качества и производительности.

Влияние на текстуры и геометрию

Важно понимать, что Hardware Scaling Level не изменяет:

  • разрешение текстур
  • количество полигонов
  • геометрию сцены

Он влияет только на количество пикселей, которые обрабатывает GPU.

Таким образом оптимизируется именно pixel shading, а не vertex processing.

Практические рекомендации

Типичные значения для разных типов устройств:

Устройство Scaling
High-end PC 1
Средний ноутбук 1.25 – 1.5
Планшет 1.5 – 2
Смартфон 2 – 3

Использование вместе с Resize

При изменении размера окна масштабирование продолжает работать автоматически, так как Babylon.js обновляет render buffers.

Пример:

window.addEventListener("resize", () => {
    engine.resize();
});

После resize движок пересчитывает:

  • размер canvas
  • render buffer
  • масштабирование

Отладка и визуальная оценка

При разработке сцен полезно проверять влияние Hardware Scaling Level на FPS.

Пример вывода статистики:

console.log("FPS:", engine.getFps());
console.log("Scaling:", engine.getHardwareScalingLevel());

Также часто используется встроенный Inspector Babylon.js, где можно наблюдать производительность сцены в реальном времени.

Ограничения и побочные эффекты

Сильное уменьшение внутреннего разрешения может приводить к:

  • размытию UI
  • ухудшению читаемости текста
  • потере деталей мелких объектов
  • артефактам пост-эффектов

Поэтому масштабирование должно использоваться аккуратно и сочетаться с другими методами оптимизации:

  • LOD-системами
  • батчингом мешей
  • оптимизацией материалов
  • уменьшением количества источников света

Итоговая роль параметра

Hardware Scaling Level является одним из наиболее эффективных инструментов оптимизации WebGL-сцен, поскольку напрямую снижает количество пиксельных вычислений. В сложных сценах Babylon.js изменение этого параметра может увеличить производительность в несколько раз без изменения геометрии, текстур или логики сцены.

Оглавление