Есть картинка с изображением некой локации (например, с лесом, полями и скалой). По локации будет перемещаться пользователь в соответствии с отрисованными поверхностями и объектами. Например, на тропе есть большой камень, пользователь никак не сможет пройти по камню, он может только обойти его по тропе.
Уровень взгляда пользователя всегда находится на уровне поверхности, на которой он стоит.
У пользователя должен быть круг (на самом деле это сфера) обзора, и он также должен воспринимать препятствия вокруг игрока и учитывать высоту нахождения игрока и высоту окружающих его объектов (если рядом с игроком находится камень, и он ниже уровня игрока, скрыт за склоном, то такой объект не попадает в его обзор. И наоборот, если камень рядом, но выше уровня игрока, то в обзор попадёт только часть камня, попадающая в сферу обзора).
На картинках ниже схематично нарисовано то, как это должно работать:
красная точка – место расположение пользователя в данный момент, красноватый круг – сфера обзора 360 градусов, бирюзовая область – та часть поверхности, которая попадает в сферу обзора, именно её будет видно пользователю. При перемещении по карте, будет изменяться сфера возможного взгляда исходя из данных карты высот. Точка взгляда по высоте равна 0, всегда равна высоте точки на карте.
Можно ли такую механику, такой некий 3д круг обзора на 2д картинке, создать в браузере на канвасе? Или какими другими средствами? Возможно кто-то сталкивался с подобным вопросом или имеет мысли как к этому подойти?
Простой
