apply shader on rotated sprite

[flagg]

I'm trying to apply a shader on a sprite that must be rotated. In my case, the sprite's texture is just generated from a graphics object with a plain background color. The shader I want to apply would draw scrolling arrows on it (this is to show a conveyor belt movement). My problem is that, when the sprite is rotated, the shader itself is not rotated and is applied to the bound rectangle of the sprite...

Is there a way to do this without resorting to apply the rotation manually in the shader itself?

The attached picture shows the result.

* 1rst rectangle has no custom shader applied.

* 2nd has a simple shader applied

* 3rd is rotated and has no shader applied

* 4rth is identical to 3rd (same dimension, rotation) with simple shader applied. (This is my problem)

The code simply does this after having drawn the rectangle:

 let filter = new PIXI.Filter(undefined, shader, uniforms);

 this.g.filters = [filter];

with the shader code for the test being:

varying vec2 vTextureCoord;

void main(void)

{   gl_FragColor = vec4(vTextureCoord, 0.0, 1.0);    

}

 

As a second option, I tried to draw a repeatable texture with arrows on the graphics object. It tiles in both X&Y axis (I'd rather have only X but I can resize the texture to fit the sprite)  but I couldn't find a way to make the texture scroll as I couldn't find any kind of "offset" property to apply.

Note that I would really like to keep working with basic sprite & graphics and not TilingSprite because I have several different objects which all derive from sprite and I don't want them to inherit from different bases.

[ivan.popelyshev]

YUou need mesh-shader, not filter. https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js

Just make a quad geometry (two triangles) and use UV's .

[flagg]

@ivan.popelyshev thank you so much, Ivan! It works perfectly this way!

I added the mesh as a child to my sprite with the correct dimensions and I can do whatever I want with it.

If anyone comes here wondering the same thing, here is the code to create the geometry:

 

    

const geometry = new PIXI.Geometry()

.addAttribute('aVertexPosition', // the attribute name

    [   -g.model.width/2, -g.model.height/2, // x, y top left

        g.model.width/2, -g.model.height/2, // x, y top right

        g.model.width/2, g.model.height/2, // bottom right

 

        -g.model.width/2, -g.model.height/2, // x, y top left

        g.model.width/2, g.model.height/2, // bottom right

        -g.model.width/2, g.model.height/2], // x, y bottom left

    2) // the size of the attribute

 

.addAttribute('aUvs', // the attribute name

    [0, 0, // u, v

        1, 0, // u, v

        1, 1,

    

        0, 0, // u, v

        1, 1,

        0, 1

    ], // u, v

    2) // the size of the attribute

And the shader

 

const shader = PIXI.Shader.from(`

precision mediump float;

attribute vec2 aVertexPosition;

attribute vec3 aColor;

attribute vec2 aUvs;

 

uniform mat3 translationMatrix;

uniform mat3 projectionMatrix;

 

varying vec3 vColor;

varying vec2 vUvs;

 

void main() {

    vColor = aColor;

    vUvs = aUvs;

    gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

}`,

 

`precision mediump float;

varying vec3 vColor;

varying vec2 vUvs;

 

void main() {

    // gl_FragColor = vec4(vColor, 1.0);

    gl_FragColor = vec4(vUvs.x, vUvs.y, 1.0, 1.0);

}

`

);

And finally the mesh

 

    let mesh = new PIXI.Mesh(geometry, shader);