Image with another image overlaid

Show an image with another image overlaid with alpha blending.

Imageio: 'coffee.png' was not found on your computer; downloading it now.
Try 1. Download from https://github.com/imageio/imageio-binaries/raw/master/images/coffee.png (441 kB)
Downloading: 8192/451102 bytes (1.8%)451102/451102 bytes (100.0%)
  Done
File saved as /home/docs/.imageio/images/coffee.png.

import numpy as np
import imageio.v3 as iio
from wgpu.gui.auto import WgpuCanvas, run
import pygfx as gfx

canvas = WgpuCanvas()
renderer = gfx.renderers.WgpuRenderer(canvas)
scene = gfx.Scene()

# add image

im = iio.imread("imageio:coffee.png")

image = gfx.Image(
    gfx.Geometry(grid=gfx.Texture(im, dim=2)),
    gfx.ImageBasicMaterial(clim=(0, 255)),
)
scene.add(image)

# make overlay using red values

# empty array for overlay, shape is [nrows, ncols, RGBA]
overlay = np.zeros(shape=(*im.shape[:2], 4), dtype=np.float32)

# set the blue values of some pixels with an alpha > 1
overlay[im[:, :, -1] > 200] = np.array([0.0, 0.0, 1.0, 0.6]).astype(np.float32)

overlay_image = gfx.Image(
    gfx.Geometry(grid=gfx.Texture(overlay, dim=2)), gfx.ImageBasicMaterial(clim=(0, 1))
)

# place on top of image
overlay_image.world.z = 1

scene.add(overlay_image)

# put the original image below
image_original = gfx.Image(
    gfx.Geometry(grid=gfx.Texture(im, dim=2)),
    gfx.ImageBasicMaterial(clim=(0, 255)),
)

image_original.world.y = im.shape[0] + 10

scene.add(image_original)

camera = gfx.PerspectiveCamera(0)
camera.show_object(scene)
camera.local.scale_y = -1
camera.zoom = 1.2

controller = gfx.PanZoomController(camera, register_events=renderer)

if __name__ == "__main__":
    canvas.request_draw(lambda: renderer.render(scene, camera))
    run()