diff --git a/packages/filters/filter-displacement/src/DisplacementFilter.js b/packages/filters/filter-displacement/src/DisplacementFilter.js index ec5c6e0..3bd25b8 100644 --- a/packages/filters/filter-displacement/src/DisplacementFilter.js +++ b/packages/filters/filter-displacement/src/DisplacementFilter.js @@ -37,6 +37,7 @@ mapSampler: sprite._texture, filterMatrix: maskMatrix, scale: { x: 1, y: 1 }, + rotation: new Float32Array([1, 0, 0, 1]), }); this.maskSprite = sprite; @@ -67,6 +68,19 @@ this.uniforms.scale.x = this.scale.x; this.uniforms.scale.y = this.scale.y; + // Extract rotation from world transform + const wt = this.maskSprite.transform.worldTransform; + const lenX = Math.sqrt((wt.a * wt.a) + (wt.b * wt.b)); + const lenY = Math.sqrt((wt.c * wt.c) + (wt.d * wt.d)); + + if (lenX !== 0 && lenY !== 0) + { + this.uniforms.rotation[0] = wt.a / lenX; + this.uniforms.rotation[1] = wt.b / lenX; + this.uniforms.rotation[2] = wt.c / lenY; + this.uniforms.rotation[3] = wt.d / lenY; + } + // draw the filter... filterManager.applyFilter(this, input, output); } diff --git a/packages/filters/filter-displacement/src/DisplacementFilter.js b/packages/filters/filter-displacement/src/DisplacementFilter.js index ec5c6e0..3bd25b8 100644 --- a/packages/filters/filter-displacement/src/DisplacementFilter.js +++ b/packages/filters/filter-displacement/src/DisplacementFilter.js @@ -37,6 +37,7 @@ mapSampler: sprite._texture, filterMatrix: maskMatrix, scale: { x: 1, y: 1 }, + rotation: new Float32Array([1, 0, 0, 1]), }); this.maskSprite = sprite; @@ -67,6 +68,19 @@ this.uniforms.scale.x = this.scale.x; this.uniforms.scale.y = this.scale.y; + // Extract rotation from world transform + const wt = this.maskSprite.transform.worldTransform; + const lenX = Math.sqrt((wt.a * wt.a) + (wt.b * wt.b)); + const lenY = Math.sqrt((wt.c * wt.c) + (wt.d * wt.d)); + + if (lenX !== 0 && lenY !== 0) + { + this.uniforms.rotation[0] = wt.a / lenX; + this.uniforms.rotation[1] = wt.b / lenX; + this.uniforms.rotation[2] = wt.c / lenY; + this.uniforms.rotation[3] = wt.d / lenY; + } + // draw the filter... filterManager.applyFilter(this, input, output); } diff --git a/packages/filters/filter-displacement/src/displacement.frag b/packages/filters/filter-displacement/src/displacement.frag index 36d559c..9f7f2c3 100644 --- a/packages/filters/filter-displacement/src/displacement.frag +++ b/packages/filters/filter-displacement/src/displacement.frag @@ -2,6 +2,7 @@ varying vec2 vTextureCoord; uniform vec2 scale; +uniform mat2 rotation; uniform sampler2D uSampler; uniform sampler2D mapSampler; @@ -13,7 +14,7 @@ vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; - map.xy *= scale * inputSize.zw; + map.xy = scale * inputSize.zw * (rotation * map.xy); gl_FragColor = texture2D(uSampler, clamp(vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y), inputClamp.xy, inputClamp.zw)); }