Как создать эффект 3d для изображения с помощью WebGL и шейдеровВ наши дни WebGL становится довольно популярным, поскольку позволяет нам создавать уникальную интерактивную графику на сайтах. Возможно, вы видели недавние эффекты искажения текста, используя Blotter.js или анимированные строчки при помощи WebGL, созданные с помощью библиотеки THREE.MeshLine. Сегодня вы узнаете, как быстро создать интерактивный «фальшивый» 3D-эффект для изображений с простым WebGL.

 

Если вы используете Facebook, вы, возможно, видели обновление 3D-фотографий для новостной ленты и VR. Благодаря специальным камерам на телефоне, которые фиксируют расстояние между объектом на переднем плане и фоном, 3D-фотографии оживляют сцены с глубиной и движением. Мы можем воссоздать этот эффект с любой фотографией, немного редактирования изображений и немного кодирования. Если вы хотите создать интересный сайт, тогда обратите внимание на данные шаблоны:

Обычно такого рода эффекты основаны на Three.js или Pixi.js, мощных библиотеках, которые имеют много полезных функций и упрощений при кодировании. Сегодня мы не будем использовать какие-либо библиотеки, а перейдем на собственный API WebGL.

Cетка

Итак, для этого эффекта мы будем использовать нативный API WebGL. Отличным ресурсом для начала работы с WebGL является webglfundamentals.org. Основой всех полноэкранных шейдерных эффектов (даже если они двумерные) является некая плоскость или сетка, или так называемый четырехугольник, растянутый по всему экрану. Здесь мы просто создаем THREE.PlaneGeometry(1,1)в three.js, который создает плоскость 1 × 1, вот что нам нужно в простом WebGL

Теперь, когда у нас есть наша плоскость, мы можем применить к ней вершинный и фрагментный шейдеры.

Изображения

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

Для этого мы можем открыть изображение в Photoshop и закрасить серые области поверх оригинальной фотографии следующим образом:

Как сделать многослойное изображение в Photoshop

 

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

Шейдеры

Логика рендеринга в основном происходит в шейдерах. Как описано в веб-документах MDN: Шейдер — это программа, написанная с использованием OpenGL ES Shading Language (GLSL), которая берет информацию о вершинах, составляющих форму, и генерирует данные, необходимые для визуализации пикселей на экране, а именно: положения пикселей и их цвета. При рисовании содержимого WebGL запускаются две функции шейдера: вершинный шейдер и фрагментный шейдер.

Вершинный шейдер мало в чем нам поможет он просто показывает вершины:

Самая интересная часть произойдет в фрагментном шейдере. Мы загрузим два изображения:

Вот тут и пригодилось изображение карты глубины в черно-белом цвете созданное ранее. Для шейдеров цвет — это просто число: 1 — белый, а 0 — черныйuv— переменная является двумерным значением для хранения информации. С помощью этих двух вещей мы можем использовать информацию о глубине, чтобы немного переместить пиксели оригинальной фотографии.

Давайте начнем с движения мыши:

Вот как это выглядит:

Движение изображения с помощью мыши при помощи WebGL

Теперь давайте добавим глубину:

И вот что у нас в итоге получилось:

Изображение в движении при помощи шейдеров

Поскольку текстура черно-белая, мы можем просто взять красный канал ( depth.r) и умножить его до значения положения мыши на экране. Это означает, что чем ярче пиксель, тем больше он будет двигаться с помощью мыши. С другой стороны, темные пиксели просто останутся на месте. Это просто, но в результате получается такая приятная трехмерная иллюзия изображения.

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