Блог

Главная - Вопросы по программированию - Three.js мерцание только на экране macbook pro retina

Three.js мерцание только на экране macbook pro retina

#javascript #graphics #three.js #3d #webgl

Вопрос:

Я столкнулся с проблемой мерцания при рендеринге облака движущихся точек в Three.js . Проблема появляется только при загрузке страницы на экране Macbook Pro Retina. Интересно, что если страница загружается на внешний монитор (2560×1440) и перетаскивается на экран retina, проблемы с мерцанием не возникает. Если я перезагружаю ту же страницу на экране retina, мерцание начинается снова. На iPhone нет проблем с мерцанием.

Фон не мерцает, и это происходит только при движении облака точек. Не имеет значения, является ли движение постоянной скоростью. Все облако точек мерцает одновременно.

Средство визуализации:

 renderer = new THREE.WebGLRenderer({
        powerPreference: "high-performance"
    });

Материал:

         const material = new THREE.PointsMaterial({
            vertexColors: true,
            size: 1,
            sizeAttenuation: false,
            depthTest: false,
            transparent: true,
            opacity: 0.4,
            alphaTest: 0.2
        });

Следующее не меняет проблему:

  • Изменение ближнего или дальнего усечения
  • Включение сглаживания
  • Не связано с z-файтингом. Тестирование глубины или запись не имеют значения.
  • Непрозрачность, буквенный тест, прозрачный
  • Уменьшение количества точек в облаке точек
  • Изменение браузеров (протестировано на Chrome, Safari, Firefox)
  • Изменение powerPreference средства визуализации

Кажется, я не могу понять, почему проблемы характерны для экрана Macbook Pro Retina.

Спасибо за помощь.

Комментарии:

1. Используете ли вы Window.devicePixelRatio для вычисления соответствующего размера окна просмотра вашего средства визуализации?

2. Да, я использую renderer.setPixelRatio(window.devicePixelRatio); . Отключение этого устраняет мерцание (спасибо!). Знаете ли вы, почему это вызывает проблему, и есть ли другой способ установить соотношение пикселей для мобильных устройств?

3. Снимок в темноте: возможно, внешний монитор явно управляется дискретным графическим процессором, в то время как Retina использует некоторую переключаемую графическую магию для экономии энергии, а браузер получает ресурсы графического процессора источника, в котором он запущен. Помните, powerPreference это не инструкция , это подсказка , и нет никакой гарантии, что вы получите запрошенные ресурсы.

Метки: