feDisplacementMap - Creating the Map

[alexg]

Hey guys, I'm following the tutorial bellow on how to make an Absolute map, and using the attached script for step 3 "Changing the absolute source values to relative values".

However the generated map is not correct. probably something wrong with the image I replaced?

On the attached file you can find:
pspmap.png (image I replaced)
pspmaporiginal.png (correct example image)

 

http://www.tapper-ware.net/blog/?p=39
 

How to create the an absolute map with your favourite image editing application

Step one: Creating the neutral image.

The neutral image simply maps each pixel to the same one in the source image. It’s want you always start with and it never changes.

 

Step two: Deforming the image.

You can use any deformation filter you want. 

 

Step three: Changing the absolute source values to relative values.

That one is a little more complicated. Since feDisplacementMap doesn’t really allow you to map a source pixel directly to a target pixel we have to subtract the position of the pixel to convert the absolute position we have so far into a relative position. So basically, you have to load the image we created into something that can run a bit of code on each pixel and run something like the following code on each (you can just save this script and exchange the source image path for yours):

map.zip

[Jonathan]

Thanks for sharing alexg

 

Happy Tweening!

[alexg]

Thanks @Jonathan,

I made this distort absolute map, saved as PNG and replaced on the folder:

https://gyazo.com/b56737fcca4e7b40e904965101a56260

But the resulted relative map didn't came out correct:
https://gyazo.com/b56737fcca4e7b40e904965101a56260

I know the script is correct because it worked with the tutorial distorted absolute map. So is definitely something wrong with my replaced map settings.

Do you know what could be wrong?

Also, how are you guys creating the displacement maps? Any other suggested technique?


 

Thanks for sharing alexg

 

Happy Tweening!

[Jonathan]

I would create in Photoshop .. but the process is different since it is a displacement map for a 3D model used in Maya, 3D animation and modeling program. And is used in correlation with a bump and specular map. Unless others have a different way for what your trying to achieve.

[alexg]

A Photoshop workflow definitely be the best option for me. How do you convert the UV maps to "fedisplacement compatible" maps ? 

 

The best example I've seen so far is this codepen by Blake Bowen:

See the Pen WQyBJb%C2%A0 by osublake (@osublake) on CodePen

How can I make maps like his?
https://gyazo.com/f2d11ddf263562036309a8e2bbba9a41

 

[Jonathan]

The displacement maps for 3D non web used Maya do not have color in them. The are grayscale and the various shades of light to dark to convey depth.

For SVG fedisplacement maps they use color information like a radial or linear gradient. But either way it is creating shapes, in this case 3 rings. Creating selections, layers, and adjusting levels and blending modes. Using feathering for the edges as well as Gaussian blur. Applying a mask and overlay a gradient. And tweaking curves and levels of the image along with the various RGB color channels before converting to grayscale.

But that can be done in Photoshop.

[alexg]

Thanks Jonathan,

I made the displacement work, but it is showing up very "harsh" with transparent pixels, and LOTS of aliasing.

https://gyazo.com/de60238a5fa294d1b094d6984532f19e

How can I make it smoother?

[Jonathan]

You will have to use the blur tool at half strength and soften those edges. But make sure your zoomed in close enough where you see the pixels, before softening the edges. Make sure the image is saved as a PNG-24 with transparency checked, if saving from Photoshop. In Photoshop saving a PNG-24 with transparency actually saves it as a PNG-32.

Also sometimes a very slight micro Gaussian blur of the whole image can soften. But I prefer the blur tool for greater control.

[OSUblake]

A displacement map is a height map, so it works just like a terrain generator. The color determines the terrain, generating either land or water. And right in the middle you have the coastline (sea level). 

See the Pen MeprMJ by clindsey (@clindsey) on CodePen

 
The RGB color channel you use determines how much displacement will take place. So if you use green as the channel in your filter, the more green a color is, the more displacement it will have (water). If a color has no green in it (Green=0), it will be displaced the opposite direction (land). If a color is halfway between green (Green=128), it will have no displacement (sea level).
 
And you can use any color. It doesn't have to be red and green. Black and white will work just fine. Remember, the channel is based on RGB values, and because white is 255,255,255, it can be used for red, green, or blue. Take your pick. Black is of course the opposite with an RGB value of 0,0,0.

 

Look at this map. It's white with transparency.

See the Pen e33c3b553b907c1e0612b2c8e3e5dff4 by osublake (@osublake) on CodePen

 

Transparent is just like using black. Check out the actual displacement caused by that map. The white parts of the map are going in one direction while the transparent parts are going in the other.

See the Pen 3ec91e1a69d796c45f5fde9c7231d946 by osublake (@osublake) on CodePen

 

So creating a displacement map is all going to depend on how you want it to look. If you want to use a texture for the map, that's pretty easy in Photoshop. Just copy the color channel with greatest amount of contrast from an image, and then grayscale it.

 

About the aliasing, that's just how it looks in SVG. This type of filter is more suitable for WebGL. You might be able to smooth it out some using a gaussian blur, but there are no guarantees.

[alexg]

Awesome tips Jonathan, thanks a LOT!

Are you using 32 bits per channel maps? How are you exporting your PNG 32 files?

I created a 32 bits per channel map
https://gyazo.com/c63ba97704453a48ba031c27730020fa

But Photoshop doesn't allow to export as PNG 24 (using "save for web").
https://gyazo.com/8f0c069a07666124cf16c7af7eca6f04
 

And when I export (file/export/export as/PNG) PNG come out as 8 bits
https://gyazo.com/ed83a2862ff0a122976d8be783d0bc0c
https://gyazo.com/ea96ca8b87b244e9a77782693e974d4a

 

Cannot get 32 bits per channel PNGs here...
 

 

 

You will have to use the blur tool at half strength and soften those edges. But make sure your zoomed in close enough where you see the pixels, before softening the edges. Make sure the image is saved as a PNG-24 with transparency checked, if saving from Photoshop. In Photoshop saving a PNG-24 with transparency actually saves it as a PNG-32.

Also sometimes a very slight micro Gaussian blur of the whole image can soften. But I prefer the blur tool for greater control.

[alexg]

Thanks for the awesome examples Blake! ; )

How are you converting your ABSOLUTE maps into RELATIVE (fedisplacement compatible)?

Also, did you try to use 32 bits per channel maps to see if you get smoother deformations? On the examples you sent, they are all 8 bits right?

 

A displacement map is a height map, so it works just like a terrain generator. The color determines the terrain, generating either land or water. And right in the middle you have the coastline (sea level). 

See the Pen MeprMJ by clindsey (@clindsey) on CodePen

 
The RGB color channel you use determines how much displacement will take place. So if you use green as the channel in your filter, the more green a color is, the more displacement it will have (water). If a color has no green in it (Green=0), it will be displaced the opposite direction (land). If a color is halfway between green (Green=128), it will have no displacement (sea level).
 
And you can use any color. It doesn't have to be red and green. Black and white will work just fine. Remember, the channel is based on RGB values, and because white is 255,255,255, it can be used for red, green, or blue. Take your pick. Black is of course the opposite with an RGB value of 0,0,0.

 

Look at this map. It's white with transparency.

See the Pen e33c3b553b907c1e0612b2c8e3e5dff4 by osublake (@osublake) on CodePen

 

Transparent is just like using black. Check out the actual displacement caused by that map. The white parts of the map are going in one direction while the transparent parts are going in the other.

See the Pen 3ec91e1a69d796c45f5fde9c7231d946 by osublake (@osublake) on CodePen

 

So creating a displacement map is all going to depend on how you want it to look. If you want to use a texture for the map, that's pretty easy in Photoshop. Just copy the color channel with greatest amount of contrast from an image, and then grayscale it.

 

About the aliasing, that's just how it looks in SVG. This type of filter is more suitable for WebGL. You might be able to smooth it out some using a gaussian blur, but there are no guarantees.

[Jonathan]

If you are using Photoshop when you Save for Web.. then save as PNG-24 with transparency checked. Photoshop will save it as a 32-bit PNG. It just doesn't display as 32-bit in the dropdown options, it will only display as PNG-24 with transparency checked, but it is saved as PNG-32.

 

Adobe Fireworks does however show PNG-32 as an option. And is the same as saving in Photoshop

 

PNG-24 with transparency checked = PNG-32.

 

[OSUblake]

Yeah, they're only 8 bit channels, and filter inputs are never anti-aliased, so it's not going to improve anything.

 

To smooth it out you can set a filterRes property, or apply a Gaussian blur after the displacement. And doing a composite operation should help. Look at how much smoother that water map in this example.

See the Pen 42f9675f6d1f6485fcf75645103604ad?editors=0010 by osublake (@osublake) on CodePen

 

I haven't really messed with converting absolute maps into relative ones. Most of the time they just work out if you size them correctly.

 

And using a grayscale image should be fine for most situations. Check out this awesomeness using Lego blocks as a displacement filter. 

See the Pen avyBBZ by mullany (@mullany) on CodePen

[alexg]

Thanks Jonathan! 

Now I'm able to do the  absolute "PNG 24+8" map.

But when I use the script to convert "PNG 24" map from ABSOLUTE to RELATIVE, I get a messed up RELATIVE map.
Do you know  workflow in photoshop (so I don't depend on that script) to convert absolute to relative?

Also, would a PNG 24+8 give smoother results than PNG 8? Or wouldn't matter since browser render only 8bits?

thanks again!





 

If you are using Photoshop when you Save for Web.. then save as PNG-24 with transparency checked. Photoshop will save it as a 32-bit PNG. It just doesn't display as 32-bit in the dropdown options, it will only display as PNG-24 with transparency checked, but it is saved as PNG-32.

 

Adobe Fireworks does however show PNG-32 as an option. And is the same as saving in Photoshop

 

PNG-24 with transparency checked = PNG-32.

 

[alexg]

Thanks Blake, the water map is definitely smooth! Looking to do something like this on mine! : )

Did you try a PNG 24+8 as Jonathan suggested? Think could help to smooth?


So, are you using the absolute maps (without converting to relative) to displace?

In my case, if I use absolute maps I get totally wrong distortions:

Absolute map:
https://gyazo.com/f50b499006e479aafb2123102b06ff82

Results (incorrect distortions):
https://gyazo.com/df512b0fcb757bf28ac89de868d93a96

When I convert from absolute to relative, I get correct distortions. But still lots of aliasing, which is why I want to test a PNG24+8 Relative map... 

 

Yeah, they're only 8 bit channels, and filter inputs are never anti-aliased, so it's not going to improve anything.

 

To smooth it out you can set a filterRes property, or apply a Gaussian blur after the displacement. And doing a composite operation should help. Look at how much smoother that water map in this example.

See the Pen 42f9675f6d1f6485fcf75645103604ad?editors=0010 by osublake (@osublake) on CodePen

 

I haven't really messed with converting absolute maps into relative ones. Most of the time they just work out if you size them correctly.

 

And using a grayscale image should be fine for most situations. Check out this awesomeness using Lego blocks as a displacement filter. 

See the Pen avyBBZ by mullany (@mullany) on CodePen

[Jonathan]

You should only use PNG-32 (saved as PNG-24 with transparency checked in photoshop) if you need full alpha transparency that supports say a semi transparent gradient or colors. PNG-24 with index (on or off)  transparency is good if you you don't need that type of semi transparent alpha gradients.

 

If you don't need transparency then just use PNG-24. But you will have to test to see what looks best for your needs. PNG-32 will looks smoother with transparent gradients or if you need clean edges that have anti-alias on them so you dont see any jaggy edges or other pixels bleed through.

[alexg]

Thanks Jonathan,

After researching for almost 10 days I found a solution to convert the  Absolute Map into a 32 bits Relative map (the previous script I had only worked with 8 bits)

It's an ImageMagick script someone sent me in a forum, but unfortunately I don't know ImageMagick.

Do you know how to use it? If yes I can send the script in PM.

best 

 

You should only use PNG-32 (saved as PNG-24 with transparency checked in photoshop) if you need full alpha transparency that supports say a semi transparent gradient or colors. PNG-24 with index (on or off)  transparency is good if you you don't need that type of semi transparent alpha gradients.

 

If you don't need transparency then just use PNG-24. But you will have to test to see what looks best for your needs. PNG-32 will looks smoother with transparent gradients or if you need clean edges that have anti-alias on them so you dont see any jaggy edges or other pixels bleed through.

[Jonathan]

I'm sorry, I really don't have time to show you how to use imagemagick since it's pretty big php library, and there are a lot of different methods in there. But it's pretty straight forward to use, you just need to know PHP. It is a PHP image manipulation library. You can find more about it and how to use it here:

 

http://www.imagemagick.org/script/index.php

 

[alexg]

I'm sorry, I really don't have time to show you how to use imagemagick since it's pretty big php library, and there are a lot of different methods in there. But it's pretty straight forward to use, you just need to know PHP. It is a PHP image manipulation library. You can find more about it and how to use it here:

 

http://www.imagemagick.org/script/index.php

 

 

Sure, no need to teach me Imamagick! ; )

 

I asked if you can just run the script (I already have the code for it) to convert a map that I have to a relative one. Then you could also use the script for you converts of course! ; )

 

best

 

 

[WarenGonzaga]

This is great! Thanks for sharing man! I really appreciate it!

[alexg]

Glad that I helped Waren!

Did it worked out for you? Would love to see some examples! : )

Now I am working to fine tune the displacement, mainly by working a MUCH better map. Do you have Skype? I can share some codes with you.

 

This is great! Thanks for sharing man! I really appreciate it!