I tried BiFuse (Github / Paper) with promising, but messy results:
It's a python script that estimates depth in monoscopic 360° panoramas. Of course there are numerous glitches in each photo, and it doesn't combine multiple depthmaps to a single 3D model. I guess those drawbacks could be solved with software.
I connected the hotspot size to the stage size like this (btw, I prefer scale over width, so the dimensions remain the same):
<events keep="true" onresize="size_hotspot()"/>
<action name="size_hotspot">
copy(hs,hotspot[test]);
div(stageratio,stageheight,stagewidth);
div(relativeratio,stagewidth,hs.width);
if(stageratio GT .8 AND stagewidth GT 900 AND relativeratio GT 1.5,
set(relativeratio,1.5);
);
set(hs.scale,get(relativeratio));
</action>
It kind of works, but it feels quite hacky.
Klaus, can you help me out? Is there a logic behind the flying hotspot sizing? And is it possible to elegantly connect hotspot size to stage size?
Thanks!
Do you want to make the hotspot width equal to the stagewidth? Just set the width to 100%
That's exactly what I'd like to do, but setting percentages only works on layers. Right?
I dug a little deeper into this forum. 10 years ago, Klaus said:
sorry, but that's not possible yet,
the size of the (distorted) hotspots is always relative to the pano size,
the size of the plugin not,
Is this still the case, Klaus? Can't flying hotspots be sized relative to the stage size?
I think I found out the problem. A flying hotspot's scale is somehow connected to the stage height. Any ideas how to disconnect them?
Hi,
I'm trying to set the width of a flying hotspot to the stagewidth:
<hotspot name="test"
ath="0" atv="0"
type="text"
distorted="true"
bgcolor="0x663366"
bgalpha="0.9"
wordwrap="true"
edge="center"
width="1"
zoom="false"
flying="1"
html="bla bla bla..."
onloaded="set(width,get(stagewidth))"
/>While it does set the width of the hotspot, the results are different among various devices (tested on Chrome on Mac, iPad, Pixel smartphone). Do I have to correct for certain device properties? I tried to find a connection to device.pixelratio, but I couldn't find any.
perhaps the dot graphic and some spaces can help you alt+8.
EDIT 2:
renderer css3d to the hotspot fixes it.
Thanks!
WebVR needs WebGL hotspots, so CSS3D is not an option.
Some spacing and •'s did the trick, but it's not at all elegant.
Hi,
When adding an unordered list to a text hotspot ([ul][li]Vestibulum[/li][li]Consectetur 2[/li][/ul]...). Indentation is rendered correctly, but there are no bullets visible. Any ideas how to fix this?
Niek
Great, thanks!
Here it is: YouTube video
Oculus Browser 9.0.0.2.38, krpano 1.20.6, using:
loadscene(%1, null, NOPREVIEW|MERGE|KEEPVIEW|KEEPMOVING, BLEND(1, easeInOutQuad));And get an issue: after loadscene I got an tiles of previous scene in bottom left quarter of left eye, usually thats are a bottom square of pano.
Same here. I tried different blends. They don't seem to work correctly. COLORBLEND(1) for example doesn't dip to black: I only see some flashing black tiles.
Figured it out! The following code puts a hotspot on the location the VR controller clicked.
<events name="click" keep="true" webvr_onvrcontrollerbutton="vrclick();" />
<action name="vrclick" scope="local">
if(!caller.target,
if(caller.vrbuttonstate == 'down',
addhotspot(auto, hs);
spacetosphere(caller.dx,caller.dy,caller.dz, hs.ath,hs.atv,depth);
set(hs, keep=true, scale=0.01, distorted=true, enabled=false, capture=false, alpha=1, autoalpha=true, depth=off,
onloaded='tween(alpha,0);tween(scale,.4)', url='%CURRENTXML%/graphics/click.png'
);
);
);
</action>With mouse and touch events it's easy to fetch clicks anywhere on the canvas and convert to ath/atv:
<events name="click" keep="true" onclick="on_click()" />
<action name="on_click">
screentosphere(mouse.x,mouse.y,click_ath,click_atv);
</action>Now, I would like to do the same with VR controllers. Is that possible?
Thanks! The green line is gone, but unfortunately there's still a misalignment
Fixed it! The video is now 480 × 640px and there's no green line or misalignment (MP4 and WebM). Before, the video was 718 × 888px. I read somewhere that the dimensions of an MPEG movie should be divisible by 8. Does anyone have something meaningful to say about this?
Hi,
can you share the final code with us?
Sure!
I added this JS function to the page krpano is embedded on:
function bearing(hlookat,vlookat,ath,atv) {
const phi_1 = vlookat * ( Math.PI / 180 );
const phi_2 = atv * ( Math.PI / 180 );
const delta_lambda = (ath - hlookat) * ( Math.PI / 180 );
const x = Math.cos(phi_1) * Math.sin(phi_2) - Math.sin(phi_1) * Math.cos(phi_2) * Math.cos(delta_lambda);
const y = Math.sin(delta_lambda) * Math.cos(phi_2);
const theta = Math.atan2(y, x);
const bearing = theta * (180/Math.PI);
return -bearing;
}... and accessed the function in krpano this way:
<events onviewchange="arrow()" keep="true" />
<action name="arrow">
txtadd(jsget_bearing,'bearing(',get(view.hlookat),',',get(view.vlookat),',',get(hotspot[get(global.point_to)].ath),',',get(hotspot[get(global.point_to)].atv),')');
jsget(bearing, get(jsget_bearing) );
set(hotspot[arrow].rotate,get(bearing));
</action>Cheers
Take the test with the webm. You can use: https://krpano.com/plugins/videoplayer/#preferredformat
Thanks! The green line is gone, but unfortunately there's still a misalignment:
This only happens on Chrome for Android. The alignment on other browsers (Chrome, Firefox and Safari on a Mac, Safari on iOS and the Oculus Browser on an Oculus Go) I tested with is pixel perfect.
Oh, and important thing - renderer="css3d" or renderer="webgl"?
WebGL, because it has to work in VR.
Has anyone seen a green border like this? It only appears on Chrome for Android (v78.0, Android 10, Pixel 3). I also tested on Chrome, Firefox and Safari on a Mac, Safari on iOS and the Oculus Browser on an Oculus Go.
I found a approach: There's a excellent tutorial on how to calculate bearing and distance from one point to another on the globe. Using longitues and latitudes. I'll take those scripts as inspiration 
I'm creating an arrow (hotspot[arrow]) that points to a hotspot (hotspot[cross]). Right now, using the code below, it looks like this:
The arrow should always be pointing to the center of the cross, but it doesn't. I guess I'm over complicating things in my code. So, do you have any suggestions how to approach this?
Thanks!
<hotspot name="cross" ath="102.017" atv="13.112" url="cross.png" distorted="true" scale="0.3" />
<hotspot name="arrow" edge="left" ath="0" atv="0" url="arrow.png>" distorted="true" scale="0.1" alpha="0.7" />
<events onviewchange="arrow()" />
<action name="arrow">
if(view.hlookat != last_view_hlookat OR view.vlookat != last_view_vlookat,
copy(last_view_hlookat, view.hlookat);
copy(last_view_vlookat, view.vlookat);
mod(cross_ath,hotspot[cross].ath,360);
add(cross_ath,360);
mod(cross_ath,360);
mod(hlookat,view.hlookat,360);
add(hlookat,360);
mod(hlookat,360);
sub(residue,hlookat,cross_ath);
copy(cross_atv,hotspot[cross].atv);
copy(vlookat,view.vlookat);
sub(vdiff,cross_atv,vlookat);
div(vdiff,90);
if((hlookat GT cross_ath) AND residue LT 180,
set(rot,0);
Math.abs(residue);
sub(residue,180,residue);
div(residue,2);
mul(vdiff,residue);
sub(rot,vdiff);
,
if(residue GT 180,
sub(residue,360);
);
set(rot,180);
Math.abs(residue);
sub(residue,180,residue);
div(residue,2);
mul(vdiff,residue);
add(rot,vdiff);
);
set(hotspot[arrow].rotate,get(rot));
set(hotspot[arrow].ath,get(hlookat));
set(hotspot[arrow].atv,get(vlookat));
);
</action>I'm trying to replace this code with the new shorter syntax:
<image type="CUBE" multires="true" tilesize="512" prealign="0|0|0">
<level tiledimagewidth="512" tiledimageheight="512">
<cube url="data/photo1/%s/l3/%v/l3_%s_%v_%h.jpg" />
</level>
<level tiledimagewidth="1024" tiledimageheight="1024">
<cube url="data/photo1/%s/l2/%v/l2_%s_%v_%h.jpg" />
</level>
<level tiledimagewidth="2048" tiledimageheight="2048">
<cube url="data/photo1/%s/l1/%v/l1_%s_%v_%h.jpg" />
</level>
</image>This is what I thought would be the new syntax, but it doesn't work. Tiles are being displayed too large or too small.
<image prealign="0|0|0">
<cube url="data/photo1/%s/l%l/%v/l%l_%s_%v_%h.jpg" multires="512,512,1024,2048" />
</image>What am I doing wrong?