Apply a Container alpha to a child Mesh

[motla]

Hello,

Starting back from the Triangle Mesh Example, I would like to add it to a Container, and use the Container.alpha variable to act on my triangle (as it would do with a sprite).

Please see this playground:  https://www.pixiplayground.com/#/edit/5usZGTmqzQ4MtxP~QLUfF

container.addChild(triangle);
container.alpha = 0.5; // <- NOT WORKING (EXCEPT FOR 0.0)

Triangle should be semi-transparent.

What is the good way to do that?

Thanks
Romain

[ivan.popelyshev]

Welcome to the forums!

Congratulations with hitting a problem that is not possible to solve through docs in your first question on this forums.

However, PixiJS is not a black box, it has sources: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L275

OK, either you override _renderDefault, either make "update" function that'll pass calculated alpha to uniform.

https://www.pixiplayground.com/#/edit/dCSAWarvEMdFqWip1BcuO

const shader = PIXI.Shader.from(`
precision mediump float;
attribute vec2 aVertexPosition;
uniform mat3 translationMatrix, projectionMatrix;
void main() {
    gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
}
`,`
precision mediump float;
uniform float alpha;
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha;
}`);

shader.update = function() {
    shader.uniforms.alpha = shader.alpha;
}

 

btw, that code in _renderDefault is low-level pixi over webgl, you can add hack more stuff if you override it

[motla]

Perfect, thank you! Yes I did some research but couldn't find any topic discussing this particular issue. Also thanks for pointing me out the source code function managing this, very helpful.

Great support ?

[motla]

By the way, why not to provide the "alpha" uniform by default like translationMatrix and projectionMatrix? Could it be a feature request?

[ivan.popelyshev]

Its relatively new API, you are the first one who ask to add more features to it.

I believe it was made that way because of MeshMaterial: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/MeshMaterial.js#L146  , you can use "new MeshMaterial({ program: Program.from(...)})" , it has special "update" function that mixes alpha and tint to a single uniform.

MeshMaterial is used by SimpleMesh and other generated meshes. When you have more experience, you can make custom generated meshes too

Also, there are certain things that's better to leave for tutorials or "rights of passage"  Mesh is supposed to be basic class for user-custom things, if we put everything in it - it will stop being an easy one.

However, I agree that we have to put it in wiki or in docs somewhere.