Trying to control the distortion (width / height) of a distorted hotspot image around the edges of the screen

  • Hi All,

    My head hurts - I can't figure it out - please help!

    I am trying to create an animated line which highlights a specific item within the 360 image when a hotspot image / icon is activated or hovered over.

    I want this to also work in WebVR so I am using a hotspot image .png which is just 1 colour solid pixels and therefore can be any width or height and can show as a line or block by using the rotate variable.

    I have it working, but due to the 360 distortion, when it is around the edges of the screen the width (or height as I have rotated it) of the line becomes large - I want to try and keep the width constant, regardless of where it is in the current view i.e. keep the width the same regardless of its position on the screen.

    The line hotspot needs to be distorted="true" so that when used with zoom="true" it will accurately point to the object or item in the 360 scene, regardless of its location in the current view.

    I have it working but because it is a distorted hotspot (for accurate positioning when zooming in etc) when it is positioned to the left or right of the screen i.e. at the edges, the width / height becomes very distorted - see attached images.

    Here is the current project: http://wearereality.com/dev/clients/ma…0.46,132.11,0,0);

    Apologies if my code is a bit messy, the bits in question are as follows:

    I want to control that distortion by dynamically changing the width of the line hotspot image to counter the 360 distortion. Is there a way to do this or a calculation which will counter the 360 distortion of the image? Similarly, is there a way to create distortion based on the zoom level / current FOV? Because as the user zooms in, the width of this line should also increase to make it appear the same width regardless of FOV.

    I have tried a few hacks, calculating the difference between the current ath and the hotspot ath and then adding / subtracting from the width - but I can't figure out how to do this accurately / dynamically? The solution needs to take into account the velocity / acceleration of the distortion as the image gets closer to the edges of the current view.

    Here are my unsuccessful hacks (unsuccessful because they aren't dynamic):

    I hope this makes sense? Thanks in advance for any help.

  • Hi,

    I'm not fully sure what you mean, but in the next release (1.19-pr14) there will be a more natural rendering for distorted=false hotspots in VR.

    Normally such hotspots are rendered as always-screen-orientated flat surfaces, but in a VR headsets this feels/looks wrong.
    In the next release these hotspots will be rendered as 'non-zoomed-distorted' hotspots in VR. Then the 'effect' would be the same as distorted=false hotspots on a normal screen.

    Best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!