Визуализация 3D WebGL c помощью Blender

Webgl для интернета

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

Почему сайт-блог? Страница в интернете — уже сайт, тексты новые с постоянным изменением и пополнением информации — это похоже на блог. Будет описание работ, которые ещё WIP ( work in progress ), моделей на стадии разработки или готовых проектов, с текстурами, настроенными свойствами материалов, маленькой анимацией и так далее.

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

Но вот чем ещё можно заинтересовать посетителя интернета, какие ещё нужно использовать ресурсы, чтобы задержать читателя и клиента на вашем сайте? Ваш сайт, социальная группа, личный блог. Всё это уже давно наполнено картинками, текстом, видео.

На данный момент развитие вебтехнологий позволяет демонстрировать 3D графику на сайте, и повторюсь, вашей страничке в интернете. Для этого используется WebGl, HTML, CSS и обязательно Javascript. 

Blender 2.79

Начнём с самого начала, с программы Blender.

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

Идея

3D графика начинается с идеи, задумки. Что- то сниться или взгляд случайно падает на интересное в реальном мире. Мы берём в руки карандаш и делаем наброски на бумаге.
Карандаш легко заменит перо планшета. И на экране монитора станут появляться скетчи. Кстати, название “перо” это из прошлого, где творчество было обязательным воспитанием человека. Оно помогало менять отношение окружающего мира к собственному миру. Может сейчас так, попытка поменять взгляд на 3D мир.  

Моделирование 3D реального мира

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

Есть в Blender простые формы, уже готовые к использованию, ну и со стандартными размерами. Это куб, сфера, (если переключиться на русский, они так называются) и другие. Все они помогают сделать «наброски» модели. В 3D пространстве это видно по 3 осям и добавим также Ambient occlusion ( такие ссылки буду делать на Wiki, до меня уже всё объяснили ). Это для реалистичности, но не 100%.

Когда происходит моделирование, оно начинается именно с этого. Нужно понять, что и каким будет. Изначально квадратным или прямоугольным, круглым или овальным. А может простой прозрачной плоскостью, но , в будущем, с RGBA текстурой.

Всё предвидеть невозможно. Но одно из удивительных возможностей любой графической программы, это возможность отмены ненужного или допущенных ошибок ( все ошибаемся..).
К уже готовой модели, также можно добавлять простые или переработанные геометрические формы. Тем самым улучшая своё творчество.
В конечном итоге, после манипуляции и различных техник модель готова. И порог готовности определяет 3d моделлер. Когда дальнейшие работы с пространством и формой, усложнят 3d сцену.

Живые текстуры

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

Мы шагнём ещё на одну ступеньку, это нанесение текстур. Кирпич, трава и так далее. Но они останутся текстурами, без физических показателей. Без восприятия реальности.

Используя веб-технологии и программу Blender, эти материалы можно увидеть с разных ракурсов, в одном окне и не на разных рендерах и самое главное более реалистичными. Бликующими, отражающими и с тенями.

Свойства материала в браузерных условиях можно разделить на 2 категории:

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

Вторая категория ставит акцент на максимальной реалистичности. Так называемой PBR.

приближенные на

%

приближенные на

%

Но технология этого материала такова, что для его реализации нужно также максимальное количество текстур-карт:

100%

Color

normalmap

Normalmap

metallnes

Metallnes

roughness

Roughness

ambient
occlusion

Ambient Occlusion

height

Height

Они тоже наносятся или запекаются в программе Blender. И путём развёртки UV переносятся на модель WebGL.
PBR технология только начала своё развитие. Самый большой камень преткновения — способности «железа» на стороне посетителя сайта, страницы. Это усложняет загрузку страницы браузера, но долгое терпение вознаграждается погружением в реальность нереального 3D мира. 

Они «переносят» вершины, ребра, полигоны, текстуры, свойства материалов и ещё много чего в интернет.
Делают они это с помощью языка программирования Javascript. И по цепочке , Webgl c шейдерами GLSL, HTML5-canvas с DOM API. 

Читатель может найти в других источниках подробную информацию, но запомнить нужно одно: для полноценного восприятия 3D Webgl и погружения в пространство Blender 3D Web лучше использовать мощное оборудование. Современное ПО чуть обгоняет современное «железо».


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

Всем приятного путешествия в собственную 3D интерактивную реальность!!!

Продолжение следует...