How to explain 3D space to an object in a 2D picture?

Question

Canvas

There is a picture depicting a certain location (for example, with a forest, fields and a rock). The user will move around the location in accordance with the rendered surfaces and objects. For example, there is a large stone on the path, the user will not be able to walk on the stone in any way, he can only go around it along the path.
The level of the user's gaze is always at the level of the surface on which he is standing.
The user must have a circle (actually a sphere) of vision, and he must also perceive obstacles around the player and take into account the height of the player and the height of the objects surrounding him (if there is a stone next to the player, and it is below the level of the player, hidden behind a slope, then such an object does not fall into his vision.And vice versa, if the stone is nearby, but above the player's level, then only the part of the stone that falls into the field of view will fall into the review).

The pictures below show a schematic of how this should work:
the red dot is the user's location at the moment, the reddish circle is the 360-degree field of view, the turquoise area is the part of the surface that falls into the field of view, it will be visible to the user. When moving around the map, the scope of a possible view will change based on the height map data. Viewpoint height is 0, always equal to the height of the point on the map.




Is it possible to create such a mechanic, such a kind of 3D view circle on a 2D picture, in a browser on canvas? Or by what other means? Has anyone come across a similar issue or have an idea how to approach this?

Answer 1

Your picture should be completed with a depth map. It can be represented as a single-channel image, "the darker, the deeper the space at this point", or as a set of boxes that limit obstacles.
After that, your program will already "know" where you have what in the picture