Поиск по сайту

Урок по touch designer - Интерактивная 3D анимация Урок по touch designer - Интерактивная 3D анимация Страница 2 Все страницы Интерактивная 3D-анимация – одно из самых сложных направлений виджеинга. Во-первых, необходимо подготовить материал для анимации (модели, текстуры, движения). Во-вторых, надо продумать, каким образом будет осуществляться взаимодействие с этим материалом в режиме реального времени (скажем, с помощью мыши, клавиатуры, джойстика, вебкамеры и т.д.) и как это взаимодействие скажется на окружающих объектах. Инструмент для работы с анимацией должен быть простым в использовании и достаточно быстрым, чтобы можно было обрабатывать материал с высоким разрешением в реальном времени. В этой статье будут рассмотрены следующие вопросы: Подготовка цифрового контента:Заранее подготовим серию изображений, а затем будем отображать их на полигон, который находится перед камерой (такие изображения обычно называют спрайтами). Подготовим упрощённые полигональные модели (с текстурами), некоторым из них зададим движения (например, поворот). Затем можно будет экспортировать модели в файл, и работать с ними в специальных программах. Создадим простую 3D-модель в реальном времени (например, деформацию объекта или систему частиц). Видео (или неподвижные изображения) можно объединить с 3D-контентом, и использовать их в качестве фона или текстур. Аудио можно использовать для создания фоновой музыки или сопровождения некоторых событий. Также посредством аудио можно управлять поведением 3D-моделей в реальном времени. Создание интерактивностиУправляющие данные для цифровой модели можно получать от мышки, клавиатуры, джойстика или даже по сети. Например, можно управлять деформацией 3D-модели с помощью мыши, или использовать кнопку на клавиатуре, чтобы вызвать заранее подготовленное движение (например, боевой удар). Улучшение визуализации в реальном времениБольшинство 3D-форматов хранит самую базовую информацию о модели. В интерактивной анимации можно улучшить качество рендеринга, используя специальные инструменты или программирование (например, можно генерировать в реальном времени текстуры и тени).Инструменты для создания интерактивной 3D анимации Все инструменты для создания интерактивных 3D-приложений можно разделить на две категории: среды программирования и средства визуального программирования. Среды программированияСамый простой пример 3D-анимации – это обычная компьютерная игра. Большинство компьютерных игр написано на C++, потому что у этого языка практически нет ограничений и он наиболее эффективен. Скриптовые языки, такие как ActionScript или Processing. Но они слишком медленны для работы со сложной 3D-графикой. Средства визуального программированияЭта категория инструментов создана для «непрограммистов», чтобы свести необходимость программирования к минимуму. Примером таких инструментов служат PureData, Max/MSP с Jitter, Isadora. Почти все эти инструменты основаны на понятии «узла». Узлы обеспечивают некую функциональность. А виджею нужно только связать эти узлы таким образом, чтобы добиться желаемого результата. Однако большинство этих инструментов работают только с аудио и видео информацией. Они не предоставляют возможности создания анимированного 3D-контента. Например, они не позволяют импортировать сложные 3D-форматы или создавать даже простые 3D-модели в реальном времени и вообще обладают довольно ограниченными возможностями рендеринга. В этой статье будет рассмотрена работа с TouchDesigner. Это инструмент визуального программирования, в котором особое внимание уделено работе с 3D-моделями в реальном времени. Он позволяет импортировать FBX (формат 3D-моделй Maya). Также можно работать с 3D-примитивами (сфера, тор и т.д.) и применять к ним различные операции (деформацию, скручивание и т.д.). В TouchDesigner есть поддержка рендеринга в реальном времени (так называемых, шейдеров реального времени и языка GLSL). Таким образом, можно создать интерактивное приложение с богатой 3D-анимацией, даже не смотря на то, что программа появилась сравнительно недавно и ещё находится на стадии бета-версии, а число её пользователей невелико. Бесплатную версию TouchDesigner можно скачать с сайта http://www.derivative.ca/. Скриншот запущенной программы TouchDesigner Знакомство с TouchDesigner Запустите программу TouchDesigner: Меню «Пуск» > Программы > Derivative > TouchDesignerFTE.077По умолчанию программа не настроена на запрос подтверждения о сохранении данных при выходе. Поэтому лучше сразу включить эту опцию в меню: Edit > Preferences… Как правило, проект может содержать другие внешние файлы, такие как видео, изображения, аудио, 3D-объекты и т.д. Создать новый проект можно через меню: File > New Project… В процессе работы с проектом, его можно сохранять через меню File > Save Env. Предыдущие версии также будут автоматически сохранятся в качестве резервных. Например, на рисунке выше показано, что проект сохраняется под именем lesson1.toe, тогда резервные файлы будут получать имена lesson1.1.toe, lesson1.2.toe, lesson1.3.toe и т.д. Эти файлы можно удалять, если вам не нужны резервные копии. Экран программы разделён на несколько частей (их расположение можно настроить по желанию, но пока оставим так, как показано на рисунке ниже): Окно параметров: здесь показываются параметры выбранного узла. Чтобы спрятать/показать это окно нажмите клавишу «p». Просмотр сети: здесь можно строить сеть из узлов. Палитра инструментов: здесь расположено большинство примеров и инструментов. Шкала времени: здесь можно запустить воспроизведение или остановить его для дальнейшей работы с сетью. Есть несколько полезных моментов по работе с мышью и клавиатурой в программе: ЛКМ: панорамировать сеть Колёсико мыши: зуммировать сеть Нажмите клавишу H, чтобы вернуться к начальному виду сети Щелчком ЛКМ выберите узел в сети. Нажмите Shift-H для зуммирования выбранного узла. Щелкните колёсиком мыши на узле для просмотра подробной информации о нём. Удерживая ПКМ можно выделять один или несколько узлов. Основной задачей в TouchDesigner (как и в любом инструменте визуального программирования) является создание узлов, соединение их связями и настройка параметров каждого узла. Создать узел в TouchDesigner можно нажав клавишу TAB в окне для работы с сетью. Узел сокращённо обозначается OP: TouchDesigner использует различные цвета для обозначения разных типов узлов: TOP (сиреневый): узлы для обработки видео и изображений. CHOP (зелёный): узлы для работы с каналами. Канал представляется зависимостью некоторого значения от времени. Обычно горизонтальная ось – это ось времени, вертикальная ось – значение. Эти значения контролируют какие-либо параметры в узлах. Позиция указателя мыши, состояние клавиатуры и т.д. обрабатываются в узлах CHOP. SOP (синий): узлы для обработки 3D-форм. MAT (светло-коричневый): узлы для работы с 3D-материалами. DAT (пурпурный): узлы для обработки текста. COMP (тёмно-серый): узлы для компонентов. Компоненты – это контейнеры, содержащие другие узлы. Можно представить их как высокоуровневую инкапсуляцию понятия «объект» в TouchDesigner. Создадим узел EMBOSS TOP: Красный кружок с крестиком сигнализирует о наличии ошибки в узле. Можно щёлкнуть колёсиком мыши на узле, чтобы прочитать сообщение об ошибке. В данном случае ошибка возникла потому, что к узлу не подключен входной сигнал. Входные пины находятся слева, выходные - справа. Соедините сеть, как показано ниже: Сеть читается слева направо. В первом узле происходит загрузка видео, затем оно обрабатывается с использованием фильтра Emboss (Тиснение) и передаётся на выходной узел. Можно любым образом настраивать параметры узлов, особенно узла EMBOSS. Для удаления связи между узлами щёлкните на конце связи, а затем на пустом месте. Сделаем, чтобы глубина эффекта (параметр Strength) зависела от шкалы времени. Для этого в узле EMBOSS задайте значение параметра Strength равным $T: Для любых параметров можно задавать выражения. Выражение $T означает “текущее время (в секундах)”. Теперь создадим контейнер (узел COMP). В сети у каждого узла есть имя. Если вы щёлкните на контейнере колёсиком мыши, то увидите, что имя узла /project1/container1. Контейнер может содержать внутри себя сеть из узлов. Можете представлять контейнер, как папку, хранящую сеть. Это самый высокий уровень сети. Обычно вся сеть помещается в контейнер. Чтобы зайти внутрь контейнера, нужно выбрать его и нажать «i». Это имя показывает, что вы находитесь в контейнере /project1/container1 Чтобы подняться на уровень выше, нажмите u. Теперь попытаемся вырезать и вставить сеть из трёх узлов, созданную ранее. Переместим эту сеть в контейнер (узел COMP) с помощью сочетания клавиш Ctrl-x и Ctrl-v: 1. Выберите все три узла TOP, нажмите Ctrl-x. 2. Перейдите в контейнер COMP. 3. Нажмите Ctrl-v. 4. Поднимитесь на уровень выше, нажав «u». Один из самых главных параметров у контейнера – это параметр Background TOP на вкладке Panel: Задайте его равным ./out1, что будет означать “узел с именем out1 хранится внутри”. Это задаст тот узел, который мы хотим окончательно показать в контейнере. И наконец, щёлкните ПКМ на узле контейнера и выберите Viewer (Просмотр). Появится окно, а в нём будет представлен окончательный результат нашей работы. С этим окном можно взаимодействовать дальше. Пример создания простой интерактивной 3D-сцены с нуля Сохраните вашу работу под другим именем, перейдите к контейнеру и удалите в нём 3 узла TOP. В этом примере создадим простую 3D-сцену, управляемую мышью. Перейдите внутрь контейнера и создайте узел Render TOP для рендеринга 3D-сцены. По умолчанию узел имеет одну камеру (cam1), один геометрический объект (geo1) и один источник света. Таким образом, надо создать контейнер, состоящий из узлов: Camera COMP: вы должны создать по крайней мере одну камеру для 3D-сцены. По умолчанию камера получает имя cam1 и автоматически привязывается к узлу Render TOP. Камера располагается в позиции [0,0,5] и направлена на позицию [0,0,0]. В дальнейшем эти значения можно поменять. Geometry COMP: вы должны создать по крайней мере один геометрический объект для 3D-сцены.По умолчанию его имя geo1, он автоматически привязывается к Render TOP и имеет форму тора. Можно зайти внутрь узла Geometry COMP и задать другую форму, используя сеть узлов. Light COMP: вы должны создать по крайней мере один источник света. По умолчанию он располагается в позиции [0,0,20], но можно задать и другое значение. И наконец, создайте узел Out TOP и соедините его с выходом узла Render TOP. Переименуйте его в out1. Сеть будет выглядеть следующим образом: Теперь перейдём внутрь узла geo1 и поменяем геометрическую форму: По умолчанию задана форма тора. Создадим узел Sphere SOP и в нём создадим сферу. Внизу окошка есть кружочки: фиолетовый (если он включен, то объект рендерится) и голубой (если он включен, то объект отображается). Узел Torus SOP можно удалить или отключить, переведя фиолетовый и голубой кружочки в неактивное состояние: Поднимитесь на один уровень вверх, и вы обнаружите, что форма geo1 стала сферой. Теперь можно создать систему частиц, разлетающихся из сферы. Снова перейдём в geo1 и подключим узел Particle SOP к выходу узла Sphere SOP. Уменьшим радиус сферы и сделаем фиолетовый и голубой кружки активными: Для создания более интересного эффекта, добавьте внешние силы (параметр External Force) и турбулентность (параметр Turbulence) на вкладке Forces узла Particle SOP: Теперь получим позицию указателя мыши и будем использовать её для управления расположением сферы. Чтобы считывать позицию указателя мыши, используем узел Mouse CHOP: Координата x записывается в канал tx, или, если точнее, в канал mouse1/tx (полное имя канала /project1/container1/geo1/mouse1/tx), а позиция y – в канал ty. Будем использовать их для задания параметра Center узла Sphere SOP. Укажем значения “mouse1/tx” и “mouse1/ty”: Теперь поднимемся на уровень узла /project1. Убедимся, что значения параметра Background TOP узла Container1 задано. Щёлкнем на узле Container1 правой кнопкой мыши и выберем Viewer, чтобы увидеть итоговый результат. Примечание 1: можно щёлкнуть ПКМ на узле Container1 и задать режим отображения без рамок. Также можно настроить размеры окна Container1, задав параметры Width и Height: Примечание 2: сфера кажется несколько овальной, потому что по умолчанию узел Render Top создаёт изображение размером 512x512. Можно поменять параметры Resolution и Aspect Ratio узла Render TOP (т.е. render1) следующим образом: Примечание 3: позиция указателя мыши представляется значениями из диапазона от -1 до 1 по x и от -0.75 до 0.75 по y. Поэтому лучше не использовать эти значения напрямую для управления положением сферы, а применить коэффициент. Тогда выражение для расчёта параметра будет выглядеть, например, так (“mouse1/tx”)*2. Добавление слайдеров Перейдём внутрь контейнера /project1/container1. Слева в палитре компонентов (Palette Library) найдём компонент SliderComboV (расположен в /Derivative/UI/Sliders). Перетащим компонент в сеть: Выбираем компонент SliderComboV и перетаскиваем его в /project1/container1 Любой компонент пользовательского интерфейса (кнопка, слайдер и т.д.) внутри контейнера будет показан во всплывающем окне просмотра. Поднимемся на уровень выше, откроем просмотр Viewer (или Borderless) контейнера и увидим слайдер. Теперь создадим ещё 3 слайдера SliderComboV и зададим им разные значения параметра X (на вкладке Layout): По умолчанию выходной диапазон компонента SliderComboV от -10 до 100. Чтобы поменять эти границы, надо зайти внутрь SliderComboV, открыть окно просмотра узла с именем sliderdef и поменять значения параметров Lower and Upper. Четыре SliderComboV имеют параметры: /project1/container1/SliderComboV/out1/vertical /project1/container1/SliderComboV1/out1/vertical /project1/container1/SliderComboV2/out1/vertical /project1/container1/SliderComboV3/out1/vertical Попробуйте использовать эти 4 слайдера для управления различными параметрами 3D-сцены. Например, можно управлять цветом освещения, радиусом сферы, внешними силами, действующими на частицу и т.д. Компонент SliderComboV предоставляет богатые возможности настройки. Например, можно поменять даже его внешний вид. Но это уже тема для другой статьи.

Проекция в трех измерениях Проекция на здания и архитектурные сооружения Видео мэппинг Компенсация искажений Дополненная реальность Настройка и калиборовка камер Распознавание объектов Поскольку самый простой способ - компенсация искажений "вручную", результаты не будут идеальны, а их качество напрямую зависит от вашей внимательности и терпения. Введение Проекция на плоскую поверхность Проекция на сложные объемные поверхностиСведение виртуальной и реальной проекции вручную Виртуальная копия реальной сцены Привязываем плоскую текстуру к поверхности Свет и тень Иллюзия объема Ось виртуальной камеры не совпадает с реальным положением проектораПроекция на две стороны здания с одной перспективой Панорамная проекция в 360° ВведениеОбозначенные выше ключевые моменты объединены общей проблемой: сочетание положения объекта в пространстве (угол поворота и расстояние до объекта), характеристик оптики проекторов (ширина оптики, смещение линзы) и угла зрения на этот объект. В кино, основанном на компьютерных спецэффектах и графике, термины "совмещение" ("match moving") или "трекинг"("camera tracking") описывают проблему точного совмещения реально отснятых сцен с добавленной позже компьютерной графикой. Для решения таких задач, существует масса специальных программ, например, (boujou, 3d equalizer, ...), все они облегчают жизнь создателям визуальных эффектов. Для создания дополненной реальности (совмещение транслируемой сцены с компьютерной графикой в реальном времени) используется, например, ARToolKit (в пакете vvvv есть встроенный плагин ARTK+Tracker?. А компании вроде domeprojection предлагают проектора с функцией автокалибровки. Но поскольку в vvvv нет нодов, позволяющих создать что-то вроде этого или даже этого, ручная настройка совмещения проекции со статичными объектами все еще остается актуальным решением. Проекция на плоскую поверхностьЕсли вы проецируете на плоскую поверхность, например на стену, и проектор расположен под значительным углом относительно стены, вы видите искаженное изображение - трапецию. Используя нод Homography (Transform 2d) вы легко можете корректировать искажение картинки - в результате изображение на поверхности кажется правильным. Помните: Этим способом вы почти всегда можете получить правильную картинку на плоской поверхности, не зависимо от положения проектора, его угла относительно экрана, и характеристик оптики. Проекция на сложные объемные поверхности Сведение виртуальной и реальной проекции вручную. При проекции на сложные объемные поверхности, по большому счету не так важно, где и как установлен проектор - картинка все равно будет искаженной. Правда из одной точки картинка будет смотреться не плохо - это точка проектора. На фотографиях показана проекция обычного рабочего стола на композицию из двух белых коробок. На левом кадре видно реальное искажение картинки, в то время как на правой - снятой с точки зрения проектора - картинка выглядит корректно. Из этих фотографий видно, что ключ к воспирятию неискаженного изображения заключается в следующем: Проекция на объемные поверхности выглядит правильно (не искаженно) только когда смотришь на нее из точки проекции. По тому же принципу устроены Растянутая навигация и Объемное оформление интерьеров. Таким образом, чтобы добиться иллюзии не искаженного изображения на объемной поверхности, вы должны подготовить изображение с учетом искажений возникающих из точки проекции. Другими словами: представим что мы снимаем на камеру искаженное изображение на объемной поверхности. Если мы повторим снятое искаженное изображение на реальном проекторе, то оно совпадет с поверхностью и не будет выглядеть искаженным. К сожалению, это работает только в теории, шансы, что все параметры изображения и фактические настройки и положение проектора совпадут, практически равны нулю. Но это не должно нас останавливать, потому что здесь начинается ручная настройка и подгонка этих параметров, и при должном терпении, с опытом вы получите неплохие результаты. Виртуальная копия реальной сценыСоздание виртуальной копии реальной инсталляции состоит из 3х шагов: определение системы координат для реальных объектов, чтобы совместить их с AxisAndGrid (EX9) в vvvv. создание 3х мерной модели поверхности для проекции и размещение ее в сцене, в соответствии с выбранной системой координат: 3d модель может быть создана в специальных программах или составлена из примитивов, встроенных в vvvv. Для ручного совмещения 3d модели с реальным объектом лучше всего использовать модуль PointEditor (3D Persistent), который позволяет деформировать отдельные фрагменты моделей.измерение расстояния, угла наклона и характеристик оптики проектора: задайте эти параметры в модуле Projector (EX9). В инструкциях к проекторам есть таблицы, аналогичные приведенной ниже, в которых описаны характеристики оптики: проекционные расстояния и углы смещения объектива. Сейчас у вас уже есть базовый проект для совмещения виртуальной сцены с реальной поверхностью. Потратьте время на настройку параметров модуля Projector (EX9) или вручную настраивайте 3d модель, используя модуль PointEditor (3D Persistent), до тех пор пока не получите подходящее совпадение изображения с реальной поверхностью. ProjectionMapping_SimpleSetup.v4p Привязываем плоскую текстуру к поверхностиИспользуя этот простой патч, вы можете повторить эффекты итальянской студии dotdotdot из их проекта Valcucine’s skyscraper. Цель подобных инсталляций - "привязать" проецируемое изображение к поверхности так, чтобы изображение полностью повторяло физические свойства объекта, так как если бы объект был покрыт движущимся изображением или текстурой. В таких случаях текстура смотрится одинаково, независимо от места с которого вы смотрите на объект/скульптуру/поверхность, и независимо от того как установлен проектор. Просчитав 3d-модель объекта в виртуальном пространстве в том же ракурсе, и с теми же характеристиками оптики, что и в реальной инсталляции, вы в точности совместите ваше изображение с реальным объектом. Любые плоские текстуры на 3d модели (в нашем примере - черные кресты на белом фоне) не будут казаться искаженными, независимо от точки зрения на объект. Свет и теньВосприятие любых эффектов света или тени, которые вы применяете к виртуальной модели, напрямую зависит от особенностей того объекта, на который проецируется изображение. Свет и тень в данном случае ведут себя точно так же, как плоские текстуры. Вы можете легко повторить эффекты из инсталляций Lightstrive или Pablo Valbuena Augmented Sculpture Series. Иллюзия объемаВсем нам нравятся инсталляции с иллюзией объема, такие как проекция на The Hague City Hall, AntiVJs проекция на Nuit Blanche Bruxelles или проекции easyweb. Эффекты с иллюзией объема имеют одно важное ограничение, которое вы должны учитывать. В нашем примере с проекцией на кубики добиться такого эффекта можно просто добавив тени к моделям, НО для зрителей этот эффект будет работать только из одной точки. И эта точка совпадает с положением нашей виртуальной камеры. В примере с кубиками текст кажется выпуклым только когда мы смотрим на него, находясь на оси проектора. Если мы посмотрим на этот же текст из другой точки - иллюзия исчезнет. Но это не проблема, в большинстве случаев наши мозги, испорченные кино и телевизором, легко справляются с такими условностями, поскольку мы смотрим на проекцию с довольно большого расстояния, которое компенсирует отклонения от оси проектора. Получается тот же эффект, что и с работами John Beever. Ось виртуальной камеры не совпадает с реальным положением проектораПо ряду причин бывает невозможно совместить положение проектора с положением виртуальной камеры: Вам нужно показать сцену с той точки, где физически невозможно поставить проектор Вам нужно растянуть одну виртуальную сцену на несколько реальных проекторов. В таких случаях вам придется дважды обработать картинку (сделать 2 рендера): в первом рендере вы показываете сцену в желаемой перспективе во втором рендере вы привязываетесь к реальным объектам под тем углом, который физически возможен, и меняя настройки виртуальной камеры совмещаете результат первого рендера с существующей объемной поверхностью. Примеры: Проекция на две стороны здания с одной перспективойОдной из задач этой инсталляции было создать иллюзию объема на фасаде FH Schwäbisch Gmünd. Понятно, что такой эффект работает только когда видно две стороны здания, поэтому зрители располагаются примерно по середине между двух проекторов. Примерно вот так выглядит патч для такой проекции: ProjectionMapping_2ProjectorSetup.zip Иллюстрация показывает, что иллюзия объема работает только при определенном положении зрителей. Другие примеры, рассмотреные на пятидневном семинаре в Schwäbisch Gmünd, можно найти здесь. Панорамная проекция в 360°При создании панорамной проекции в 360°, виртуальные камеры должны находиться в одной точке, с разным углом поворота. Вы можете сделать это в виртуальной сцене, но физически не сможете разместить несколько проекторов в одной точке. Подробный патч для создания панорамной проекции 360°, включая мягкие шторки на проекторах в аттаче small 360 degree setup.zip