[Solved] AS3, making a displacementmapfilter for a sphere

13 posts

Flag Post

Hey!
I’m trying to make a spherical bump in a graphic using DisplacementMapFilter.. And I have problems rendering the map itself. I don’t know anything about 3D math so I thought I could calculate the sine of every pixel in a semicircle (,)
And then somehow use the sine values on both x and y axis. But that would just make some squarish shit, so
How do I render a DisplacementMapFilter bitmapdata for a sphere?
If you don’t know anything about DisplacementMapFilter: I should make a bitmapdata with values from #7F to #FF where #FF is the highest point of the sphere and #7F is neutral (I think)

Thanks!

 
Flag Post

get your radius, get your center, calculate the distance from center for your current point. If above radius, slap #7F. Otherwise, calculate 0x80*Math.sqrt(1.0-distance*distance/(radius*radius)) and add this to #7F, slap the result into displacement map.

 
Flag Post

Thank you, I will try that. Can you explain the math as well? :)

 
Flag Post

Well, if you split your sphere by an equator and lay it on the plane flat side down, that sqrt() will be its height at the corresponding point, if the sphere’s radius is 1. Since you can’t correctly reflect the radius, as you are limited by height, I provided a constant 0×80 that’s the cap for itmap value (0xFF-0×7F), but feel free to change it if your sphere’s radius will be way smaller. If distance from the center is outside the sphere, there’s no sphere therefore height is 0.

 
Flag Post

I didn’t understand why it’s 1.0-distance*distance/(radius*radius) but never mind, I shouldn’t bother you explain the math. I might ask my math teacher in 30 min.

Anyway,

but feel free to change it if your sphere’s radius will be way smaller

Made me wonder, how do I make the sphere as deep as its radius (how strong the filter is)? Do I use scaleX and scaleY?

scaleX:Number (default = 0.0) — The multiplier to use to scale the x displacement result from the map calculation.
scaleY:Number (default = 0.0) — The multiplier to use to scale the y displacement result from the map calculation.

 
Flag Post

Wait, it seems I have not understood DisplacementMapFilter.

They use bitmaps like these to make spheres — I don’t get it. And then this makes a magnifier. Can someone help me understand the DisplacementMapFilter map?

 
Flag Post

I really need help with this .. How do you make a bitmapdata to DisplacementMapFilter that can render a bitmap to look like a sphere? The picture in my last post only did it on the x axis and I would also need to make a new one for any different size I need on the sphere. Thus, I want to know how I can generate a map like that (no picture in library).

 
Flag Post

Looks like you got that image from the Moon Displacement example at the Adobe web site. I thought the explanation was pretty straightforward. Can you post screenshots of the sphere you’re rendering so we can see what’s wrong?

 
Flag Post

I haven’t rendered anything yet because that map is only applying on x axis and I need on both.

I guess I could just rotate it by 90 degrees and copy it to the green component to do that? And I gotta scale it all the time. I am just wondering how this works because it does not make sense to me

 
Flag Post

I see. In the Moon Displacement article, there are two reason why pixels aren’t being distorted along the y-axis.

  1. In the call to make a new DisplacementMapFilter, the value of the scaleY parameter is 0. That means nothing will be displaced on the y-axis. However, setting this to some other value such as the radius of your sphere won’t work either because of reason number 2:
  2. In the function createFisheyeMap, notice that the green channel is always zero. That’s why the bitmap for the filter looks like a red sphere. Its green and blue channels are both set to zero. You don’t need the blue channel, but you’ll need the green channel to be set to a proper value.

Try changing the function to use the following formula:

green = 128 * (1 + 0.99 * pctY * pctY * pctY / (1 - pctX * pctX));

Also, when you instantiate a new DisplacementMapFilter, be sure to set the scaleY parameter to be the same as the radius of your sphere. For example:

_myFilter = new DisplacementMapFilter(bdSphere, 
				  new Point(mouseX - _sphereRadius, mouseY - _sphereRadius), 
				  BitmapDataChannel.RED, 
				  BitmapDataChannel.GREEN, 
				  _sphereRadius, _sphereRadius);
 
Flag Post

Yes, it should do that if you rotate it properly. Here is a base principle behind a displacement map filter. You give it x-scale and y-scale in pixels, and a displacement map, the filter makes each point be replaced by a point shifted by the map’s encoded vector.

 
Flag Post

Thanks a lot guys!
Elyzius, I didn’t see the function where they made the map before now.. Thanks I will try what you said :)
And I will read all that thanks vesperbot

 
Flag Post

It wraps my perlin noise like this

Edit: Actually I just made the bitmap wrong size. “This” is the result.

Edit 2: Changed the mode of DisplacementMapFilter to clamp http://www.fastswf.com/59T-8DE
Still not 100% good though.

*Edit 3: Solved." It was just that I had to make the bitmapdata and the displacementmapfilter bigger so that the displacementfilter had more texture to work with.