Jump to content

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


Link to comment
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 ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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