PanoSalado Progress!

PanoSalado is making progress! I just added interface buttons. So now the demo has a fullscreen button, and pan/tilt/zoom buttons. And to complement the buttons (they look nice and all, but I wanted them to actually do something) I wrote in a couple of functions to spoof key down and up events, so now you can spoof keyboard interaction from an event command in the XML. I suppose I could write a function to spoof click and drag movement also.... The only "standard" panoramic interface button that is not currently working is the autorotator, which just needs a little more work.

This is starting to look like a real engine!

Here is the demo:
PanoSalado Demo
and the source:
[edit: please see the latest blog posts for the most current info. reference also the googlecode repository for downloads]

And for the edification of anyone out there who wants it, here is the XML settings file for a two node virtual tour, complete with hotspots and interface:

<settings
        onStart="loadSpace:preview"  
        cameraContinuity="lock"
        zoom="7"
        transition="3,alpha,0,Expo.easeInOutExpo"
        dynamicQualityAdjustment="true"
        accelerating_precise="false"
        accelerating_precision="8"
        accelerating_smooth="false"
        decelerating_precise="true"
        decelerating_precision="8"
        decelerating_smooth="true"
        stopped_precise="true"
        stopped_precision="1"
        stopped_smooth="true"
>
        <preview
                interactive="0"
                transition="3,alpha,0,Expo.easeInOutExpo"
                onTransitionEnd="loadSpaceAndInterface:concert1"
                pan="0"
                tilt="0"
                zoom="7"
        >
                <sphere id="preview" radius="100000" segments="24" oneSide="false">
                        <file>images/preview.jpg</file>
                </sphere>
               
        </preview>
        <concert1
                interactive="true"
                onTransitionEnd="removeLastSpace"
        >
                <cube id="concert1" width="100000" segments="9" oneSide="true" smooth="true" precise="true">
                        <file id="front">images/Concert_1-sm_f.jpg</file>
                        <file id="right">images/Concert_1-sm_r.jpg</file>
                        <file id="left">images/Concert_1-sm_l.jpg</file>
                        <file id="top">images/Concert_1-sm_u.jpg</file>
                        <file id="bottom">images/Concert_1-sm_d.jpg</file>
                        <file id="back">images/Concert_1-sm_b.jpg</file>
                </cube>
                <plane id="toConcert2"
                        interactive = "true"
                        pan="-20"
                        tilt="-10"
                        segments="2"
                        oneSide="false"
                        smooth="true"
                        onClick="loadSpace:concert2"
                >
                        <file>graphics/hotspot.png</file>
                </plane>
               
               
                <bitmap id="toggle_autorotator"
                        align="br"
                        offsetX="-254"
                        offsetY="-47"
                >
                        <file>graphics/rotate_normal.png</file>
                </bitmap>
                <bitmap id="zoomout"
                        align="br"
                        offsetX="-219"
                        offsetY="-47"
                        onPress="keyDown:control"
                        onRelease="keyUp:control"
                >
                        <file>graphics/zoomout_normal.png</file>
                </bitmap>
                <bitmap id="zoomin"
                        align="br"
                        offsetX="-185"
                        offsetY="-47"
                        onPress="keyDown:shift"
                        onRelease="keyUp:shift"
                >
                        <file>graphics/zoomin_normal.png</file>
                </bitmap>
                <bitmap id="left"
                        align="br"
                        offsetX="-151"
                        offsetY="-47"
                        onPress="keyDown:left"
                        onRelease="keyUp:left"
                >
                        <file>graphics/panleft_normal.png</file>
                </bitmap>
                <bitmap id="right"
                        align="br"
                        offsetX="-117"
                        offsetY="-47"
                        onPress="keyDown:right"
                        onRelease="keyUp:right"
                >
                        <file>graphics/panright_normal.png</file>
                </bitmap>
                <bitmap id="up"
                        align="br"
                        offsetX="-83"
                        offsetY="-47"
                        onPress="keyDown:up"
                        onRelease="keyUp:up"
                >
                        <file>graphics/tiltup_normal.png</file>
                </bitmap>
                <bitmap id="down"
                        align="br"
                        offsetX="-49"
                        offsetY="-47"
                        onPress="keyDown:down"
                        onRelease="keyUp:down"
                >
                        <file>graphics/tiltdown_normal.png</file>
                </bitmap>
                <bitmap id="fullscreen"
                        align="br"
                        offsetX="-64"
                        offsetY="-90"
                        onPress="toggleFullscreen"
                >
                        <file>graphics/button_fullscreen.png</file>
                </bitmap>
               
        </concert1>
        <concert2
                interactive="true"
                onTransitionEnd="removeLastSpace"
        >
                <cube id="concert2" width="100000" segments="9" oneSide="true" smooth="true" precise="true">
                        <file id="front">images/Concert_2_blend-flat-s_f.jpg</file>
                        <file id="right">images/Concert_2_blend-flat-s_r.jpg</file>
                        <file id="left">images/Concert_2_blend-flat-s_l.jpg</file>
                        <file id="top">images/Concert_2_blend-flat-s_u.jpg</file>
                        <file id="bottom">images/Concert_2_blend-flat-s_d.jpg</file>
                        <file id="back">images/Concert_2_blend-flat-s_b.jpg</file>
                </cube>
                <plane id="toConcert1"
                        interactive = "true"
                        pan="80"
                        tilt="10"
                        segments="2"
                        oneSide="false"
                        smooth="true"
                        onClick="loadSpace:concert1"
                >
                        <file>graphics/hotspot.png?1</file>
                </plane>
        </concert2>
</settings>

On WIGGLE and SHIMMER

I should probably make a few remarks as to the wiggly lines and the anti-alias shimmer. There are a LOT of ways to control this. And Papervision has an additional way to control this that something like Flash Panorama Player does not have--precision mapping. In FPP you control this with tessellation, which is basically splitting an image into a bunch of triangles, and then skewing each one, which results in the image not distorting right for perspective, but the smaller the triangles, and the more of them, the closer it gets to proper perspective (no wiggle), which is why higher segments values in FPP or PanoSalado, looks better.

So Papervision can control wiggle with segments, but, as I said, it can also control it with precision mapping of the image onto the triangle. The difference here is that an image can be distorted with perfect perspective. For example, you can have a plane, with 2 segments, and it will look perfect at any angle. However, you can also control the level of precision, so that a setting of precision=1 is rendered precise to the nearest 1 pixel, or precision=10 is precise to the nearest 10 pixels.

So there are lots of ways to adjust the wiggle

This is how I have it set now (which drives Patrick crazy, because he hates wiggle):

Accelerating: high wiggle and shimmer, high fps
Decelerating: low wiggle and shimmer, low fps
Stopped: zero wiggle and shimmer, high fps because nothing is rendering

I did this by setting the cubes onto which the images are rendered to have 9 segments so that a fair number of triangles can be culled. Then adjustments to the precision and whether to smooth the bitmaps is decided on the fly.

Accelerating: no precision and not smooth
Decelerating: precision=8 and smooth=true
Stopped: precision=1 and smooth=true (perfect rendering)

So you can change the any of those values from the XML:

<settings
                onStart="loadSpace:preview"  
                cameraContinuity="lock"
                zoom="7"
                transition="3,alpha,0,Expo.easeInOutExpo"
                dynamicQualityAdjustment="true"
                accelerating_precise="false"
                accelerating_precision="8"
                accelerating_smooth="false"
                decelerating_precise="true"
                decelerating_precision="8"
                decelerating_smooth="true"
                stopped_precise="true"
                stopped_precision="1"
                stopped_smooth="true"
                >

If you want settings like Flash Panorama Player, for example, you would set the parameters to this:

                accelerating_precise="false"
                accelerating_smooth="false"
                decelerating_precise="false"
                decelerating_smooth="true"
                stopped_precise="true"
                stopped_precision="1"
                stopped_smooth="true"

And in each pano cube, you would set the segments to something comparable to FPP, like 25. And, compared to Flash Panorama Player, you will get better static quality, because it will be rendering with precision to the nearest pixel, without unduly taxing the cpu because when the pano is stopped PanoSalado stops rendering.

So, are you good and confused yet?

Re: On Wiggle and Shimmer

PanoSalado wrote:

This is how I have it set now (which drives Patrick crazy, because he hates wiggle)

Yes, crazy I tell you! Wink

PanoSalado wrote:

Accelerating: high wiggle and shimmer, high fps
Decelerating: low wiggle and shimmer, low fps

I just wanted to note that the rough user equivalents of the above are:

Accelerating: Mouse down, and panning/tilting
Decelerating: Mouse up, but inertia is finishing pan movement

Nice post, Z!

Ok, so the wiggle and wobble

Ok, so the wiggle and wobble and shimmer can be improved. That's good....I feel like beating the monitor up, when the image twists and turns like a politician avoiding questions. How much more CPU does it require, how much slower is the pano if it is set to match the following settings we know in FPP as:

segments = 25
shrink = 1
qualityMotion = low
qualityStatic = medium
behaviour = 2
sensitivity = 50
keySensitivity = 20
friction = 0.85
threshold = 0.0000001

The above is 5 segments more than the FPP default Everything else is default.

Could you possibly upload another example that matches the FPP setting I posted, so that we can have a direct comparison?

Head to Head comparison

Hi Trausti,

How's South America?

Here's your head-to-head comparison. I set the segments to 15 because, now that I look at it again, 15 PanoSalado segments looks to me about like 25 Flash Panorama Player segments. Also, it is not using precise materials at all, for comparison purposes. But it should be, because PanoSalado will stop rendering if the camera is not moving, therefore, there is plenty of cpu available, and so the greater strain of the highest quality rendering won't be a problem.

fpp comparison demo

Zephyr

re: PanoSalado comparison to FPP

The comparison demo runs blazingly fast on my Mac G5 (OS X 10.4.11, Flash 9 plugin). Also on my Intel Mac running the Flash 10 plugin beta -- great performance.

The "shimmer" has never bothered me, as it seems to have the old QTVR anti/aliasing while in motion feel.

OK, OK! I promise to get to some of the interactivity stuff to add to PanoSalado. Honest!

Cheers,

Thank you, this actually

Thank you, this actually convinced me that there could be a bright future for the player. With those new settings, it runs at the same CPU and memory consumption as the previously posted example.

From my perspective, I think the 15 segments equal the 20 on FPP... maybe 22, but still it is smooth and good looking.

One issue the demo has, is that if you zoom too far out, you will pass a point where you will re-enter the pano, but things will be upside down.

Pressing CTRL+ALT results in hyper zoom out (or if out, it zooms closer and closer in). Tapping CTRL will stop the zoom though.

But all in all it looks very promising!

Edit added:

Still it is around 50% more CPU hungry than running a similarly sized FPP pano.

Since you've mentioned the

Since you've mentioned the zoom and such, there are plenty of minor things like that which still need doing. Try tilting the camera beyond 90 degrees, the pano flips over. I suppose you could have it upside down and inside out if you wanted to. We are still working on putting major functionality in. I've got a couple tricks up my sleeve still!

And anyone else who wants to contribute to it is completely welcome.

Zephyr

re: PanoSalado compares favorably

Quote:

But all in all it looks very promising!

Edit added:

Still it is around 50% more CPU hungry than running a similarly sized FPP pano.

Good news! Wink

I'd be curious to see some one on one krpano &/or lucid comparisons...

Minor things yes. I

Minor things yes.

I understand that it will take a lot of work to tie up the loose ends and make things work... and I have no doubt whatsoever that you will be with one helluva good viewer on your hands when the day is done.

Updates made to PanoSalado open source Pano viewer

There's been considerable improvement -- see the updated blog post at:
http://flashpanos.com/content/panosalado-wiggle-shimmer-and-fps

FPP Comparison Demo Link...

When I click on the FPP Comparison Demo Link from above:

http://flashpanos.com/flashpanos_files/Papervision/PanoSalado/trunk/exam...

...nothing happens. Just a black screen.

Does the same thing in both Firefox and Explorer.

Same thing happens to the link in the post directly above:

http://flashpanos.com/flashpanos_files/Papervision/PanoSalado/trunk/exam...

Thoughts? What am I doing wrong?

re: FPP Comparison Demo Link...

Hey djsegler:

I have an inquiry in to Z about those links above; might be just victims of file mismanagement on the server here.

Check out the latest examples from http://www.cheathamlane.net/index.php?section=open%20source , and also here in the blog: http://flashpanos.com/blog/79

Cheers,

Ooops

Yes, that would be a prima facie citation for mismanagement of files in a server environment.

I updated the version of PanoSalado in that directory for the QTVR stuff, and that version was old enough to have a significantly different XML format.

Hmmm....

Zephyr

Patrick's Example...

Patrick,

I had already looked at your example here, http://www.cheathamlane.net/index.php?section=open%20source, and really like what you've done.

I'm still getting my head around PV3D, so I haven't created anything yet... but I like your use of buttons, cursors, tooltips, etc... in this example. Do you have the source (XML and other misc files) posted anywhere to play with?

I'd still like to see some comparison to FPP. Some of the examples are clearly much slower on my machine using PV3D - especially at full screen. Some of the stuff I'm doing requires alot of optimization of FPP settings to run smoothly and I'm hoping that PV3D will be the way to eliminate alot of the bog someday. It'll be nice having full control of the "stage" too.

Thanks again!

re: Panosalado examples

Hey dj:

I speak for Zephyr too when I say: Thanks for the thanks! Smile

There's a download of a working example available from PanoSalado's GoogleCode home. The full source is available there too.

Downloads: http://code.google.com/p/panosalado (or see menu bar at top left of this site)

The examples download includes just the working set of files you'd need to publish a tour with a simple interface; This interface in the example is just like the one at the CheathamLane site, minus the tooltips. Tooltips are a fairly easy add-in to the interface (whether using Flex, or a 3rd party component like the one in use at cheathamlane.net, got from afcomponents.com).

The source files download includes all the base Actionscript classes for PanoSalado; & the Flash, Actionscript or Flex files you'd need to edit to create a tour. These are obviously just starting points for you, but they show most of the functionality for and "hooks" into PanoSalado.

Unless you really want to, there's no need to touch the core Papervision or PanoSalado classes -- the Interface Flash & Flex & XML files could be enough to get you going. Smile

Currently revision 73 is the stable download of source and examples, while we work on testing QTVR support, cylinder support, in-built tooltips, among other things. If you access the source code repository at PanoSalado's GoogleCode home, you'll see that we're at about revision 80. Revisions are coming faster than I can fully test them, so 73 is (at this writing) the one with an examples download.

--
PanoSalado has many of the usual suspect parameters which you can tweak to improve performance and perceived image quality -- Check the forum posts here for a quick run through of the XML file from which you set these parameters (one basic, one complex). Similar to FPP, krpano, et al, PanoSalado will perform differently on different machines (ah, Flash Smile ), and you'll find your own set of "good" parameters for fluidity of movement and image quality.

Cheers!

re: PanoSalado Examples

Thanks for the clarification of things (and the tip on on the tooltips!).

With regard to speed... I was originally looking at this before I stumbled upon PanoSalado: http://blog.flexcommunity.net/?p=22

The example they did is really smooth and the coding seems to be a fairly simplistic use of pv3d. I'd be curious to get your thoughts on the differences with the PanoSaldao implementation and what "tweaks" you guys made to the core pv3d to make it better for this application...

As I go, I plan on keeping some notes to form the beginnings of a possible tutorial series... but then again, I've said that so many times with other projects and never followed through, I almost hate to mention it again.

Keep up the great work. I hope to catch up soon.

re: PanoSalado Examples

I'm reading the forum entries now... Should have done that first. Alot of great info there.

More questions to come though... Stay tuned!

re: PanoSalado Examples (speed/pv3d)

Hey dj:

Staying tuned!

I'll let Zephyr speak to the hardcore tweaks, but probably the biggest difference between my example(s) and the one at the link you posted is in file size. Those images are 1/3 to 1/2 the size (both pixels and kb) of mine. Notice the image quality at fullscreen w/their example is not so good.

Speaking of their images, the writer mentioned just pulling them off the Web; I hope he got permission to use them (even for a demo).

AFA tutorials go, have at it; I'd be happy to post them here in forum format, serialized page format, whatever. Smile

Cheers!

PanoSalado compared to the other thing

Hi DJ,

Well there are a LOT of differences between PanoSalado and what that Flex example is. PanoSalado is trying to be a panorama display engine. And the other thing is just a one off panorama. In terms of building in support for XML, tweens, transitions, hotspots, user interface, PanoSalado is way ahead. That is just the basic code to display a cube in papervision. So in creating PanoSalado, I started with something similar months ago. And then there are a number of small but very important and hard to figure out changes I've actually made to Papervision to make it more friendly to the conventions of panoramic display.

And note that everything about this blog post is very outdated by now.

Zephyr

PanoSalado vs Basic PV3D Example...

I figured that the example I posted was pretty old and simplistic... Just trying to come up to speed on the history of who's done what and when...

Bare with me, I'm a little behind. Had some big projects to flush out and it kept me from keeping up with what everyone's been working on...

Thanks for the clarification. I'll try to ask only "smart" questions from now on...

-DJ

re: PanoSalado vs Basic PV3D Example...

Hey DJ:

No, the "smart" questions are the hard ones to answer! Nerd

The more I poke around, the more I find "simple" projects like the one you linked to; Not too many people (visibly anyway) are taking the next steps like we are... at least as open source projects.

Your questions are totally valid ones -- I hope between myself and Zephyr we gave some valid responses. Smile

When you're done flushing you'll be able to devote all your free time to PanoSalado!

Cheers,

Patrick

"Smart" Questions...

I'll hope to contribute soon...

Thanks for the help today.