Робимо 3D конфігуратор без програмування і верстки

3D-конфігуратори продуктів — це відносно нова тенденція в онлайн-маркетингу та електронної комерції. Створення таких веб-додатків стало можливим внаслідок швидкого розвитку браузерною технології WebGL, що дозволяє малювати 3D-графіку прямо на веб-сторінках користувачів.

На мій погляд, єдина проблема, яка заважає розвитку цієї тенденції — відсутність ефективних інструментів. Більшість з них є тривимірними движками, які можуть бути дуже корисні програмісту, але не звичайного художника. Але є і винятки: аддон Verge3D до пакетів 3ds Max і Blender пропонує засоби, з допомогою яких тривимірні конфігуратори може зробити звичайна людина. Саме цей інструмент ми і розглянемо в нашій статті.

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

Оскільки Verge3D може працювати як з 3ds Max, так і з Blender, ми розберемо обидва інструменти. У цій статті ми припускаємо, що у вас вже встановлений Verge3D. Якщо ні, качайте і встановлюйте з сайту розробника. Там же є хороше керівництво по установці і навчальні відеоуроки.

Наш план

Не слухайте людей, які кажуть, що створення 3D конфігураторів це складно і дорого. Все набагато легше, якщо чітко вивчити процес:

  1. Створюємо контент (3D моделі і матеріали).
  2. Робимо додаток інтерактивним, тобто реагує на дії користувача.
  3. Публікуємо конфігуратор в мережі.

Давайте розглянемо весь процес по порядку.

Створення 3D-контенту

Цей крок є найскладнішим. Однак, якщо у вас є хоч якийсь досвід роботи в пакетах 3ds Max і Blender або один/співробітник, у якого є подібний досвід, все робиться досить швидко.

Насамперед, створюємо 3D додаток з допомогою менеджера програм Verge3D. Введіть ім’я проекту в діалоговому вікні, показаному нижче, і залиште інші налаштування як є.

Читайте також  10 Найкращих програм для обробки фотографій для Інстаграму

Далі потрібно створити тривимірні моделі. Зверніть увагу, що для досягнення найкращих результатів, ваші 3D-об’єкти повинні середньої полігональності. В принципі, буде дуже непогано, якщо вам вистачить менше 100 тисяч полігонів на одну модель.

Наступний етап — створення матеріалів і текстур. Пам’ятайте, що ви завжди можете ознайомитися з матеріалами, просто подивившись вихідні файли у встановленій збірці Verge3D (вони лежать в папці applications/ring Blender версії і applications/ring_max для 3ds Max версії).

Срібло і золото

Так виглядає срібний матеріал в Блендері. Основа матеріалу — сферична текстура (звана «ring_matcap»), змішана з шумовою картою, картою нормалей. Перша являє собою «металеву» поверхню, а дві інші роблять матеріал більш реалістичним. Оскільки у нас є 3 різних металу: срібло, рожеве і жовте золото, ми просто робимо невеликі коректування кольоровості в блоці ColorRamp зазначеного на картинці матеріалу.

Приблизно також виглядає срібний матеріал в 3ds Max. Він дещо простіше, оскільки у нього є додаткова текстура Diffuse Color, що відповідає за колір металевої поверхні.

Діамант

Час розібратися з матеріалом діаманта. Щоб зробити характерний блиск і мерехтіння, ми змоделювали його, використовуючи два шари. Внутрішній шар дорогоцінного каміння має нерегулярну структуру меша і наступний матеріал:

Ось це матеріал зовнішнього шару дорогоцінного каміння, він відповідає за грані діаманта:

Абсолютно також зроблений алмаз в 3ds Max. На картинці зображені нижче обидва шару дорогоцінного каміння.

Трохи розповім як створювати текстури для таких матеріалів. Тут немає нічого складного. Більшість з них є примітивними текстурами шуму/відблисків і оточення, які ви можете створити самостійно або знайти готові зображення в Інтернеті. Винятком є карти нормалі, які доведеться запікати з високополігональних моделей.

Додавання інтерактивності

За допомогою візуального редактора Puzzles вам не потрібно бути програмістом, щоб зробити пристойний 3D-конфігуратор. Просто використовуйте пазл «click on», щоб додаток реагував на дії користувача, «show»/«hide», щоб змінити форму кільця і «assign material» для зміни матеріалів. У цьому ювелірному додатку у нас є 4 різних кільця, кожне з яких виконано з трьох різних матеріалів, відповідно срібло і золото рожевого і жовтого відтінків.

Читайте також  Стань професіоналом. Корисні звички UX-дизайнерів

Ось як виглядає вся логіка в зборі:

Як бачите, тут немає нічого складного. З лівого боку розташовується блок вибору кілець, а права сторона відповідає за зміну матеріалів.

У підсумку виходить, що у користувача є вибір між 12 варіантами виконання кільця. Уявіть, скільки часу і сил потрібно витратити ювелірові, щоб зробити таку колекцію. А тут у нас за все відповідає редактор Puzzles (в такі моменти розумієш, що працювати програмістом або дизайнером досить непогано).

Публікуемся

Це найпростіше. Будь Verge3D-додаток може бути розгорнуто на ваших власних ресурсах або завантажені в хмарний хостинг Verge3D Network. В останньому випадку, просто натисніть значок зеленого глобуса в менеджері додатків, і протягом декількох секунд/хвилин ваш конфігуратор опиниться в хмарі. Після закінчення завантаження ви побачите щось на зразок цього:

У діалоговому вікні ви можете отримати пряме посилання на свій додаток, фрагмент HTML-коду для вбудовування конфігуратора в свій веб-сайт або блог (або вже готовий інтернет магазин). Тут же є кнопки для розшарювання програми через соціальні мережі.

Висновок

За моїми спостереженнями, за рік в індустрії онлайн-торгівлі відбулися радикальні зміни. Рітейл стрімко скорочує торгові площі і переходить в інтернет, а в Facebook зробили можливість завантажувати тривимірні моделі.

Рішення для тривимірних конфигураторів ростуть як гриби після дощу, однак використання Verge3D для цих цілей має ряд переваг. Серед них хороша інтеграція з пакетами моделювання, відсутність залежності від хмарних рішень і гнучкість у розробці тривимірних додатків. Загалом, у цікавий час живемо!

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *