Создание трехмерных очков с использованием режимов наложения CSS

12 июля 2016 | Опубликовано в css | 1 Комментарий »

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

Демонстрация трехмерных очков от Bennett Feely

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

Разметка и стили

Очки, созданные с помощью SVG, — это путь и две прямоугольных «линзы» с закругленными углами, находящиеся вместе со стереоскопической фотографией, сделанной по методу анаглифа, в блоке:

<div id="dino">
    <img src="saguaro-national-park.jpg" alt>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 817 296" id="glasses">
        <path fill="#E5F2E7" d="M795.4,7H18.6C12.2,7,7,12.2,7 …" />
        <rect x="57.5" y="48.1" fill="#f00" width="254.5" height="186.9" rx="26" ry="26" />
        <rect x="493" y="48.1" fill="#0ff" width="254.5" height="186.9" rx="26" ry="26" />
    </svg>
</div>

Элементам заданы стили CSS:

#saguaro {
    position: relative;
    overflow: hidden;
}
#saguaro img {
    width: 100%;
}
#glasses {
    width: 60%;
    position: absolute;
    pointer-events: none;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
#glasses rect {
    mix-blend-mode: multiply;
}

Обратите внимание на использование свойства pointer-events: none у элемента с идентификатором #glasses: хотя этот способ не всегда работает, он часто позволяет уменьшить или совсем убрать «лаги» (заметные паузы в окне браузера между перерисовками). Если не следить за нажатиями на элемент, перемещение обычно происходит более плавно. Остальные свойства этого элемента отключают попытки мобильных устройств запрашивать подтверждение на копирование, если элемента касаются дольше, чем одна-две секунды.

Еще нужен небольшой фрагмент кода JavaScript, чтобы следить за перемещением очков с помощью мыши или прикосновений:

var saguaro = document.getElementById("saguaro"),
glasses = document.getElementById("glasses"),
boundingRect = saguaro.getBoundingClientRect();
saguaro.addEventListener( "mousemove", moveGlasses, false);
saguaro.addEventListener( "touchstart", moveGlasses, false);
saguaro.addEventListener( "touchmove", moveGlasses, false);
function moveGlasses(e) {
    glasses.style.left = (e.pageX - boundingRect.left)+"px";
    glasses.style.top = (e.pageY - boundingRect.top)+"px";
}

Эффект умножения

Обратите внимание, что режим умножения на прямоугольных линзах фактически отсекает естественный цвет каждой линзы: фильтр умножения на левой линзе пропускает только не красные части фотографии, а на правой — показывает только не голубые. Вы можете увидеть это сами, быстро передвигая трехмерные очки вперед-назад над одной точкой на фотографии в демонстрации.

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

Важно, что красный и голубой — дополняющие цвета: они противоположны друг другу на цветовой модели HSL. Наведение любого из них на белый цвет даст черный, как и наложение их друг на друга.