Extra texture uniform to Fragment Shader #10358

DominikKoller · 2024-03-21T17:01:55Z

DominikKoller
Mar 21, 2024

Hi! I'm new to Pixi.

I'm trying to pass a texture to a Fragment shader, and I keep failing.
I want just a texture effect, so I copied the example from here:
https://pixijs.com/8.x/examples/filters-advanced/custom

const filter = new Filter({
        glProgram: new GlProgram({
            fragment,
            vertex,
        }),
        resources: {
            timeUniforms: {
                uTime: { value: 0.0, type: 'f32' },
            },
        },
    });

My first question here is:
Why can this not be written as

const uniforms = { uTime: { value: 0.0, type: 'f32' } }
const filter = new Filter(fragment, vertex, uniforms)

?

Now I am trying to pass an extra texture to the fragment shader, like so:

await PIXI.Assets.load('./extraTexture.png');
const extraTexture = PIXI.Texture.from('./extraTexture.png');

const invertFilter = new PIXI.Filter({
        glProgram: new PIXI.GlProgram({
            fragment: fragmentShaderSource,
            vertex: vertexShaderSource
        }),
        resources: {
            uniforms: {
                uExtraTexture: { value: extraTexture  },
            },
        },
    });

I have tried uniforms: { uExtraTexture: extraTexture, },
or adding
uniforms: { uExtraTexture: { value: extraTexture, type: 'sampler2D' }, },

But none of this seems to work. All the examples I can find use a different syntax, without the GlProgram constructor, like here:
https://stackoverflow.com/questions/64072964/passing-textures-to-fragment-shader-in-pixi-js

But changing to this syntax seems to break the custom shader example I am basing my code on:
https://pixijs.com/8.x/examples/filters-advanced/custom

This is currently my fragment shader (note I am not using uTexture at all, this is just to simplify, in the end I will need both):

in vec2 vTextureCoord;
in vec4 vColor;

uniform sampler2D uTexture;
uniform sampler2D uExtraTexture;

void main(void)
{
    vec2 uvs = vTextureCoord.xy;

    vec4 fg = texture2D(uExtraTexture, vTextureCoord);

    gl_FragColor = fg;

}

Thank you!

Gerwinnz · 2025-04-29T08:30:04Z

Gerwinnz
Apr 29, 2025

I've been hitting the same problem and I think I may have just figured it out. Some of the examples in the API docs are partially right but not entirely and then like you I've been working off the same example that shows a shader actually working so my resources has an object with each of the uniforms inside of it like this:

u_ambient_strength: { value: 0.5, type: 'f32' }

It seems that textures can be passed in the resources object as a stand alone item as shown in the example here: https://pixijs.com/8.x/examples/mesh-and-shaders/shared-shader

Judging from your fragment shader all you need to do is:

const invertFilter = new PIXI.Filter({
    glProgram: new PIXI.GlProgram({
        fragment: fragmentShaderSource,
        vertex: vertexShaderSource
    }),
    resources: {
	uExtraTexture: extraTexture  
    }
});

This is how I am passing my texture to my shader which works but in my test I am doing this to get the texture:

const asset= await PIXI.Assets.load(OBJECT_PATH + 'normal.png');

and

resources: {
	uNormal: asset.source
}

Anyway, really hope this helps/works for you!!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extra texture uniform to Fragment Shader #10358

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Extra texture uniform to Fragment Shader #10358

DominikKoller Mar 21, 2024

Replies: 1 comment

Gerwinnz Apr 29, 2025

DominikKoller
Mar 21, 2024

Gerwinnz
Apr 29, 2025