Pixi.js: ParticleContainer - 'children.visible' issue.

[prachtan]

Different behaviour when using CanvasRenderer / WebGLRenderer.

CanvasRenderer check 'children.visible' property and skip invisible childrens.
WebGLRenderer doesn't care about visibility flag and draw everything.

[ivanpopelyshev]

where exactly? https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L397

[prachtan]

ParticleContainer, not regular container...

https://github.com/pixijs/pixi.js/blob/dev/src/particles/ParticleContainer.js#L235
vs
https://github.com/pixijs/pixi.js/blob/dev/src/particles/webgl/ParticleRenderer.js#L231

[ivanpopelyshev]

For CanvasRenderer, ParticleContainer = Container. For WebGLRenderer it differs: it renders all the particles in one pass, and their place in the buffer is fixed. It assumes that all particles are visible.

[prachtan]

I know that :) and that was the reason why i was interested in using this to render whole scene from one texture atlas in one draw call...

Ok, now I read all classes from particle.* and see how it works.

Is it possible to cull/clip invisible triangles in vertexshader?
https://github.com/pixijs/pixi.js/blob/dev/src/particles/webgl/ParticleShader.js#L39

[GoodBoyDigital]

Hello! A regular container will batch it up into one draw call if all objects use the same texture too!

[englercj]

@prachtan the benefit of ParticleContainer is that all the transforms are done on the GPU, and (usually) less information is uploaded. visible is an example of a property that is not honored, because ParticleContainer assumes you are drawing all of the particles in it, if you want to hide/show stuff or use more advanced features use a Container.

Note, from the docs:

ParticleContainer implements only the basic object transform (position, scale, rotation). Any other functionality like tinting, masking, etc will not work on sprites in this batch.

[prachtan]

Thx! I'm new in js world and webgl, and I see, that I have to read the whole code before i start asking stupid questions :)

But, I still think it's possible to resolve this issue _(different behaviour on different renderers and maybe boost a bit performance)_ by adding two simple lines:

Before that line:
https://github.com/pixijs/pixi.js/blob/dev/src/particles/webgl/ParticleShader.js#L33

Check the alpha value for particle _(it's pointless to calculate vertex position and execute fragment shader for invisible particles where alpha == 0)_ and move vertex outside the clipping space if (aColor == 0):

if (aColor == 0.0) { gl_Position = vec4(-2.0, -2.0, 0.0, 1.0); return; }

_(after that, whole triangle should be clipped and fragment shader shouldn't be executed - performance boost for particles with alpha = 0... or I'm completely wrong about webgl :) )_

and test for visibility here _(for compatibility reason)_:
https://github.com/pixijs/pixi.js/blob/dev/src/particles/webgl/ParticleRenderer.js#L392

const spriteAlpha = (children[startIndex + i].visible ? children[startIndex + i].alpha : 0.0);

_of course to use this for visible property, the 'properties.alpha' must be set as true in ParticleContainer's constructor_

And besides, thanks for all the comments and explanations for the newbie 👍

[englercj]

read the whole code before i start asking stupid questions

Your questions are certainly not stupid. Pixi is complex and large, and we are here to help :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.