pixi.js: how to draw outline of container while keeping its content transparent

Question

I have a container with several graphics containing circles. I would like to only render this container's outline, without the graphics themselves.

I managed to draw the outlines using OutlineFilter, and I managed to make the container transparent using AlphaFilter, but not both at the same time, no matter in which order I added the filters.

Answer 1

That is technically not possible like you intend to do it. One shader (pixi.js filter) doesn't know about the previous shader, such as where the outline was painted or what is the original texture alpha.

Alternatively you can create a new filter with a new shader that achieves that effect. I'm basing this on the OutlineFilter:

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

uniform vec2 thickness;
uniform vec4 outlineColor;
uniform vec4 filterClamp;

const float DOUBLE_PI = 3.14159265358979323846264 * 2.;

void main(void) {
    vec4 ownColor = texture2D(uSampler, vTextureCoord);
    vec4 curColor;
    float maxAlpha = 0.;
    vec2 displaced;
    for (float angle = 0.; angle <= DOUBLE_PI; angle += 0.1) {
        displaced.x = vTextureCoord.x + thickness.x * cos(angle);
        displaced.y = vTextureCoord.y + thickness.y * sin(angle);
        curColor = texture2D(uSampler, clamp(displaced, filterClamp.xy, filterClamp.zw));
        maxAlpha = max(maxAlpha, curColor.a);
    }
    float resultAlpha = maxAlpha * step(ownColor.a, 0.0) > 0. ? 1. : 0.0;

    gl_FragColor = vec4(outlineColor.rgb * resultAlpha, resultAlpha);
}

Example result as in the pixi-filters demos: