Facebook недавно выпустил новую функцию, 3D-фотографии или, как они ее называют, в их javascript: 2.5D Photos. Вот как это выглядит:
Чтобы создать такую фотографию, просто используйте новый портретный режим на iPhone и разместите его на Facebook. Вот и все.
Но как это работает под капотом? Мне нравится изучать новые идеи, читая код других людей. Поэтому мне было любопытно узнать, как они реализовали этот эффект в Facebook. Вот история. Если вы просто хотите знать технологию, перейдите к «как все это работает ».
Содержание статьи
. Сначала предположим, фрагментарный шейдер?
Существует популярный способ faking 3D с шейдером, используя карту глубины и искажая пиксели изображения с помощью фрагментарного шейдера в WebGL:
Сначала я думал, что команда facebook пошла на это, так как это очень легко сделать, а размер изображения довольно мал. Но это не то, как они это сделали. ? Вы можете видеть грубые грани при изменении глубины при реализации facebook.
Еще одна идея, которая может быть использована Facebook, — это смещение вершин на основе изображения, например, тот, который мы использовали недавно с Denys на его сайте loveiko.com :
Есть некоторые другие способы подделать его, но теперь мне нужно было знать, как они это сделали! Потому что мне интересно.
Как я декомпилировался
Лучший способ начать — это вкладка сети в DevTools.
Скачан самый большой файл, оказалось, что все, что вам нужно для этого кенгуру: быть файлом .glb.
Итак, я пошел в онлайн-браузер glTF, загрузил этот файл и увидел это:
Не очень полезно, но теперь я знал, что речь идет не о смещении вершинного фрагмента, это фактический 3D здесь.
Итак, я перешел к источникам JavaScript на странице Facebook (используя это расширение), и выяснил, что они используют фреймворк Three.js для этого зрителя. Ницца, я знал, как с этим справиться.
Нашел (это самая сложная часть) объект сцены three.js и только что изменил одно значение:
. wireframe = true;
Наконец, я смог увидеть магию этого эффекта!
Как все работает?
Прежде всего, когда новый iPhone снимает изображение в портретном режиме, он также сохраняет данные глубины вместе с обычным .jpg , Вот небольшое видео-пояснение о том, как он его собирает:
Согласно спецификации Apple эти данные поступают как облако точек.
Далее, facebook, основанный на некотором алгоритме интерполяции, создает из него реальную 3D-модель с фотографией в виде текстуры:
Теперь, когда вы загружаете страницу на facebook, она запускает сцену three.js и загружает эту модель с текстурой.
Когда вы перемещаете вас положение мыши — камеры меняется, поэтому вы испытываете сладкий эффект 2.5D.
В конце
Я не знаю, почему Facebook выбрал более сложный и технологичный способ сделать этот эффект. Может быть, потому, что у них уже есть 3D-просмотрщик, или они планируют что-то большее в ближайшее время.
По-прежнему интересуется точным алгоритмом, используемым для создания модели glTF вне поля глубины, в частности, обратите внимание, что эта часть не просто «глубина», а скорее как отдельный объект перед фоном.
Я думаю, что это какая-то специальная интерполяция данных глубины. Но может быть, у вас есть другая идея? Может быть, это информация TrueDepth, которую мы можем получить из фотографии?
Также есть одно странное (возможно, просто тестовое) изображение, загруженное дополнительно на каждую трехмерную фотографию:
Благодаря Майклу Фелдстайну он раскрыл mistery, так что образ PreMultipliedRadienceEnvironmentMap, который трижды использует для упаковки вместо mippmapped cubemap.
Вот и все. Надеюсь, вам понравилось это небольшое расследование. Буду признателен, если вы поделитесь с вами своими идеями. Приятного дня!
Загрузка...
