Как построить такую перспективу?

Question

[vk22]

Помогите понять как это может работать.

https://edco.renoworks.com/pages/project/new

Тут на загруженной картинке можно рисовать поверхности, указывать им перспективу и загружать в них материалы.
Моя проблема в том что я не понимаю как тут работает перспектива. Как они сделали так? что указывая 4 точки, они создают бесконечную плоскость в этой перспективе, загружают в нее изображение и потом ее обрезают по границам нарисованой области. Выставляя перспективу один раз, я могу потом увеличивать область.



Есть способы вычисления перспективы вроде этого - https://bl.ocks.org/mbostock/10571478. Но тут я работаю только с областью между 4мя точками. И если область обрезки будет больше чем область перспективы, то материал не заполнит ее полностью.
Надеюсь смог обьяснить что я имею в виду)

Answer 1

[Сергей Соколов]

В Adobe Photoshop есть похожий инструмент, называется Vanishing Point.

4 точки задают сетку, которую можно продлить и за границы четырёхугольника. Т.е. точки только определяют характеристики искажения для целой плоскости. Помещённую на полученную перспективную сетку картинку можно увеличивать и двигать.

Четырёхугольник считается изначально прямоугольником фиксированной пропорцией ширины к высоте. Например, квадратом. Когда его углы перемещаются, противоположные грани перестают быть параллельными и появляется точка их пересечения (vanishing point) – типа, как бесконечно удалённая точка.

Подробнее про перспективу и её математику (на англ.) например тут и тут.

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

Comments

[vk22]

В том-то и вопрос, как продлить перспективу?

[Сергей Соколов]

vk22, обновил ответ. Смысл в том, что эти 4 точки только определяют параметры плоскости, позволяющие для любой точки в координатах перспективной плоскости, получить координаты «на мониторе».

[Максим]

Сергей Соколов, в вопросе стоит тег SVG а свойство SVG не предполагает перспективы так как движок SVG не имеет такую возможность ..так как он обладает свойствами только 2D, но если вкрутить <foreignObject> то скорее всего получиться но как плагин это работать не будет

[vk22]

Максим Ленский, svg тут как способ нарисовать область в которую нужно загрузить текстуру и нарисовать 4 точки из которых нужно определить перспективу.

[Максим]

vk22, Но в свг не получится..

[vk22]

А в чем получится?
Если несложно, посмотрите этот пример - https://edco.renoworks.com/pages/project/new
Как они это делают?

[Сергей Соколов]

Максим Ленский, в вопросе по ссылке пример с SVG и transform matrix3d. Посмотрели бы хоть..

[Сергей Соколов]

vk22, пример с mbostock как раз то, что вам нужно – посмотрите как он устроен. У вас только маска будет иначе работать

[Максим]

Сергей Соколов, там перспектива для тега SVG а не для какой то сущности внутри svg - выглядит реалистично - как будто есть перспектива

[Максим]

Сергей Соколов, там вот такое : https://codepen.io/topicstarter/pen/KKNOmBp