Panoramic projection using displacement mapping

In this post we will be looking at the creation of a distorted panorama using a displacement map. The two examples below show the difference between a panorama without and with distortion (notice how in the distorted version the grid bends):

Panorama without distortion ( NondistortedPanorama (567 downloads) )



Panorama with distortion ( Distorted Panorama (663 downloads) )



Some simple tricks to note up front:

  • detecting the mouse outside of the panorama is done through an empty movieclip with a stage-sized hitarea and an onpress=null
  • in order to displace the whole stage at once, you can set the displacement map on the root but you need to mask the stage through code (ie setMask)

We will be looking at a visual way to generate the required displacement maps using a 3D program and an imaging program. Ofcourse you can generate the required maps through code as well, but I like the visual way of doing stuff like this. It has its limitations of course. I have summed up the whole process in a slide show below. The different resources that are required can be downloaded below as well. Note that I’m still experimenting with this stuff:). Some of the slides refer back to previous posts.



The slides refer to some resources. The base map and difference calculation resources can be found elsewhere on this blog (search for displacement). The displacement maps can be retrieved from the downloaded source file, but now you know how to create them yourself as well. Let’s conclude with what happens if you tinker with the rendered image and force overflows etc:

That said, this is again an example of what you can do with displacementmaps, but not the way to go when you want to create a real cubic panorama.

1 reply

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 *