filters icon indicating copy to clipboard operation
filters copied to clipboard

Support for viewport scaling

Open ShukantPal opened this issue 4 years ago • 1 comments

Our team is implementing a "zoomable" renderer, and for this we require the filter's effects also increase according to the current scale/zoom.

To solve this problem, we multiply certain quantities by the current scale. For example, in motion-blur we multiply the velocity by the current viewport scale.

apply(filterManager, input, output, clear, state) {
 const widthInverse = 1 / state.sourceFrame.width
 const heightInverse = 1 / state.sourceFrame.height

 this.uniforms.velocity[0] = this._velocity[0] * widthInverse
 this.uniforms.velocity[1] = this._velocity[1] * heightInverse

 if (this.viewport) {
    this.uniforms.velocity[0] *= this.viewport.scale.x
    this.uniforms.velocity[1] *= this.viewport.scale.y
  }

  filterManager.applyFilter(this, input, output, clear)
}

We have done this to motion-blur, drop-shadow, bevel and (possibly) others too. Would you guys accept this style on your codebase? (It is a backward-compatible change)

ShukantPal avatar Nov 07 '19 23:11 ShukantPal

Out of interest where are you multiplying this in the dropshadow filter? I'm not having any lock applying this to the offsets.

SamHope1992 avatar Feb 12 '24 06:02 SamHope1992