在PIXI.Filter片段着色器中访问自定义纹理无法正常绘制问题

PIXI.Filter 完全支持自定义纹理 uniform 传入，不存在仅允许访问内置 uSampler 的限制，你遇到的纹理无法正常绘制的问题是代码实现错误导致的，核心问题有两个：

• 你的片段着色器中没有显式声明默认顶点着色器输出的 varying vec2 vTextureCoord; 变量，导致代码中用到的 vTextureCoord 属于未定义变量，采样结果自然异常。
• vTextureCoord 是 PIXI 为内置 uSampler（即当前滤镜作用的目标渲染内容）提供的纹理坐标，和你自定义传入的纹理的 UV 空间不一定匹配，若自定义纹理尺寸和滤镜作用的画布/容器尺寸不一致，会出现采样错位、空白等问题。

修正后的可运行代码示例 #

JS逻辑部分 #

const loader = PIXI.Loader.shared;
const KEY = 'testImg';
loader.add(KEY, testImg);

loader.load((loader, resources) => {
  const targetTexture = resources[KEY].texture;
  const uniforms = {
    u_resolution: [this.app.screen.width, this.app.screen.height],
    u_texture0: targetTexture,
    // 新增自定义纹理尺寸uniform，用于UV适配
    u_texture_size: [targetTexture.width, targetTexture.height]
  };

  const shader = new PIXI.Filter('', contourShader.frag, uniforms);
  this.app.stage.filters = [shader];
});

片段着色器部分 #

// 必须显式声明PIXI默认顶点着色器输出的纹理坐标变量
varying vec2 vTextureCoord;
uniform sampler2D u_texture0;
uniform vec2 u_resolution;
uniform vec2 u_texture_size;

void main(void) {
  // 计算等比适配的UV，避免拉伸
  vec2 scaleRatio = vec2(min(u_resolution.x / u_texture_size.x, u_resolution.y / u_texture_size.y));
  vec2 adaptedUV = (vTextureCoord - (vec2(0.5) - scaleRatio * u_texture_size / u_resolution / 2.0) * 2.0) / (scaleRatio * u_texture_size / u_resolution);
  
  // 超出纹理范围的区域输出透明
  if (adaptedUV.x < 0.0 || adaptedUV.x > 1.0 || adaptedUV.y < 0.0 || adaptedUV.y > 1.0) {
    gl_FragColor = vec4(0.0);
  } else {
    gl_FragColor = texture2D(u_texture0, adaptedUV);
  }
}

渲染缓冲区（RenderTexture）传入说明 #

后续你需要将渲染到缓冲区的内容作为纹理传入时，用法和上述静态纹理完全一致，只要保证传入的RenderTexture已完成渲染、状态有效即可，不需要做额外的适配处理。

内容的提问来源于stack exchange，提问作者msalla