Чем сделан эффект теней для объектов и есть ли подобные библиотеки?

Question

[xmoonlight]

Всем привет.

Вот пример теней:

Как и чем сделать подобное на веб-странице для всех визуальных элементов?

Заранее, Всем Спасибо за помощь!

Comments

[Pavel Karinin]

я не сразу обратил внимание на фразу:

подобное на веб-странице для всех визуальных элементов?

т.е. canvas не вариант...?

[xmoonlight]

Pavel Karinin, к сожалению, да..
Я вот на твой ответ писал, а ты его потёр (вставляю сюда).

Почти, но там тени не суммирует и не накладываются тени на другие объекты вдоль следования теневой дорожки...
А так - да, круто!

Мне и нужна статика в принципе, но для DIV на странице, чтобы можно было выставлять источник света и цвет, а всё остальное CSS-тени, CSS-градиенты и прочее - настраивались автоматом.
Была идея - написать самому такую либу. Но вдруг уже есть подобное?

[Pavel Karinin]

xmoonlight, Просто в моем случае тоже надо было элементы там по-моему 8 или 10 в ряд стояли, при этом тени не должны были накладываться на соседние объекты... но там вся страница (титул) была нарисована в canvas из-за специфики заказа. Но вот чтоб для div не сталкивался, извини, но это можно в принципе написать.

[xmoonlight]

Pavel Karinin, Конечно, можно. Просто много каких свойств перебирать внутри DIV/IMG/SVG и просчитывать надо будет самому... Например, полупрозрачный объект должен частично пропускать свет и отбрасывать тень своего цвета, расчёт интенсивности затухания в зависимости от расстояния, учитывать z-index, правильно расставлять углы для теней/градиентов, заменять градиенты/тени и т.д.

[Pavel Karinin]

xmoonlight, все либы, что я видел которые имитируют подобные вещи для DOM элементов, создают лишь плоские тени без рассеивания, без эффекта дифракции... короче a'la Flat UI

[Александр Таратин]

xmoonlight, Не нужно особо ничего расчитывать для статичных элементов. Просто нужно отрендерить весь html в канвас ( https://html2canvas.hertzen.com/ ) . Бинаризовать изображение. И засунуть его в какой-нибудь webgl движек 2d теней.
https://www.google.ru/search?q=webgl+2d+shadows&nu...

[xmoonlight]

Александр Таратин, Нужно, чтобы страница полностью сохранила работоспособность (js, UI/UX), включая адаптивность и поведение элементов интерфейса.
А вариант с картинкой - этого не сможет сделать.

[Александр Таратин]

xmoonlight, Canvas с тенями можно фоновым слоем подставить под html.

[Александр Таратин]

xmoonlight, То есть рендерим только тенюшки, а сам ui на html остается работать.

[xmoonlight]

Александр Таратин, тут - вопросов нет. А вот при ресайзе - сработает адаптив и согласно сетке - всё перескочит. А что с подложкой-канвасом в этот момент делать?

[Александр Таратин]

xmoonlight, Пересчитывать. Её все равно частично придется обновлять при каждом дрыгании мышкой. Узким местом будет html -> бинарная карта цветных элементов. Этот этап можно будет делать только при изменении геометрии ui.

[xmoonlight]

Александр Таратин, Что за бинарная карта цветных элементов? (я не игру делаю, а лендинг)

[Александр Таратин]

xmoonlight, https://github.com/mattdesl/lwjgl-basics/wiki/2D-P...

[xmoonlight]

Александр Таратин, это под веб, да?)

[Pavel Karinin]

я вот тоже смотрю и понять не могу, это для web?, то ткните мне в это место, я старый, слепой

[Александр Таратин]

xmoonlight, Не под web (хотя шейдеры можно применять с минимальными изменениями), просто разжеван сам принцип. Под web другие библиотеки гуглятся.
Оно конечно выглядит сложновато, но вот только

Просто много каких свойств перебирать внутри DIV/IMG/SVG и просчитывать надо будет самому... Например, полупрозрачный объект должен частично пропускать свет и отбрасывать тень своего цвета, расчёт интенсивности затухания в зависимости от расстояния, учитывать z-index, правильно расставлять углы для теней/градиентов, заменять градиенты/тени и т.д.

на порядок сложнее.

[xmoonlight]

Александр Таратин, нее... тогда уж лучше с этим разбираться: https://habr.com/post/112944/

[xmoonlight]

Александр Таратин, Pavel Karinin, Вот такая ещё есть либа: https://www.redblobgames.com/articles/visibility/ для создания теней исходя из того, что видит объект - жёлтый круг (таскается "мышью"). Это тоже немного не то, но для тактических 2D игр - самое то!

[Pavel Karinin]

xmoonlight, ну это же canvas так или иначе, только как предложил Александр Таратин делать подложку, но в адаптиве замучаешься пыль глотать вылавливая тени

[xmoonlight]

Pavel Karinin, ну я вот думаю, 2 варианта:
1. Делать пересчёт исключительно на CSS (менять свойства DOM-объектов через JS)
2. Добавить Canvas-подложку и на основе размеров нужных DOM-объектов рисовать силуэты ("основания") на этой подложке и по ним рассчитывать тени, однако градиент "тел" всё равно придётся менять у DOM-объектов.
П.1 - вроде проще, но там как правильно выставить градиенты - пока не особо понятно
П.2 - больше возможностей даёт, т.к. канвас... Например, можно фон страницы погрузить под реалистичную воду и рыбок пустить или что-то подобное....

И что из этого будет работать быстрее - тоже непонятно...

[Pavel Karinin]

xmoonlight, Мне кажется второй вариант лучше, больше управляемости, больше возможностей. Много элементов вообще (так ориентировочно) которые должны отбрасывать тени?

[xmoonlight]

Pavel Karinin, обычный лендинг со стандартными блоками и UI-кнопулями.

Answer 1

[profesor08]

Сделать на svg, rect (цветной квадратик) и path (будет выполнять роль тени). В зависимости от положения источника меняй координаты для path. Достаточно 4х координат, две возле квадрата, две за пределами контейнера.