Sign in to follow this  
motla

Apply a Container alpha to a child Mesh

Recommended Posts

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

Share this post


Link to post
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.

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

Share this post


Link to post
Share on other sites

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 🤘

Share this post


Link to post
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.

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.