copyTextureToTexture alpha issue

Questions
1

I have a few different layers I want to combine into a single texture at runtime.
The pictures are simple png’s with transparent background.

  private async addStuff() {
    const red: THREE.CanvasTexture = await this.loadTexture('red.png');
    const blue: THREE.CanvasTexture = await this.loadTexture('blue.png');

    this._renderer.copyTextureToTexture(new THREE.Vector2(0, 0), red, blue);

    this.addMesh(blue);
  }

  private async loadTexture(url: string) {
    const bitmap = await this._imageBitmapLoader.loadAsync(url);
    return new THREE.CanvasTexture(bitmap);
  }

  private addMesh(tex: THREE.Texture) {
    const geo = new THREE.PlaneGeometry(1024, 1024);
    const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true });
    const mesh = new THREE.Mesh(geo, mat);
    this._scene.add(mesh);
  }

But only the red parts are visible in the ‘blue’ texture after this operation, seems like transparency is lost.

If I just put the separate textures on different overlapping tiles without doing copyTextureToTexture, everythings works as expected.

Anyone have any ideas on how I can solve this?

2

copyTextureToTexture does what its name says, it copies values from one texture to the other, which means it’s overwriting all the values.
You’ll need to read the pixels from both canvas textures using context.getImageData, calculate the new values for each pixel using the opacity values from each texture, then use context.putImageData to write these new values to the desired texture.

3

Thx for the clarification, will try with what you described