Sphere Texturemapping via DisplacementMapFilter

August 11th, 2005

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

Filed under: actionscript

36 Responses to “Sphere Texturemapping via DisplacementMapFilter”

  1. Jon B Says:
    August 11th, 2005 at 5:40 pm

    Sweetness - step 1 of 1000,000,000 on the path to a flash version of Google Earth ;)

  2. Andreas Weber Says:
    August 12th, 2005 at 12:22 pm

    Wow - of all the great Flash 8 samples out there this is probably the least obvious one - simply amazing…

  3. Peter Cox Says:
    August 12th, 2005 at 2:21 pm

    What does mean “please wait while rendering displacementmap” ?
    what is generated ?

  4. André Michelle Says:
    August 12th, 2005 at 2:28 pm

    @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.

  5. André Michelle Says:
    August 13th, 2005 at 12:37 pm

    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.

  6. Paul Neave Says:
    August 13th, 2005 at 1:10 pm

    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!

  7. André Michelle Says:
    August 13th, 2005 at 2:02 pm

    @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!

  8. Jon B Says:
    August 13th, 2005 at 3:38 pm

    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!

  9. Pete Mc Says:
    August 14th, 2005 at 6:48 pm

    Kudos Andre, I’ve been trying to achieve this effect in Flash for literally years,

    http://www.reklamatik.dk/panorama/3dRotate1.swf
    http://www.reklamatik.dk/panorama/stripPan2.html

    but have always been foiled by performance issues. I’m inspired to try for the full 360.
    Any .fla available?

  10. Pete Mc Says:
    August 14th, 2005 at 6:51 pm

    Btw, does the displacement map use the color information or could it just as well be grayscale?

  11. Pete Mc Says:
    August 15th, 2005 at 7:30 am

    Pan and tilt…
    http://www.hypergis.com/demos/pano/
    This one’s not mathematically correct, but is a nice effect :O)

  12. strille Says:
    August 15th, 2005 at 4:58 pm

    Very impressive!

    Looks like Flash 8 will make us experiment again like never before. Can’t wait!

  13. Jack Laniak Says:
    August 17th, 2005 at 10:16 am

    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 ?

    Thanks

  14. sascha of H1DD3N.R350URC3 Says:
    August 24th, 2005 at 4:01 am

    I’m sorry, but doesn’t work here. The movie stays black all the time. Player8 of course is installed.

  15. sascha of H1DD3N.R350URC3 Says:
    August 24th, 2005 at 4:17 am

    gah! My mistake! Didn’t had the absolutely latest beta player version installed.

  16. Arse Says:
    September 15th, 2005 at 5:33 am

    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.

  17. Thomas Says:
    September 20th, 2005 at 9:14 pm

    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?

  18. Pete Mc Says:
    September 20th, 2005 at 10:24 pm

    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.
    http://www.hypergis.com/demos/pano/displace4.html

    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.

  19. Jon B Says:
    September 22nd, 2005 at 9:10 pm

    My maths isn’t so hot, but I have been reading up on spirals lately (don’t understand much of it tho) but wouldn’t it be possible to use the mercator projection equation here http://mathworld.wolfram.com/MercatorProjection.html to translate image pixels to spheres?

    Think there is a huge mistake in my knowledge tho.

  20. geilner Says:
    September 29th, 2005 at 5:28 pm

    Hi Pete !

    I’ve just seen your demo at http://www.hypergis.com/demos/pano/displace4.html.
    It’s very great.
    How have you created your 2 displacement maps ?

  21. Pete Mc Says:
    September 30th, 2005 at 2:17 pm

    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)

  22. steve Says:
    October 19th, 2005 at 6:25 pm

    if anyone wants the displacement map needed to do tihs, here you go. it’s 800×600, so it should be adequate for most needs. (note: channels are flipped, so use green for x, red for y)

    http://www.keepadding.com/steve/round.jpg

  23. mrEdge Says:
    November 3rd, 2005 at 11:29 pm

    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?

  24. Claudia Says:
    November 20th, 2005 at 11:31 pm

    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?

    Thanks,
    Claudia

  25. André Michelle Says:
    November 21st, 2005 at 11:08 am

    @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).

  26. Claudia Says:
    November 21st, 2005 at 1:51 pm

    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) :)

    Claudia

  27. Jaris Says:
    November 21st, 2005 at 9:54 pm

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

  28. Pete Mc Says:
    November 22nd, 2005 at 12:08 am

    Here it is…
    http://www.hypergis.com/demos/pano/displace4.zip

    It was created in Flash MX 2004, but should work fine from Flash 8. Have Fun :O)

  29. Jaris Says:
    November 22nd, 2005 at 11:17 am

    Thank you very much Pete Mc. You are the best.

  30. mrEdge Says:
    November 23rd, 2005 at 3:42 am

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

  31. Jaris Says:
    November 26th, 2005 at 9:01 pm

    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.

    http://www.vidata.net/displace43.zip
    http://www.vidata.net/360.zip

  32. Ola Rosling Says:
    December 28th, 2005 at 9:40 pm

    Jaris

    You could always try nesting the thing inside a movieClip and zoom the traditional way, by scaling the clip…;)

    Ola

  33. Prospects Says:
    January 12th, 2006 at 2:50 am

    [...] nt-&gt;panorama_0; for a good time click on the other demos too). More detail on this in his blog entry. Some other implementations of cylindrical panos [...]

  34. Ash Spain Says:
    February 15th, 2006 at 1:23 pm

    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!

  35. Jimmy Gramblin Says:
    December 3rd, 2007 at 5:54 pm

    can anyone help me build this?

    http://www.etsy.com/geolocator.php#

  36. weanciact Says:
    February 21st, 2008 at 8:39 pm

    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
    gregoryddavis6@gmail.com
    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.

    Sincerely,
    Jonathan Williams
    First Premier Financial Group inc.

Leave a Reply