Question

我的目标是将一个过滤器应用于一个对象，该对象将较小的分辨率纹理作为一个统一的输入，并使其出现在对象上。我的尝试不是显示纹理或抛出错误。

我的过滤器：

class MyFilter extends PIXI.Filter {
  constructor(uniforms) {
    super(null, `
      precision mediump float;

      varying vec2 vTextureCoord;
      uniform sampler2D uSampler;
      uniform sampler2D uTexture;

      void main {
        //vec4 diffuseColor = texture2D(uSampler, vTextureCoord);
        vec4 tex = texture2D(uTexture, vTextureCoord);

        gl_FragColor = vec4(tex.r, tex.g, tex.b, 1.0);
      }
    `, {});
  }
}

实施

let renderer = new PIXI.WebGLRenderer(...);

let g = new PIXI.Graphics();
g.beginFill(0x333333);
g.drawRect(0, 0, 500, 500);
g.endFill();

let texture = PIXI.Texture.fromImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/landscape.jpg");

let myFilter = new MyFilter();
myFilter.uniforms['uTexture'] = texture;
g.filters = [myFilter];

renderer.render(g);

我找到了一个有效的javascript示例： https://jsfiddle.net/nu2k4txr/10/

我猜这个问题与我对滤镜的实现有关，但我无法弄明白，并希望得到任何帮助。

我无法弄清楚如何制作一个TypeScript pixi.js jsFiddle示例。奖励积分。

自定义Pixi.js在TypeScript中过滤，次要纹理均匀

0 个答案: