galacean / engine

A typescript interactive engine, support 2D, 3D, animation, physics, built on WebGL and glTF.
https://galacean.antgroup.com/engine
MIT License
4.2k stars 299 forks source link

Particle material blending appears incorrect when background isn't fully opaque #2022

Open JujieX opened 7 months ago

JujieX commented 7 months ago

Describe the bug Particle Material Blend Wrong when background alpha is not 1

To Reproduce

WebGLEngine.create({
  canvas: "canvas",
  physics: new LitePhysics(),
  input: { pointerTarget: document },
}).then((engine) => {
  engine.canvas.resizeByClientSize();

  const scene = engine.sceneManager.activeScene;
  const rootEntity = scene.createRootEntity();
  const { background } = scene;
  // 添加纯色背景
  background.mode = background.SolidColor; // 默认纯色背景
  background.solidColor.set(0, 0, 0, 0); // 纯白色

  // Create camera
  const cameraEntity = rootEntity.createChild("camera_entity");
  cameraEntity.transform.position = new Vector3(0, 0, 5);
  const camera = cameraEntity.addComponent(Camera);
  camera.farClipPlane = 100;
  camera.nearClipPlane = 0.01;

  engine.resourceManager
    .load({
      url: "https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*j6MERb-exVgAAAAAAAAAAAAADtKFAQ/original",
      type: AssetType.Texture2D,
    })
    .then((texture: Texture2D) => {
      const rootEntity = engine.sceneManager.activeScene.getRootEntity();

      const mtl = new ParticleMaterial(engine);
      mtl.baseTexture = texture;
      mtl.blendMode = BlendMode.Additive;

      const particleEntity = rootEntity.createChild();
      const particleRenderer = particleEntity.addComponent(ParticleRenderer);
      particleRenderer.setMaterial(mtl);

      engine.run();
    });
});

Screenshots image