VideoTexture: текстура из видео

В Three.js класс VideoTexture позволяет использовать видеопоток как текстуру для материалов, открывая возможности для динамического отображения видео на 3D-объектах. Это эффективный инструмент для создания интерактивных сцен, рекламных панелей, экранов, анимаций и даже визуализаций в реальном времени.

Создание VideoTexture

Для начала необходим HTML-элемент <video>:

<video id="video" src="video.mp4" loop muted playsinline></video>

Обязательные атрибуты:

  • loop — повтор видео при окончании воспроизведения.
  • muted — отключение звука, требуется для автоматического воспроизведения в браузерах.
  • playsinline — предотвращает открытие полноэкранного режима на мобильных устройствах.

Инициализация VideoTexture в Three.js:

const video = document.getElementById('video');
video.play();

const videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;

Ключевые моменты:

  • minFilter и magFilter управляют масштабированием текстуры. Для плавного отображения часто используют LinearFilter.
  • format определяет цветовое пространство текстуры. Для обычного видео применяется THREE.RGBFormat.

Применение к материалам

VideoTexture можно использовать в любых материалах, поддерживающих карту текстуры, чаще всего с MeshBasicMaterial:

const geometry = new THREE.PlaneGeometry(16, 9);
const material = new THREE.MeshBasicMaterial({ map: videoTexture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
  • PlaneGeometry хорошо подходит для экранов и панелей, так как сохраняет пропорции видео.
  • Для кубов и других объектов видео также можно применять, но важно правильно настроить UV-развёртку.

Управление воспроизведением

Видеообъект работает как обычный HTML <video>. Можно управлять:

video.pause();
video.play();
video.currentTime = 10; // перемотка на 10 секунд

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

  • Изменения происходят мгновенно на текстуре.
  • Для динамических эффектов можно изменять playbackRate:
video.playbackRate = 1.5; // ускорение видео

Производительность и оптимизация

Видео текстуры могут быть ресурсоёмкими. Основные рекомендации:

  1. Размер видео — лучше подбирать разрешение, близкое к размеру объекта. Например, для маленького экрана 1280×720 будет достаточно.
  2. Формат видео — использовать H.264 для совместимости с браузерами.
  3. Минимизация фильтров — лишние эффекты (mipmaps, anisotropy) увеличивают нагрузку на GPU.
  4. Проверка готовности видео — текстура работает только после video.readyState >= video.HAVE_CURRENT_DATA.

Пример проверки:

if (video.readyState >= video.HAVE_CURRENT_DATA) {
    const videoTexture = new THREE.VideoTexture(video);
}

Комбинирование с эффектами

VideoTexture можно интегрировать с шейдерами:

const material = new THREE.ShaderMaterial({
    uniforms: {
        uVideo: { value: videoTexture }
    },
    vertexShader: vertexShaderCode,
    fragmentShader: fragmentShaderCode
});

Это позволяет создавать эффекты:

  • искажения и волны на поверхности экрана,
  • цветовые фильтры и градиенты,
  • смешение нескольких видео через mix в фрагментном шейдере.

Ограничения

  • Видео с защитой DRM может не работать как текстура.
  • Автовоспроизведение в некоторых браузерах требует muted.
  • VideoTexture обновляется автоматически каждый кадр, но слишком большое видео может снизить FPS сцены.

Практические сценарии

  • Виртуальные телевизоры и мониторы в 3D-сценах.
  • Презентации и рекламные баннеры с динамическим контентом.
  • Использование веб-камеры через getUserMedia:
navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
        video.srcObject = stream;
        video.play();
        const videoTexture = new THREE.VideoTexture(video);
    });

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

Итоговое подключение

VideoTexture является мощным инструментом для динамических текстур, обеспечивая плавное отображение видео на 3D-объектах с минимальными усилиями. Его гибкость позволяет использовать стандартные HTML-видео и расширять возможности с помощью шейдеров и эффектов.

Оглавление