Mesh + Graphics Render Issue

[blakjak44]

This is related to my previous question:

I have my meshes rendering perfectly. Each of my meshes are using two uint16 textures in a custom shader and I pass the textures as uniforms with a sampler type of "usampler2D". Now when I try to render any other PIXI.Graphics objects, the graphics objects will not render and I receive an error complaining that the texture being sampled is not of the correct format for the sampler type. If I remove one of the textures and only render one texture, then the graphics object will display.

I'm sure my code is creating some issue with the WebGL state and bound textures but rather than spend more time digging through the source, I figure it would be faster if someone experienced can take a look. Hopefully it's a simple fix. I've reproduced the issue in the demo below:

https://www.pixiplayground.com/#/edit/xpLx-ElnpPPPXFJUkxoRa

[ivan.popelyshev]

Yep, that's the actual bug of multisampler

Edited March 4, 2021 by ivan.popelyshev

[ivan.popelyshev]

PR for v6 is here: https://github.com/pixijs/pixi.js/pull/7273

Maybe we'll cherry-pick it for v5.3.9

Workaround for now: add extra mesh with two textures that uses two PIXI.Texture.WHITE with standard shader. It will reset current state of bound textures.

[blakjak44]

@ivan.popelyshev

Thanks for the quick PR! It would be much appreciated if this fix could be bundled into v5.3.9

As for the workaround, I've tried implementing what you suggested but can't get it to work. I'm not sure what is the correct way to pass the 2 textures. I have tried the 2 methods below.

const arrayResource = new PIXI.resources.ArrayResource([PIXI.Texture.WHITE, PIXI.Texture.White])
const arrayBase = new PIXI.BaseTexture(arrayResource)
const arrayTex = new PIXI.Texture(arrayBase)

const dummyUniforms = PIXI.UniformGroup.from({ uSampler: arrayTex })
const dummyShader = PIXI.Shader.from(null, null, dummyUniforms )
const dummyGeometry = new PIXI.MeshGeometry(
    new Float32Array([0, 0, 300, 0, 300, 300, 0, 300]),
    new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
    new Uint16Array([0, 1, 2, 0, 3, 2])
)
const dummyMesh = new PIXI.Mesh(dummyGeometry, dummyShader)

const dummyUniforms = PIXI.UniformGroup.from({ uSampler: PIXI.Texture.WHITE, uSampler1: PIXI.Texture.WHITE })
const dummyShader = PIXI.Shader.from(null, null, dummyUniforms )
const dummyGeometry = new PIXI.MeshGeometry(
    new Float32Array([0, 0, 300, 0, 300, 300, 0, 300]),
    new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
    new Uint16Array([0, 1, 2, 0, 3, 2])
)
const dummyMesh = new PIXI.Mesh(dummyGeometry, dummyShader)

Would you mind pointing out what I am doing wrong?

[ivan.popelyshev]

maybe it doesnt actually rebind textures because shader doesnt have them in uniform list.

Lets try direct approach.

const dummy = new PIXI.Container();
dummy._render = (renderer) => {
    renderer.texture.bind(PIXI.Texture.WHITE.baseTexture, 0);
    renderer.texture.bind(PIXI.Texture.WHITE.baseTexture, 1);
}

containerWithMeshes.addChild(dummy);

I checked in playground, it works.

Edited March 5, 2021 by ivan.popelyshev

[blakjak44]

Beautiful, that did the trick! Thanks!

One other related question: Currently I am setting the textures in my mesh each with their own individual sampler name (e.g. sampler1, sampler2). I would prefer accessing the textures in my shader using index notation (e.g. samplers[i]). How should I set my textures to accomplish this? I know this is what's done for batch rendering but I couldn't quite figure out where the textures are set. Would the ArrayResource be the proper way to do this?

[ivan.popelyshev]

I dont remember whether pixi can auto-map samplers like that, probably `uniforms: { uSamplers: new Float32Array([0, 1]) }` and manual binding of those two textures in Mesh in corresponding slots should work. Like i did with dummy, you can override _render and add texture binding there.

No, ArrayResource is not related to the case.

[blakjak44]

Interesting. I'll give it a try, thanks!