Почему частота кадров WebGL падает в полноэкранном режиме? - PullRequest
Новая
       167

Почему частота кадров WebGL падает в полноэкранном режиме?

1 голос
/ 06 августа 2020

Я визуализирую довольно сложную сцену WebGL здесь . Когда я просматриваю сцену на встроенном дисплее MacBook Pro в полноэкранном режиме, она отображается плавно со скоростью 60 кадров в секунду. Когда я просматриваю сцену на внешнем мониторе в полноэкранном режиме, частота кадров значительно падает и становится очень прерывистой.

Собственное разрешение моего дисплея составляет 4K, и он работает с частотой 60 Гц. Мой iGPU - Iris Plus 640. Я использую масштабирование DPI и Chrome определяет разрешение 2560x1440 с соотношением пикселей 2. Я устанавливаю размер холста на 1280x720, и это составляет c независимо от размера представления. Я использую CSS, чтобы масштабировать его до полного экрана с соотношением сторон 16: 9, используя следующие правила: 

canvas {
    width: 100vw;
    height: 56.25vw;
    max-width: 177.78vh;
    max-height: 100vh;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

Я устанавливаю image-rendering: pixelated, потому что я заметил небольшое улучшение производительности и визуального восприятия. . Насколько я понимаю, последний этап рендеринга - это копирование буфера кадра на видимый холст. Если холст больше, он интерполирует между пикселями, и это имеет свою стоимость. Установка «пиксельного» немного похожа на использование NEAREST фильтрации и поэтому работает быстрее.

Когда я создаю контекст WebGL, я отключаю вещи, которые мне не нужны: 

canvas.getContext('webgl', {
  alpha: false,
  depth: false,
  stencil: false,
  antialias: false,
  powerPreference: 'high-performance',
});

I ' я последовал большинству советов здесь . Я использую инстансинг с текстурным атласом, я пытался минимизировать изменения состояния. Атрибут 0 включен, et c.

Я не думаю, что проблема в моем шейдере, так как я рендеринг с фиксированным размером 1280x720. Поэтому, например, если у меня было слишком много перерисовки, не должно ли это также повлиять на производительность при меньшем размере холста (например, на дисплее моего MacBook Pro)?

Я действительно не уверен, что еще попробовать . Я рыскал по сети и пробовал много вещей, таких как использование CSS преобразований для масштабирования холста вместо ширины / высоты. Я пробовал установить свойство zoom. Я также потратил некоторое время на просмотр вкладки производительности в Chrome и (пытался) от go до about:tracing. Я видел несколько отчетов об ошибках, касающихся Chrome, но я вижу ту же проблему как в Firefox, так и в Safari. Я только что достиг предела размера холста WebGL (для моего графического процессора)?

Я уверен, что видел другие демонстрации WebGL, которые отлично масштабируются до полноэкранного режима, так что я действительно запутался. Что происходит?

...