3D фотоэффект изображения на JavaScript

3D фотоэффект изображения на JavaScript

28 июня 2020 JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это!

Концепция

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

Карта глубины

Передадим карту глубины для обработки и получим конечный результат, как например, этот:

Полученный 3D эффект

Исходный код

Начнем с загрузки последней версии Pixi.js и включения ее в код страницы.

<script src="pixi.min.js"></script>

Затем создайте приложение pixi.js. Это самый быстрый способ начать использовать pixi.js. Я передаю текущую ширину и высоту экрана в качестве разрешения. Добавьте его на HTML-страницу, которую браузер увидит как элемент canvas.

let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
document.body.appendChild(app.view);

И вот изображение, которое мы собираемся добавить к сцене. Давайте создадим спрайт из URL-адреса изображения и установим разрешение для текущего экрана. Затем добавьте его на сцену.

Исходное изображение
let img = new PIXI.Sprite.from("pikachu.jpg");
img.width = window.innerWidth;
img.height = window.innerHeight;
app.stage.addChild(img);

И теперь следующим шагом является создание карты глубины. Я собираюсь использовать Photoshop для его создания. Сначала откройте исходное изображение. Затем создайте новый слой, залейте его черным цветом и уменьшите непрозрачность, чтобы вы едва могли увидеть исходное изображение под ним.

Заливка слоя

Затем выберите кисть белого цвета и непрозрачность 20%. Начните рисовать область изображения, которая ближе всего к экрану. Чем ближе, тем больше нужно выделить область. Вы не должны быть на 100% точными, поэтому я не беспокоюсь о краях и некоторых мелких деталях. Используйте кисть черного цвета, чтобы удалить лишнюю часть.

Внедрение Битрикс 24 для роста продаж тут

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

Карта глубины

Теперь следующий шаг — создать спрайт из карты глубины и добавить его на сцену. Затем создайте фильтр смещения из нашей карты глубины и примените его к сцене.

depthMap = new PIXI.Sprite.from("pikachu-map.jpg");
app.stage.addChild(depthMap);
        
displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
app.stage.filters = [displacementFilter];

Событие мыши

Пока вы не увидите никакого 3D-эффекта, потому что нам нужно двигать изображение движением мыши. Вы можете это легко сделать, добавив событие mousemove.

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

window.onmousemove = function(e) {
  displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
  displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
};

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

Смотрите окончательный результат в видео ниже!

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Версия сайта для слабовидящих на jQuery и плагин WordPress

Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее

jQuery data-* атрибуты

data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее

Закрепить блок при прокрутке

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

Версия страницы для печати или печать отдельного блока на сайте

В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее

Кнопка наверх для сайта

Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее

Плавный якорь jQuery

Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее

Кнопка назад на сайте

Как сделать кнопку назад на сайте? Самый простой вариант это с помощью JavaScript-функции history. С ней можно переходить вперед, назад, обновлять страницу и делать переход на две и более страницы сразу. Кнопка назад Как ссылка: <a onclick="javascript:history.back(); return false;">Назад</a> Как Читать далее

Добавить комментарий