Как делать сайты с 3D — Дизайн на vc.ru
В этот раз расскажем, как можно использовать 3D для сайтов. Как создавать трехмерные объекты, на что смотреть при разработке дизайна с 3D, как оптимизировать работу таких сайтов и пару слов о WebGL. Статья поможет более корректно ставить задачи 3D-шникам.
8667 просмотров
Для начала объясним, зачем вообще так заморачиваться:
Текст — это когда ты заставляешь человека строить образ в своей голове, опираясь на груду букв, которую ты ему любезно предоставил. Гораздо более гуманно этот образ дать готовым. Для этого мы используем в создании дизайна медиа: 3D, видео, фото, иллюстрации и тд. Заботливый и удобный интерфейс помогает пользователю и не принуждает его работать.
3D — это не про промо, а про смысл
3D как и текст — сугубо сервисная вещь. Как его использовать и применять ли вообще — вопрос UX. Например в этом сайте трехмерные модели нужны для того, чтобы показать конкретные объекты-триггеры и удовлетворить информационный запрос ЦА.
Подготовка
Концепт нужно довести до состояния, когда там есть все, кроме 3D;
Подготовить макеты страниц, на которые нужно 3D;
- Подготовить файлы с пустым альфа-каналом, чтобы можно было сделать видеорендер и примерить его;
Создать среду и ограничения. Определяемся, какой объект должен быть, его вид и характеристики. С участием фронтендеров определяем максимум, который вывезет будущий сайт;
Отдаем 3D-шнику, он готовит модели. Только получив их, можно переходить к обсуждению анимаций.
По большому счету есть два ключевых ограничения, о которых надо думать на этапе подготовки:
- Коммуникационная задача сайта вообще и 3D в частности;
- Техническая реализация.
Также на этапе подготовки нужно будет решить, будут ли в интерфейсе реальные модели или нет. Ведь…
есть два стула:
— на одном реальные модели
— на другом фейки: видео- и фоторендеры
У фейкового 3D есть плюсы: не нужно решать вопрос с экспортом реальных моделей в интерфейс. Но есть и минусы. Например весьма ограниченная интерактивность у видеорендеров — их можно проиграть только вперед. И неприемлемый размер страниц, содержащих секвенции. Весят секвенции очень много.
Давайте сразу разберемся с тем, что делать, если вы будете встраивать фейковые модели. Если коротко, то эта работа аналогична встраиванию видео. Специалист по 3D готовит модели и сцены с ними, рендерит это в видео и уже его вы и встраиваете. Как это делать, напомню, подробно расписано в другой нашей статье на VC.
Однако добавим: чем меньше цветов и перерисовок экрана, тем лучше можно будет оптимизировать видеорендер для встраивания.
Работая с 3D-визуализациями, добиться этого проще, чем при встраивании реальных съемок. Можно сделать всё монохромным, или сделать значительную часть кадра статичной. Это сократит площадь перерисовок и сделает такой видеорендер легким.
Такие рендеры очень любят кодеки, и замечательно сжимают. Сравните с видеосъёмкой. Несмотря на то, что это таймлапс имеет большое количество статичных пикселей (синяя линия а графике), разница в оптимизации огромна — 3D выигрывает с отрывом (оранжевая линия). Снова покажем скрины с графиками оптимизации видеороликов и 3D-рендеров с помощью кодеков.
Реальные 3D-модели в интерфейсе
Реальные модели в интерфейсе сайта — это технология WebGL. С ее помощью можно по-настоящему встроить 3D-модель в сайт и делать с ней что угодно. Для работы вам понадобятся библиотеки:
three.js — большая, красивая, сочная, но может показаться сложной для начинающих. regl — поменьше, чем three.js, но проще для освоения.
Сочетание WebGL и указанных выше библиотек позволяют получить в интерфейсе настоящую интерактивность, дают множество визуальных эффектов, позволяют формировать впечатляющий пользовательский опыт.
Пример интерактивного повествования — сайт НИИ ТП Роскосмоса. С помощью ряда сцен рассказываем об услугах компании, ее якорных проектах и принципах работы некоторых систем. Никаких текстов, минимум напряжения для юзера
У WebGL есть особенности:
- Модели не будут выглядеть как на рендере. Хайполи поместить в интерфейс будет сложно;
- Чтобы применять настоящие модели, нужно правильно их проектировать с оглядкой на интерфейс, правильно моделить и анимировать. И дизайнер, и моделлер должны понимать, что далеко не все 3D-модели будут работать в вебе;
- С помощью WebGL можно не только работать с 3D-моделями, но и делать реалистичную физику и наделять ею например курсор или другие элементы сайта;
- WebGL позволяет создавать 3D эффекты: шейдерные переходы и искажения, эффекты глубины и много что еще.
Чтобы избежать проблем нужно получить решения от фронтендеров еще до того, как дизайнер загрузил всех и презентовал концепт заказчику.
Оптимизируем 3D-модели
Для понимания: в WebGL все изменения происходят с помощью JavaScript. А он исполняется на устройстве пользователя, да еще и в браузере. Разные браузеры работают по-разному. И если речь идет о сложной трехмерной модели: органика с анимациями, скелетная анимация, механизмы/оборудование, то оптимизировать следует на этапе дизайна. Дизайнеру нужно учитывать возможный объем файла, количество сцен, насколько сложное освещение в сцене потребуется. Когда сцена и объект хорошо продуманы, то технически всё можно сделать проще, ведь не во всех ракурсах нужна 100% детализация, не все элементы нужно прорабатывать и анимировать.
При анимации надо стремиться к наименьшему числу перерисовок. Масштаб перерисовки — количество пикселей, которые сменяются на мониторе. Чем меньше операций перерисовки, тем лучше.
Это можно закладывать на этапе проектирования модели и сцены. Например показывать объект не с четырёх сторон, а с двух. Или срезать все полигоны, которые юзер не видит. Тогда они не будут обсчитываться на видеокарте. Так получится выиграть в весе модели.
Изначально подробная модель карьерного самосвала была радикально упрощена. Правда, в итоговый сайт эта сцена не попала
Работая над оптимизацией 3D, приходится бороться за каждый килобайт. 2 мб — это уже очень много. А ведь моделей может быть несколько на одной странице.
Что еще влияет на вес модели в интерфейсе:
Чем меньше площадь модели на экране, тем лучше. Если площадь велика, то на слабых машинах такой сайт будет заметно тормозить;
Экранное сглаживание (anti-aliasing). На некоторых браузерах для сглаживания используется неоптимальные алгоритмы. Поэтому браузер увеличивает изображение: он отрисовывает больший, чем надо слой и таким образом тратит ресурсы процессора на антиалиасинг.
Работа с заказчиком
Все, что связано с 3D чрезвычайно больно и дорого править. Поэтому следует придерживаться нескольких простых правил:
— Использовать кастомные референсы
— Не показывать графику отдельно от дизайна сайта
— Всё примерять на дизайне сайта
Каждый свой шаг нужно утверждать с заказчиком. Чтобы потом после массы затраченных ресурсов не сидеть и не портить свою работу. Пример такого подхода — концепт ниже. Первая его часть это очень схематичные, не проработанные визуализации, которые позволили при небольших затратах дать клиенту максимум понимания, как всё будет выглядеть и работать. Во второй части ролика видны уже чистовые модели и анимации.
Концепт для компании Сибирский антрацит. Презентует проект строительства Северомуйского тоннеля-2
Кейс с «мясом» и подводными камнями
Это сайт мы уже показывали в статье про создание интерфейсных видео.
Теперь расскажем про него чуть подробнее.
Сначала хотели ставить 3D. После того, как разработали модели, стало ясно, что они велики по объему. Но мы этот нюанс проигнорировали, понадеявшись на то, что все проблемы решит WebGL. Не решил, и в ходе работы мы от него отказались, заменив реальные 3D-модели видеорендерами.
Видео тоже были очень большим. Активировались они при наведении, назад не проигрывались. То есть часть интерактивности мы принесли в жертву оптимизации. В конечном счете на каждую сцену требовалось два видео и по одному — на анимацию появления. На шесть сцен получилось 18 роликов. Это много, и далее встал вопрос, как это всё сжать.
Использовали кодеки H.264-265 и Vp9. Оказалось, что Vp9 врёт цвета, но ролики получались маленькими. А H.264-265 давали верные цвета, но видео получались тяжелыми. Перешли к сокращению количества кадров, и всё равно пришлось заниматься ручной подгонкой битрейта и кодеков. В итоге мы просто колоссально намаялись. Да, сайт получился и красивым, и быстрым, и всех устроил, но этого вала работы можно было избежать, спроектировав его иначе.
Если интересно узнать про WebGL подробнее, то есть вот такая лекция. Но она уже больше для программистов
48 сайтов для загрузки бесплатных 3D моделей
3D-принтеры произвели огромную революцию в сфере искусства и обрабатывающей промышленности. Благодаря достижениям в технологии 3D-принтеров, теперь не так сложно владеть принтером даже дома или в офисе.
Хотите ли вы создать 3D-мебель, механический компонент или даже фигурки людей или животных, вот 50 лучших бесплатных веб-сайтов с 3D-моделями, которые охватят все ваши потребности. Взглянем.
10 дешевых и доступных 3D-принтеров для покупки
Было время, когда 3D-принтеры были новинкой, но теперь это не так. Вы видите сотни …Подробнее
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
1.Pikbest
Pikbest предлагает тысячи 3D-моделей, которые представлены в различных категориях, таких как украшение, свадьба, бытовая техника, ванная, кухня, мебель.
Вы можете искать и скачать бесплатно после регистрации.
2.GrabCAD
Библиотека сообщества GrabCAD предлагает более 2,8 миллионов проектов и моделей, включая САПР , благодаря крупнейшему сообществу дизайнеров, инженеров и студентов.
3.CGTrader
CGTrader — это еще один сайт с более чем двумя миллионами трехмерных моделей, которые доступны в нескольких форматах файлов, таких как 3DS, C4D, FBX, MAX и OBJ.
4.Clara.io
Clara.io содержит более 100 тысяч бесплатных 3D-моделей в различных форматах, таких как Babylon.JS, OBJ, STL и Three.JS, которые работают во многих дизайнерских приложениях.
5.3dsky.org
На 3dsky.org есть коллекция из более чем 81 тыс. Моделей, разбитых по различным категориям, например, бытовая техника, ванная, отделка, мебель, кухня, материалы, текстуры и т. д.
6.Thingiverse
Thingiverse, которая гордится тем, что является «вселенной вещей», предлагает более 50 тысяч трехмерных дизайнов и моделей, собранных в коллекции.
7.MyMiniFactory
MyMiniFactory — это тщательно отобранная платформа, демонстрирующая более 45 тысяч 3D-моделей. Вы можете искать и загружать полностью протестированные объекты, загруженные глобальным сообществом.
8.Онлайн-галерея Autodesk
Autodesk Online Gallery, платформа от Autodesk, насчитывает около 44 тысяч + моделей. Также любой желающий может загрузить свои собственные 3D-модели .
9.Cult
Cult содержит более 19 тысяч трехмерных моделей. Модели хорошо организованы по категориям и также легко доступны для поиска.
10.TurboSquid
TurboSquid предлагает 3D-модели в различных форматах, таких как 3DS, C4D, FBX, OBJ и другие. На сайте размещено более 18 тысяч моделей, которые также доступны для поиска и сортировки.
11.Free3D
Free3D — это хранилище с более чем девятью тысячами 3D-моделей , которые представлены во многих категориях, таких как животные, электроника, растения, спорт, автомобили и т.
д.
12.ArchibasePlanet.com
ArchibasePlanet.com собирает, размещает и показывает более 9 тысяч архитектурных моделей , которые сгруппированы по многочисленным категориям, таким как кресло, кровать, стул, диван, стол и т. д.
13.Архив 3D
Archive 3D — это еще один репозиторий, в котором хранится семь тысяч 3D-проектов по многим категориям, таким как оборудование и техника, мебель, конструкции и т. д.
CadNav.com предлагает более 5 тысяч трехмерных моделей, которые доступны для загрузки в нескольких категориях и различных форматах в 3DS, C4D, IBJ, ZTL и т. д.
15. 3Dmili
3Dmili предлагает более четырех тысяч дизайнов и моделей, разбитых по различным категориям: дизайн интерьера, мебель, текстуры и технологии.
Лучшее средство просмотра 3D в Интернете
Управляйте своими 3D-ресурсами.
Распространяйте опыт 3D и AR. Сотрудничайте с другими. Продемонстрируйте свою работу. Покупайте и продавайте 3D модели.
посмотреть планы
Присоединяйтесь к миллионам создателей 3D и продемонстрируйте свою работу
присоединиться к скетчфабу
Покупайте и продавайте 3D-модели в магазине Sketchfab.
Купить 3D модели
Делитесь и встраивайте 3D-модели где угодно в Интернете
откройте для себя наши бизнес-решения
Делитесь и встраивайте 3D-модели где угодно в Интернете
Ведущий на рынке 3D-плеер для Интернета.
Интерактивный и настраиваемый, готовый к VR и AR.
Работает со всеми операционными системами, браузерами и устройствами.
Встраивается везде, для электронной коммерции, рекламы и социальных сетей.
Нам доверяют ведущие бренды
Откройте для себя наши бизнес-решения
Покупайте и продавайте 3D-модели в магазине Sketchfab.
Найдите все, от низкополигональных активов до анимированных установок и цифровых сканов для ваших проектов 3D, виртуальной реальности и дополненной реальности.
Что видишь, то и получаешь
Предварительный просмотр топологии, UV-развертки и текстур модели с помощью нашего средства 3D-просмотра и инспектора моделей перед покупкой.
См.
пример
Все, что вы ищете
От низкополигональных 3D-ресурсов видеоигр до фотограмметрии реального мира, 3D-моделей всех мыслимых категорий.
Просмотреть все категории 3D-моделей
Современные технические стандарты
PBR-материалов, анимированные риги и многое другое в универсальном формате.
Узнать больше
- Основные моменты
- Лидеры продаж
- Анимированные
- PBR
- Низкополигональная
- Высокополигональная
- 905 05 3D Печать 6 3D Scan
Лидеры продажАнимированныеPBRLНизкополигональнаяHigh poly3D Printable3D ScanЖивотные и домашние животныеАрхитектураИскусство и абстракцияАвтомобилиПерсонажи СуществаКультурное наследие и историяЭлектроника и гаджетыМода и стильЕда и напиткиМебель и домМузыкаПрирода и растенияНовости и политикаЛюдиМеста и путешествияНаука и технологииСпорт и фитнесОружие и военные
Просмотрите магазин Sketchfab
Самый мощный 3D-редактор онлайн
Внутренний доступ к мощному набору инструментов физического рендеринга для каждой отдельной модели.
Настройте освещение, материалы, анимацию, звук, аннотации, позиционирование в виртуальной реальности и многое другое.
Лучшие 3D-сайты — Webflow
Сделано в Webflow
3dAllAnimationInteractionsCMSEcommercePortfolio
Самые популярные
Только клонируемые сайты
Продемонстрируйте свой сайтПодробнее
T.RICKS Glassmorphism
Тимоти Рикс
Подробнее
Aaron Grieve’s Portfolio 90 Grieve’s Portfolio 900 Grieve’s Portfolio 900 003
Подробнее
Веб-элементы 3D
Kai Jolly
Подробнее
webflow-samples
Слава Федосенко
Подробнее
Flipping Cards
Asad Digital
Подробнее
Неофициальный веб-сайт Ghostbusters Afterlife
Mike Delsing
Подробнее
3disometric-grid
Anna Sabatini
Подробнее
0 Kay Box 903004 Sky Box3 0004 Подробнее
люкс-диваны
Oracle Studios
Подробнее
Aaron’s 3D Testing Environment
Aaron Grieve
Подробнее
Click Expander
Aaron Grieve
Подробнее
3D интерактивные шары
Эли Шмерлер
Подробнее
Fantom.