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