@vk22

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

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

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

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

60413a920015d584488016.png

Есть способы вычисления перспективы вроде этого - https://bl.ocks.org/mbostock/10571478. Но тут я работаю только с областью между 4мя точками. И если область обрезки будет больше чем область перспективы, то материал не заполнит ее полностью.
Надеюсь смог обьяснить что я имею в виду)
  • Вопрос задан
  • 151 просмотр
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
В Adobe Photoshop есть похожий инструмент, называется Vanishing Point.

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы