Jump to content

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


Recommended Posts

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);


Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...