motla Posted September 5, 2019 Share Posted September 5, 2019 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 and jonforum 2 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 5, 2019 Share Posted September 5, 2019 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 tangshanghai, motla and jonforum 3 Quote Link to comment Share on other sites More sharing options...
motla Posted September 5, 2019 Author Share Posted September 5, 2019 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 ? Quote Link to comment Share on other sites More sharing options...
motla Posted September 5, 2019 Author Share Posted September 5, 2019 By the way, why not to provide the "alpha" uniform by default like translationMatrix and projectionMatrix? Could it be a feature request? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 5, 2019 Share Posted September 5, 2019 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. motla 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.