Тиждень тому я задумав зробити незвичайний подарунок до 8 березня, але ідея «масштабувати» і вилилася в самостійний проект, який я викладаю для загального користування. Так що, якщо ви хочете оригінально привітати своїх улюблених зі святом - читайте під катом.
Ця віртуальна листівка була зроблена в Blender і перенесена в веб за допомогою Blend4Web . Спочатку я розповім, що вона дозволяє зробити, а потім поділюся своєрідним постмортемом.
Листівка складається з двох частин. Перша - тривимірна сцена, чисто для створення вау-ефекту. Я постарався зробити її найбільш ефектною, але, на жаль, не всі ідеї були втілені через нестачу часу. Друга частина - вітальна. Поверх сцени виводиться текст. Також є можливість розшарювання листівки в соціальних мережах.
Однак родзинка в іншому. У листівці є можливість створення свого власного унікального тексту! Програма підготує спеціальну посилання, яку можна переслати поштою або відправити прямо з листівки в соціальні мережі.
Вобщем, пропоную познайомитися з моїм дітищем і можливо вам сподобається.
Посилання на листівку!
Посилання на англійський варіант (Раптом кому знадобиться)
Так, турбується не про що, ніяких меркантильних цілей при її створенні не було. Ніякої реклами або чого-небудь схожого. Це просто листівка. Я планую викласти її вихідні коди, якщо буде інтерес.
Як це було
Спочатку я намагався знайти якусь готову оригінальну листівку. Однак попалося лише кілька примірників, зроблених на флеш і вельми низької якості. Саме це змусило мене призупинити поточні завдання і взятися на створення власної листівки.
Всього у мене було кілька днів, щоб її зробити. Тому я не став мудрувати і взяв готовий квітка з сайту blendswap . Однак, оригінал був високодеталізарованним і абсолютно не підходив для задуманого. Довелося виконувати серйозне доопрацювання моделі, робити нізкополігональних варіант, докорінно змінювати підхід до текстуруванню.
Спочатку для моделі використовувалася текстура в обрамленні нод Cycles. Движок Blend4Web «з'їв» оригінальну сцену без проблем, повністю відобразивши в браузері, так як задумували її творці. Проблема була в тому, що я планував відображати десятки подібних квіток в кадрі, та ще й з анімацією. Перші експерименти показали, що така сцена тягне на півмільйона вершин. Це абсолютно неприйнятно для реалтайм.
В результаті від оригінального квітки залишилася сама ідея і текстура пелюстки. Я значно зменшив кількість полігонів, використовував стандартну для геймдева схему текстурирования (normalmalі diffuse + ambient), а також відповідним чином переналаштував нодів конвеєр Cycles.
На жаль, кількість Поликов для пелюсток вийшло досить багато. Мені довелося «описувати» всі вигини, а не імітувати їх текстурою з альфа-каналом. Це пов'язано з деякими особливостями реалізації прозорості в движку.
Взагалі оригінальний варіант квітки «тягнув» під 40000 вершин, а перероблений близько 900. Заради інтересу я порівнював якість реалтайм рендеру високолігональной моделі і її копії. До моєї честі, особливих відмінностей не було.
Для краси передбачалося створити такий собі хвилеподібний процес розпускання бутонів. Але на жаль, час не вистачало і букет став відкриватися махом. Пропали із задуманого пурхають метелики, деякі ефекти з частками. Я додав гарний градієнтний фон (стандарт фіча Blender і движком Blend4Web підхоплюється «на льоту»), дощик з блискучих частини (halo) і масу постеффекти з боку движка (промені сонця, bloom і т.п.).
Власне сам процес створення сцени і перенесення її в веб був простим. Движок розуміє практично всі стандартні можливості Blender. Мудрувати не довелося.
Музика була взята з сайту https://incompetech.com/. Відмінний ресурс з масою авторських треків, та ще й з відкритою ліцензією.
Були деякі проблеми з програмуванням. Але пара безсонних ночей і допомогу від тих. підтримки движка, дозволили подолати їх. Хлопцям з Blend4Web велике спасибі за їхню працю і чуйність. Вчора я відіслав їм лист з проханням аж в 11 ночі по msk, відповідь отримав в цей же день (або ніч?). Вобщем, вони молодці.
Або ніч?
<
