PIXI.js 精灵在应用过滤器后失去旋转答案

【问题标题】：PIXI.js sprite loses rotation after applying filterPIXI.js 精灵在应用过滤器后失去旋转
【发布时间】：2021-01-18 09:20:00
【问题描述】：

我首先旋转一个应用了纹理的精灵，然后应用一个带有片段着色器的过滤器，这会导致精灵扭曲。但是，当我将滤镜添加到精灵时，它会旋转到正常的水平位置，而不是之前的角度位置。

我尝试在着色器中应用旋转功能来旋转 uv。这会旋转图像，但会更改旋转部分之外的图像。这是一些截图。

添加和更改角度后精灵的初始外观：

应用过滤器后的样子：

如您所见，旋转已被移除。

我尝试在着色器中添加一个旋转矩阵，结果如下：

旋转是正确的，但只有纹理被旋转，而不是实际的容器。将角度应用回精灵没有任何作用。

实际结果应该是第一张+第二张图片，这样过滤器就会应用于旋转后的精灵。

下面是给图片添加滤镜的代码：

const filter = new PIXI.Filter(null, getTransitionFragmentShader(transition, 2), uniforms);
  filter.apply = function (filterManager, input, output, clear) {
      var matrix = new PIXI.Matrix();
      this.uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(matrix);
      PIXI.Filter.prototype.apply.call(this, filterManager, input, output, clear);
  };

  sprite.filters = [filter];

vec2 rotate(vec2 v, float a) {
                  float s = sin(a);
                  float c = cos(a);
                  mat2 m = mat2(c, -s, s, c);
                  return m * v;
                }

                vec4 transition (vec2 p) {
                  float dt = parabola(progress,1.);
                  float border = 1.;
                  vec2 newUV = rotate(p, angle);
                  vec4 color1 = vec4(0, 0, 0, 0);
                  if (fromNothing) {
                    color1 = vec4(0, 0, 0, 0);
                  } else {
                    color1 = texture2D(uTexture1, newUV);
                  }
                  vec4 color2 = texture2D(uTexture2, newUV);
                  vec4 d = texture2D(displacement,vec2(newUV.x*scaleX,newUV.y*scaleY));
                  float realnoise = 0.5*(cnoise(vec4(newUV.x*scaleX  + 0.*time/3., newUV.y*scaleY,0.*time/3.,0.)) +1.);
                  float w = width*dt;
                  float maskvalue = smoothstep(1. - w,1.,p.x + mix(-w/2., 1. - w/2., progress));
                  float maskvalue0 = smoothstep(1.,1.,p.x + progress);
                  float mask = maskvalue + maskvalue*realnoise;
                  float final = smoothstep(border,border+0.01,mask);
                  return mix(color1, color2, final);
                }

为简洁起见，这是带有省略功能的着色器代码。

谢谢！

【问题讨论】：

标签： javascript webgl pixi.js

【解决方案1】：

我所做的是改为使用顶点着色器进行旋转，如下所示：

attribute vec2 aVertexPosition;

      uniform mat3 projectionMatrix;
      
      varying vec2 vTextureCoord;
      
      uniform vec4 inputSize;
      uniform vec4 outputFrame;
      uniform vec2 rotation;

      vec4 filterVertexPosition( void )
      {
          vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
          vec2 rotatedPosition = vec2(
            position.x * rotation.y + position.y * rotation.x,
            position.y * rotation.y - position.x * rotation.x
          );
      
          return vec4((projectionMatrix * vec3(rotatedPosition, 1.0)).xy, 0.0, 1.0);
      }
      
      vec2 filterTextureCoord( void )
      {
          return aVertexPosition * (outputFrame.zw * inputSize.zw);
      }
      
      void main(void)
      {
          gl_Position = filterVertexPosition();
          vTextureCoord = filterTextureCoord();
      }

旋转作为一对正弦、余弦角 [sine(radians), cosine(radians)] 传递。

【讨论】：