Vectary как добавить свою текстуру
❓ Как исправить глюки материалов и плохое отображение текстур
Авто-перевод статьи от Энди Клемент о том, как превратить простую низкополигональную модель в красоту.
Есть, правда, один нюанс – скоро Google Poly будет закрыт((
Но это не отменяет полезности текста.
3D-ресурсы от Google Poly просто фантастические, они легкие, с низким поли, и есть масса результатов поиска по каждому ключевому слову. Однако иногда вы хотите изменить цвет или добавить текстуру к этим 3D-моделям.
Вы быстро понимаете, что это не работает из коробки. Не волнуйтесь, несколько щелчков мышью — причины, по которым вы получаете ошибки, позвольте мне их объяснить.
- 3D-ресурсы google poly являются низкополигональными при импорте, они имеют триангулированные грани с текстурами, запеченными на этих поверхностях. Эти грани отключены, поэтому нанести материалы не получится. Каждая грань будет иметь свою собственную текстуру, а соседняя грань начнется заново.
- Нам нужно сварить эти грани вместе в режиме редактирования объекта-сетки. На панели инструментов нажмите «Инструменты сетки» и сварите немного (0,01-0,1 подойдет).
- Теперь давайте добавим толщину объекту, потому что он все еще «плоский». Убедитесь, что вы выбрали все грани (не линии) и выдавили весь объект на несколько миллиметров (в зависимости от масштаба вашего объекта).
- Теперь примените материал из библиотеки, перетащив его на объект. Иногда вам нужно разгруппировать актив перед перетаскиванием материала только на одну часть.
- Обратите внимание, текстура кожаного материала странно растянута
- Давайте исправим это, изменив предустановку UV-сопоставления на «BOX»
- В режиме редактирования попробуйте включить / выключить «сглаживание» на панели инструментов, в зависимости от топологии вашей сетки, это может привести к еще лучшим результатам.
- На панели «Фильтры и эффекты» настройте настроение финального рендера.
На этом снимке видно, что 3D модель не имеет толщины, видно сквозь ободок шляпы, потому что «двусторонние материалы» отключены. Также артефакты, черные треугольники, мешают рендерингу (отдельные лица). На следующем этапе я свариваю их и делаю на четыре части.
3D-дизайн и иллюстрация: руководство для новичков
Когда 3D технология возникла десятилетия назад, она сразу стала передовой и изменила многие индустрии. А сегодня 3D — намного более доступный и удобный инструмент для дизайна.
Откройте главную страницу Dribbble — и вы увидите тонны красивых 3D-проектов. С помощью 3D можно создавать иллюстрации и визуальный контент для макетов, веб-дизайнов и цифровых продуктов. Но на этом возможности 3D не заканчиваются. За последние несколько лет появилась целая индустрия, которая использует 3D на различных этапах производства. Новые цифровые интерфейсы, модели автомобилей для виртуальных панелей, интерфейсы умного дома или виртуальная и дополненная реальность (VR и AR) — все они используют 3D.
«Потребность в 3D-дизайнерах по-прежнему высока и только растёт».
Но несмотря на популярность 3D, рынок вакансий в этой области не кажется перенасыщенным. Напротив, потребность в 3D-дизайнерах по-прежнему высока и только растёт. Даже у холодильников теперь такая вычислительная мощность, что они могут запустить простой 3D-движок — области применения 3D сейчас широки как никогда. Это, в свою очередь, способствует развитию простых инструментов — то, что раньше делалось при помощи коммерческих программ с пятизначным ценником, сейчас можно сделать прямо в браузере. В прямом смысле слова.
Но для начала давайте разберёмся, как создаётся 3D-дизайн.
Как это работает
Если подумать, 3D имеет много общего с фотографией. Конечно, есть чисто технические аспекты моделирования 3D-объектов — но, как и в фотографии, вам потребуется сцена для их размещения, виртуальная камера для съёмки и правильное освещение. И, как вы могли догадаться, композиция играет большую роль.
Если вы дизайнер, то к счастью, у вас уже есть навыки в этих областях. Соответственно, вам остаётся только применить уже имеющиеся знания, используя новый инструмент.
Существуют разные подходы к моделированию 3D-объектов в зависимости от того, какими приложениями вы пользуетесь. В любом случае надо будет управлять вершинами и полигонами в трёхмерном пространстве. Любая программа для работы с 3D поможет вам в этом, предложит широкий функционал и освободит вас от рутинных и времязатратных задач.
«Как и в фотографии, для 3D-дизайна потребуется сцена для размещения этих моделей, виртуальная камера для их съёмки и правильное освещение».
Хорошая новость — вам не понадобится много времени на подробное изучение всех подходов. Освойте несколько из них — этого будет достаточно, чтобы проявить свой творческий потенциал и начать. Не говоря уже о множестве ресурсов с готовыми моделями и библиотеками — ничто не мешает вам прямо сейчас пойти и создать 3D-сцену.
Следующим шагом будет загрузить вашу сцену в движок для рендера. Есть как минимум два основных способа получить изображения из 3D-сцены. Это либо обработка в реальном времени, которая используется в играх и интерактивных приложениях, либо трассировка лучей.
Трассировка лучей
При трассировке лучей (ray tracing) некий алгоритм симулирует распространение солнечных лучей (как в реальном мире) и просчитывает итоговый цвет для каждого пикселя в вашем рендере. Несомненно, на это уходит немало времени и вычислительной мощности, но в результате вы получаете реалистичные изображения материалов, света и теней.
В реальном времени
Игровые движки, в свою очередь, обладают рядом функций, которые позволяют им срезать путь и «сымитировать» поведение процессов в реальном мире при помощи видеокарт. Движки реального времени позволяют добиться лучшего результата при меньшей вычислительной мощности.
Области применения
Но прежде чем заняться собственно изучением 3D, было бы неплохо выяснить, какие области интересуют вас и как там используют 3D-дизайн.
Целые индустрии — производство кино, визуальных эффектов, полнометражных мультфильмов или AAA игр — полагаются на технологию 3D-моделирования, и у каждой из них свои требования и подходы к рабочему процессу и выбору инструментов. Если вам это интересно, то рекомендую начать с проектов по разработке инди-игр, короткометражных мультфильмов или в производстве независимого контента.
3D иллюстрация
С другой стороны, если вы — уже состоявшийся иллюстратор, то вам лучше подойдёт 3D иллюстрация в рамках графического дизайна, интерактивных 3D-приложений или анимаций для рекламы. В таком случае 3D иллюстрация будет естественным продолжением ваших умений и поможет продвинуться в текущей карьере.
Если же вы дизайнер, то обучиться 3D иллюстрации, наверное, будет проще всего (и я советую начинать именно с этого). Можно просто взять набор геометрических примитивов и составить из них красивую композицию, а итоговый рендер использовать как основную иллюстрацию в каком-нибудь проекте. Иллюстрация может быть очень простенькой, но работа над ней уже поможет вам разобраться в композиции, размещении и настройке камеры, а также освещении и рендере результата. Позже, уже разобравшись в рабочем процессе, вы без проблем сможете работать с более сложными формами и геометрией.
Рендеринг в реальном времени
Куда интереснее использовать рендеринг в реальном времени и интерактивность вместе. Даже если вы не планируете стать разработчиком инди-игр, помните, что многие из перспективных и новых технологий скорее всего будут связаны с 3D. Это прекрасный инструмент для прототипирования приложений дополненной реальности или интерактивных интерфейсов в автомобильном дизайне.
Для их создания вам потребуются познания в работе игр, скриптов и движков реального времени. С другой стороны, появляется так много новых инструментов, что порой хватает и поверхностных знаний, чтобы сразу же погрузиться в творческую работу.
Эффект появления машины
Автор: Глеб Кузнецов✈
Инструменты
Думаю, сейчас вы уже примерно представляете, чем именно вы хотите заниматься в 3D, поэтому следующим шагом будет выбор правильного инструментария. На рынке не так много приложений для работы с 3D— сразу можно понять, какая программа лучше подойдёт для работы в контексте дизайна.
Вечно актуальные стандартные программы вроде 3ds Max и Maya — лошадки, которые тянут мультимиллионные производства фильмов и игр. Если вас прельщает кино или игровая индустрия, то, вероятно, вам стоит научиться пользоваться одной из этих программ. Но важно помнить, что редко какое приложение отвечает всем задачам производства. Многие программы созданы для более узконаправленной работы: например, в ZBrush создают 3D-скульптуры, в Houdini — сложные симуляции и процедурное моделирование, в Substance — текстуры и т. п.
CINEMA 4D
Если вам, будучи дизайнером, нужно создать иллюстрацию или простую анимацию для клиента, то вам идеально подойдёт один инструмент, с помощью которого вы сможете решить все свои задачи. Есть программа Cinema 4D, очень популярная среди иллюстраторов и моушн-дизайнеров. Она интуитивна и проста в использовании, имеет множество инструментов для создания анимации и моушн-графики, а также предлагает на выбор множество внешних движков рендеринга, включая Redshift.
Выбрав Cinema 4D, вы не ошибётесь; так что если у вашего работодателя уже куплена лицензию на эту программу — используйте её, тут даже думать нечего. Сейчас Cinema 4D стала доступнее — появилась месячная подписка, но всё равно не каждый может её себе позволить.
См. больше на instagram.com/petertarka. Не используйте без разрешения.
Blender
Если вы ограничены в бюджете, или не уверены, что хотите платить за дорогую программу ради того, чтобы иногда создавать 3D иллюстрации, то у меня для вас есть хорошие новости. Можно попробовать Blender — бесплатное приложение с открытым исходным кодом. Пожалуйста, послушайте, что я скажу дальше, потому что Blender — это настоящее чудо в 3D-индустрии. Уже более двадцати лет он постоянно улучшается разработчиками и достиг уровня профессионального инструмента — сейчас он продолжает развиваться на полной мощности при поддержке таких компаний, как Nvidia, AMD и Epic.
Blender включает все возможные функции, которые вам пригодятся, включая недеструктивное (non-destructive) моделирование, скульптинг, анимацию и встроенный движок фотореалистичного рендеринга. Он даже предлагает возможности, которых нет у большинства других программ — например, движок рендеринга в реальном времени EEVEE, который позволяет вам работать с вашей сценой в реальном времени.
Лично я использую Blender для создания всех своих 3D работ, поэтому меня можно посчитать меня предвзятым. Не отрицаю, но я твёрдо уверен, что Blender — это лучший выбор для дизайнеров, которые ещё только знакомятся с миром 3D.
«Наконец-то наступила неделя Звёздных войн! С окончанием Мандалорца и приближением премьеры „Скайуокер. Восход сейчас самая пора поделиться самой культовой моделью из Звёздных войн — Тысячелетним соколом. Мне очень понравилось создавать эту модель во время пересмотра оригинальной трилогии — мне на это понадобилось всего 12 парсеков 😀 Как вы думаете, я справился?»
Unity
Для игр, рабочих интерактивных прототипов и XR (AR и VR) я бы порекомендовал Unity — это, вероятно, самый популярный и доступный игровой движок с поддержкой сообщества и огромным количеством документации и туториалов. Unity предлагает множество опций для моделирования и анимации прямо внутри программы, так что с некоторыми проектами можно будет обойтись только ей.
Левитирующий интерфейс
Автор: Себастьян Стапельфельдт
«Несколько дней я экспериментировал с левитирующими UI и мне нравится, что получилось. Всё становится таким „естественным. Спасибо Microsoft за гибкую дизайн-систему. Эта иллюстрация — часть моего ежедневного проекта, который я начал в этом году».
Vectary
Я уже упоминал, что создавать 3D проекты можно прямо в браузере. Чтобы быть верным своему слову, хочу показать вам веб-инструмент под названием Vectary. Он позволяет вам моделировать, создавать композиции и рендерить сцены онлайн, прямо как Figma (для которой у Vectary есть плагин). Пригодится, если вы ищете программу для 3D-моделирования, чтобы накладывать свои макеты на мокапы объёмных устройств, использовать 3D-модели на сайтах или показывать дизайн фирменных бланков и другой канцелярии.
Аналоговые 3D-часы
Автор: Vectary для Vectary
«Мы вдохновлялись примерами SlimDesign, которые сделали крутые концепты аналоговых часов. Обязательно посмотрите их работы! Мы попытались спроектировать эти аналоговые часы с чистого листа и отрендерить их в нашем онлайн инструменте для 3D — Vectary. Весь процесс создания можно посмотреть здесь. Редактируемый 3D-шаблон часов на Vectary найдёте здесь».
С чего начать
Итак, что же дальше? Создавать нечто новое, разумеется! Если в этой статье нашлась область применения 3D, которая вас заинтересовала — выберите программу, которая вам больше всего подходит, и начните изучать её.
Поскольку мир 3D крайне многослоен, я бы не советовал сразу начинать смотреть узконаправленные туториалы. Вместо этого лучше вложитесь в хороший курс, который охватывает конкретно вашу область применения 3D и точно соответствует тому, чего вы хотите достичь. Так вы получите немедленные результаты, которые дадут вам мотивацию, и вы сразу сможете строить свои собственные проекты на основе полученных знаний, заполняя все пробелы и изучая неизвестное по ходу работы.
Если вы можете позволить себе очное обучение — отлично. Несомненно, сперва стоит взвесить все доступные варианты и учесть рекомендации и обзоры — но находиться в одной комнате со преподавателем и другими мотивированными людьми, когда вы все сосредоточены на работе и творчестве, определённо стоит того.
Лично я предпочитаю сразу приступать к делу. Если вы чувствуете в себе такое же нетерпение попробовать что-нибудь новое, не тратьте его на бесконечные поиски идеального варианта. Выберите что-то одно, настройтесь на работу, и, возможно, это приведёт вас к совершенно неожиданным результатам.
Обзор сервисов для встраивания 3D моделей на сайты
Перед тек как обозревать сервисы приведем результаты некоторых исследований положительного влияние 3D-технологий на бизнес.
Время пребывания на сайте
После создания 3D моделей своих товаров продавец детских колясок Bumbleride увеличил время пребывания на сайте на 21%, а конверсию на 33%.
Автомобильный бренд MG Motor увеличил вовлеченность в 8 раз с помощью 3D визуализации в рекламе.
Вовлеченность
Согласно исследованиям Vertebrae (партнер Facebook) ритейлеры, которые использовали технологию дополненной реальности во время пандемии Covid-19, увеличили вовлеченности клиентов на 19%. При этом коэффициент конверсии клиентов, использующих AR на 90% выше, чем у тех, кто не использует её.
Вероятность покупки
Согласно данным Houzz пользователи, которые взаимодействовали с приложением AR, в 11 раз чаще покупали продукт.
Исследование Cappasity показало, что 95% респондентов предпочитают интерактивное 3D-представление воспроизведению видео.
Сокращение возвратов
По результатам исследований Колумбус 2019 года клиенты, увидев 3D модель, точнее знают, что именно они получат, а возвраты сокращаются на 80%.
Биржа по продаже 3D моделей и, по совместительству, что-то вроде социальной сети для 3D художников. Так же проект имеет возможности по встраиванию 3D моделей на сайты.
Интеграция моделей на сайт
Для интеграции достаточно выбрать нужную модель и взять код для встраивания, который уже нужно использовать на своем сайте. При этом есть много полезных настроек.
Настройки загрузки
Можно выбрать, будет ли модель загружаться автоматически, когда пользователь зашел на ваш сайт, или же ему придется нажать кнопку «проигрывания».
Причем, чтоб модель загрузилась максимально быстро, и пользователь увидел хоть что-то в первые секунды, можно включить настройку отложенной загрузки текстур. Она позволяет быстро загрузить саму модель, а уже потом текстуры.
Вовлечение в процесс
Чтоб пользователь сразу понял, что модель можно двигать, можно включить функцию «Animate entrance». С этой настройкой, при загрузке модели, камера будет плавно подлетать к начальной точке обзора.
Взаимодействие
Кроме стандартных ярлычков с аннотациями на разных частях проекта, можно добавить функции по изменению модели. Настройка «Control option» разрешает посетителю самостоятельно менять цвета и материалы конструкции прямо на вашем сайте, но подходит скорее для профессионального 3D дизайнера, а не обычному пользователю.
Дополненная реальность
AR так же доступен при интеграции моделей на сайт, но есть ограничение: веб-версия доступна лишь на премиум аккаунте. На бесплатной и профессиональной версии просмотр в AR возможен только через приложения.
Другие функции
Интеграция моделей – не основная возможность Sketchfab, хоть и сделана хорошо. В основном это огромная биржа для покупки и продажи 3D моделей и поиска художников.
В бесплатной версии вы можете интегрировать модели на свой сайт бесплатно, но на ней будет ссылка на Sketchfab и их логотип, которые нельзя убрать. При этом бесплатно загружать можно только 10 моделей в месяц, размер которых не превышает 100 Мб.
Профессиональная версия не разрешает убрать логотип и ссылку на интегрированной модели, но позволяет загружать 50 моделей в месяц с лимитом в виде 200 Мб для каждой модели.
Премиум версия позволяет выкладывать 200 моделей в месяц весом до 500 Мб, а главное, логотип и ссылку на Sketchfab можно убрать.
3D редактор объектов с простым интерфейсом прямо в браузере. Сервис позволяет создавать модели с нуля или загружать уже готовые, а главное, интегрировать их на сайт.
Интеграция моделей на сайт
Все, как на предыдущем сервисе: код для встраивания.
Другой способ «интеграции»
Если у вас нет потребности в интеграции модели на сайт, то можно показать клиентам модель через ссылку в новом окне. Это будет окно с моделью, где о сервисе Vectary будет напоминать только командная строка.
Очевидный минус такого способа – гость вашего сайта не видит модель сразу.
В плане взаимодействия клиента есть все функции, которые доступны в Sketchfab. Также можно дать пользователю возможность менять цвета и материалы модели из заранее заданных вариантов.
Дополненная реальность
Тут AR тоже доступен, но только в платной версии. Сделан он довольно удобно. Перед просмотром выдается QR код, который можно отсканировать с обычной камеры телефона.
Остальные функции
Кроме интеграций уже готовых моделей Vectary позволят создать модели с нуля в своем редакторе.
В бесплатной версии можно загрузить всего 10 моделей. Причем в готовый проект нельзя добавлять анимацию и давать возможность пользователям вашего сайта вносить изменения в цвета модели и т. д.
Интегрировать объект на сайт можно бесплатно, но на нем останется лого и ссылка Vectary
В версии PRO уже есть все необходимое: неограниченное число проектов, анимация, отсутствие брендовых знаков Vectary на модели, интегрированной на ваш сайт.
Бизнес-версия в плане интеграции нам не интересна, она нужна для команд разработчиков 3D моделей, ведь добавляет лишь функции по работе в коллективном пространстве сайта.
Site3D Configurator
Сервис по размещению 3D моделей на сайте. Имеет возможность конфигурирования модели, с помощью чего пользователи 3D виджета могут вносить изменения в саму модель. Например, менять текстуры, заменять одни части на другие и прочее.
Интеграция на сайт
Опять же, все быстро и стандартно, через код для встраивания.
Взаимодействие
Помимо изменения уже доступных цветов и текстур, можно дать возможность пользователю сайта загрузить свою текстуру на модель или её часть. Например, макет футболки. Так же сервис дает возможность значительно менять вид продукта: заменять одни части на другие, скрывать или показывать их.
Расчет стоимости
Клиенты могут видеть цену товара в зависимости от выбранных опций и оформить заявку прямо из 3D виджета.
Отправка результатов от клиента
После того, как ваши потенциальные клиенты осуществят выбор своих персональных настроек продукта, они могут передать свой результат по ссылке в виде PDF документа напрямую вашим сотрудникам, например менеджеру по продажам.
Сервис дает возможность перемещать камеру между различными точками обзора всей 3D сцены, что позволяет создавать интерактивные 3D туры.
Дополненная реальность так же доступна через телефон.
На 10 дней дают попробовать максимальные возможности с тарифом «Конфигуратор». Далее будет действовать бесплатная версия, в которой будет доступно для добавления не более 5 проектов, и работать они могут в режиме просмотра по 60 секунд. При этом также будет логотип сервиса.
«Базовый» тариф позволяет создавать сколько угодно проектов с возможностью отключения показа логотипа.
Тариф «Конфигуратор» добавляет к «Базовому» возможность редактирования деталей модели.
Какой сервис выбрать?
Интеграция на сайт
Для того чтобы просто интегрировать модель на сайт, подойдет любой из рассмотренных сервисов.
Конструктор
Максимальный размах для изменений модели уже в готовом 3D виджете осуществляется сервисом Site3D Configurator.
Самостоятельная разработка
Даже если вы не 3D дизайнер, а бизнесмен, вы можете «поиграться» с 3D моделями самостоятельно, чтобы показать набросок художнику, который будет его дорабатывать. Для этого лучше всего подойдет Vectary.
Дешевле всего добавить модель на сайт без каких-либо брендовых символов сервиса получится на Site3D Configurator с подпиской «Базовый».
Если у вас совсем малобюджетный проект, и вы хотите все сделать бесплатно, то единственный вариант – это Sketchfab. Но не забывайте, что останется логотип проекта.
Если экономить и на художнике, то можно сначала самостоятельно сделать объект на Vectary, загрузить его на Sketchfab и уже потом на свой сайт.
Подробнее о VECTARY
Статья в процессе обновления, а пока рекомендую заглянуть на мой Ютуб канал, вот, например, посмотрите вот это видео:
Vectary и рынок 3D-софта
В принципе, чтобы понять всю крутость Vectary, достаточно просто посмотреть список возможностей и пару видео. Но для тех, кто не знаком с миром 3D, наверное, будет интересно понять, какое место занимает Vectary на рынке.
Я разбил весь существующий 3D-софт на условные три категории. Так будет проще понять.
1. Профессиональный софт (полигональное моделирование)
Blender, 3ds Max, Maya, Cinema 4D и тд.
Всё это — мощный софт с неограниченными возможностями. Но обратная сторона очевидная и неприятная — изучение такого софта занимает довольно много времени. Даже для освоения простых задач вам всё равно придётся понять множество нюансов.
2. CAD софт
Это софт для инженеров, архитекторов и для тех задач, где нужно точное моделирование.
3. Прочий софт
Есть очень много программ для создания или работы с 3D, которые не входят в предыдущие две категории. Как правило, это узкоспециализированные программы для решения конкретных задач. И у такого софта почти всегда всратый интерфейс. На самом деле ситуация начала улучшаться в последнее время, но дело в том, что Vectary уже давно умчались вперёд.
Итак, у нас появилась картина, какой же вывод:
На рынке нет простенькой программы с красивым современным интерфейсом и чтобы при этом получать результаты хотя бы похожие на профессиональные.
И при этом чтобы ещё функционал был широким и позволял выполнять разные задачи.
3D мир абсолютно справедливо у всех ассоциировался с болью, сложностями и печальным интерфейсом, потому что действительно не было ни одной нормальной программки.
И-и-и-и. Vectary первые, кто исправил эту ситуацию.
И поэтому не будет преувеличением называть Вектари революционным продуктом.
В итоге Вектари — это не проста программка для моделирования, это целая дизайн платформа с кучей функций для работы с 3D и AR.
Чтобы понять масштаб, пожалуй, Vectary правильнее всего сравнить с Фигмой (только в мире 3D дизайна).
Конкуренты Vectary
Да, на момент 2022 года появился и довольно интенсивно вырос такой конкурент как Spline, но на самом деле Сплайн не совсем конкурент, потому что у него совсем другой рендер-движок, не позволяющий давать реалистичного качества материалов.
Есть ли другие конкуренты? Фактически нет. С натяжкой могу назвать коллекцию Adobe Substance 3D, а именно Stager, но там вроде как нет функций моделирования и вообще это же Адобе. а это означает миллион минусов, сами знаете, даже перечислять не буду.
Как появился Vectary
В 2014 году разработчик и промышленный дизайнер из Словакии задумали исправить несправедливую ситуацию и сделать так, чтобы создание 3D стало доступным и простым.
В 2015 году у них был уже первый прототип продукта.
В 2016-ом вышла публичная бета-версия Vectary.
Ниже на фото основатели Vectary: MICHAL KOOR и PAVOL SOVIS