pixi.js: 如何绘制容器轮廓同时保持其内容透明

Question

我有一个容器，其中包含几个包含圆圈的图形。我只想渲染这个容器的轮廓，而不渲染图形本身。

我设法使用 OutlineFilter 绘制轮廓，并使用 AlphaFilter 使容器透明，但无论我以何种顺序添加过滤器，都不能同时使用这两种方法.

Answer 1

这在技术上是不可能的，就像您打算那样做。一个着色器（pixi.js 过滤器）不知道前一个着色器，例如在何处绘制轮廓或原始纹理 alpha 是什么。

或者，您可以使用实现该效果的新着色器创建新滤镜。我基于 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);
}

pixi-filters 演示中的示例结果：

pixi.js: 如何绘制容器轮廓同时保持其内容透明

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

pixi.js