Как на 2D картинке объяснить объекту 3D пространство?

Question

[GreenRed]

Есть картинка с изображением некой локации (например, с лесом, полями и скалой). По локации будет перемещаться пользователь в соответствии с отрисованными поверхностями и объектами. Например, на тропе есть большой камень, пользователь никак не сможет пройти по камню, он может только обойти его по тропе.
Уровень взгляда пользователя всегда находится на уровне поверхности, на которой он стоит.
У пользователя должен быть круг (на самом деле это сфера) обзора, и он также должен воспринимать препятствия вокруг игрока и учитывать высоту нахождения игрока и высоту окружающих его объектов (если рядом с игроком находится камень, и он ниже уровня игрока, скрыт за склоном, то такой объект не попадает в его обзор. И наоборот, если камень рядом, но выше уровня игрока, то в обзор попадёт только часть камня, попадающая в сферу обзора).

На картинках ниже схематично нарисовано то, как это должно работать:
красная точка – место расположение пользователя в данный момент, красноватый круг – сфера обзора 360 градусов, бирюзовая область – та часть поверхности, которая попадает в сферу обзора, именно её будет видно пользователю. При перемещении по карте, будет изменяться сфера возможного взгляда исходя из данных карты высот. Точка взгляда по высоте равна 0, всегда равна высоте точки на карте.




Можно ли такую механику, такой некий 3д круг обзора на 2д картинке, создать в браузере на канвасе? Или какими другими средствами? Возможно кто-то сталкивался с подобным вопросом или имеет мысли как к этому подойти?

Answer 1

[Армянское Радио]

Ваша картинка должна быть дополнена картой глубины. Ее можно представить в виде одноканальной картинки, "чем темнее, тем глубже в этой точке пространство", либо в виде набора боксов, ограничивающих препятствия.

После этого, ваша программа уже будет "знать" где что на картинке у вас есть

Comments

[GreenRed]

Ваша картинка должна быть дополнена картой глубины. Ее можно представить в виде одноканальной картинки, "чем темнее, тем глубже в этой точке пространство", либо в виде набора боксов, ограничивающих препятствия.

Я понял вашу мысль и сделал ещё один набросок:


Фон одноканальный, остальное для лучшего восприятия. Вот 2 разные позиции пользователя: в одной он не видит, что за первой стороной камня; в другой он же стоит уже по ту сторону камня и не видит ту сторону, за которой стоял в предыдущей позиции. (надеюсь, понятно объяснил)
Как такой сферический взгляд описать программно?

[Армянское Радио]

GreenRed, Посмотрите вот на эту картинку:

И вот это почитайте
У вас не сама картинка должна быть ЧОБЭ, а информация о глубине на этой картинке

[GreenRed]

Да дело-то не в том, как я картинку нарисовал, я её сделал наспех, просто для примера, на котором я объяснил, что я хочу получить от картинки. Я понимаю, что карта глубин это отдельная, другая картинка (и сделана по-особому, а не просто ч/б). Я просто для примера запостил.
Вопрос-то в другом, как программу «научить» пользоваться ею, чтобы она правильно распознавала ситуации, которые я выше на двух картинках показал?

[Армянское Радио]

У вас что, одна фотка, внутри которой какбы "гуляет" пользователь? Не пачка фоток "в разные стороны"?

[GreenRed]

Армянское Радио, Да, одна.

[Армянское Радио]

GreenRed, тогда вам карты глубины не подойдут, придется грузить фотку в 3dmax или похожий пакет и обрисовывать предметы боксами.

Ну а потом писать алгоритм рейкастинга или использовать любой другой стандартный кусок 3d физики

[GreenRed]

Хорошо, вроде понятно с этим, а как это представить потом пользователю в браузере? Получается, расчет ведется на сервере, а пользователь только отправляет свои координаты расположения и перемещения, а на сервере в этом псевдо 3д движке уже смотрим, где он расположен в данный момент и отправляем ему обратно информацию о том, что видно ему, а что нет? Как-то так?

[Армянское Радио]

Да.

[GreenRed]

Хорошо

Ну а потом писать алгоритм рейкастинга или использовать любой другой стандартный кусок 3d физики

А можете подсказать, на чем именно такое можно реализовать? К слову, в бэкенде мы используем php.

[Армянское Радио]

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

[GreenRed]

Армянское Радио, Спасибо за ответы, вы мне помогли.

[Армянское Радио]

GreenRed, Я думаю, вы можете представить вашу картинку как вид сверху, где взгляд - это треугольник, растущий из наблюдателя, а объекты - эллипсы и прямоугольники.

[GreenRed]

Армянское Радио, А можно поподробнее? Извините, не понял, о чём именно речь. Как вид сверху может тут помочь?

[Армянское Радио]

GreenRed, вы играли когда-нибудь в Doom II, Duke 3D, Blood? Поищите летсплеи на ютюбе. В этих играх есть режим отображения карты местности "вид сверху".

Ваша задача как раз к этому и сводится, в конечном итоге.

[GreenRed]

Армянское Радио, Понял, представить картинку, как вид сверху и все ключевые позиции(объекты и препятствия) показать примитивами, далее переносить получаемые координаты пользователя с картинки, которую видит он, на эту картинку с видом сверху и уже с ее помощью можно оценивать, что попадает в обзор(треугольник), а что нет.
И уже эти данные передаем обратно пользователю.
Остается выбрать, на чем эту карту и расчеты с ней вести на сервере.