Sign in to follow this  

Displacement Filter causing Sprite Jump

Recommended Posts

I'm having trouble replicating this, but on some machines (OS X), in Firefox (latest), the mouseover interaction (see codepen) is causing the stage (the image grid) to jump a few pixels. Any insights as to why this is happening? Should I not be handling filters in the manner that I am?

For reference the Filter Animation Code starts on line 147.

What I'm doing, in short, is on mouseover reposition filter sprite to current mouse position, then I'm animating by changing the scale value of the filter and the sprite.

Any idea what could be causing this jump?

const tl = new TimelineMax()
    .set(filter.scale, { x: 0, y: 0 })
    .fromTo(ripple.scale, 1,{ x: .1, y: .1 }, { x: .74, y: .74 }, 'sync')
    .fromTo(filter.scale, 1, { x: 50, y: 50 },{ x: 0, y: 0 }, 'sync')


Share this post

Link to post
Share on other sites

Put a gray 0x808080 edge around your displacement texture to avoid CLAMPing in texture filtering. This displacement is applied over ALL THE SCREEN, but displacement itself is small sprite, and it has non-gray pixel on edge => when displacement shader takes pixel far away in the left - this edge pixel will be taken as example. WebGL stuff. Read WebGL articles to know how it works.

Alternative: use pixi-picture backdrop thingy, apply filter only to background:

Works only with v4, but it seems that you dont use v5 yet ;)

Share this post

Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.