Recursive Container approaches

[autr]

Hello, this isn't an issue per-se - so please lock if it's a problem! Instead I was hoping to get some advice on how to implement filter blend modes on Containers that recursively contain more Containers - and then multiple Sprites.

What I'm basically trying to do is simulate how inks interact when layered on top of each other (ie. screen blending), so for this the structure of my Stage might look something like this:

[Container] Layer 3 - Container with filter shader (Cyan)
        [Container] *Common Ref
                [Sprite] Image A
                [Sprite] Image B
                [Sprite] Image C
[Container] Layer 2 - Container with filter shader (Magenta)
        [Container] *Common Ref
                [Sprite] Image A
                [Sprite] Image B
                [Sprite] Image C
[Container] Layer 1 -  with filter shader (Yellow)
        [Container] *Common Ref
                [Sprite] Image A
                [Sprite] Image B
                [Sprite] Image C

Each here each Layer needs to have screen blending, so the CMY inks combine correctly.

Since the picture blend modes are implemented in the shader and on Sprites only - would my best bet be to export the layers to pixel data, then load those into Sprites with the blend mode? Or is there another way I might be able to do this with less overhead?

Thanks and keep up the good work! Gilbert

[ivanpopelyshev]

var filter = new AlphaFilter(); filter.blendMode = PIXI.BLEND_MODES.SCREEN; container.filtrers = [filter]

that's for usual porter-duff blend_modes. Please specify exact filter you need "CMY inks combine correctly" - i'm not proficient with photoshop and other things, i know which shaders we have but not more )

[autr]

It's a bit of trial-and-error, but generally MULTIPLY if light background, SCREEN if dark background does the job. Temporarily I tried something like this:

	async function createBlendModed() {
		for (const o of inkLayerGroups) {
			let renderTexture = PIXI.RenderTexture.create({ width, height })
			await pixi.app.renderer.render(o, { renderTexture } );
			let sprite = await Sprite.from( renderTexture )
			sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY
			quik.blendedSprites.addChild( sprite )
		}
	}

Which works perfectly - though I do it on a debounce event so the canvas updates with the blended view after a delay, since doing this on each animation frame would kill it.

Thank you for the heads up on AlphaFilter - I will test tomorrow morning and report back!