How do you keep box object in pixel perfect registration?

[Scott Witte]

I have a largish image in a box object that needs to stay in pixel perfect registration with the underlying pano. Unfortunately, whatever portion of it is near the edge of the browser window gets stretched outward by a couple pixels. I don't think I've seen this on other box object, yet I can't see what I am doing wrong, so any help would be most appreciated.

You can see the problem here (http://www.tourdeforce360.com/box_test/). Pass your cursor over the closed windows behind the bed and they "open" (the image of the same scene with the windows opened is revealed by changing alpha from 0 to 1.) With everything at the center of the browser window it all stays in register well enough, but move any part of the box object near the browser window edge and it pushes out from the center. This is quite obvious as the box is hidden/revealed in this position.

The relevant XML code is:

<box id="mastBedOpen" url="images/Window_Open.jpg" linked="images/Mast_Bed"
pan="-17.17" tilt="-6.58" distance="1.50" orientation="front"
segments="30" alpha="0" depth="15"
onOver="mastBedOpen.alpha=1,100"
onOut="mastBedOpen.alpha=0,100" />

It doesn't matter it I use cube faces or MOV file format for the pano. It doesn't matter if I use front or sphere for orientation. It doesn't seem to matter if I use scale or distance to size the box. (Not sure what the effective difference is between those two methods.)

I've added the editor plugin in case anyone wants to experiment.

Any help would be much appreciated.

[Trausti Hraunfjord]

Not sure it will help... but have you tried adding cacheAsBitmap="0" inside your boxed hotspot's properties?

[Scott Witte]

Trausti,

I just tried cacheAsBitmap="0" with no difference.

I also tried pixelSnapping="always". By description it sounds like it could work but only if it is "drawn at a scale factor of 99.9% to 100.1%"

Actually that raises another issue, since the box object image is extracted from the underlying cube face it lines up pixel for pixel in Photoshop. But when I place it as a box object I have to scale it to fit. Distance of 1.5 gets me very close but not exact. I don't understand why any scaling would be required.

[siesfor]

hey Scott,

was mucking around with the editor plugin, and looked to be gettin' some pretty spot-on results with the following numbers...

pan="-17.19"
tilt="-6.53"
distance="1.05"
scale="0.70"

[Scott Witte]

siesfor,

Thanks for your effort. It does get a little closer. But... if you pan to the right so the bedspread and part of the brick wall are near the left edge, you still see the size shift. Very frustrating.

So at minimum I'm starting to conclude that even if the box image was cut directly from a cube face it is very difficult to size it to fit back in place.

[siesfor]

Aye, I see what you mean. I see it mostly with the lil vase beside the furthest lamp. Might have something to do with distance. I always assumed that "1" was on the same plane as the pano. But then when you have to adjust, & tilt and so on, alot of subjectivity comes on board.

But I'll tell ya, Originally, I had trouble figuring out what problem you were talking about. I just saw the windows opening and thought, hey, that's pretty cool. And chances are, your clients, and their clients, will think it's pretty cool, too, (maybe even "mastBeDope" cool, yo) and aren't going to be nearly as discerning about it as it's creator. Plus, it'll mostly likely be viewed from head-on anyways, which does look good.

Or, you could add some transparent pngs over top of the windows themselves that would trigger the window opening image to appear, but wouldn't cause it to be tripped by having the mouse over the bed, or the wall, or anywhere else, lessening the chances that it'll be visible when it isn't centered in front of the viewer(?) ...a possibility.

[Scott Witte]

Or, you could add some transparent pngs over top of the windows themselves ... lessening the chances that it'll be visible when it isn't centered in front of the viewer(?) ...a possibility.

Great minds and all.... Actually I did exactly that in the version shown to the client, but that just tries to hide a problem that frankly shouldn't be happening. Even then, whatever portion of the box image is near an edge will move out from the center. Only the portion in the center of the screen stays in register. Doesn't matter if that portion is the edge of the box or the middle. Frustrating.

[Corvus]

Distance is definitely the problem here. It has to be set to 1, otherwise the box is effectively either in front of or behind the panorama cube, and parallax will come into play. Use scale to get the box to the right size. I use a very similar technique in my virtual tours, and after much trial and error, I stumbled on the way to calculate the correct size. Like you, to begin with I assumed that a scale of 1 would be the same scale as the cube faces, but no. It appears that the hotspots plugin assumes a cube face size of 1000 pixels: therefore a box with a scale of 1 will be correct if it's cut from a cube face image of 1000 pixels square. If you've cut the box from a face of a different size, scale it accordingly. So, for your 1500 pixel faces, scale the box to 1000/1500 = 0.6667. You can see that seisfor got close with a distance of 1.05 and a scale of 0.7. You need the extra decimal places, by the way - the editor only allows 2 decimal places for scale, and playing with your example I can see that 0.67 looks to big, while 0.66 is too small. Thankfully FPP itself will use more decimals if you put them in the XML file, and four seems about enough.

Then it's just a question of very fine adjustment of the pan and tilt angles using the editor. You need to turn on the 0.01 check box to get it positioned correctly, but once you have it should be locked in place and seamless. If it isn't, it may be a case of adjusting alignX and alignY instead of pan and tilt, but that's another area where I'm unclear of which setting does what in terms of the perspective of the box image.

Hope that helps.

[Elliot]

Scott

I have the same issues with my small rooms. Making a panorama in those tight rooms is a challenge. I play with distance and size until I get it too look acceptable. In my case it is a lot of trial and error. :)

Thanks
Elliot

[Scott Witte]

It appears that the hotspots plugin assumes a cube face size of 1000 pixels: therefore a box with a scale of 1 will be correct if it's cut from a cube face image of 1000 pixels square. If you've cut the box from a face of a different size, scale it accordingly. So, for your 1500 pixel faces, scale the box to 1000/1500 = 0.6667.
Corvus,

Brilliant!

This appears to be exactly the reason and solution to my problem. I can't thank you enough. I will write Denis suggesting he make a few simple(?) changes in v2.4 to avoid this problem in the future.

For anyone interested I have left the original version (http://www.tourdeforce360.com/box_test/) (distance=1.5, scale=1) posted. I've also posted the fixed version (http://www.tourdeforce360.com/box_test/index2.html) using Corvus' solution (distance=1, scale=.6667).

[Corvus]

You're very welcome. It's something I've been meaning to share for a while - keep thinking about setting up a blog as somewhere to dump all this stuff as and when I find it.

I don't have any examples of this technique online as yet, but you can see a similar idea here, loading a whole new panorama leashed to the original:

http://www.corvidae.co.uk/panoramas/homewood-flash/living.html

This grew out of my original technique in QTVR, which was to use wired sprites to switch nodes while keeping the view the same. With FPP I moved to using hotspot boxes to reduce the time lag of loading a very high-res panorama for kiosk installations.

Truly excellent photography, by the way. Would you be willing to share your technique for exposure blending (which I assume is involved here)? I always end up with blackened glazing bars using enfuse or Photoshop techniques based on Jook Leung's 'HDR for Dummies' method.

[Scott Witte]

...you can see a similar idea here, loading a whole new panorama leashed to the original:

http://www.corvidae.co.uk/panoramas/homewood-flash/living.html


Corvus,

I remember this site. Very nice and an inspiration.

I've used this same day/night technique myself but, like you, wanted something more responsive. (And thanks to you, now it works.)

As for the HDR, I'm just using alpha masked TIFs with enfuse and hard masking. I like EnfuseGUI as a front end. I've also used TuFuse but not when "hard masking" is called for. Anyway, I often have to mask in just the window panes and blend that layer over the enfused image to get the effect I want.

Back in the day I would just layer different exposures in Photoshop and mask each layer to blend the exposures I wanted. Enfuse makes it easier but usually I still need some masking. Otherwise a white wall comes out muddy gray, and despite the hype, a small better exposed area such as a window (properly exposed) doesn't end up in the final fused image.

Enfuse is progress, not perfection.

[Corvus]

Thanks for the compliment, and the workflow advice. I'm on pretty much the same page as you with the blending. I use enfuse (via Bracketeer on the Mac) to blend either three bracketed shots or just the lightest and darkest exposure, or blend that same pair using a custom Photoshop action, laboriously developed by trial and error from Jook's HDR for Dummies technique. For windows I often have to patch in a further, much shorter, exposure. I've been aiming for something where I could just throw all the hundreds of images from a shoot into a folder, press a button and get perfect blends, but that's probably wishful thinking! The Homewood was shot five years ago, before I got into all this, and the windows were just blended manually with layer masks.

Back with the patches, in a few places I've recently had very large features that extend over more than one cube face. You can cut a patch for each face and fade them in and out together, but it's time consuming and almost always leaves a visible seam. What I hit on instead was using the PanoTools plug-in in Photoshop to extract a single normal image from the stitched panosphere. It takes a bit of trial and error to get the field of view right, and centre the extracted image on the feature you want. You can then add it into the XML with spherical orientation, the advantage being that the pan and tilt values should be the same ones you used in the PanoTools plug-in. Here, scale is more tricky and needs some trial and error, but again, don't mess with distance.

One additional twist is to make the patch a transparent png, so that only the bits you want to change are shown. I've attached a scaled-down sample of a cupboard that was very close to the camera and takes up a huge part of the field of view with the doors open. I've manually added a translucent shadow behind the door, which looks very natural in the blended image.

Here's the XML that goes with it:

<box id="hs1" url="media/hotspot.gif" pan="33.00" tilt="10.00" orientation="sphere" rotationX="32.00" rotationY="-9.00" depth="1" scaleX="2.62" scaleY="2.97" fadeOut="pano.qualityStatic=low;patch1.alpha=0,1000,smooth, global.hidePatch1;onPress=fadeIn;javascript:playCl ick();" fadeIn="pano.qualityStatic=low;patch1.visible=1;patch1.alp ha=1,1000,smooth,restoreQuality;onPress=fadeOut;ja vascript:playClick();" onPress="fadeIn" />

<box id="patch1" url="media/red-bath/patch_c.png" pan="15.00" tilt="8.00" orientation="sphere" alignX="-0.5" alignY="-0.5" depth="0" scale="0.66" alpha="0" segmentsX="20" segmentsY="20" buttonMode="0" visible="0" />

The first box, hs1, is a tiny transparent gif that is the button to open or close the cupboard. The patch, the second box, initially has its visibility set to 0 so that it's not rendered at all, which improves the performance of the panorama. When hs1 is clicked, its 'fadeIn' function is called, which reduces the quality of the pano to make the transition faster and smoother, makes patch1 visible, then tweens its alpha to 1 over one second, at the end of which a global function called restoreQuality is called to return the pano quality to high. hs1 is then set to call its fadeOut function next time it's pressed, which does essentially the same thing in reverse. The function that's called at the end of the tween this time turns off the visibility of patch1 again, and then restores the pano quality. The button is triggered with onPress rather than onClick as the tour is deployed on a touch screen, and people expect things to happen when they touch the screen, not when they lift their finger off!

[Scott Witte]

Corvus,

You are a wealth of great information. The large patch challenge was something I needed to deal with soon, myself. I had thought of using PTGui, positioning the preview in editor to center on the part I want, then adjusting the FoV to cover the area I need and output a rectilinear image from there. Can you see any advantage of doing this in Photoshop with the Panotools plugin?

Setting visible=0 was a great tip. It definitely improves performance while the patch isn't displayed.

Using a semi-transparent PNG just for a shadow is a great idea as well. When I compared file size of a PNG vs a JPEG I feared I would have to give up the PNG transparency advantages for download time reasons. Now I need to figure out how to alpha mask a JPEG image in FPP. At least it sounds like you can do that. No idea how, yet.

Thanks loads!

[Corvus]

I'm not too sure about the relative merits of PTGui versus PanoTools in Photoshop. I've only used PTGui for stitching, rather than extracting an image from an existing panorama, but if it has that feature then presumably it should work in the same way.

If a transparent png is too big, you could try masking a jpeg in Flash and saving it as an swf to use for the patch. I see from the hotspot tutorial that it offers an Alpha blending mode which says it applies a mask, but I have a feeling that may just be the standard alpha transparency which affects the whole image. I can't see a setting to specify the URL of a greyscale image that would form an alpha channel mask.

Let me know how you get on!

Richard

[Scott Witte]

Richard,

I expect you are right on all counts.

It is funny. I got Flash for its graphics capabilities. Then I got involved with FPP and learning AS3 took top need. Guess I should finally get comfortable with the graphics end. Not that just making a masked image is any great challenge, I'm sure.

[jaaaab]

Hello Guys,

I'm tryin to do something similar.

I have a first panorama where a window is closed and a second where the window is opened.

I understand the integration process of the added box portion in the second panorama as you describe it here, but could you tell me the right process for capturing this portion out of the first panorama?

do you use pted? is it a simple image capture? is there a better process to follow?

Thanks

[Scott Witte]

Jaaaab,

FWIW, to date I've been able to include all the image I needed to capture on one cube face. It is then an easy matter to open that face in Photoshop, crop out just the part I needed and use that as the image for the box object in my primary pano.

If the object crosses multiple cube faces you need to follow the instructions Richard gave earlier. I still haven't done so (though it is moving up my "things I must do now" list) and can't be of much help -- yet.

[izoneguy]

Look at the bedroom pano.
As you pan over to the right you will see the cabinets open up.

http://www.mhsrv.com/virtual-tours/2008-winnebago-destination/mhsrv.html

I use the zoetrope plug-in

http://www.redshift-blueshift.com/fppzoetrope.html

[visionman]

For anyone interested I have left the original version (http://www.tourdeforce360.com/box_test/) (distance=1.5, scale=1) posted. I've also posted the fixed version (http://www.tourdeforce360.com/box_test/index2.html) using Corvus' solution (distance=1, scale=.6667).

Awesome tour Scott - great idea and great execution.

I wonder if you can help with a similar pixel alignment issue I am having.

I have set up a tour with pop-up info panels using .png files as <spot id="panel" etc. The method I am using to close the panels is a little convoluted. Each panel has a close button in the panel graphic. Aligned over this 'hard coded' close button is an identical button graphic but in a different colour (.png), initially set to visible=0 i.e. to effect a button state change on mouse over. Over the top of that I have set up a mask graphic, permanently set to alpha=0. When you mouse over the transparent mask, it changes the button graphic underneath it to visible=1. When you mouse out from the mask, the button underneath reverts to visible=0.

No matter where I place the button graphic (the one above the main panel, but below the mask with alpha=0), it is always misaligned from the button graphic in the panel below. The strange thing is, I was able to optimise it for IE8, but then alignment was out for FF and Chrome. However, now that I have finally added the Flash wrapper interface to the tour, even IE is out of alignment.

Have a look at http://www.360vision.co.uk/pixel_issue/wrapper.htm and click on any of the pop-up panels (accessed via the wall hotspots in the church) or the help panel from the control bar.

Any thoughts/help will be seriously appreciated.

Cheers

visionman

[Scott Witte]

Vis,

Easiest solution: own it. Call this behavior a feature, not a bug. It just helps emphasize the different states of the close button. ;)

But seriously... I tested in several browsers and all seemed to behave the same. So what happens if you just move the button a couple pixels to the left? With just a cursory look it seems that would fix the alignment.

Upgrade to the current version of pano.swf (v2.3.1) and hotspots.swf (v2.3c). Both are available in the files section of this forum. Not sure if that will help but it is a good idea, regardless.

If you have tried both of the above and the problem persists we can look deeper.