Краткое руководство по созданию фантастического пользовательского опыта

Фон

Если вы когда-нибудь пробовали создавать 3D-графику в WebGL или three.js, вы, вероятно, сталкивались с тем, что все выглядит как дерьмо. В коде сложно создать сложную геометрию, а источники света всегда выглядят плоскими и нереалистичными.

Для создания реалистичного света требуется трассировка лучей в реальном времени, что слишком тяжело для большинства компьютерных аппаратных средств. Поэтому вместо этого мы будем использовать некоторые передовые методы для «подделки» реалистичного освещения и изменения условий освещения.

Но сначала давайте создадим нашу геометрию с помощью программного обеспечения для 3D-моделирования. Я рекомендую использовать Blender, который является бесплатным и с открытым исходным кодом. Но вы можете использовать любое программное обеспечение для 3D-моделирования, которое вам нравится.

Моделирование

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

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

Профессиональный совет! Добавьте хотя бы небольшой скос ко всем краям. Это улучшит реализм при добавлении освещения позже.

После того, как вы создали свою 3D-модель, она может выглядеть примерно так, как показано на рисунке ниже. Моделирование чего-то подобного обычно занимает всего пару часов, как только вы освоитесь.

Материалы

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

Осветительные приборы

Теперь мы создали нашу 3D-геометрию и применили наши материалы с помощью Blender или подобного. Прежде чем мы сможем экспортировать модель и использовать ее в WebGL, мы должны добавить несколько источников света. Чтобы добавить больше глубины и реализма вашим моделям, я рекомендую использовать несколько источников света.

Как правило, у вас должны быть как минимум подсветка, основной и заполняющий свет. Ключевой свет и заполняющий свет — два наиболее важных источника света; они освещают предмет с противоположных сторон.

Ключевой свет является основным и должен быть немного сильнее, чем заполняющий свет.

Совет для профессионалов! Обычно более холодные источники света попадают в сцену с левой стороны, а более теплые — с правой.

Сцена могла бы выглядеть примерно так после добавления освещения:

Выпечка

Теперь, когда наша сцена правильно освещена, мы должны запечь материалы. Запекание — это трюк, используемый игровыми движками, такими как Unreal и Unity, для придания реалистичности сценам. Помните, как наше типичное оборудование (графические процессоры) было недостаточно мощным для обработки трассировки лучей в реальном времени? Идея состоит в том, что мы делаем эту обработку заранее. Мы модифицируем наши материалы, чтобы включить освещение. Это то, что называется «выпечкой». Одно предостережение заключается в том, что когда освещение запекается в наших материалах, оно становится статичным. Это означает, что он не изменится, когда мы будем двигаться или 3D-модель.

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

В любом случае, чтобы запечь текстуры для вашей 3D-модели с помощью Blender, вы должны сначала убедиться, что она правильно развёрнута в УФ. УФ-развертка — это процесс добавления швов к вашей модели, чтобы ее можно было развернуть на плоскость. Таким образом, 2D-текстура может быть спроецирована на 3D-модель.

В простых геометриях UV-развертка может выполняться автоматически. Для более сложных задач вам, возможно, придется добавить некоторые швы вручную, чтобы избежать странных артефактов, особенно по углам.

После распаковки вы можете начать запекать текстуры. Я рекомендую использовать такой плагин, как SimpleBake. Это значительно упрощает выпечку. При запекании высококачественных текстур этот процесс обычно занимает час или больше.

Для моей сцены я запекла следующие две текстуры:

Три.js

Наконец, наша 3D-модель готова, и мы запечем все текстуры, которые хотим использовать с нашими моделями.

Теперь мы должны экспортировать модель (также называемую сеткой) и текстуры. Обычно мы экспортируем сетку как GLTF/GLB, а текстуры — как отдельные файлы. После экспорта мы можем импортировать активы в нашу сцену Three.js, используя разные загрузчики.

Теперь наша сцена визуализирована, и пришло время оживить ее, используя анимацию. При анимации сцены в Three.js важно использовать requestAnimationFrame.

Это создаст цикл, который заставит визуализатор рисовать сцену каждый раз, когда обновляется экран (на обычном экране это означает 60 раз в секунду). Это имеет несколько преимуществ в отношении производительности и того факта, что анимация будет приостановлена, если пользователь перейдет на другую вкладку браузера.

Для анимации сцен в Three.js я рекомендую использовать Greensock. Greensock — мощный инструмент для анимации любых объектов и свойств в Three.js. Вы можете выбрать один из предопределенных наборов анимационных кривых или легко создать свой собственный.

Последние мысли

Как вы видете. научиться создавать реалистичные 3D-модели в WebGL с помощью three.js несложно. Но вы должны понимать и работать с инструментами для моделирования геометрии, и вы должны понимать передовые методы правильного освещения сцены.

Наконец, вы должны научиться работать с 3D-моделями и текстурами в WebGL, используя Three.js, и как анимировать сцены, используя requestAnimationFrame с Greensock.

Спасибо за чтение! Следите за новостями.