Pixi.js:将alpha应用于模糊的粒子集合

时间:2018-06-13 06:39:58

标签: webgl shader alpha pixi.js

我正在使用Pixi.js在Javascript中渲染Liquidfun粒子系统。我的概念是我有一个带有两条重叠曲线的2D画布,最上面的曲线上有透明度。当用户点击时,2D画布将交换为Pixi画布,并且两个曲线形状的粒子系统会被液化。通过模糊过滤器和溶解。在下面的截图中,它代表动画序列,第一张图片是2D画布,后两张是pixi画布。

enter image description here

我很难在蓝色图层上添加alpha值。黄色在2D和pixi画布中编码为#ffc850。两种颜色均为#008cdc,2D画布中的透明度为0.5。它看起来是一种不同的蓝色,因为我无法应用alpha。

相关代码是更大类的一部分。以下是一些要点。

这是pixi粒子容器和纹理:

addParticlesToPixi() {
    this.pixiParticles.length = 0;
    this.pixiApp.stage.removeChildren();

    this.pixiParticleContainer = new PIXI.particles.ParticleContainer(10000);

    let max = this.world.particleSystems.length;

    const g = new PIXI.Graphics();
    g.beginFill(0, 0).drawRect(0, 0, 50, 50).endFill();
    g.beginFill(0xffffff).arc(25, 25, 10, 0, Math.PI * 2).endFill();
    g.filters = [new PIXI.filters.BlurFilter()];

    const baseTexture = this.pixiApp.renderer.generateTexture(g);

    for (let i = 0; i < max; i++) {
        const system = this.world.particleSystems[i];

        var particles = system.GetPositionBuffer();
        var maxParticles = Math.floor(particles.length / 2);
        console.log(maxParticles);

        for (let j = 0; j < maxParticles; j++)
        {
            let sprite = new PIXI.Sprite(baseTexture);
            sprite.tint = i % 2 === 0 ? 0xffc850 : 0x008cdc;
            this.pixiParticles.push(sprite);
            this.pixiParticleContainer.addChild(sprite);
        }
    }
}

以下是我应用模糊滤镜的方法:

    const sprite = new PIXI.Sprite(this.pixiRenderTexture);
    const filter = new PIXI.Filter(null, blurFragmentShader);
    sprite.filters = [filter];
    this.pixiApp.stage.addChild(sprite);

以下是模糊过滤器:

const blurFragmentShader = `
  precision mediump float;

  varying vec2 vTextureCoord;
  varying vec2 vFilterCoord;

  uniform sampler2D uSampler;

  float normpdf(float x, float sigma) {
      return 0.39894 * exp(-0.5*x*x/(sigma*sigma))/sigma;
  }

  void main() {
      vec4 sample = texture2D(uSampler, vTextureCoord);
      vec3 col = vec3(0.0, 0.75, 0.95);
      if (step(0.3, sample.r) == 1.0) {
          col = vec3(0.95, 0.75, 0.0);
      }
      gl_FragColor = step(0.5, sample.a) * vec4(col, 1.0);
  }
  `;

如何将alpha透明度应用于蓝色区域?

0 个答案:

没有答案