Онлайн урок. Использование сегментации и текстур камеры в Spark AR для создания маски с эффектом отделения человека от фона

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

Вы будете использовать текстуру маски сегментации (segmentation texture), чтобы разделить в маске передний план и фон сцены. Затем вы примените текстуру камеры (camera texture) к материалу на переднем плане - для потоковой передачи видео человека, использующего эффект, обратно в сцену. Затем вы сможете изменить фон позади человека, использующего маску.

Вам не нужно никаких пользовательских активов для создания этого эффекта. Все, что вам нужно сделать, это открыть Spark AR Studio, чтобы начать работу.

В этом уроке мы рассмотрим:
  • Создание текстуры маски сегментации
  • Создание текстуры камеры
  • Создание фона
  • Добавление сегментации



Создание текстуры маски сегментации

Начните с создания текстуры маски сегментации. Эта текстура отделяет передний план - с пользователем - от фона.

Чтобы сделать это:
  1. Выберите Camera на панели «scene».
  2. В инспекторе нажмите «+» рядом с «segmentation».
Теперь вы увидите текстуру на панели «Assets» - она называется segmentationMaskTexture0.



Создание текстуры камеры

Затем создайте текстуру камеры:

  1. Убедитесь, что Camera выбрана на панели «Scene».
  2. Нажмите + рядом с «extraction camera texture».
Вы увидите текстуру с названием cameraTexture0 на панели «Assets» .



Создание фона

Чтобы визуализировать пользователя в сцене и создать фон, вы будете использовать 2D-объекты, называемые rectangle. Вам понадобятся два таких объекта.

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

Прямоугольники всегда являются дочерними элементами canvas. В этом случае это будет означать, что прямоугольники масштабируются вместе с экраном устройства.



Начните с создания прямоугольника, который будет формировать фон:

  1. Нажмите «+Add Object» в нижней части панели «Scen».
  2. Выберите Rectangle из меню. Если не выбирается - сначала выберите Canvas, затем Rectangle.



Чтобы вам было проще отслеживать объекты на сцене - лучше всего их переименовать. Для этого просто:

  1. Щелкните правой кнопкой мыши на прямоугольнике
  2. Выберите переименовать
  3. Назовите его bg_rectangle
В окне просмотра вы можете видеть, что прямоугольник довольно маленький и расположен в середине сцены. Мы хотим, чтобы он заполнил весь холст и чтобы он в принципе заполнял весь экран устройства, вне зависимости от модели телефона человека.

Для этого перейдите на панель инспектора и нажмите на кнопки "Fill Weight" и "Fill Height" напротив параметра Size.



Затем создайте материал для прямоугольника. В нижней части инспектора:
  1. Нажмите + рядом с Material.
  2. Выберите Create New Material.
Новый материал появится на панели «Assets». Щелкните правой кнопкой мыши на материал и переименуйте его, например bg_material.

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



Для этого выберите материал. На панели «Инспектор» измените тип шейдера на flat.

Плоские материалы оказывают меньшее влияние на производительность, чем стандартные материалы . Лучше всего использовать стандартные материалы для 3D-объектов, потому что они имитируют реалистичное освещение для обеспечения глубины.



Затем под свойствами Diffuse:

  1. Нажмите на поле рядом с Color.
  2. Выберите цвет для фона из меню - я собираюсь выбрать синий.
  3. Нажмите ОК


Добавление сегментации (segmentation)

Теперь давайте создадим передний план с пользователем.

Щелкните правой кнопкой мыши на Canvas и добавьте еще один Rectangle. Как и прежде, переименуйте прямоугольник - используйте что-то вроде user_material. В Инспекторе снова выберите "Fill Parent".

Создайте материал для прямоугольника и выберите его на панели «Assets» - он будет указан как «Material0». Как и прежде, переименуйте его. Вы можете снова выбрать что-то вроде user_material. В инспекторе измените тип шейдера на Flat.

Затем под свойствами Diffuse:
  1. Нажмите раскрывающийся список рядом с текстурой.
  2. Выберите cameraTexture0 из списка

Пользователь появился в сцене, но мы не можем видеть фон. Это потому, что мы еще не применили текстуру маски сегментации.

Чтобы применить текстуру маски сегментации:

  1. Установите флажок рядом с Alpha, чтобы активировать это свойство.
  2. Рядом с текстурой щелкните раскрывающийся список и выберите SegmentationMaskTexture.

Готово! Вы создали маску в инстаграм с эффектом отделения человека от фона :)




Читайте также:

Made on
Tilda