Accessing textures in PIXI.Filter fragment shader

[moritzsalla]

I'm trying to pass an image texture to my fragment shader (PIXI.Filter) but it won’t draw.

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

loader.load((loader, resources) => {
  const uniforms = {
    u_resolution: [this.app.screen.width, this.app.screen.height],
    u_texture0: resources[KEY].texture
  };

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

  console.log(resources[KEY].texture.valid); // true
});

uniform sampler2D u_texture0;

void main(void) {
  vec4 color = texture2D(u_texture0, vTextureCoord);
  gl_FragColor = color;
}

uSampler will work fine for accessing the previous pass but ultimately I’ll want to draw stuff to a buffer and pass to the shader as a texture uniform.

Seems like you can only access uSampler in shaders invoked by that PIXI.Filter class, no other textures?

[eXponenta]

You can use displacement filters as ref and all will be ok.

You can pass texture as uniforms, but should know that first binding ALWAYS is filter source.

https://github.com/pixijs/pixijs/blob/dev/packages/filters/filter-displacement/src/DisplacementFilter.ts

[moritzsalla]

Hi @eXponenta, thanks for your response! I am a little confused as to why I would use a displacement filter here. My goal is to copy the contents of the framebuffer to a different image after doing my first pass rendering (making an ellipse at the cursor position).

[eXponenta]

Displacement filter is basic multitexture filter sample (how to use different texture inside filter).
But you should know that you can't read pixels under filtrable object automatically, for this you should manually pass previous rendertarget.

But really i not understand what you want.

[ivanpopelyshev]

well you can, but you need pixi-picture displacement, look up in examples

[moritzsalla]

Ok, I'll have another look at the displacement example, thank you both for clarifying.

[hxg2050]

varying vec2 vTextureCoord;
uniform sampler2D u_texture0;

void main(void) {
vec4 color = texture2D(u_texture0, vTextureCoord);
gl_FragColor = color;
}

shader.uniformGroup.update();