PIXI.js自定义滤镜报错：calculateNormalizedScreenSpaceMatrix不是函数

问题 #

构建自定义着色器时，使用以下代码对屏幕空间做归一化处理，始终抛出错误：filterManager.calculateNormalizedScreenSpaceMatrix is not a function

自定义Filter代码：

let myFilter = new PIXI.Filter(null, fragShader, uniforms);
myFilter.apply = function( filterManager, input, output, clear ){
    let matrix = new PIXI.Matrix();
    this.uniforms.filterMatrix = filterManager.calculateNormalizedScreenSpaceMatrix
    (matrix);
    filterManager.applyFilter(this, input, output, clear);
}

参考的Pixi.js中方法定义：

/** 
 * Multiply vTextureCoord to this matrix to achieve (0,0,1,1) for filterArea 
 * 
 * @param {PIXI.Matrix} outputMatrix - The matrix to output to. 
 * @return {PIXI.Matrix} The mapped matrix. 
 */
calculateNormalizedScreenSpaceMatrix(outputMatrix){
    const currentState = this.filterData.stack[this.filterData.index];
    return filterTransforms.calculateNormalizedScreenSpaceMatrix(
        outputMatrix,
        currentState.sourceFrame,
        currentState.renderTarget.size,
        currentState.destinationFrame
    );
}

请问出现该错误的原因是什么？

原因分析与解决方案 #

• Pixi.js版本不匹配
  你参考的calculateNormalizedScreenSpaceMatrix方法可能仅存在于特定版本的Pixi.js中，若当前使用的版本过低，FilterManager实例不会包含这个方法。请确认使用的Pixi.js版本与参考文档的版本一致，必要时升级到对应版本。

• 语法错误导致方法调用失效
  代码中调用方法时存在不必要的换行：

  this.uniforms.filterMatrix = filterManager.calculateNormalizedScreenSpaceMatrix
  (matrix);
  

  JavaScript会自动在换行处插入分号，导致filterManager.calculateNormalizedScreenSpaceMatrix被当作函数引用而非调用，修正为一行调用即可：

  this.uniforms.filterMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(matrix);
  

• 方法归属对象错误
  部分版本中，calculateNormalizedScreenSpaceMatrix并非直接挂载在FilterManager实例上，而是属于PIXI.filterTransforms模块。如果确认版本仍有问题，可以直接调用底层方法：

  myFilter.apply = function( filterManager, input, output, clear ){
      let matrix = new PIXI.Matrix();
      const currentState = filterManager.filterData.stack[filterManager.filterData.index];
      this.uniforms.filterMatrix = PIXI.filterTransforms.calculateNormalizedScreenSpaceMatrix(
          matrix,
          currentState.sourceFrame,
          currentState.renderTarget.size,
          currentState.destinationFrame
      );
      filterManager.applyFilter(this, input, output, clear);
  }
  

内容的提问来源于stack exchange，提问作者Mr.Coder