Дизайн  •  01 марта  2023  •  5 мин чтения

Мир в 3D: что такое трёхмерная графика и как она устроена

Рассказываем на примерах, где используется 3D-графика, и разбираем этапы её создания.

Что такое трёхмерная графика

Этот милый покемон создан при помощи 3D-моделирования. Источник: Sketchfab
3D-графика — одна из технологий создания CGI (от англ. Computer-Generated Imagery, «изображения, сгенерированные компьютером»). А 3D-моделирование — создание трёхмерных объектов при помощи специальных программ.

3D-объекты используются в веб-дизайне, интерфейсах мобильных приложений, виртуальной и дополненной реальности — VR и AR. Персонажи игр и фильмов тоже могут быть созданы с применением 3D-технологий.

Трёхмерные объекты — это любые предметы из повседневной реальности. У смартфона или компьютера, на котором читатель смотрит эту статью, есть высота, ширина и глубина. А у изображения на экране только два измерения — высота и ширина
С развитием технологий и изобразительного искусства менялись способы изображения объектов на двухмерной плоскости: холсте, бумаге, экране смартфона. Художник мог нарисовать улицу, показав её глубину с помощью перспективы, а фотограф выполнял ту же задачу, сделав снимок. Когда появились компьютеры, с их помощью стали моделировать трёхмерное пространство и предметы.

На курсе «Графический дизайнер» студенты учатся работать с векторной графикой, разбираться в композиции и цвете. Опытные наставники и ревьюеры помогают в процессе: анализируют прогресс, направляют и помогают прийти к цели.

История развития 3D

Трёхмерная компьютерная графика появилась в 1960-х годах. Первые векторные изображения состояли из множества точек и кривых, заданных математической формулой. Айван Сазерленд и Дэвид Эванс основали первую в мире кафедру компьютерной графики в университете Юты, США. Именно в те времена появилась программа Sketchpad (от англ. «альбом для рисования») — предок всех современных 3D-редакторов.
Первые компьютеры были массивными и не слишком производительными, но уже тогда проводились эксперименты по созданию компьютерной графики, включая 3D
На первых компьютерах можно было работать только с векторными изображениями. Затем появилась растровая графика, которая позволила изображать объекты в виде сетки пикселей. Кроме сплошных цветов и фигур, начали использовать текстуры и тени, расширились возможности рендеринга — превращения кода в финальные изображения.
В 1984 году вышел первый короткометражный мультфильм в технике 3D — «Приключения Андре и пчёлки Уолли». А в 1995 году на большой экран вышел первый полнометражный 3D-фильм «История игрушек»

Основой современной трёхмерной графики стали математические концепции. Невозможно задать поверхность в пространстве без знания геометрии и владения функциями. Но сейчас, чтобы создать 3D-изображение, дизайнеру не нужно выполнять сложные математические расчёты — это сделает программа. Например, 3ds Max, Cinema 4D, Blender, ZBrush, Autodesk Maya, Unreal Engine, Houdini.

Рекомендуем начать знакомство с 3D-графикой с Blender, он бесплатный и многофункциональный

Сферы применения трёхмерной графики, примеры 3D‑объектов

С развитием процессоров, дисплеев, софта и других технологий появлялось всё больше возможностей для использования графики. Без 3D-технологий не обойтись в разработке промышленного дизайна, проектировании зданий, создании фильмов и видеоигр, сайтов и приложений.

В рекламе и брендинге используют 3D, чтобы привлечь внимание покупателей. Информацию о продукте или окно для обратной связи на сайте можно создать в трёхмерном формате, и это будет гораздо привлекательнее традиционного плоского веб-дизайна.

Платформа Chirpley помогает связать компании с микроинфлюенсерами на основе данных искусственного интеллекта. На их веб-сайте много трёхмерных мультяшных изображений
В мобильных интерфейсах. Наложение двух окошек друг на друга, шторка, которая опускается сверху экрана, — уже 3D-эффект, так как он показывает глубину, создаёт трёхмерное пространство.
Google Earth — приложение, в котором земля представлена в виде виртуального трёхмерного глобуса и даже отдельные части земной поверхности детализированы в виде 3D-моделей

3D-технологии используют совместно с дизайном голосового пользовательского интерфейса, например при вызове Siri. «Живые картинки» часто можно встретить в музыкальных и других сервисах, где используются голосовые команды.

Пользователи Apple видят 3D-эффект всякий раз, когда на их айфоне активируется Siri. Источник: Dribbble
При создании компьютерных игр 3D-технологии используются для разработки персонажей, предметов или окружения игрового мира.
Вся среда игры Monument Valley 2 построена из 3D-объектов, созданных в программе для разработки игр Unity
В медицине. Стоматологи и хирурги моделируют, а после печатают на 3D‑принтере импланты и протезы.
В Maestro 3D можно спроектировать зубные протезы и полностью спланировать ортодонтическое лечение

В архитектуре и строительстве. Программы для архитекторов и инженеров позволяют проектировать здания в 3D: делать расчёты нагрузок, разрабатывать дизайн, планировать инженерные коммуникации. Это ускоряет производство, снижает риски, позволяет сэкономить без ущерба для качества постройки.

Эффектная визуализация будущего проекта позволяет ещё на старте привлечь заказчиков и инвесторов. Источник: ArchDaily
Промышленный дизайн (англ. Industrial Design). С его помощью разрабатывают предметы повседневного использования — от автомобилей и бытовой техники до электроники и игрушек. Одни дизайнеры создают компьютеры или смартфоны, другие — спортивный инвентарь или мебель.
Этот автомобиль выглядит совсем как настоящий, но это тоже 3D-модель, спроектированная в программе Rhino 7. Источник: McNeel Forum

Элементы трёхмерной графики

Чтобы лучше понять, как работает 3D-графика, обратимся к её предшественницам — растровой и векторной графике.
Растровая, векторная, полигональная графика
Обычное двухмерное изображение в файле — это сетка точек, пикселей, которые можно раскрасить. Такая графика называется растровой. Картинки на сайтах, цифровые фотографии, кадр видеоролика на YouTube — это всё примеры растровой графики.

Векторная графика — это расположение точек по осям x и y. Если нарисовать кружок в редакторе векторной графики, то программа запишет его координаты, размер и цвет. В таком коде нет необходимости в сетке пикселей, достаточно формулы, описывающей свойства рисунка.

Трёхмерная графика возникла в результате развития векторной графики. Компьютеры стали мощнее, это позволило добавить третье измерение (ось z) и усложнить методы «описания» изображений. Теперь плоский кружок может превратиться в объёмный шарик.

В растровой графике рисунок описывается как сетка пикселей. В векторной рисунок задаётся как координаты объектов по осям x и y. В трёхмерной добавляется третье измерение — ось z
Можно описать любую фигуру, задавая координаты точек в пространстве.
Если соединить точки линиями, а между линиями обозначить плоскость, можно собрать многоугольник
Из многоугольников — составить другие объекты, например сферу.
Между точками есть плоскости для обозначения поверхности фигуры. Такие плоскости называются полигонами, а метод описания фигур — полигональным
Полигональная сетка — это объединение рёбер, граней и вершин, которые задают форму многогранного объекта в трёхмерной компьютерной графике. Чем больше используется полигонов, тем более детально удаётся представить объект.
Любое трёхмерное изображение состоит из полигонов. Источник: Sketchfab
Когда трёхмерная графика представляется как растровая

Чтобы хранить информацию о трёхмерной модели, редакторы графики используют свои форматы файлов. В редакторе 3D-графики можно получить доступ к исходной модели со всеми свойствами объёма, текстур, освещения и других настроек.

По ссылке на Sketchfab можно покрутить модель в виртуальном пространстве. Но поскольку это занимает много ресурсов компьютера, для применения в дизайне визуализацию модели сохраняют в виде изображения растровой графики.

Картинка изначально сделана в 3D-редакторе, но для быстрого отображения сохранена в одном ракурсе в растровый файл
Этап, когда трёхмерная модель превращается в 2D-растровое изображение, называется «рендеринг». В процессе рендеринга можно использовать сложные эффекты: туман, тени, световые блики, оптические искажения.
Как работает рендеринг
Процесс схож с проявкой плёнки в классической фотографии. Фотограф знает, в каких условиях делал кадр, настройки фотокамеры и всё, что предварительно сделал с плёнкой. Момент икс — это получение финального изображения на бумаге.
Визуально рендеринг выглядит примерно так: виртуальный луч пробегает фрагмент за фрагментом по сцене, рассчитывая вид фигуры, наличие отражений и текстур, преломлений тени и света, а также настройки оптики виртуальной камеры
В редакторе трёхмерной графики создаются фигуры и устанавливается свет, так же как это бы делал фотограф в студии. Когда сцена готова, рендеринг с определёнными настройками, позволяет получить финальное изображение.
Не всегда задачей рендеринга является получение реалистичного изображения. В зависимости от задумки дизайнера или художника, текстурирование и рендер могут дать различные художественные эффекты. Источник: Sketchfab

Особенности работы с 3D‑графикой

3D-графика — это разновидность CGI, то есть изображения, созданного на компьютере. В зависимости от целей, для которых создают изображение, этапы будут различаться: проектирование опоры моста в 3D имеет одну специфику, а создание анимации волн для блокбастера — другую.

Разберём этапы разработки статичного 3D-изображения с декоративной или информационной функцией в JPG, PNG или WebP:

1. Предпродашкн. Включает в себя разработку идеи, создание эскизов, подбор референсов, согласование с клиентом или командой, расчёт ресурсов, выбор технологии. Иллюстратор делает эскизы, арт-директор генерирует идеи, участвует в выборе стилистики и согласовании.

2. Продакшн. Это процесс производства сцены в выбранной технологии. Например, моделлер создаёт объект по эскизу, а визуализатор отвечает за рендеринг, текстурирование, освещение.

3. Постпродашкн. Полученное изображение можно дополнительно обработать в программах для работы с растровой графикой. На этом этапе могут изменить композицию, добавить эффекты.

4. Публикация. Подготовка файлов в нужных размерах и форматах для сайта, приложения или другой задачи.

Когда создают 3D-анимацию, порядок этапов остаётся прежним, только постпродакшн переходит в программы видеомонтажа и VFX (от англ. visual effects, «визуальные эффекты»).

Этапы создания трёхмерного изображения

Изготовить 3D-модель можно за три шага:

1. Моделирование — придать объекту нужную форму.
2. Создание макета и анимации — задать объектам расположение в пространстве.
3. 3D-рендеринг — получить финальное изображение.

Этап 1. Моделирование

Обычно современные 3D-модели создаются с помощью полигонов — поверхностей, задающихся точками. Чтобы вылепить модель, нужно подвигать эти точки, а готовая картинка будет похожа на проволочный каркас. Именно такие сетки компьютер умеет отображать быстро.

Этап 2. Создание макета и анимации

Чтобы определить, где по отношению друг к другу находятся различные элементы, их размер и местоположение, нужно расположить объекты трёхмерной графики в композиции. Для этого создаётся макет. Анимация показывает, как фигуры двигаются и деформируются. Для её настройки используются захват движения и кадрирование.

Этап 3. 3D-рендеринг

На этом этапе создают модели объектов, текстурируют их и добавляют освещение в сцену. Рендеринг выполняется в редакторе трёхмерной графики, а полученные изображения могут ничем не отличаться от фотографии.

Совет эксперта

Никита Канюков
Знакомство с 3D-графикой рекомендую начать с изучения программы Blender. Инструкции и уроки можно найти, например, на YouTube-канале Blender Guru. После этого можно изучать нюансы профессий. Область трёхмерной графики — это не только моделирование, но и анимация, визуализация, создание эффектов, персонажей, игр. 3D — это лишь инструмент, один из многих способов выразить свои идеи или решить задачу клиента.

Статью подготовили:

Никита Канюков
Дизайнер, к. т. н., автор‑эксперт
Яндекс Практикум
Редактор

Дайджест блога: ежемесячная подборка лучших статей от редакции

Поделиться
Идеи новогодних подарков от нейросети + промокоды на курсы Практикума и акции от партнеров
Wed Nov 06 2024 17:27:27 GMT+0300 (Moscow Standard Time)