Sphere Texturemapping via DisplacementMapFilter

I thought a long time about it and tried it the second time now. The idea is a freeze a current pixels displacement, as it naturally occur when projecting bitmaps into another enviroment like a sphere coordinate system. I created a gradient table in flash8 where the x and y values are stored as color-components (red/blue). I switch to 3dmax where I build my model (here a sphere) and map the gradient onto the mesh. The next step is to look, where the original positions of the texture was by comparing the source and the projected bitmap and compose a displacement map of it. I think, this is the screwiest workaround, I’ve ever done in flash.

They is space to improve the method. The maximum displacement is limited to 127 pixel, if you want full pixel control. Maybe you can use a asssembly of DisplacementmapFilters to render larger areas. Cannot wait to see a skydome in the mode7 engine.

watch here | filter > earth

Update A
I’ve uploaded a panorama example with the same technic, now you are inside a sphere.
Quite impressive. | filter > panorama_0

Update B
Furthermode I’ve uploaded a panorama_1 example with a reflecting and refracting little sphere inside the main sphere. It is simply amazing what a DisplacementMapFilter can do with some tricky workarounds. Stop me :)

All studies can be found in the laboratory

36 thoughts on “Sphere Texturemapping via DisplacementMapFilter”

  1. @Peter Cox:

    The new rendered Image from 3dmax must be converted into a new displacement map image to provide xy displacement of the pixels. I could simply make a screenshot of the new displacement image, but for this time, I leave the computation there since it is a experiement.

  2. update: I found a solution with 2 Colortransforms and a blendMode while drawing the rendered DisplacementImage to avoid the computation manually. Now, all examples starts immediatly.

  3. I’m loving the Earth experiment. Would it be possible to distort the bitmap in a way which would rotate the Earth up and down as well as left-to-right?

    And talking of a Flash version of Google Earth, here’s my attempt at it… Flash Earth. Maybe I could somehow use your sphere code with it!

  4. @paul:
    I think it’s possible. I tried to displace the texture up and down, but another distorsion is necessary to bend north and south as polar coordinates. But I will try it next time.
    Nice thing your flash-google-earth!

  5. The panorama thing is cool – not quite got Quicktime VR on the ropes yet, but with further development it could awesome! This flash release truly has opened up so many new possibilties and I think MS, Real and Apple should worried, not only has flash got awesome streaming video capabilities, but it’s player is tiny and everyone wil have it, couple that with teh interactive options in flash and the choice is easy.

    So how about using video instead of an image in your distortion demos? Really push the player!

  6. Andre,

    About gamepackage and the math.geom.* classes.
    Flash 8 have new natives classes Point and Rectangle.
    What do you think about thoses ?
    Did you notice better speed in vector and point calculation ?
    What can you notice about thoses classes ?


  7. Lovely piece of work Andre. I too think that a lot of us will be having sleepless nights trying to rework our old experiments to take advantage of the new bitmap facilities.

  8. These examples are very interesting. We use the script from http://www.flashvr.de do display panorama images. It would be great to map the panorama as a sphere or a cube like in Quicktime to view also 90° up and down. Is this possible with the new release of flash?

  9. I’d say it was possible, but not with this technique, and I doubt performance would be good enough for commercial use, but I hope someone can prove me wrong.
    I updated my panorama page to show how it’s done and added a little animation.

    I’ve since found out, by reading the new docs that a single map could be used, different colour channels. I see Andre had that sussed from the start.

  10. I made one quadrant with actionscript and the bitmapData object, then took it into photoshop and flipped it around to make the other quadrants. Could have done the whole thing in Actionscript, but I was too lazy.

    As I say, these two grradients should be replaced by a single gradient, using 2 different color channels. I’ll get round to it one day :O)

  11. Hey guys. These examples are very exciting. I’d love to have a play with some 360 VR shots I have taken. But I have no idea about Flash Scripting. http://www.hypergis.com/demos/pano/ is especially sexy. And I think I see where steve’s colour displacement would could help… but does anyone have an FLA for me to use?

  12. André Michele,

    Apparently there is a bug in this panorama app…

    If you let it move for some time to either left or right, it will stop moving.

    Could this be because of the 2880 pixel limit on the DisplacementMapFilter?

    How could I fix this, so that it doesn’t stop?


  13. @claudia:

    please use…

    while( dx < 0 ) dx += image.width; while( dx > image.width ) dx -= image.width;

    …to clamp the offset value from the matrix, which is used for beginBitmapFill. It seems, that pattern fill fails, when passing values over 16bit Integers except sign-bit(2^15: +/-32768).

  14. André,

    Thanks a lot for your help, quite simlpe to fix I might say (even though I had issues trying to figure out what could be causing this problem) :)


  15. Hi Peat Mc your example is really nice. I like much. Could you pass us the flash code?. Is a realy nice example.

  16. I’m yet to have a squizz at the source, but thank you for supplying a non-scripter with some hope! Cheers, mrEdge

  17. Hi Pete Mc. I have been looking at your excellent example of displacement but I’m trying to zoom in on the panoramic but I find one error when I move the panoramic up or down.

    I have a good panoramic in flash but it is flat without displacemap.

    I would like you and other member of this blog to see it and tell me if I could make a filter displacemap in this flash called 360.zip or would it be really complicated.

    Thanks you for your help. These are the files.


  18. Pingback: Prospects
  19. You guys are really really amazing at actionscript. I had no idea that any of this was possible with flash. It makes me realise that I should start having some fun with flash again. If only I had the time …..

    Keep up the good work people!

  20. I represent First Premier Financial Group inc.(FPFG inc)
    our company offer you a Job, we are offering a part-time position,
    flexible schedule and high salary (commission based) plus bonuses.
    so,if you are interested, you can contact us via email at
    send resume to Fax: 323 417-4865
    I’ll provide you with all details concerning our position.
    If you have any questions, don’t hesitate to contact us.

    Jonathan Williams
    First Premier Financial Group inc.

Comments are closed.