Image with another image overlaid

Show an image with another image overlaid with alpha blending.

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()

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)

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.

<pygfx.Scene at 0x7f3de8c49e80>

# 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()