Using Container As Height/Normal Map In Filter

[Steve C]

Question: I am working on a project in Pixi where I am managing a set of overlapping semi-translucent "brush strokes" on-screen.

Each brush stroke is represented as two Sprites in two different Containers:

The first Container (the "color map") keeps track of the colors and how they overlap and blend (since strokes can be semi-transparent).

The second Container (the "height map") renders the same strokes but in white at high opacity to keep track of how "deep" the strokes are overlapping.

I'm trying to use the height map data to calculate normals and shade the color data to give it a 3D effect with a Filter attached to the first Container.

However, when I try and pass the height map Container as a sampler2D uniform, it seems to only take the texture of the very first Sprite in the Container (and he coordinates get all wacky) rather than the pixel data of the entire Container.

How would I go about passing the height map Container's pixel data into to the color map Container's Filter in order to do this?

[ivan.popelyshev]

Its possible through usage of renderTextures - you have to render second container , and give a new sprite with that renderTexture to a filter (add that sprite to stage too). Alternatively, use pixi-layers and useRenderTexture feature - that'll render layer into separate renderTexture and you can give it to a filter, again.

For more advices, I actually need to see the demo.

Edited July 24, 2020 by ivan.popelyshev

[Exca]

https://pixijs.io/examples/#/mesh-and-shaders/multipass-shader-generated-mesh.js

That example has a texture that gets passed to next shader. You should do similar but instead of shader rendered texture you would render your heightmap into a texture and then pass that texture to your shader.