Jump to content

Apply a Container alpha to a child Mesh


Recommended Posts


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.alpha = 0.5; // <- NOT WORKING (EXCEPT FOR 0.0)

Triangle should be semi-transparent.

What is the good way to do that?


Link to comment
Share on other sites

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.


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

Link to comment
Share on other sites

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.

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...