Part II – Improved Panorama

In the previous panorama post I mentioned a number of issues that would have to be fixed. For this demo I used another image from, who has a set of amazing images, so it’s really worth to go there and take a look (the other images in the flickr equirectangular group are very good as well btw).

So in no particular order, what did we add/fix in this version?

The clipping issue was described in the previous post.

The seams were a surprise to me. I thought the render process caused the seams, and that I would have to fix it by making the planes slightly overlap however, that didn’t fix it, it only made things worse. Then I discovered that the seams were caused by the bitmapfill repeat parameter which was set to true, when smoothing was turned on for the planes. If you remember, this setting was switched on to prevent drawing lag when points crossed the diagonal of drawn triangle. Since that will never happen when rendering the inside of a cube with our field of view setting, we can safely turn it off. And poof ! No more seams.

(Fluid) motion
I updated the mouse and key movement and added mass. The slight delay after you press a key is now gone as well. See the render function for more info on this.

Correct rotation
The rotation is correct. In order to implement that, we needed to keep the original points untransformed, and store a transformed copy of those points as well. Using two rotation matrices, one for x and one for the y direction, we can correctly transform these points each render pass (but only if we have moved).

Field of vision
I implemented a somewhat more scientific way of calculating the projection plane distance based on a field of view parameter. Please refer to the sources for more info.

What’s next?
We fixed a number of minor other stuff as well and cleaned the code a bit, so we are slowly getting to where we want to be. In the next version I will refactor the DistortedPlane class into a more specific custom PanoCubeSide class to make the performance even better, although I think that for actionscript 2 it is pretty solid already.

In addition we will look at externalizing the images and the implementation of hotspots in the next version!
Demo and download after the jump!

(Click and drag, mousewheel or keys)

Download the sources for this panorama (fully documented): 3d Panorama v0.2 (838 downloads)

2 replies
  1. Joe
    Joe says:


    Thanks so much for posting the code and detailed explanation! I’m in a similar boat where I’m helping a client create an AS2 panorama. I’ve increased the size of the window significantly as it’s going to be used in a touchscreen kiosk, but we’re noticing that sometimes a face of the cube goes “blank” at certain angles – so you see a rectangular white area (typically on the left side of the window).

    I’m still reading and absorbing all the information in your blog posts, but if you could point me in the direction of where you think the bug might lie (something with the clipping I’m guessing) it would be much appreciated. As I don’t need hotspots or dynamic loading, I used the code from this post.


    • Hans Wichman
      Hans Wichman says:

      Hi Joe,

      I mailed you a couple of weeks ago, did you get that email? The error lies in the front face detection and I’ve mailed you a patch.



Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *