Displacement mapping

[friendlygiraffe 11 Likes (Newbie)]

Hi,

 

I am trying to achieve something similar to this Flash effect, tweening it with Greensock

 

http://www.andysaia.com/radicalpropositions/displacement-maps-in-as3/

 

Is there a reliable HTML5/Javascript equivalent small enough to fit into a banner?

 

Thanks

[Jonathan 5,176 Likes (Superhero)]

Hello friendlygiraffe

 

If you are using SVG. You can use SVG displacement turbulence filter. You would basically be using the GSAP AttrPlugin to animate it

• SVG Displacement and Turbulence:

  See the Pen NqZPwd by jonathan (@jonathan) on CodePen

CSS Filters are not really supported widely in modern browsers yet. I would recommend you look into SVG filters.. since those filters are supported in IE10 and above.. as well as Safari, Chrome, and Firefox

 

Other SVG Filters using GSAP (cross browser):

• SVG Hue Rotate:

  See the Pen MwPzox by jonathan (@jonathan) on CodePen

• SVG Gaussian Blur:

  See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

Resources:

SVG feDisplacementMap: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap

SVG feTurbulence: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence

 

List of SVG filter primitives elements:

<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

 

[friendlygiraffe 11 Likes (Newbie)]

Great! Is that free/available? I have a ShockinglyGreen account

[Jonathan 5,176 Likes (Superhero)]

The GSAP AttrPlugin is included in TweenMax or as a separate plugin for use with TweenLite. It is available to you!

 

Check out the AttrPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

 

[OSUblake 9,990 Likes (Superhero)]

Not sure about fitting in a banner, but PixiJS comes with a displacement filter. Check out the GreenSock logo.

 

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

 

This is what the displacement map looks like.

 

[OSUblake 9,990 Likes (Superhero)]

Ugghhh... Working with SVG filters is painful! There are no good resources available, so you kind of have to guess. There needs to be an SVG Filter Plugin for GSAP!

 

I got a displacement map sort of working. It works in Chrome. In Edge it isn't centered. Fails in Firefox. The way to achieve that ripple is to scale the filter from 100 to 0 while resizing the map from 0 to 150% in size.

 

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

[Dipscom 2,815 Likes (Superhero)]

I have spent a good part of this afternoon and Friday going over SVG filters and it appears that there is not reliable way at the moment to have it working in the major browsers.

 

Some of it works nicely. Like, creating a drop-shadow. But, try getting a blend effect to work and you're out of luck...

[OSUblake 9,990 Likes (Superhero)]

Do you have any good links?

 

Maybe Jonathan can figure this out. He always finds weird quirks.

[Jonathan 5,176 Likes (Superhero)]

SVG Filters are supported in all major modern browsers.. Firefox, Chrome, Safari, and IE10 and above!

 

http://caniuse.com/#feat=svg-filters

 

Blake, Nice job with that ripple SVG displacement filter effect.

 

[OSUblake 9,990 Likes (Superhero)]

Thanks, but I can't get Firefox to apply the displacement map. I've tried everything I can possibly think of.

[Dipscom 2,815 Likes (Superhero)]

OSUblake, good links for stuff that works? I was mostly reading in the w3  page and a couple of other tutorials (1) (2)

 

I did make a little

See the Pen wKXZYE by dipscom (@dipscom) on CodePen

to test stuff but I cannot for the life of me get the blend mode working. I will eventually get back into it and try again, right now a bit burned out on this.

 

Hopefully, I am just being thick at the moment. As Jonathan said, and I am aware of, filters are supported on the current version of all major browsers, it is probably just a case of finding their particular kinks.

[Jonathan 5,176 Likes (Superhero)]

Hello Dipsom,

 

I'm not near my computer right now, but:

 

In your example your not animating SVG Filters. SVG Filters are animated by their attributes. You must use the GSAP AttrPlugin. You are using the GSAP CSSPlugin. To use the AttrPlugin you must specify your attributes in a attr:{} object.

 

You are trying to animate SVG elements that are inside a <def> tag. Those are not directly rendered by the browser, and not directly rendered by CSS according to the SVG spec.

 

In your example, what your trying to animate is a SVG gradient and not a SVG filter.

 

But keep in mind any SVG element or shape inside a <def>, <symbol>, or <use> tag are not directly rendered with CSS, only their attributes are.

 

So you must use the AttrPlugin to animate the offset and color attribute, to animate the SVG gradient in your example

 

AttrPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

 

SVG radial gradient spec: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient

 

SVG def tag spec: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

Once I'm near my computer I will take a look at your example more.

 

[Dipscom 2,815 Likes (Superhero)]

Hi Jonathan,

 

My apologies, the pen is rather misleading. I am not trying to animate the filter itself at all, right now I am struggling to get the feBlend to work - and because it is NOT GSAP related, I didn't come crying for help here (saying that, I should dive into stackoverflow to see what people say there).

 

The animation I will add once I get the feBlend to work is for the <g> group. And that will be a completely different ball game. That, as far as I know, works absolutely fine and Jack helped me out on that one already.

 

[Jonathan 5,176 Likes (Superhero)]

Ok i understand

 

In that case you can use the CSS property mix-blend-mode. All that does is allow you to set different blending modes like how you would do in Photoshop on a layer.

 

You can see in this example i am using mix-blend-mode: screen in my CSS on some SVG <circle> tags so when they overlap all the colors become white.

 

See the Pen EVgYbB by jonathan (@jonathan) on CodePen

 

svg circle {
  /* CSS blending like Photoshop */
  mix-blend-mode: screen;
}

A list of the various CSS mix-blend-modes:

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Again keep in mind that CSS mix-blend-mode will only work on SVG elements that are not inside a <def>, <symbol>, and <use> tag.

 

[OSUblake 9,990 Likes (Superhero)]

I give up! I can't make any sense of displacement maps in SVG. I thought the map might need to be a power of 2 in size like with WebGL, but that didn't seem to make a difference. Then I tried making Mario Kart, and it sort of worked in Firefox but not in Chrome. 

 

 

It's on the front page of CodePen right now, so maybe somebody will come across it and provide a little assistance. If somebody can figure out how to make this work consistently across all browsers, you will be able to do some pretty cool effects like in WebGL. For example, here's what happens when you use a simple swirl map.

 

 

 

[OSUblake 9,990 Likes (Superhero)]

Score!!! Figured the problem out. The map needs to be base64 because of security, so I made a function to convert it. Now it will work in all browsers.

 

See the Pen WQyBJb?editors=001 by osublake (@osublake) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Have you tried using image displacement maps without color. Usually when making displacement maps, especially for 3D programs like Maya. Displacement maps are usually grayscale or have opaque color. Since in 3D programs such as Maya, it really just looks at the luminance of the color information in the RGB channels of the image.

 

Sometimes with SVG Filters you might have to stack different SVG filters on top each other to get a desired effect. Basically combining SVG filter primitives. Just like you would do in Photoshop with layers with different Filters to achieve a certain look or effect. If you look at my answer above I list the various SVG filter primitives available.

 

Have a look at this article from the W3C on SVG Filters. In might be of help:

 

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Filters2.htm#S21

 

And these other helpful links on SVG Filters:

 

http://srufaculty.sru.edu/david.dailey/svg/newstuff/Newlist.htm

 

http://srufaculty.sru.edu/david.dailey/svg/#Filters

 

http://srufaculty.sru.edu/david.dailey/svg/texture/texturepage.htm

 

[OSUblake 9,990 Likes (Superhero)]

Awesome links, Jonathan!!!

 

MDN is usually a good place to get info, but those primitive links are kind of useless. There really isn't any info about how to use them. However, those links you just provided are incredible! Did you look at the waves demo? That's kind of like what I just did.

 

http://srufaculty.sru.edu/david.dailey/svg/waves.html

 

I haven't tried a displacement map without color. I know you can select the alpha channel in SVG, but all the maps I've used are red and green on top of some other background color. I've actually never made one myself because I can usually find one already made that fits my needs.

[Jonathan 5,176 Likes (Superhero)]

Cool glad you like the links Blake!  There is a lot of great information on SVG filters in there. The W3C is not that great at providing examples, or giving access to them. But im glad they can help. Just keep in mind that some of the examples and info are from 2006 so somethings might have changed in the spec. But they are a great resource

[alexg 0 Likes (Newbie)]

Hey Guys, good to see a Topic on displacement here!

Ive started another one, which is specific to creating the maps (not the filter itself). I would appreciate if anyone can give some inputs there! ; )

http://greensock.com/forums/topic/14973-fedisplacementmap-creating-the-map/

best

 

Awesome links, Jonathan!!!

 

MDN is usually a good place to get info, but those primitive links are kind of useless. There really isn't any info about how to use them. However, those links you just provided are incredible! Did you look at the waves demo? That's kind of like what I just did.

 

http://srufaculty.sru.edu/david.dailey/svg/waves.html

 

I haven't tried a displacement map without color. I know you can select the alpha channel in SVG, but all the maps I've used are red and green on top of some other background color. I've actually never made one myself because I can usually find one already made that fits my needs.