Воспроизведение видео

Godot поддерживает воспроизведение видео с помощью узла VideoStreamPlayer.

Поддерживаемые форматы воспроизведения

The only supported format in core is Ogg Theora (not to be confused with Ogg Vorbis audio) with optional Ogg Vorbis audio tracks. It's possible for extensions to bring support for additional formats.

H.264 и H.265 не могут поддерживаться в ядре Godot, поскольку оба они обременены патентами на программное обеспечение. AV1 не требует авторских отчислений, но он по-прежнему медленно декодируется на CPU, а аппаратная поддержка декодирования пока доступна не на всех используемых GPU.

WebM поддерживался в ядре Godot 3.x, но в версии 4.0 его поддержка была удалена, так как он был слишком глючным и сложным в обслуживании.

Примечание

Вы можете найти видео с расширениями .ogg или .ogx, которые являются общими расширениями для данных внутри контейнера Ogg.

Переименование расширений этих файлов в .ogv может позволить импортировать видео в Godot. Однако не все файлы с расширениями .ogg или .ogx являются видео - некоторые из них могут содержать только аудио.

Настройка VideoStreamPlayer

  1. Создайте узел VideoStreamPlayer, используя диалоговое окно "Создать новый узел".

  2. В дереве сцен выберите узел VideoStreamPlayer, откройте нспектор и загрузите файл .ogv в свойство Поток.

  3. Если вы хотите, чтобы видео воспроизводилось сразу после загрузки сцены, установите флажок Автозапуск в инспекторе. Если нет, оставьте Автозапуск отключенным и вызовите play() на узле VideoStreamPlayer в скрипте, чтобы начать воспроизведение по желанию.

Управление изменением размера и различных соотношений сторон

По умолчанию в Godot 4.0 размер VideoStreamPlayer будет автоматически изменен в соответствии с разрешением видео. Вы можете привести его к обычному размеру Control, включив Expand на узле VideoStreamPlayer.

Чтобы настроить изменение размера узла VideoStreamPlayer в зависимости от размера окна, отрегулируйте привязки с помощью меню Layout в верхней части окна просмотра 2D-редактора. Однако эта настройка может оказаться недостаточно мощной для обработки всех вариантов использования, таких как воспроизведение полноэкранных видеороликов без искажения видео (но с пустым пространством по краям). Для большего контроля вы можете использовать узел AspectRatioContainer, который предназначен для обработки такого рода вариантов использования:

Добавьте узел AspectRatioContainer. Убедитесь, что он не является дочерним узлом какого-либо другого узла контейнера. Выберите узел AspectRatioContainer, затем установите для его Layout в верхней части 2D-редактора значение Full Rect. Установите Ratio в узле AspectRatioContainer в соответствии с соотношением сторон вашего видео. Вы можете использовать математические формулы в инспекторе, чтобы помочь себе. Не забудьте сделать один из операндов плавающей величиной. В противном случае результатом деления всегда будет целое число.

Изменение свойства Ratio контейнера AspectRatioContainer в инспекторе редактора

Это составит (приблизительно) 1,777778

После настройки AspectRatioContainer измените родительский статус узла VideoStreamPlayer на дочерний для узла AspectRatioContainer. Убедитесь, что Expand отключен в VideoStreamPlayer. Теперь ваше видео должно автоматически масштабироваться так, чтобы поместиться на весь экран, избегая при этом искажений.

См. также

Смотрите Multiple resolutions для получения дополнительных советов по поддержке нескольких соотношений сторон в вашем проекте.

Отображение видео на 3D-поверхности

Используя узел VideoStreamPlayer как дочерний по отношению к узлу SubViewport, можно отобразить любой 2D-узел на 3D-поверхности. Например, это может быть использовано для отображения анимированных рекламных щитов(animated billboard), когда покадровая анимация требует слишком много памяти.

Это можно сделать, выполнив следующие действия:

  1. Создайте узел SubViewport. Установите его размер таким образом, чтобы он соответствовал размеру вашего видео в пикселях.

  2. Создайте узел VideoStreamPlayer как дочерний по отношению к узлу SubViewport и укажите в нем путь к видео. Убедитесь, что функция Развернуть отключена, и при необходимости включите функцию Автозапуск.

  3. Создайте узел MeshInstance3D с ресурсом Plane Mesh или QuadMesh в свойстве Mesh. Измените размер сетки в соответствии с соотношением сторон видео (в противном случае оно будет выглядеть искаженным).

  4. Создайте новый стандартный ресурс Material 3D в свойстве Material Override в разделе GeometryInstance3D.

  5. Включите функцию Локально для сцены в разделе ресурсов StandardMaterial3D (внизу). Это необходимо для того, чтобы вы могли использовать ViewportTexture в свойстве текстуры альбедо.

  6. В StandardMaterial3D установите для свойства Albedo > Texture значение New ViewportTexture. Отредактируйте новый ресурс, щелкнув по нему, затем укажите путь к узлу SubViewport в свойстве Viewport Path.

  7. Включите Albedo Texture Force sRGB в StandardMaterial3D, чтобы предотвратить размывание цветов.

  8. Если предполагается, что рекламный щит излучает свой собственный свет, установите Режим затенения на режим без затенения, чтобы повысить производительность рендеринга.

Смотрите = Использовать Viewports и Демо GUI в 3D для получения дополнительной информации о настройке.

Зацикливание видео

Для зацикливания видео можно включить свойство Loop. Это позволит плавно перезапустить видео, когда оно дойдет до конца.

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

Ограничения воспроизведения

Текущая реализация воспроизведения видео в Godot имеет несколько ограничений:

  • Досмотр видео до определенной точки не поддерживается.

  • Изменение скорости воспроизведения не поддерживается. VideoStreamPlayer также не будет следовать Engine.time_scale.

  • Потоковая передача видео из URL-адреса не поддерживается.

  • Only mono and stereo audio output is supported.

Видео с хромакеем

Хромакей(chroma key), широко известный как эффект "зеленого экрана" или "синего экрана", позволяет удалить определенный цвет из изображения или видео и заменить его другим фоном. Этот эффект широко используется в видеопроизводстве для плавного объединения различных элементов.

../../_images/chroma_key_video.webp

Мы добьемся эффекта хромакея, написав пользовательский шейдер на GDScript и используя узел VideoStreamPlayer для отображения видеоконтента.

Настройка сцены

Убедитесь, что сцена содержит узел VideoStreamPlayer для воспроизведения видео и узел Control для размещения элементов пользовательского интерфейса для управления эффектом хромакея.

../../_images/chroma_key_scene.webp

Написание пользовательского шейдера

Чтобы реализовать эффект хромакея, выполните следующие действия:

  1. Выберите узел VideoStreamPlayer в сцене и перейдите к его свойствам. В разделе CanvasItem > Material создайте новый шейдер с именем "ChromaKeyShader.gdshader."

  2. В файле "ChromaKeyShader.gdshader" напишите пользовательский код шейдера, как показано ниже:

shader_type canvas_item;

// Uniform variables for chroma key effect
uniform vec3 chroma_key_color : source_color = vec3(0.0, 1.0, 0.0);
uniform float pickup_range : hint_range(0.0, 1.0) = 0.1;
uniform float fade_amount : hint_range(0.0, 1.0) = 0.1;

void fragment() {
    // Get the color from the texture at the given UV coordinates
    vec4 color = texture(TEXTURE, UV);

    // Calculate the distance between the current color and the chroma key color
    float distance = length(color.rgb - chroma_key_color);

    // If the distance is within the pickup range, discard the pixel
    // the lesser the distance more likely the colors are
    if (distance <= pickup_range) {
        discard;
    }

    // Calculate the fade factor based on the pickup range and fade amount
    float fade_factor = smoothstep(pickup_range, pickup_range + fade_amount, distance);

    // Set the output color with the original RGB values and the calculated fade factor
    COLOR = vec4(color.rgb, fade_factor);
}

Шейдер использует вычисление расстояния для определения пикселей, близких к цвету хромакея, и отбрасывает их, эффективно удаляя выбранный цвет. Пиксели, которые находятся немного дальше от цвета цветовой гаммы, затемняются в соответствии с параметром fade_factor, что позволяет плавно смешивать их с окружающими цветами. Этот процесс создает желаемый эффект цветности, создавая впечатление, что фон был заменен другим изображением или видео.

Приведенный выше код представляет собой простую демонстрацию шейдера хромакея, и пользователи могут настроить его в соответствии со своими конкретными требованиями.

Элементы управления пользовательским интерфейсом

Чтобы пользователи могли управлять эффектом хромакея в режиме реального времени, мы создали ползунки в Control. Скрипт узла Control содержит следующие функции:

 extends Control

 func _on_color_picker_button_color_changed(color):
     # Update the "chroma_key_color" shader parameter of the VideoStreamPlayer's material.
     $VideoStreamPlayer.material.set("shader_parameter/chroma_key_color", color)

 func _on_h_slider_value_changed(value):
     # Update the "pickup_range" shader parameter of the VideoStreamPlayer's material.
     $VideoStreamPlayer.material.set("shader_parameter/pickup_range", value)

 func _on_h_slider_2_value_changed(value):
     # Update the "fade_amount" shader parameter of the VideoStreamPlayer's material.
     $VideoStreamPlayer.material.set("shader_parameter/fade_amount", value)

func _on_video_stream_player_finished():
     # Restart the video playback when it's finished.
     $VideoStreamPlayer.play()

также убедитесь, что диапазон ползунков соответствующий, наши настройки следующие :

../../_images/slider_range.webp

Обработка сигналов

Подключите соответствующий сигнал от элементов пользовательского интерфейса к скрипту узла Control. Вы создали в скрипте узла Control скрипт для управления эффектом хромакея. Эти обработчики сигналов будут обновлять переменные формы шейдера в ответ на вводимые пользователем данные.

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