Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Відтворення відео

Godot підтримує відтворення відео за допомогою вузла VideoStreamPlayer.

Підтримувані формати відтворення

Єдиним підтримуваним форматом в ядрі є Ogg Theora (не плутати з Ogg Vorbis audio). Розширення можуть додавати підтримку додаткових форматів, але станом на липень 2022 року таких розширень ще не існує.

H.264 і H.265 не підтримуються в ядрі Godot, оскільки обидва вони обтяжені патентами на програмне забезпечення. AV1 не потребує ліцензійних відрахувань, але він повільно декодується на CPU, а апаратна підтримка декодування поки що доступна не на всіх графічних процесорах, що використовуються.

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

Примітка

Ви можете знайти відео з розширеннями .ogg або .ogx, які є загальними розширеннями даних у контейнері Ogg.

Перейменування цих розширень на .ogv може дозволити імпортувати відео до Godot. Однак не всі файли з розширеннями .ogg або .ogx є відео - деякі з них можуть містити лише аудіо.

Налаштування VideoStreamPlayer

  1. Створіть вузол VideoStreamPlayer за допомогою діалогового вікна «Створити новий вузол».

  2. Виберіть вузол VideoStreamPlayer у доці дерева сцен, перейдіть до інспектора та завантажте файл .ogv у властивості Stream.

  3. “ ви хочете, щоб відео почало відтворюватися відразу після завантаження сцени, встановіть галочку Autoplay в інспекторі. Якщо ні, залиште Autoplay вимкненим і викличте play() на вузлі VideoPlayer у скрипті, щоб почати відтворення по необхідності.

Робота зі зміною розміру та різними співвідношеннями сторін

За замовчуванням у Godot 4.0 розмір VideoStreamPlayer буде автоматично змінено відповідно до роздільної здатності відео. Ви можете зробити так, щоб він відповідав звичайному розміру Control, увімкнувши Expand у вузлі VideoStreamPlayer.

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

Додайте вузол AspectRatioContainer. Переконайтеся, що він не є нащадком іншого вузла контейнера. Виділіть вузол AspectRatioContainer, а потім встановіть його Макет у верхній частині 2D-редактора на Увесь прямокутник. Встановіть Ratio у вузлі AspectRatioContainer відповідно до співвідношення сторін вашого відео. Ви можете використовувати математичні формули в інспекторі, щоб допомогти собі. Не забудьте зробити один з операндів десятковим. Інакше результат ділення завжди буде цілим числом.

Властивість Ratio вузла AspectRatioContainer змінюється в інспекторі редактора

Результат буде (приблизно) 1.777778

Після того, як ви налаштували AspectRatioContainer, повторно створіть свій вузол VideoStreamPlayer, щоб він був дочірнім вузлом AspectRatioContainer. Переконайтеся, що Розгорнути увімкнено у VideoStreamPlayer. Тепер ваше відео має автоматично змінюватися на весь екран, уникаючи спотворень.

Дивись також

Дивіться Кілька дозволів для отримання додаткових порад щодо підтримки різних співвідношень сторін у вашому проекті.

Відображення відео на 3D-поверхні

Використовуючи вузол VideoStreamPlayer як дочірнього вузла SubViewport, можна відобразити будь-який 2D-вузол на 3D-поверхні. Наприклад, це можна використовувати для відображення анімованих рекламних щитів, коли покадрова анімація вимагає забагато пам’яті.

Це можна зробити за допомогою наступних кроків:

  1. Створіть вузол SubViewport. Установіть його розмір відповідно до розміру вашого відео в пікселях.

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

  3. Створіть вузол MeshInstance3D із ресурсом PlaneMesh або QuadMesh у його властивості Mesh. Змініть розмір сітки відповідно до формату відео (інакше воно виглядатиме спотвореним).

  4. Створіть новий ресурс StandardMaterial3D у властивості Material Override у розділі GeometryInstance3D.

  5. Увімкніть Local To Scene у розділі ресурсів StandardMaterial3D (внизу). Це обов’язково перед використанням ViewportTexture у властивості Albedo Texture.

  6. У StandardMaterial3D встановіть для властивості Albedo > Texture значення New ViewportTexture. Відредагуйте новий ресурс, клацнувши його, а потім укажіть шлях до вузла SubViewport у властивості Viewport Path.

  7. Увімкніть Albedo Texture Force sRGB у StandardMaterial3D, щоб запобігти розмиванню кольорів.

  8. Якщо рекламний щит має випромінювати власне світло, встановіть для Shading Mode значення Unshaded, щоб покращити продуктивність візуалізації.

Дивіться Використання вікон перегляду та демонстрацію графічного інтерфейсу у 3D для отримання додаткової інформації про налаштування.

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

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

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

Обмеження відтворення

Існує кілька обмежень у поточній реалізації відтворення відео в Godot:

  • Перегляд відео з певної точки не підтримується.

  • Зміна швидкості відтворення не підтримується. VideoStreamPlayer також не слідуватиме Engine.time_scale.

  • Потокове відео з URL-адреси не підтримується.

Відео 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, плавно змішуючи їх із навколишніми кольорами. Цей процес створює бажаний ефект кольоровості, створюючи враження, ніби фон було замінено іншим зображенням або відео.

Наведений вище код представляє просту демонстрацію шейдера Chroma Key, і користувачі можуть налаштувати його відповідно до своїх конкретних вимог.

Елементи керування інтерфейсу користувача

Щоб дозволити користувачам маніпулювати ефектом кольоровості в режимі реального часу, ми створили повзунки у вузлі «Керування». Сценарій вузла 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

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

Підключіть відповідний сигнал від елементів UI до сценарію вузла Control. ви створили у сценарії вузла Control для керування ефектом кольоровості. Ці обробники сигналів оновлюватимуть уніфіковані змінні шейдера у відповідь на введення користувача.

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