Недавно разработчики Facebook анонсировали поддержку 3D-постов. То есть теперь любой пользователь может легко загрузить низкополигональную модель в нужном формате (об этом ниже), снабдить её текстом и показывать своим друзьям и знакомым.

image

Вот как это примерно выглядит (ссылка):

image

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

  • поддерживается формат glTF 2.0 и только он;
  • максимальный размер модели со всеми текстурами 3 МБ;
  • размеры всех текстур должны быть степенью двойки, то есть 1024x512 пройдет, а любимые многими размеры 1000x1000, 2000x2000 уже нет;
  • источники освещения, камеру, фон и многие другие вещи настроить не получится.

Тем не менее, это уже не плохо, особенно если учесть, что для рендеринга материалов можно использовать модель PBR.

PBR-рендеринг


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

Карта диффузного отражения/преломления. Она определяет, как будет рассеиваться свет в толще материала. По сути она определяет цвет модели (узнаёте чайник?):

image

Карта металличности. В местах, где материал ведёт себя как диэлектрик, значение маталличности минимальное, где металл — максимальное:

image

Карта шероховатости, тут всё тоже довольно просто: у гладкой поверхности значение минимальное, у шероховатой — максимальное:

image

Зачем я всё это привел? Суть в том, что это всё что требуется для корректного описания материала! Сами карты готовятся в 3D редакторе и экспортируются в glTF в один клик. Всё остальное сделают алгоритмы, которые будут учитывать их для расчёта физически корректного освещения модели.

В чем делать


Хорошая новость, трёхмерный движок не понадобится. Разработчики Facebook уже развернули последнюю версию движка Three.js на своих мощностях, от вас потребуется только модель. Плохая новость — большинство трёхмерных редакторов не поддерживает экспорт в glTF.

Тем не менее, на официальной странице стандарта glTF можно найти два десятка решений, которые могут быть с переменным успехом использованы для приготовления моделей. Их можно условно разделить на две категории: конвертеры (из OBJ, FBX, COLLADA и проч.) и плагины для пакетов моделирования/движков, пока есть только Blender, 3ds Max и Unity.

В общем ищите сами. Для вышеупомянутого чайника использовались следующие инструменты: моделировали в 3ds Max, текстуры для материала запекались в Substance Painter, финальный экспорт в glTF был произведён плагином Verge3D.

Комментарии (6)


  1. k12th
    27.02.2018 14:55

    Three.js на своих мощностях

    Three.js — это не на своих мощностях, а на наших (в смысле на пользовательских):)


    1. alexkowel Автор
      27.02.2018 15:49
      +1

      Это да, PBR-шейдеры будут хорошо прогружать клиентские устройства) Но с другой стороны, накрутить много графики не получится, учитывая лимит в 3 мегабайта.


      1. JIuMX
        01.03.2018 16:47

        1. alexkowel Автор
          01.03.2018 16:48

          Увы, пока поддерживаются только статические модели.


  1. Bookvarenko
    28.02.2018 13:43

    И оно не нужно. 3д-контент не вписывается в ленту текста и картинок. Много раз уже пробовали.


    1. alexkowel Автор
      01.03.2018 16:44

      По-видимому на этот раз технология пойдёт, это видно насколько серьёзно подошёл FB к её реализации. Они не только сделали возможность постить 3D модели, но также добавили функционал в свои API и поддержали специализированные Open Graph-теги. По сути, любой интернет-магазин теперь может вписать в свои страницы ссылку на модель вместо картинки и при расшаривании таких страниц будет автоматически загружаться 3D графика.