v4, pass region of texture to filter along with position of sprite

[hashi]

I have simple Filter and need to make access in shader to data:

- position of sprite / mesh of Stage

- textureRegion rectangle info

How to do this?

 

var fragSrc = `
    precision mediump float;
    varying vec2 vTextureCoord;
    uniform sampler2D uSampler;
    uniform vec2 dimensions;
    uniform vec4 filterArea;

    uniform vec4 texRegion;

    vec2 mapCoord( vec2 coord ) {
      return coord * filterArea.xy;
    }

    vec2 unmapCoord( vec2 coord ) {
      return coord / filterArea.xy;
    }

    void main() {
      vec2 coord = vTextureCoord;
      coord = mapCoord(coord) / dimensions;
      coord = unmapCoord(coord * dimensions);

      vec4 color = texture2D( uSampler, coord );

      gl_FragColor = color;
    }
  `.split('\n').reduce( (c, a) => c + a.trim() + '\n' );

  module.exports = RepeatRegionFilter = function RepeatRegionFilter() {
    RepeatRegionFilter.super_.call(this, null, fragSrc);
  }

  Util.inherits(RepeatRegionFilter, PIXI.Filter);

  RepeatRegionFilter.prototype.apply = function(filterManager, input, output) {
    this.uniforms.dimensions[0] = input.sourceFrame.width;
    this.uniforms.dimensions[1] = input.sourceFrame.height;

    filterManager.applyFilter(this, input, output);
  }

 

[ivan.popelyshev]

====

Please consult pixi wiki about filters. Please look at DisplacementFilter sources.

[ivan.popelyshev]

as for textureRegion, please look at SpriteMaskFilter:https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js

[ivan.popelyshev]

As alternative, look if you actually need custom renderer plugin, and not filter. Filter is supposed to be applied to containers and use extra framebuffer. https://github.com/pixijs/pixi-plugin-example  - you can just make shader for a sprite or for mesh based on MeshRenderer in pixi. MeshRenderer works with texture regions: https://github.com/pixijs/pixi.js/blob/dev/src/mesh/webgl/MeshRenderer.js it uploads the texture matrix. 

Also, v5 RawMesh: http://pixijs.io/examples/?v=next#/mesh/triangle-color.js  , you need pixi-v5 (next) branch for that. However, there're no textureRegion examples for it. just pass there correct UVs

[ivan.popelyshev]

Summary: all examples are complicated. We'll fix it in v5. For now, you have to really understand the code, there's no clear API about it.