Jump to content
Search Community

Displacement mapping

friendlygiraffe test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • Solution

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

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

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>

 

:)

  • Like 5
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

 

:)

  • Like 1
Link to comment
Share on other sites

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.

 

:)

  • Like 1
Link to comment
Share on other sites

Ok i understand :D

 

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.

 

:)

  • Like 1
Link to comment
Share on other sites

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. 

 

qRlvdij.png

 

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.

 

uJudBuX.png

 

 

  • Like 2
Link to comment
Share on other sites

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

 

:)

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 9 months later...

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.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...