Интерактивная 3D открытка к 8 марта!
Неделю назад я задумал сделать необычный подарок к 8 марта, но идея «масштабировалась» и вылилась в самостоятельный проект, который я выкладываю для общего пользования. Так что, если вы хотите оригинально поздравить своих любимых с праздником — читайте под катом.
Эта виртуальная открытка была сделана в Blender и перенесена в веб с помощью Blend4Web. Сначала я расскажу, что она позволяет сделать, а потом поделюсь своеобразным постмортемом.
Открытка состоит из двух частей. Первая — трехмерная сцена, чисто для создания вау-эффекта. Я постарался сделать ее наиболее эффектной, но, увы, не все идеи были воплощены из-за недостатка времени. Вторая часть — поздравительная. Поверх сцены выводится текст. Также имеется возможность расшаривания открытки в социальных сетях.
Однако изюминка в другом. В открытке есть возможность создания своего собственного уникального текста! Программа подготовит специальную ссылку, которую можно переслать по почте или отправить прямо из открытки в социальные сети.
Вобщем, предлагаю познакомиться с моим детищем и возможно вам понравится.
Ссылка на английский вариант (вдруг кому понадобится)
Да, беспокоится не о чем, никаких меркантильных целей при ее создании не было. Никакой рекламы или чего-либо похожего. Это просто открытка. Я планирую выложить ее исходники, если будет интерес.
Как это было
Сначала я пытался найти какую-нибудь готовую оригинальную открытку. Однако попалось всего несколько экземпляров, сделанных на флеш и весьма низкого качества. Именно это заставило меня приостановить текущие задачи и взяться на создание собственной открытки.
Всего у меня было несколько дней, чтобы ее сделать. Поэтому я не стал мудрить и взял готовый цветок с сайта blendswap. Однако, оригинал был высокодетализарованным и абсолютно не подходил для задуманного. Пришлось выполнять серьезную доработку модели, делать низкополигональный вариант, в корне менять подход к текстурированию.
Первоначально для модели использовалась текстура в обрамлении нод Cycles. Движок Blend4Web «скушал» оригинальную сцену без проблем, полностью отобразив в браузере, так как задумывали ее создатели. Проблема была в том, что я планировал отображать десятки подобных цветков в кадре, да еще и с анимацией. Первые эксперименты показали, что такая сцена тянет на полмиллиона вершин. Это абсолютно неприемлемо для реалтайм.
В итоге от оригинального цветка осталась сама идея и текстура лепестка. Я значительно уменьшил количество полигонов, использовал стандартную для геймдева схему текстурирования (normalmalи diffuse+ambient), а также соответствующим образом перенастроил нодовый конвейер Cycles.
К сожалению, количество поликов для лепестков вышло достаточно много. Мне пришлось «обрисовывать» все изгибы, а не имитировать их текстурой с альфо-каналом. Это связано с некоторыми особенностями реализации прозрачности в движке.
Вообще оригинальный вариант цветка «тянул» под 40000 вершин, а переделанный около 900. Ради интереса я сравнивал качество реалтайм рендера высоколигональной модели и ее копии. К моей чести, особых отличий не было.
Для красоты предполагалось создать этакий волнообразный процесс распускания бутонов. Но увы, время не хватало и букет стал открываться махом. Пропали из задуманного порхающие бабочки, некоторые эффекты с частицами. Я добавил красивый градиентный фон (стандартая фича Blender и движком Blend4Web подхватывается «на лету»), дождик из сверкающих части (halo) и массу постэффектов со стороны движка (лучи солнца, bloom и т.п.).
Собственно сам процесс создания сцены и переноса ее в веб был простым. Движок понимает практически все стандартные возможности Blender. Мудрить не пришлось.
Музыка была взята с сайта https://incompetech.com/. Отличный ресурс с массой авторских треков, да еще и с открытой лицензией.
Были некоторые проблемы с программированием. Но пара бессонных ночей и помощь от тех. поддержки движка, позволили преодолеть их. Ребятам из Blend4Web большое спасибо за их труд и отзывчивость. Вчера я отослал им письмо с просьбой аж в 11 ночи по msk, ответ получил в этот же день (или ночь?). Вобщем, они молодцы.