Собачьи уши такие 2018.
Ах, Инстаграм - моя жизнь, моя любовь, моя гибель. Жажда чужих отпусков и поздних завтраков - мое официальное хобби, но хотя мне нравится бесконечно пролистывать прекрасные жизни людей, которых я по большей части не знаю, я больше люблю «Истории». Они быстрые, простые, а их ограниченный срок службы позволяет мне быть настолько глупым, насколько я хочу, не разрушая при этом всю эстетику сетки.
Кроме того, «Истории» позволяют добавлять фильтры к вашим фотографиям - это одна из самых универсальных функций социальных сетей в наши дни. Хотите кататься на лошадях, выглядя как милый грызун? Для этого есть фильтр. Хотите иметь гладкую шелковистую кожу и примерить помады, которые вам не по карману? Для этого есть фильтр. Хотите выглядеть как обложка альбома Pink Floyd? Ну, суть вы поняли.
В течение многих лет фильтры Instagram создавались только самой платформой или несколькими студиями и создателями, имеющими доступ к Spark AR Studio, инструменту Facebook, разработанному специально для создания фильтров для их платформ. Но ситуация изменилась в начале августа, когда закрытая бета-версия Spark AR закончилась и программа стала доступна всем, кто мечтает создать свои собственные фильтры.
Итак, как я фанат Instagram, я вызвался добровольцем и начал учиться создавать свои собственные фильтры, а затем написать об этом, чтобы вы тоже могли это сделать.
Но прежде чем мы начнем, вам нужно кое-что знать:
Это не так уж сложно (если ты этого не хочешь)
Создание фильтра может оказаться сложной задачей, но сложность зависит от того, насколько сложна ваша идея. Если вы хотите придерживаться чего-то простого, вы можете создать множество 2D-эффектов в Spark AR, которые не потребуют от вас ничего анимировать или тратить часы на то, чтобы во всем разобраться.
Опыт не обязателен, но он облегчает задачу
Если вы уже знакомы с программами графического редактирования, такими как Cinema 3D или даже Adobe Photoshop, возможно, вам будет проще ориентироваться в Spark AR. Если это ваше первое знакомство с таким инструментом, обязательно сначала изучите платформу и поэкспериментируйте с ней. Это поможет вам узнать его немного лучше.
Spark AR уже сделал большую часть работы за вас
Когда Facebook открыл Spark AR для публики, он создал сообщество создателей, которые помогают, информируют и вдохновляют своих участников в новом искусстве создания фильтров. Существует также богатая платформа контента, материалов и учебных пособий для обучения людей всем, что касается фильтров. Фактически, когда вы загружаете Spark AR, первое, что вы видите, - это меню с предустановленными проектами, такими как анимированная маска для лица кролика, полоса света и плавающие частицы. Это даст вам довольно хорошее представление о том, как основные типы фильтров работают за кулисами, но вы также сможете поэкспериментировать с ними, пока не добьетесь чего-то совершенно нового и своего.
Если вы более предприимчивы и хотите попробовать анимировать 3D-объекты, есть целая библиотека предустановленных элементов, которые вы можете добавить в фильтры, включая всевозможные черепа, покеболы, аниме-персонажей и даже реалистичные танцы. краб, по какой-то причине.
Поскольку у меня нет абсолютно никакого опыта в анимации и я все равно предпочитаю минималистичные эффекты, я создам простой 2D-фильтр. Сделать это достаточно просто и станет идеальным началом создания фильтров. Вы можете комбинировать 2D-элементы, использовать их отдельно или даже умножать их в одном проекте, чтобы создать более богатый эффект.
Урок № 1 - Познай свое окружение
Spark AR имеет множество элементов. Знать свой путь очень важно. Сандра Гутьеррес Г.
Начните с загрузки Spark AR Studio. Он бесплатен, прост в установке и доступен для Windows 10 и macOS Mojave 10.14 и более поздних версий. После установки вы можете работать с различными пресетами или создать свой собственный фильтр с нуля, нажав кнопкуСоздать проект в правом нижнем углу.
Spark AR откроется в рабочей области по умолчанию, которая разделена на четыре области. В левом верхнем углу находится панель «Сцена», которая покажет базовую структуру объектов в вашем фильтре. По умолчанию вы увидите «ambientLight0» и «directionLight0», которые являются элементами освещения.
Под панелью «Сцена» находится панель «Ресурсы», которая будет содержать все материалы, описывающие объекты на панели «Сцена». Например, если вы добавите красный прямоугольник на панель «Сцена», элемент цвета появится на панели «Ресурсы».
Пространство посередине - это область просмотра. Это будет ваше основное рабочее пространство, предлагающее два ракурса вашего проекта. На более крупном в центре показаны все объекты в вашем фильтре, находящиеся в радиусе действия камеры вашего устройства. Это поможет вам создавать эффекты в пространстве камеры, которые движутся вместе с камерой, или в мировом пространстве, которые остаются на месте независимо от того, куда движется камера.
Этот маленький прямоугольник - это ваше устройство, а линии, соединяющие его с изображением, показывают диапазон действия вашей камеры. скриншот области просмотра в искре ar
В правом верхнем углу окна просмотра есть еще одно средство просмотра, называемое «симулятор», которое показывает, как ваш фильтр будет выглядеть в конечном продукте. По умолчанию вы увидите свою работу так, как она будет выглядеть на iPhone 8, но если вы наведете курсор на средство просмотра и щелкните имя устройства, вы сможете изменить его. Варианты охватывают ряд устройств iOS (включая iPad) и смартфонов Android (включая некоторые версии Samsung Galaxy, Google Pixel и Google Nexus).
Вы можете выбрать конкретное устройство, для которого хотите создать фильтр, или проверить, как он будет выглядеть на разных экранах. Сандра Гутьеррес Г.
Наконец, в крайнем правом углу вашего рабочего пространства находится панель «Инспектор», которая отображает свойства элементов вашей сцены и позволяет редактировать цвет, текстуру, положение, вращение и другие детали.
Spark AR включает в себя несколько тестовых лиц, на которых вы можете примерить свои фильтры. Вы сможете увидеть, как они выглядят на людях разного пола и национальности, на чистом холсте и даже на вас самих. Вы можете поиграть со своими параметрами, щелкнув значок камеры слева от панели «Сцена» и выбрав лицо, которое хотите использовать, во всплывающем меню. Если вы хотите попробовать это на себе, выберитеFacetime HD Camera, и вы сможете создать фильтр на своем лице.
О, привет! Привет из-за красной площади. скриншот искры, показывающий прямую трансляцию с камеры
В любой момент процесса вы можете протестировать свою работу в приложении Instagram. Просто нажмите кнопкуОтправить на устройство(вторая слева от панели «Ресурсы») и выберитеОтправить в приложение. Вы можете протестировать его как в Facebook, так и в Instagram, нажав кнопкуОтправить рядом с каждым из них.
Если вы никогда не выходили за рамки Microsoft Office, это может показаться вам немного нервным, но не волнуйтесь - все начнет обретать смысл, как только вы действительно начнете работать. Если вам нужна дополнительная помощь, ознакомьтесь с описанием интерфейса Spark AR.
Урок №2 - Телепортация путем смены фона
Давайте начнем с простого. Смена фона технически называется «сегментацией» и представляет собой простой, но забавный эффект, предлагающий массу возможностей.
1. Выберите изображение, которое будет использоваться в качестве фона. Вы можете выбрать подходящую фотографию или создать что-то новое, играя с цветами и эффектами в Photoshop или любом другом программном обеспечении для редактирования изображений. Я выбрал одну из фотографий туманности Пузырь в созвездии Кассиопеи, полученных космическим телескопом Хаббл. Посмотрите, как это круто - вам, конечно, захочется туда телепортироваться. Даже имя у него рад.
2. Добавьте два прямоугольника. Один будет фоном (как зеленый экран), а другой будет отображать ваше лицо, стирая реальный фон. Перейдите в правый нижний уголПанель сцены, нажмитеДобавить объект, прокрутите всплывающее меню вниз и выберитеПрямоугольник. Сделайте это дважды. По умолчанию ваши прямоугольники будут выглядеть как «Rectangle0» и «Rectangle1», но рекомендуется изменить имена, чтобы не заблудиться. Например, я изменил «Rectangle0» на «Background», а «Rectangle1» на «Foreground». Для этого дважды щелкните имя, и появится поле. Убедитесь, что оба прямоугольника вложены вcanvas0. Это означает, что оба будут «дочерними» для этого элемента и будут подвергаться любым изменениям, которые вы вносите в их «родительский элемент».
3. Установите размеры прямоугольников. Нажмите наBackgroundпрямоугольник (ранее известный как «Rectangle0»), и вы увидите его свойства на панели Инспектора справа. Нажмите на поляРазмер, а затем на появившиеся раскрывающиеся спискиШирина заливкииВысота заливки. Это приведет к изменению размера прямоугольника независимо от того, на каком устройстве человек его использует. Сделайте то же самое для второго прямоугольника. Ваше окно просмотра будет полностью покрыто прямоугольниками, которые будут отображаться в виде клетчатого узора под названием «альфа». Это означает, что они прозрачны, но они все еще здесь.
На этом этапе мы хотим расширить оба прямоугольника, чтобы охватить весь фильтр. Сандра Гутьеррес Г.
4. Разделите слои. По умолчанию любой добавляемый вами объект будет присоединен к слою, с которым вы работали в последний раз. Если вы не хотите, чтобы он был там, вам придется переместить его на другой слой. Чтобы эффект сегментации работал, вам понадобятся прямоугольники в разных слоях, чтобы фон отображался после переднего плана. Для этого нажмите на прямоугольникBackgroundна панели «Сцена». На панели Инспектора справа щелкните полеСлойи выберитеСоздать новый слой. Если вы хотите, вы можете переименовать слои, щелкнув вкладкуСлои в правом верхнем углу панели «Сцена» и дважды щелкнув имя каждого слоя по очереди.
5. Создайте новые материалы. Пришло время придать этим прозрачным прямоугольникам твердую форму. Для этого и нужны «Материалы». Вы назначите каждому прямоугольнику собственный материал, выбрав каждый из них на панели «Сцена», а затем на панели «Инспектор» справа щелкнув знак «плюс» рядом сMaterials. Когда вы сделаете это во второй раз, вы увидите раскрывающееся меню, предлагающее существующие материалы или возможность создать новый. Выбирайте последнее.
После того как вы выбрали материалы, они появятся на панели «Ресурсы». Также рекомендуется переименовать их, чтобы отслеживать. Когда вы выберете материалы на панели «Ресурсы», вы увидите множество новых опций на панели «Инспектор». Вы можете изменить цвет, текстуру, непрозрачность, смешивание и т. д. Если вы хотите поэкспериментировать с фильтрами, поиграйте с этими параметрами и посмотрите, что у вас получится.
Материалы - один из основных элементов в Spark AR - они могут быть изображением или цветным блоком. Сандра Гутьеррес Г.
6. Создайте текстуру сегментации. Это превратит любое видео, снятое вашей камерой, в текстуру, а это значит, что она отделит вас (или того, на кого вы направляете камеру) от фона. На панели «Сцена» нажмитеCamera, а на панели «Инспектор» щелкните знак плюса рядом сSegmentation. На панели «Ресурсы» появится новый ресурс, который по умолчанию называется «personSegmentationMaskTexture0».
7. Добавьте «извлечение текстуры» к материалу переднего плана. Сначала нажмитеCameraна панели «Сцена», а на панели «Инспектор» нажмите знак «плюс» рядом с. Извлечение текстур. На панели «Ресурсы» появится еще один ресурс с именем «cameraTexture0».
Чтобы использовать его в качестве новой текстуры, щелкните материал переднего плана на панели «Ресурсы». На панели «Инспектор» изменитеТип шейдера(первый элемент сверху) наFlat, что придаст этому материалу свойства плоского 2D. элемент. Если вы хотите придать ему эффект объема (идеально подходит для 3D), параметрPhysical-Based будет хорошим выбором. Вы также можете поиграть с ними, чтобы увидеть, какие типы эффектов вы можете создать самостоятельно.
В разделеDiffuse(второй элемент на панели «Инспектор») найдитеTextureи выберитеcameraTexture0из раскрывающегося меню. Ниже установите флажокAlpha(он будет выглядеть отключенным, но если щелкнуть поле справа, он появится) и вTexture, откройте раскрывающееся меню и выберитеpersonSegmentationMaskTexture0.
8. Измените фон. Может показаться, что ничего не произошло, но вы почти у цели. Вы заложили основу для своего фильтра, и теперь все, что вам нужно сделать, это изменить фон. НажмитеBackground Materialи на панели Инспектора в разделеDiffuseизмените цвет на тот, который контрастирует с объектом в камере. Это поможет вам настроить края сегментации, изменивРазмер маскииМягкость края. Вы найдете эти параметры на панели «Инспектор», нажавpersonSegmentationMaskTexture0.
Если вам нравятся цветные блоки, вы можете остановиться на этом и поиграть с разными цветами фона. Но зачем это делать, если можно получить созвездие? Давайте изменим этот фон.
ВыберитеФоновый материали в разделеDiffuseустановите цвет на белый. Ниже в разделеТекстуранажмитеВыбрать файл с компьютера и загрузите изображение, которое хотите использовать в качестве фона. Имейте в виду, что большие файлы фотографий могут быть слишком большими для беспрепятственной обработки Instagram или Facebook, поэтому сделайте их как можно более легкими. Я использовал изображение размером 720 на 734 пикселя и весом около 86 КБ, и программа работала немного медленно.
9. Добавьте немного блеска. Каким бы крутым ни казалось телепортирование себя на Кассиопею, это недостаточно круто. Нет, если только вокруг вас не плавают блестящие кусочки чутья. Это известно как эффект плавающих частиц, и это обычная функция фильтров Instagram. Применить его к фильтру будет довольно просто и легко настраиваемо.
Использование эмиттера как независимого объекта позволяет создать эффект «мира». Сандра Гутьеррес Г.
Сначала на панели «Сцена» нажмитеДобавить объекти прокрутите список до конца, чтобы выбратьСистема частиц. Вы заметите новый элемент в окне просмотра, излучающий альфа-квадраты в центре окна просмотра. Это ваш излучатель, а альфа-квадраты - это частицы.
Когда вы создадите свой излучатель, он появится на панели «Сцена» под прямоугольником переднего плана, что означает, что на него будет распространяться элементFocal Distance(второй послеКамера) по умолчанию. Если вы хотите создать «мировой» эффект, щелкните имя излучателя («эмиттер0», по умолчанию), перетащите его вниз и опустите нижеMicrophone. Это сделает эмиттер независимым объектом.
Вы заметите три стрелы, выходящие из излучателя. Они представляют собой оси X (красный), Y (зеленый) и Z (синий), и вы можете перетаскивать их, чтобы изменить положение излучателя. Кроме того, когда вы нажмете на имя эмиттера, вы найдете список всех возможных настраиваемых параметров. Мы рассмотрим некоторые из них.
Клетчатый узор называется «альфа». это означает, что что-то есть, но это прозрачно. Сандра Гутьеррес Г.
- Положение, масштаб и вращение: Все они имеют поля X, Y и Z, которые помогут вам перемещать излучатель относительно камеры (положения), насколько далеко в каждом направлении будут идти частицы (масштаб) и под каким углом (поворот). Вы можете поиграть со значениями этих полей (положительными и отрицательными числами), чтобы добиться желаемого эффекта.
- Излучатель:Вы можете выбрать, какой тип излучателя вы хотите использовать. Поскольку у меня фиксированный фон (он не будет двигаться, если мы переместим камеру), я буду использоватьКольцевой эмиттер, который будет распылять частицы по сферическому радиусу. Это создаст эффект «мира», в результате которого некоторые частицы будут казаться ближе, а другие - дальше от камеры.
- Настройка частиц:Частота рожденияопределяет количество частиц, которые выпустит эмиттер. Чем больше частиц вы хотите, тем выше будет это число. Speed,ScaleиLifespan, говорят сами за себя - первый из них определяет, насколько быстро движутся ваши частицы; второй: насколько велики ваши частицы; и третий: как долго продержится ваша частица, прежде чем она исчезнет.
- Force: Это похоже на гравитацию. Если вы поиграете со значениями оси Y, вы заметите, что ваши частицы будут казаться легче или тяжелее. Значение 0,05 замедлит ваши частицы - чем ниже значение, тем тяжелее будут частицы.
10. Добавьте материал. До сих пор вы имели представление только о частицах; простые альфа-квадраты, плавающие вокруг вашего фильтра. Теперь пришло время добавить материал. Выбрав эмиттер на панели «Сцена», перейдите на панель «Проверка», прокрутите вниз и щелкните знак плюса рядом сМатериалыи выберитеСоздать новый. На панели «Ресурсы» появится новый элемент. Дважды щелкните по нему и переименуйте его в «Материал частиц».
Вы заметите, что ваши частицы изменились. Мой пожелтел, но ваш мог стать другого цвета (если это так, не волнуйтесь). ВыберитеМатериал частицна панели «Ресурсы», а затем на панели «Инспектор» щелкните раскрывающийся списокТип шейдераи выберитеКвартира. Все это работает, если вы используете 2D-эффект частиц, но если вы используете что-то с 3D-эффектом, вместо этого вы можете использоватьPhysically-Based. Ниже, в разделеСвойства шейдера, рядом сТекстура, нажмите кнопкуВыбрать файл с компьютера. Откроется окно проводника, и вы сможете выбрать любой понравившийся файл.
Нет, парень из Spark AR, это не светлячки. Сандра Гутьеррес Г.
Какое бы изображение вы ни использовали для своих частиц, оно должно иметь прозрачный фон. В большинстве случаев вы найдете файлы такого типа в формате PNG с помощью простого поиска изображений в Google. Я поискал в Google Images запрос «spark, filetype:.png» и выбрал тот, который мне понравился больше всего. Если у вас есть частица с собственной текстурой, возможно, вам захочется перенастроить эмиттер. Я вернулся и увеличил частицы (с 0,01 до 0,05).
Поздравляем! Вы сделали свой первый фильтр Instagram. И что теперь?
11. Поделитесь своим новым фильтром. Для этого вам необходимо загрузить его в центр Spark AR, где он будет рассмотрен службой поддержки Instagram. Как только они увидят его и определят, что ваш фильтр соответствует принципам сообщества платформы, ваш фильтр станет доступен в галерее Instagram, в вашем профиле, в историях и через ссылку для обмена. Этот процесс занимает около пяти рабочих дней.
Начните с нажатия кнопкиЭкспорт слева от панели «Ресурсы» (это стрелка вверх). После этого сохраните свой проект в файле arexport, который вам нужно будет загрузить в центр Spark AR. Программа автоматически направит вас туда после завершения экспорта.
Spark AR - универсальный инструмент, который не слишком удобен для пользователя, но выделяется огромными возможностями, которые он предлагает тем, кто хочет создавать фильтры. Приложив немного воображения и настроек, одни только эффекты сегментации и излучателя частиц могут вызвать множество впечатлений. Существует много контента, с которым вы можете учиться и экспериментировать, так что это просто вопрос потратить время и поиграть с ним.
А теперь, если вы меня извините, мне нужно опубликовать несколько историй.
Я вижу, что количество просмотров зашкаливает. скриншот женщины с фильтром Instagram