Псевдо 3д: Псевдотрёхмерность — Википедия – Реализация псевдо-3D в гоночных играх / Habr — DesignLessons – все о дизайне

Содержание

Псевдотрёхмерность — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 12 августа 2019; проверки требует 1 правка. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 12 августа 2019; проверки требует 1 правка.

Псевдотрёхмерность (или «2,5-мерность», 2,5D) — компьютерный термин, который употребляется в основном по отношению к компьютерным играм или игровым технологиям, графика которых пытается имитировать трёхмерное игровое пространство, однако при этом не является трёхмерной.

Примером игр, использующих псевдотрёхмерность, можно назвать ставшие популярными в конце 1980-х годов платформеры с изометрическим отображением игровых уровней. Зачастую игровой персонаж в таких играх мог передвигаться лишь вдоль двух осей, при этом меняя своё положение относительно пола (взлетая или подпрыгивая).

Более сложным примером псевдотрёхмерной компьютерной игры является шутер от первого лица Doom, а также RPG от первого лица серии Might and Magic. Несмотря на то, что окружение в этой игре трёхмерное и игрок может свободно передвигаться во всех трёх плоскостях, на самом деле игровые уровни состоят из отдельных комнат-секторов с различной высотой пола и потолка, при этом невозможна ситуация, в которой одна комната находилась бы над другой. Также противники игрока и подавляющее большинство элементов Doom являются спрайтовыми, то есть это не объёмные модели, а анимированные двухмерные изображения, которые перемещаются по уровню и подменяются готовыми версиями из существующей библиотеки в зависимости от положения объекта относительно наблюдателя (приблизившись к противнику со спины, игрок будет видеть его спрайт, изображающий спину монстра).

Несмотря на то, что большинство игр на рынке — трёхмерные игры, псевдотрёхмерные игры продолжили своё существование, превратившись в стилистику, в которой выполняют графику игры. Существует немало игр (Trine, Shadow Complex, Never Alone, Inside), где уровень отрисовывается трёхмерным движком, но движение и проверка столкновений ограничено осями X и Y. На этом принципе часто делают ремейки ретро-игр: Duck Tales Remastered, ретро-уровни

Prince of Persia.

Список псевдотрёхмерных компьютерных игр[править | править код]

Ниже указаны некоторые известные игры, графика в которых псевдотрёхмерна.

Анимация в Spine, советы и рекомендации, псевдо 3D эффект / Habr

Хочу поделиться своим опытом работы со Spine — программой для создания скелетной анимации, специально заточенной под игры.

После просмотра официального гайда возникает много вопросов, поговорим про то, какие подводные камни ожидают нас при работе с этой программой на каждом этапе рабочего процесса (на примере Spine — Unity), как можно оптимизировать свою работу, а так же рассмотрим некоторые популярные фишки типа 3D эффекта. В статье будет много тяжелых гифок.

UPD: После недавнего релиза Spine версии 3.6 фишки с Json описанные в конце статьи актуальны разве что для общего развития, т.к. разработчики добавили данный функционал «из коробки».

UPD2:
Layers to PNG теперь называется Photoshop to Spine, сохраняет картинки сразу в нормальном размере, а так же после появления в версии 3.8 функции trace для автоматической генерации меша по контуру текстуры и встроенной полигональной паковки атласов так заморачиваться с подготовкой картинок теперь не обязательно.

Теперь в Spine уже встроен предпросмотр готовой анимации, делается это в окне preview, там можно посмотреть как отрабатывают бленды и как одна анимация накладывается на другую. Отдельно Skeleton viewer теперь искать не обязательно. Проблем со смешиванием чаще всего удается избежать просто внимательно следя за тем какие ключи и где вы ставите.

Сразу оговорюсь, для создания программной анимации в играх есть и другие решения, Dragon Bones, Spriter, Creature, Marionette studio, плагин Puppet 2D и наверняка найдутся другие, просто я как аниматор работаю в Spine.

Наглядная демонстрация принципа скелетной анимации

Схема работы

Когда у нас на руках есть информация и понимание какие персонажи/анимации должны быть созданы для игры, отрисован необходимый материал — можно приступать.

Общая схема работы такова:

Первым делом необходимо подготовить рабочий материал из графических редакторов. Затем ассеты (assets, текстуры) импортируются в Spine и анимируются. На выходе мы получаем Json — файл в котором записаны все ключевые кадры трансформации костей, слотов и проч. Данный файл импортируется в движок, создается специальная skeleton data, которая добавляется на сцене в Spine game object, где наша анимация визуализируется по средствам mesh renderer, запуском можно управлять с помощью кода или же стандартным unity animator.

Непосредственно рабочий процесс в спайне выглядит следующим образом:

Импорт текстур
Риггинг (настройка скелета)
Скиннинг (настройка меша и привязка его к костям)
Анимация
Экспорт Json и проверка

В качестве примера попробуем сделать анимацию вот такого персонажа:

Импорт текстур

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

Типичные ошибки:

не рисовать текстуры движущихся частей где их не видно:

неправильно поставленные тени

А также недостаточное число проекций если персонаж меняет ракурс.

Часто у персонажей есть парные элементы с идентичными изображениями — руки, ноги, глаза, и проч. В таком случае целесообразно сохранить только одну текстуру, и использовать ее два, или более, раз.

В данном случае нам будет достаточно одной проекции, и ассеты художник отрисовал хорошо. Можно приступать к импорту в спайн.

Процесс импорта текстур можно существенно ускорить используя скрипт layers to PNG, который сохраняет каждый слой из фотошопа в отдельное png изображение, при этом записывает Json файл в котором содержится информация о расположении текстур, импортируя его в спайн мы получаем готового собранного персонажа.

Как пользоваться скриптом layers to PNG1) Экспортируем из фотошопа с помощью скрипта Json и PNG картинки (можно указать скеил фактор)
2) Импортируем json в спайн file-import data
3) Указываем путь к текстурам
подробнее

Однако у такого способа есть ряд недостатков — скрипт сохраняет изображения без сжатия, что непрактично. Просто пересохранив слои через file-generate-image assets мы уменьшим вес изображения приблизительно в 10 раз.

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

Если для проекта необходима покадровая анимация (напр. огонь, спецэффекты, и проч.) — материалы необходимо отрисовать заранее. Далее с помощью adobe after effects и скрипта ae_to_spine мы можем в пару кликов перенести последовательность кадров в Spine.

Как пользоваться скриптом AE to Spine Аналогично скрипту layers to png. Подробнее

Рекомендую заранее продумать концепцию наименования, материалы часто приходят в формате «слой 1 (копия) 5», это не слишком практично, для каждой текстуры в проекте необходимо сделать уникальное название, что бы не вызвать проблемы при запаковке атласов. Вполне пригоден вариант формата CharacterVyasya_Skin_a_Hand_R_1.

Тут во многом нам может помочь инструмент find and replace который позволяет быстро переименовывать, указывать путь для большого количества объектов.

инструмент find and replace

Риггинг

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

Тут может помочь введение дополнительных костей-контролов для разбиения движения по осям X и Y (т.к. в спайне остутствует функция separate dimentions).

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

Тут же маленький типс, если вдруг чувствуется нагромождение из за излишнего количества костей — попробуйте покрутить настройку bone scale:

Смотрите примеры готовых ригов из образцов поставляемых вместе со спайном, или в сети.

Небольшая подборка достаточно известных авторов, у которых есть что подсмотреть:
Так же полезные материалы можно искать на behanсe, форуме, соответствующих сообществах в социальных сетях.

Скиннинг

Меш — Один из ключевых инструментов в спайне, накладывая на его текстуру мы получаем возможность ее деформировать, искажать, создавать иллюзию 3D.

При создании меша помните: чем меньше вертексов — тем проще контролировать анимацию.

Демонстрация

Т.к. деформация меша потребляет ресурсы CPU, при создании сетки стоит руководствоваться принципом необходимого минимума, наглядно это можно рассмотреть на примере рига кончика хвоста динозавра: 1 вариант — недостаточно точек, видны изломы на картинке:

2, 3 вариант — хорошо:

4 вариант — излишнее количество точек, которые не выполняют никакой функции, никуда не годится:

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

Производительность

В конечном итоге у нас возникает вопрос — а сколько вертексов можно использовать?
Разработчики спайна конкретно не отвечают на этот вопрос, и отсылают к вкладке Spine Metrics, где мы можем отследить суммарное количество элементов в сцене, но при этом говорят о необходимости проведения кастомных тестов производительности.

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

И так, когда наш персонаж настроен можно переходить к анимации:

Анимация

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

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

3D-эффект

Это то за что так любят спайн — возможность деформировать изображение с помощью меша тем самым создавая трехмерный эффект.Демонстрация

Для себя я отметил несколько способов создания псевдо 3Д:

Анимация непосредственно вертексов в меше
Много костей в ключевых точках меша, анимируются кости
Кости ставятся выборочно, а далее тщательно настраиваются веса в меше
Комбинированный способ, все сведено под глобальные контролы

Наглядно принцип построения трехмерного эффекта можно рассмотреть на геометрических примитивах:КубПроставляются кости в ключевых точках меша:

Анимируя кости создаем трехмерный эффект:

Немного сложнее пример со сферой:

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

Аналогично кубу, кости в ключевых точках меша. По затраченному времени этот способ не лучше предыдущего:

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

То же самое, можно сделать без лишней массы костей,

Для этого каждому вертексу тщательно подбирается значение в весах. Такой способ можно считать оптимальным для округлых поверхностей.

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

По аналогии можно сделать деформацию любой геометрической формы, тем самым добавив вашей анимации выразительности.

И так, мы просидели несколько часов над ключевыми кадрами, мешами, и сделали анимацию персонажа:

Что получилось

Тестирование

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

Если ваш аниматор не дружит с движком, можно использовать Skeleton Viewer

Какие проблемы возникают наиболее часто:

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

Некорректное отображение текстур

Чаще всего такое происходит из за неправильной композиции текстуры — меш должен четко соответствовать размеру спрайта.

Иначе будет вот так.

После отработки анимация выглядит не так как раньше

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

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

1) Проставить ключи на всех свойствах всех объектов в начале и в конце каждой анимации. На первый взгляд слегка муторно, но таким образом вы полностью обезопасите себя от нежданных сюрпризов. Использование фильтров и горячих клавиш ускорит процесс.

Красным выделена иконка фильтра объектов по костям и кнопка для быстрого разворачивания иерархии:

Горячие клавиши по умолчанию:

Key Active: L
Key Selected: ctrl + L
Key Dopesheet: ctrl + shift + L
Key Translation, Key Rotation, Key Scale, Key Shear, Key Color — нужно настраивать самому

2) Использовать скрипт setToSetupPose, который как бы и заставляет проигрываться анимацию из дефолтного состояния. Но такой метод имеет существенный недостаток — Setup Pose выставляется мгновенно, а рендер меняет картинку на соответствующую только со следующего кадра. Таким образом мы имеем проскакивание лишнего кадра между анимациями, выглядит это неприятно. Соответствующее issue уже стоит на доске у разработчиков. Setup Pose баг

JSON

Мы можем экспортировать из спайна Json, провести с ним какие-либо манипуляции, и импортировать обратно, получив определенный результат. Это очень мощный инструмент т.к. мы получаем доступ ко всем компонентам проекта, в свою очередь нам это может очень помочь в определенных ситуациях:

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

Мержинг проектов

Часто возникает необходимость держать анимации в одной сцене, например как тут:Лягушка ест жукаСам жук в игре появляется в множестве других сцен и был скопирован из одной из них. Однако теперь в проекте два скелета, и соответственно на выходе будет 2 json и 2 объекта на сцене, что добавит необходимость делать определенную логику синхронного запуска этих анимаций для их совмещения во времени, а так же нужно будет точно совместить объекты по положению в локации. Можно упростить себе жизнь отдав материал в одной сцене. Для этого два json нужно смержить.

Для этого есть как минимум два способа: руками и скриптом.

Руками

Копируем куски кода из одного json в другой, в соответствующие категории: слоты к слотам, кости к костям, анимации к анимациям, и т.д. Что бы не возникло конфликтов, важно соблюсти корректность наименования объектов, что бы названия из одного json не совпадали с названиями из другого. Проще всего этого добиться заранее в спайне присвоив всем объектам в именах свой уникальный индекс типа _skel1_ и _skel2_. Этот способ слегка затратный по времени, но меня еще не подводил.ПримерыПредельно простой пример для демонстрации принципа, два скелета с костями в одном проекте:

Скелет 1

{
"skeleton": { "hash": "ZMTMZiuTD2M2gnBhJR0JLPQWOws", "spine": "3.4.02", "width": 0, "height": 0, "images": "" },
"bones": [
	{ "name": "root_skel1_" },
	{ "name": "bone1_skel1_", "parent": "root_skel1_", "length": 26.95, "rotation": 360, "x": 11.09, "y": -9.65, "color": "00ff00ff" },
	{ "name": "bone2_skel1_", "parent": "bone1_skel1_", "length": 26.95, "x": 26.27, "color": "00ff00ff" },
	{ "name": "bone3_skel1_", "parent": "bone2_skel1_", "length": 26.95, "x": 26.57, "color": "00ff00ff" },
	{ "name": "bone4_skel1_", "parent": "bone3_skel1_", "length": 26.95, "x": 25.97, "color": "00ff00ff" }
],
"animations": {
	"animation": {}
}
}

Скелет 2

{
"skeleton": { "hash": "osF6oBu7PH6sMNfjN7pm2EwQ8fY", "spine": "3.4.02", "width": 0, "height": 0, "images": "" },
"bones": [
	{ "name": "root_skel2_" },
	{ "name": "bone1_skel2_", "parent": "root_skel2_", "x": 19.25, "y": 26.63, "color": "fff100ff" },
	{ "name": "bone2_skel2_", "parent": "bone1_skel2_", "x": 27.14, "color": "fff100ff" },
	{ "name": "bone3_skel2_", "parent": "bone2_skel2_", "x": 25.57, "color": "fff100ff" },
	{ "name": "bone4_skel2_", "parent": "bone3_skel2_", "x": 27.14, "color": "fff100ff" }
],
"animations": {
	"animation": {}
}
}

Соединенные скелеты

{
"skeleton": { "hash": "ZMTMZiuTD2M2gnBhJR0JLPQWOws", "spine": "3.4.02", "width": 0, "height": 0, "images": "" },
"bones": [
	{ "name": "root" },
	{ "name": "root_skel1_", "parent": "root" },
	{ "name": "bone1_skel1_", "parent": "root_skel1_", "length": 26.95, "rotation": 360, "x": 11.09, "y": -9.65, "color": "00ff00ff" },
	{ "name": "bone2_skel1_", "parent": "bone1_skel1_", "length": 26.95, "x": 26.27, "color": "00ff00ff" },
	{ "name": "bone3_skel1_", "parent": "bone2_skel1_", "length": 26.95, "x": 26.57, "color": "00ff00ff" },
	{ "name": "bone4_skel1_", "parent": "bone3_skel1_", "length": 26.95, "x": 25.97, "color": "00ff00ff" },
	{ "name": "root_skel2_", "parent": "root"  },
	{ "name": "bone1_skel2_", "parent": "root_skel2_", "x": 19.25, "y": 26.63, "color": "fff100ff" },
	{ "name": "bone2_skel2_", "parent": "bone1_skel2_", "x": 27.14, "color": "fff100ff" },
	{ "name": "bone3_skel2_", "parent": "bone2_skel2_", "x": 25.57, "color": "fff100ff" },
	{ "name": "bone4_skel2_", "parent": "bone3_skel2_", "x": 27.14, "color": "fff100ff" }
],
"animations": {
	"animation": {}
}
}

В результате имеем все в одном проекте:

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

Более сложный пример с лягушкой:
(Осторожно, длинные файлы)

Жук
Лягушка
Жук+Лягушка

Skeleton Merger Tool

Добрые люди написали специальную тулзу для мержинга. Ознакомиться и скачать можно по ссылке . Использовать ее достаточно удобно, включен автоматический ренейминг объектов, однако я не раз сталкивался с ошибками.

Дублирование объектов вместе с анимацией

В спайне отсутствует вложенность композиций (аналог прекомпоз в After Effects или символ во Flash), однако, как показывалось выше, есть возможность продублировать объекты, с сохранением всех зависимостей, но ключи анимации в таком случае не копируются. Не сложно догадаться что, для того что бы не делать анимацию заново, можно переназначить ее на дубликат костей, для этого надо всего лишь перебить в Json имена. Опять же, это проще сделать если у каждой кости будет свой уникальный индекс.ПримерЕсть муравей с анимацией. Задача сделать в спайне целую цепочку бегающих друг за другом муравьев. При дублировании муравья анимация не копируется. Обратите внимание, у первого муравья в названии стоит индекс _skel_1_, у второго _skel_2_.

Экспортируем Json и открываем его текстовым редактором. Код анимации walk_1 копируем, находим там все участки _skel_1_:

"animations": {
	"walk_1": {
		"bones": {
			"US_2_skel_1_": {
				"rotate": [
					{
						"time": 0,
						"angle": -42.21,
						"curve": [ 0.25, 0, 0.75, 1 ]
					},
					{
						"time": 0.4,
						"angle": -0.92,
						"curve": [ 0.25, 0, 0.75, 1 ]
					},
					{ "time": 0.8, "angle": -42.21 }
				]
			},
....

заменяем их на _skel_2_

....
			"US_2_skel_2_": {
				"rotate": [
					{
						"time": 0,
						"angle": -42.21,
						"curve": [ 0.25, 0, 0.75, 1 ]
					},
					{
						"time": 0.4,
						"angle": -0.92,
						"curve": [ 0.25, 0, 0.75, 1 ]
					},
					{ "time": 0.8, "angle": -42.21 }
			},
...

Вставляем обратно. Таким образом мы переназначили анимацию на другие кости. Сохраняем json, и импортируем его в спайн путем file — import data. Теперь у нас два бегающих муравья.

Откатиться до старой версии

Проекты сохраненные в более новой версии будут не совместимы со старыми. Иногда это может стать проблемой, и для ее решения есть несколько способов:

Руками перебить версию в json

"skeleton": { "hash": "", "spine": "3.4.02", "width": 0, "height": 0, "images": "" },

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

JsonRollback tool

Ознакомиться с принципом работы и скачать можно по ссылке.

Резюме

Четко обозначайте какие задачи в чем вы делаете
Используйте скрипты для ускорения работы
Делайте гибкий риг и не перебарщивайте с мешем
Перед отправкой тестируйте материал в рантайме
Не стесняйтесь залезть в json если это вам сэкономит время

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

P.S. Статья писалась аниматором по большей части для аниматоров, если вы программист и у вас «рукалицо», можете высказаться в комментариях.

Как отличить 3D и псевдо3D анаглиф | VR, AR, 360, стерео технологии

Ниже описан метод распознавания «настоящего» и «псевдо» анаглифного стерео изображения (оно же — квазистереоизображение).

При этом надо понимать, что «настоящий» 3D-анаглиф сам по себе является псевдостереоизображением. Ниже речь пойдёт исключительно о качестве полученных анаглифов двумя разными путями. «Настоящим» методом и методом искусственного раздвоения изображения.Настоящее 3D (стерео) изображение фильма достигается путём перекрёстной съёмки с двух видеокамер соответствующих глазам наблюдателя (для трёхмерных мультипликационных фильмов — путём двойного рендеринга). Две видеокамеры, так же, как и глаза наблюдателя, формируют угол обзора.

При этом менее удаленные объекты находятся под большим углом обзора камер, чем более удаленные объекты. Применительно к анаглифу расстояние между красным и синим (цвета могут быть разными) изображениями (при последующим их «совмещении») для разно-удаленных объектов будет разным. Для менее удалённых объектов — бОльшим. Для более удаленных — меньшим (либо почти отсутствовать). Таким образом и создаётся «настоящая трёхмерная глубина» изображения.

В случае, если движется фон, а центральный объект остаётся на месте или для выделения центрального объекта в «крупный план» проводят обратную операцию. Делают минимальными углы центрального объекта, а фоновые объекты «размывают» бОльшим расстоянием между цветами.

Однако, в обоих случаях — расстояние между цветами анаглифа у разно-удалённых объектов — разное. Это и является главным критерием отличия между настоящим стерео и квазистерео анаглифами, так как алгоритмы кодирования при искусственном получении из моноскопического изображения трёхмерного, естественно, не разбирают, какие объекты субъективно находятся ближе к наблюдателю, а какие дальше. В следствие этого, полученное квазистерео изображение имеет по всей площади и для всех объектов — одинаковое расстояние между двумя цветами.

Также, распознать квазистерео можно по косвенным признакам. При кодировке из моноскопического изображения все дефекты видео будут преобразованы в 3D. Так же, в 3D будут преобразованы все буквы, титры, логотипы, watermarks и надписи.

Теперь о том, чем квазистерео хуже «настоящего»:

* В псевдостерео изображении в динамических сценах, особенно в случаях перемещения отдельных объектов вдоль экрана, «глубина трёхмерности» выглядит практически идентичной «настоящему» 3D.

* Также, псевдостерео изображении почти идентично «настоящему» 3D в сценах, где объекты находятся на одинаковом (почти одинаковом) отдалении от наблюдателя.

* Во всех остальных случаях квазистерео существенно уступает «настоящему». Никакой трёхмерности просто не видно.

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

* Кроме того, в большинстве случаев изготовление самодельного псевдо-3D-анаглифа осуществляется по незнанию, не путём изготовления рипа, а путём пересжатия аналогичного материала (т.н. «пережатка»), что существенно ухудшает само качество видео.

* Кроме того, получить квази3D можно путём простого проигрывания обычного видеофайла с помощью плеера со специальным плагином, способным кодировать изображение в анаглиф в реальном времени. Например анаглиф фильтр для kmplayer. Также, данного эффекта можно добится при просмотре через NVIDIA 3D Vision Video Player

ExcelArt – изометрия «на халяву». Рисуем псевдообъемный телефон без 3D и Фотошопа / Mail.ru Group corporate blog / Habr

Возможно ли получить псевдообъемное изображение без 3D-программ? «Конечно, — скажете вы, — берешь, напрягаешься и рисуешь с нуля». А если без «берешь, напрягаешься и рисуешь»? А если вообще без каких-то специальных знаний? Можно ли получить изометрические объекты, не тратя время на рендер? Существует ли вообще цифровая иллюстрация вне привычных графических программ? На эти и другие вопросы я дам ответ в своей статье, посвященной новому методу создания цифровых иллюстраций — ExcelArt.

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

Краткая предыстория о креативных инструментах

Удивительно, но эра цифровых технологий подарила современным дизайнерам и иллюстраторам не так уж много инструментов. И, несмотря на то, что возможности их чрезвычайно широки, они все же имеют свои пределы. Ни для кого не секрет, что все мы сегодня работаем в одних и тех же фотошопах, иллюстраторах и 3D-максах. Это само по себе неплохо, указанные программы прекрасны. Тем не менее одинаковые инструменты дают схожие методы работы с ними и, соответственно, похожие результаты. Создается ощущение, что каждая «свежая» работа нового автора чем-то напоминает предыдущие идеи старых мастеров. Ситуация только осложняется всеобщей информационной глобализацией: все мы смотрим чужие работы и, так или иначе, перенимаем лучшие приемы и техники друг у друга. Безусловно, так и происходит прогресс, однако обратной стороной медали является некоторое однообразие.

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

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

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

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

Что это дает дизайнерам и иллюстраторам

Во многих случаях ExcelArt — это большая экономия времени, сил и нервов. Например, когда работаешь в технике matte-paint, нередко возникает потребность в получении изометрических фигур для последующей постобработки в Photoshop. Запускать из-за нескольких кубиков и пирамидок, сложенных в определенном порядке, 3D-редактор — это как стрелять из пушки по воробьям. Кроме того, не у всех есть достаточные знания 3D, да и «майя» с «максом» стоят далеко не на каждом компьютере.

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

Я сам однажды стал жертвой задачи с псевдообъемами. Мне нужно было получить псевдообъемные буквы в векторе. Когда я попытался сделать это штатными средствами в Illustrator, он сначала несколько минут просчитывал картинку, а потом выдал мне кучу изломанных линий. Отрисовывать то же самое градиентами и контурами было нереально трудозатратно. Над задачей нависла угроза провала. Спас ExcelArt! Всего за несколько секунд (!) я сделал объемный текст в Excel. И, кстати, результат оттуда отлично экспортировался в «люстру» (мне ведь нужен был вектор на выходе).

Что это дает обычным людям

ExcelArt чрезвычайно прост в освоении. Еще бы, ведь вся работа ведется в привычном редакторе таблиц, а не в каком-то сложном графическом пакете с изощренным интерфейсом. Более того, в работе задействуется малое количество инструментов, разобраться в применении которых можно, не тратя много времени.

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

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

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

Почему выбран именно телефон? Дело в том, что существенную долю работы современного IT-специалиста составляет создание мобильного контента. Все разработчики мобильных игр и приложений, а также UI-дизайнеры любят показывать свои продукты в естественной среде. Исходя из этого, всегда будет удобно иметь небольшой мокап, который поможет легко и быстро продемонстрировать ваш мобильный прототип. Именно такой мокап с телефоном мы и сделаем в данном уроке.

1. Начнем с создания передней части корпуса телефона. Для этого открываем MS Excel, выбираем в верхней панели вкладку Вставка > Фигуры > Скругленный прямоугольник (20,29 х 9,97 см). Скругление углов сделайте с помощью желтого ромбика в верхнем левом углу фигуры, как на изображении ниже.

Чтобы вам легче было ориентироваться в пропорциях, в скобках я буду указывать размеры всех создаваемых объектов. После того как вы создали фигуру, размеры можно изменить во вкладке Формат > Размер.

Внимание! Не создавайте фигуру в верхнем левом углу страницы. Позже, когда вы начнете добавлять другие объекты и работать с изометрией, у вас могут возникнуть проблемы с расположением элементов. Обратите внимание, я сделал свой прямоугольник ближе к центру страницы (координаты W69).

2. Займемся экраном. Сначала создадим сам экран, делается он так же, как и предыдущий элемент, то есть с помощью верхней вкладки Вставка > Фигуры > Прямоугольник (15,74 х 9,21 см). Углы в данном случае скруглять не нужно. Далее делаем динамик: Вставка > Фигуры > Скругленный прямоугольник (0,18 х 1,5 см), его углы нужно скруглить по максимуму. Затем создаем кнопку: Вставка > Фигуры > Овал (1,5 х 1,5 см).

3. Фронтальная камера создается двумя Овалами: нижним — большего диаметра (0,29 х 0,29 см), и верхним — меньшего диаметра (0,14 х 0,14 см). Для того чтобы в дальнейшем было удобно с ними работать, эти два Овала нужно сгруппировать. Для этого зажмите клавишу Shift, выделите овалы, кликнув по каждому из них. Shift нужно отпустить. Далее, кликнув по любому из овалов правой кнопкой мыши, вызовите меню и выберите пункты: Группировать > Группировать.

4. Теперь нам необходимо выровнять все объекты относительно друг друга. Начнем с камеры и динамика. Нужно, чтобы они находились на одной линии. Для этого, зажав клавишу Shift, выделяем камеру и динамик и в верхней вкладке выбираем: Формат > Упорядочить > Выровнять > Выровнять по середине. Далее сгруппируйте динамик и камеру так же, как это было сделано с овалами в предыдущем шаге.

После этого, зажав клавишу Shift, выделите все объекты (корпус, экран, кнопку, группированные динамик и камеру) и выровняйте их по одной оси, выбрав: Формат > Упорядочить > Выровнять > Выровнять по центру. Все выбранные и выровненные объекты вам теперь надо сгруппировать в один.

5. Пришло время придать картинке цвет. Кликните три раза левой кнопкой мыши по корпусу телефона, так, чтобы выделился именно корпус, а не весь сгруппированный объект. Индикатором правильного выбора будут являться две синие обводки вокруг объектов: одна внешняя пунктирная и другая внутренняя сплошная.

Далее в верхней вкладке — Формат > Заливка фигуры — выберите черный цвет. Чтобы убрать контур телефона, сделаем следующее: Формат > Контур фигуры > Нет контура.

6. Покраска динамика и камеры более сложная, так как они закрашиваются не сплошным цветом, а градиентами. Для этого выделите динамик (не забывайте, что все объекты сгруппированы, и нужно выделить тройным кликом только динамик, а не всю группу), щелкните по динамику правой клавишей мыши и выберите пункт — Формат фигуры. В появившемся всплывающем окне выберите вкладку — Заливка > Градиентная заливка. Создайте градиент со следующими настройками: тип — линейный; угол 90⁰; левая точка градиента — второй серый цвет снизу второго столбца с яркостью 15%; правая точка градиента — третий серый цвет снизу второго столбца с яркостью 25%. И, конечно же, не забудьте убрать контур, как в предыдущем шаге: Формат > Контур фигуры > Нет контура.

Таким же способом закрасьте фронтальную камеру. Сначала выделите нижний овал большего диаметра. Настройки градиента у него следующие: тип — линейный; угол 300⁰; левая точка градиента — второй серый цвет снизу второго столбца в положении 41% с яркостью 15%; правая точка градиента — третий цвет снизу второго столбца с яркостью 25%.

Теперь выделите верхний овал меньшего диаметра. Сделайте градиент с такими настройками: тип — линейный; угол 0⁰; левая точка градиента — третий синий цвет снизу четвертого столбца с яркостью 40%; правая точка градиента — второй синий цвет снизу четвертого столбца с яркостью 25%.

7. С экраном все намного проще. Цвет экрана делаем следующим образом: Формат > Заливка > белый цвет. Для покраски контура выбираем: Формат > Контур фигуры > второй серый цвет снизу второго столбца.

В отличие от всех предыдущих объектов у кнопки нет заливки, а вот контур окрашен в градиент. Для его настройки в окне Формат фигуры выберите пункт: Цвет линии > Градиентная линия. Для контура нам понадобится четыре точки градиента. Их можно создать, кликнув левой кнопкой мыши по полосе градиента. Обратите внимание, что цвета всех точек градиента одинаковы, различаться будут только положение и яркость. Итак, настройки градиента следующие: тип — линейный; угол 50⁰; цвет градиента — второй серый цвет снизу второго столбца; первая точка градиента — положение 30%, яркость 18%; вторая точка градиента — положение 48%, яркость 30%; третья точка градиента — положение 62%, яркость –100%; четвертая точка градиента — положение 70%, яркость 15%.

8. Настало время придать объектам изометрическую проекцию. Щелкните по сгруппированной фигуре один раз, чтобы выделить ее, правой клавишей мыши вызовите уже знакомое окно Формат фигуры. Далее выберите: Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, верх. Не закрывайте окно Формат фигуры.

Выделит черный прямоугольник корпуса и перейдите во вкладку Формат объемной фигуры. Задайте корпусу следующие настройки рельефа: сверху — круг, ширина 4 пт, высота 5 пт. Глубину, поверхность и контур изменять не нужно. Если все правильно сделано, с двух краев прямоугольника должны появиться небольшие серые тени.

9. Теперь займемся созданием металлической части корпуса. Кликните три раза по черному прямоугольнику корпуса, выделив его, и скопируйте его нажатием клавиш Ctrl+C. После этого снимите выделение, кликнув по любой пустой ячейке листа, и вставьте прямоугольник, нажав Ctrl+V.

Закрасьте прямоугольник светло-серым (третий цвет снизу первого столбца) и слегка увеличьте его (20,53 х 10,09 см). Во вкладке Формат объемной фигуры сделайте следующие настройки рельефа: сверху — круг по 11 пт в ширину и высоту, снизу — круг по 11 пт в ширину и высоту. Обратите внимание, в той же вкладке нужно изменить угол освещения: Поверхность > Освещение > Угол > 300⁰. Глубину и контур не трогаем.

Чтобы разместить металлическую часть корпуса под черной, нужно кликнуть по ней правой клавишей мыши и выбрать пункты: На задний план > На задний план.

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

Начнем делать нижний блок отверстий с динамиком. Сделайте шесть одинаковых Овалов (0,2 х 0,2 см). Выровняйте их по середине и сгруппируйте. Далее выберите: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

Задайте каждому Овалу одинаковый градиент. На этот раз нам понадобятся три точки градиента. Как и в предыдущем случае, цвет всех точек одинаковый — второй серый цвет снизу второго столбца. Остальные настройки следующие: тип — линейный; угол 130⁰; первая точка градиента — положение 27%, яркость 15%; вторая точка градиента — положение 63%, яркость 50%; третья точка градиента — положение 75%, яркость –15%.

Теперь необходимо выбрать толщину контура, кликнув по верхней вкладке: Формат > Контур фигуры > Толщина > 0,5 пт. В том же пункте выбираем цвет — первый серый цвет снизу первого столбца.

11. Теперь займемся отверстием для зарядки и болтами возле него. Каждый болт состоит из двух фигур. Нижняя фигура — Овал (0,2 х 0,2 см), светло-серого цвета (второй цвет снизу первого столбца) без контура. Верхняя фигура — пятиконечная звезда. Для ее создания выбираем вкладку Вставка > Фигуры > 5-конечная звезда (0,15 х 0,15 см). Цвет: черный без контура. Обе фигуры необходимо выделить и выровнять относительно друг друга по центру и по середине, а также сгруппировать. Болты абсолютно одинаковы, так что можно сделать только один, а другой просто скопировать рядом.

Отверстие для зарядки, как вы, наверное, уже догадались, это скругленный прямоугольник (0,32 х 1,06 см), углы которого скруглены по максимуму. Цвет всех трех точек градиента такой же, как и в предыдущем этапе. Настройки градиента похожие: тип — линейный; угол 130⁰; первая точка градиента — положение 0%, яркость 15%; вторая точка градиента — положение 29%, яркость 50%; третья точка градиента — положение 94%, яркость –15%. Толщина контура 1 пт, цвет — второй серый цвет снизу первого столбца.

После того, как сделаете болты и отверстие для зарядки, выровняйте их посередине и выберите: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

12. Последние два Овала снизу — это вход для наушников (тот, что больше) и отверстие микрофона.

Отверстие микрофона — это точная копия отверстий динамика, просто скопируйте одно из них.
Вход для наушников делается из Овала (0,48 х 0,48 см) без контура. Цвет точек градиента одинаковый: второй серый цвет снизу второго столбца. Настройки градиента такие: тип — линейный; угол 30⁰; первая точка — положение 7%, яркость –18%; вторая точка градиента — положение 100%, яркость 37%.

Как всегда, оба отверстия выравниваем по середине, группируем и задаем получившейся группе поворот: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

13. Осталось сделать боковую панель. Кнопка выключения звука состоит из двух скругленных по максимуму прямоугольников. Нижний прямоугольник (0,3 х 0,85 см) темного-серого цвета (третий цвет снизу второго столбца) без контура. Верхний прямоугольник (0,16 х 0,85 см) светло-серого цвета (третий цвет снизу первого столбца) без контура. Перейдите во вкладку Формат фигуры > Формат объемной фигуры и задайте верхнему прямоугольнику следующие настройки — рельеф: сверху — угол, ширина 0,5 пт, высота 1 пт; глубина: глубина 1,5 пт; поверхность: материал — стандартный «пластик», освещение — нейтральное «три точки», угол освещения: 170⁰. Нижний прямоугольник настроек не требует. Для того чтобы повернуть прямоугольники в изометрической проекции, выберите для каждого из них: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрически, влево вниз.

Внимание! Не группируйте прямоугольники, пока полностью не сделаете каждый из них, иначе после настроек формата объема у вас могут возникнуть проблемы с перекрытием одного прямоугольника другим.

14. Кнопки регулировки громкости сделаны из трех скругленных по максимуму прямоугольников. Овалы самих кнопок (0,29 х 1,43 см) имеют точно такие же настройки, как и кнопка выключения звука в предыдущем этапе. Находящийся под ними скругленный прямоугольник (0,36 х 3,39 см) не имеет контура. Настройки градиента для него следующие: цвет обеих точек — третий темно-серый цвет снизу второго столбца; тип — линейный; угол 90⁰; первая точка градиента — положение 0%, яркость 29%; вторая точка градиента — положение 100%, яркость 75%. Поворот всех овалов: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, влево вниз.

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

15. Серые полосы сбоку корпуса получены из двух фигур Блок-схема (Вставка > Фигуры > Блок-схема: сохраненные данные), размер каждой 0,5 х 0,4 см, поворот фигуры: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрически, влево вниз.

Настройки градиента: цвет обеих точек — второй светло-серый цвет снизу первого столбца; тип — линейный; угол 100⁰; первая точка градиента — положение 0%, яркость –35%, прозрачность 30%; вторая точка градиента — положение 100%, яркость –63%, прозрачность 0%.

16. Наш телефон готов. Осталось только вставить изображение в экран. Выделите белый прямоугольник экрана, правой клавишей мыши вызовите: Формат фигуры > Заливка > Рисунок или текстура > Вставить из: Файл. Затем выберите на своем компьютере изображение, которое хотите добавить на экран телефона, и нажмите кнопку Вставить. Я вставил заранее снятый скрин почтового приложения Mail.Ru. Вы можете добавить макет дизайна вашего приложения или любую другую картинку.

17. Чтобы картинка обрела законченный вид, необходимо закрасить фон. Для этого просто выделите пустые ячейки за телефоном и выберите подходящий цвет заливки в верхней вкладке: Главная > Шрифт > Цвет заливки.

Уже закончив изображение и взглянув на получившийся результат, я понял, что для пущей убедительности телефону не хватает небольшой тени. Вы спросите: «Неужели и это можно сделать в Excel’е?». Можно куда больше, но мы остановимся на этом.

Выделите нижний серый скругленный прямоугольник (корпус) и правой клавишей мыши вызовите окно Формат фигуры. Во вкладке Тень пропишите следующие настройки: цвет — черный, прозрачность — 62%, размер — 99%, размытие — 11 пт; угол — 60⁰; расстояние — 3 пт.

18. Последний вопрос, который нам предстоит решить, это, как получить файл с готовым изображением, над которым мы так долго работали. Есть несколько способов решения этой задачи. Я расскажу один наиболее простой и логичный — просто сделать снимок экрана.

У десктопной версии Облака Mail.Ru есть замечательная скриншотилка. Нажмите Shift+Ctrl+6, выделите часть экрана с изображением телефона и нажмите кнопку Готово. Ссылка на изображение сразу же попадет в ваш буфер обмена, а сама картинка в формате png будет лежать в вашем Облаке в папке Screenshots. Вот так, быстро и удобно, и не надо ничего отдельно вырезать и сохранять.

Надеюсь, вам понравился урок, и теперь вы можете в полной мере оценить все преимущества создания диджитал-иллюстраций методом ExcelArt. А если у вас остались вопросы, не стесняйтесь, задавайте их в комментариях. И обязательно покажите, что у вас получилось, если воспользуетесь моим туториалом.

2D фото в 3D через карту глубины

Преобразовать 2D изображение в 3D можно при помощи карты глубины в программе Adobe Photoshop. Карта глубины это черно-белое изображение, на котором предмет будет темнее, если он ближе к зрителю и наоборот если дальше.

Для создания псевдо стерео возьмем левый ракурс готового 3D фото, как и в предыдущем уроке:

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

Когда все предметы приобрели цвет, объединяем все слои, кроме исходного. Применяем к полученному слою фильтр «размытие по Гауссу» filter > blur > Gaussian blur (Фильтр > Размытие > размытие по Гауссу), чтобы немного смягчить переходы:

В результате должна получиться такая карта глубины:

Вместо лассо можно использовать обычную кисть и обрисовывать ею каждый объект на новом слое.

2. Сохраняем полученную карту глубины в psd.

3. Теперь открываем исходное изображение и применяем filter > distort > displace (Фильтр> Искажение> Смещение):

Значение «horizontal scale» зависит от размера исходного изображения. Нажимаем «Ok», откроется окно, в котором нужно выбрать psd-файл нашей карты глубины.

Полученное изображение и будет вторым ракурсом псевдо стереоизображения.

4. Теперь объединяем оба ракурса в анаглиф или в стереопару.

Стереофото анаглиф:

Псевдо 3D (преобразование 2D из 3D) анаглиф:

Стереофото, перекрестная стереопара:

Псевдо 3D (преобразование 2D из 3D), перекрестная стереопара:

Псевдо 3д: Псевдотрёхмерность — Википедия – Реализация псевдо-3D в гоночных играх / Habr