add semi transparent background colored overlay (for colorbar)

Author: ChrLackner

webgpu/__init__.py

@@ -1,3 +1,4 @@
+from .background import Background
 from .clipping import Clipping
 from .colormap import Colormap, Colorbar
 from .font import Font

webgpu/background.py

@@ -0,0 +1,182 @@
+"""Generic rounded-rectangle background overlay renderer."""
+
+import ctypes as ct
+
+from .renderer import Renderer, RenderOptions
+from .uniforms import UniformBase
+from .utils import (
+    create_bind_group,
+    get_device,
+    read_shader_file,
+)
+from .webgpu_api import (
+    BlendComponent,
+    BlendFactor,
+    BlendOperation,
+    BlendState,
+    ColorTargetState,
+    CompareFunction,
+    DepthStencilState,
+    FragmentState,
+    PrimitiveState,
+    VertexState,
+)
+
+
+_BINDING = 50
+
+
+class BackgroundUniforms(UniformBase):
+    _binding = _BINDING
+    _fields_ = [
+        ("position", ct.c_float * 2),
+        ("width", ct.c_float),
+        ("height", ct.c_float),
+        ("bg_color", ct.c_float * 3),
+        ("_pad", ct.c_float),
+    ]
+
+
+class Background(Renderer):
+    """Semi-transparent rounded-rectangle background overlay.
+
+    Place this before other renderers in a MultipleRenderer to provide
+    a readable backdrop behind text or UI elements.
+
+    @param position: (x, y) top-left corner in NDC
+    @param width: width in NDC
+    @param height: height in NDC (of the content area, padding is added automatically)
+    """
+    vertex_entry_point: str = "background_vertex"
+    fragment_entry_point: str = "background_fragment"
+    select_entry_point: str = ""
+    n_vertices: int = 6
+    n_instances: int = 1
+
+    def __init__(self, position=(0, 0), width=1, height=0.05):
+        super().__init__()
+        self._position = position
+        self._width = width
+        self._height = height
+        self.uniforms = None
+
+    @property
+    def position(self):
+        return self._position
+
+    @position.setter
+    def position(self, value):
+        self._position = value
+        if self.uniforms is not None:
+            self.uniforms.position = value
+            self.uniforms.update_buffer()
+        self.set_needs_update()
+
+    @property
+    def width(self):
+        return self._width
+
+    @width.setter
+    def width(self, value):
+        self._width = value
+        if self.uniforms is not None:
+            self.uniforms.width = value
+            self.uniforms.update_buffer()
+        self.set_needs_update()
+
+    @property
+    def height(self):
+        return self._height
+
+    @height.setter
+    def height(self, value):
+        self._height = value
+        if self.uniforms is not None:
+            self.uniforms.height = value
+            self.uniforms.update_buffer()
+        self.set_needs_update()
+
+    def get_shader_code(self):
+        return read_shader_file("background.wgsl")
+
+    def get_bindings(self):
+        return self.uniforms.get_bindings()
+
+    def update(self, options: RenderOptions):
+        if self.uniforms is None:
+            self.uniforms = BackgroundUniforms()
+            self.uniforms.position = self.position
+            self.uniforms.width = self.width
+            self.uniforms.height = self.height
+            self.uniforms.bg_color = (1.0, 1.0, 1.0)
+        self.uniforms.update_buffer()
+
+    def create_render_pipeline(self, options: RenderOptions) -> None:
+        bindings = options.get_bindings() + self.get_bindings()
+
+        if bindings == self._last_bindings:
+            return
+
+        layout, self.group = create_bind_group(
+            self.device, options.get_bindings() + self.get_bindings()
+        )
+        pipeline_layout = self.device.createPipelineLayout([layout])
+
+        depth_stencil = DepthStencilState(
+            format=options.canvas.depth_format,
+            depthWriteEnabled=False,
+            depthCompare=CompareFunction.always,
+        )
+
+        bg_color_target = ColorTargetState(
+            format=options.canvas.format,
+            blend=BlendState(
+                color=BlendComponent(
+                    srcFactor=BlendFactor.src_alpha,
+                    dstFactor=BlendFactor.one_minus_src_alpha,
+                    operation=BlendOperation.add,
+                ),
+                alpha=BlendComponent(
+                    srcFactor=BlendFactor.one,
+                    dstFactor=BlendFactor.one_minus_src_alpha,
+                    operation=BlendOperation.add,
+                ),
+            ),
+        )
+
+        shader_module = self.device.createShaderModule(self._get_preprocessed_shader_code())
+        self.pipeline = self.device.createRenderPipeline(
+            pipeline_layout,
+            vertex=VertexState(
+                module=shader_module,
+                entryPoint=self.vertex_entry_point,
+                buffers=[],
+            ),
+            fragment=FragmentState(
+                module=shader_module,
+                entryPoint=self.fragment_entry_point,
+                targets=[bg_color_target],
+            ),
+            primitive=PrimitiveState(topology=self.topology),
+            depthStencil=depth_stencil,
+            multisample=options.canvas.multisample,
+            label="Background",
+        )
+        self._select_pipeline = None
+        self._transparent_pipeline = None
+        self._last_bindings = bindings
+
+    def get_export_descriptor(self, options, buffer_registry):
+        desc = super().get_export_descriptor(options, buffer_registry)
+        desc.depth_write = False
+        desc.pass_type = "transparent"
+        return desc
+
+    def get_theme_buffer_id(self, registry):
+        """Return the buffer id for theme color updates (bg_color at offset 16)."""
+        if self.uniforms is None or self.uniforms._buffer is None:
+            return None
+        key = id(self.uniforms._buffer)
+        if key in registry._buffers:
+            return registry._buffers[key][0]
+        return None

webgpu/colormap.py

@@ -1,7 +1,8 @@
 import numpy as np
 
+from .background import Background
 from .labels import Labels
-from .renderer import BaseRenderer, Renderer, RenderOptions
+from .renderer import BaseRenderer, MultipleRenderer, Renderer, RenderOptions
 from .uniforms import Binding, UniformBase, ct
 from .utils import (
     SamplerBinding,
@@ -253,12 +254,34 @@ def _create_texture(self):
         )
 
 
-class Colorbar(Renderer):
+class ColorbarStrip(Renderer):
+    """Renders the colored strip of the colorbar."""
     vertex_entry_point: str = "colormap_vertex"
     fragment_entry_point: str = "colormap_fragment"
     select_entry_point: str = ""
     n_vertices: int = 3
 
+    def __init__(self, get_bindings_fn):
+        super().__init__()
+        self._get_bindings_fn = get_bindings_fn
+
+    def get_shader_code(self):
+        return read_shader_file("colormap.wgsl")
+
+    def get_bindings(self):
+        return self._get_bindings_fn()
+
+    def update(self, options: RenderOptions):
+        pass
+
+    def get_export_descriptor(self, options, buffer_registry):
+        desc = super().get_export_descriptor(options, buffer_registry)
+        desc.pass_type = "transparent"
+        return desc
+
+
+class Colorbar(MultipleRenderer):
+
     def __init__(
         self,
         colormap: Colormap | None = None,
@@ -267,16 +290,20 @@ def __init__(
         height=0.05,
         number_format=None,
     ):
-        super().__init__()
-        self.gpu_objects.colormap = colormap or Colormap()
+        self.colormap = colormap or Colormap()
         self.number_format = number_format
-        self.gpu_objects.labels = Labels([], [], font_size=14, h_align="center", v_align="top")
         self.uniforms = None
 
         self._position = position
         self._width = width
         self._height = height
-        colormap._callbacks.append(self.set_needs_update)
+
+        self._bg = Background(position=position, width=width, height=height)
+        self._strip = ColorbarStrip(lambda: self._get_all_bindings())
+        self._labels = Labels([], [], font_size=14, h_align="center", v_align="top")
+
+        super().__init__([self._bg, self._strip, self._labels])
+        self.colormap._callbacks.append(self.set_needs_update)
 
     @property
     def position(self):
@@ -287,6 +314,7 @@ def position(self, value):
         self._position = value
         if self.uniforms is not None:
             self.uniforms.position = value
+        self._bg.position = value
         self.set_needs_update()
 
     @property
@@ -298,6 +326,7 @@ def width(self, value):
         self._width = value
         if self.uniforms is not None:
             self.uniforms.width = value
+        self._bg.width = value
         self.set_needs_update()
 
     @property
@@ -309,14 +338,12 @@ def height(self, value):
         self._height = value
         if self.uniforms is not None:
             self.uniforms.height = value
+        self._bg.height = value
         self.set_needs_update()
 
-    def get_shader_code(self):
-        return read_shader_file("colormap.wgsl")
-
-    def get_bindings(self):
+    def _get_all_bindings(self):
         return (
-            self.gpu_objects.colormap.get_bindings() + self.gpu_objects.labels.get_bindings() + self.uniforms.get_bindings()
+            self.colormap.get_bindings() + self._labels.get_bindings() + self.uniforms.get_bindings()
         )
 
     def update(self, options: RenderOptions):
@@ -327,38 +354,33 @@ def update(self, options: RenderOptions):
             self.uniforms.height = self.height
 
         self.uniforms.update_buffer()
+        self.colormap.update(options)
 
-        self.n_instances = 2 * self.gpu_objects.colormap.n_colors
+        self._strip.n_instances = 2 * self.colormap.n_colors
 
-        self.gpu_objects.labels.labels = [
+        self._labels.labels = [
             format_number(v, self.number_format)
             for v in [
-                self.gpu_objects.colormap.minval + i / 4 * (self.gpu_objects.colormap.maxval - self.gpu_objects.colormap.minval)
+                self.colormap.minval + i / 4 * (self.colormap.maxval - self.colormap.minval)
                 for i in range(6)
             ]
         ]
-        self.gpu_objects.labels.positions = [
+        self._labels.positions = [
             (
                 self.position[0] + i * self.width / 4,
                 self.position[1] - 0.01,
                 0,
             )
             for i in range(5)
         ]
-        self.gpu_objects.labels.set_needs_update()
-
-    def render(self, options: RenderOptions):
-        super().render(options)
-        self.gpu_objects.labels.render(options)
-
-
+        super().update(options)
 
     def set_min(self, minval):
-        self.gpu_objects.colormap.set_min(minval)
+        self.colormap.set_min(minval)
         self.set_needs_update()
 
     def set_max(self, maxval):
-        self.gpu_objects.colormap.set_max(maxval)
+        self.colormap.set_max(maxval)
         self.set_needs_update()
 
 

webgpu/engine/engine.js

@@ -178,6 +178,7 @@ class RenderEngine {
       interactions:   descriptor.interactions   || [],
       camera: descriptor.camera || {},
       light:  descriptor.light  || {},
+      theme: descriptor.theme || {},
     };
 
     this.buffers  = _toMap(descriptor.buffers);
@@ -905,6 +906,14 @@ class RenderEngine {
     if (this.canvas && this.canvas.style) {
       this.canvas.style.backgroundColor = dark ? DARK_CANVAS_BG : LIGHT_CANVAS_BG;
     }
+    // Update colorbar background color to match theme
+    if (this.scene && this.scene.theme && this.scene.theme.buffer_id) {
+      const buf = this.buffers && this.buffers.get(this.scene.theme.buffer_id);
+      if (buf) {
+        const c = this.clearColor;
+        this.device.queue.writeBuffer(buf, 16, new Float32Array([c.r, c.g, c.b]));
+      }
+    }
   }
 
   _setupThemeObserver() {

webgpu/export/capture.py

@@ -57,6 +57,7 @@ def _capture(scene, live: bool):
         interactions=_detect_interactions(scene, registry),
         camera=_export_camera(options.camera, options, registry),
         light=_export_light(options.light, registry, live=live),
+        theme=_export_theme(scene, registry),
     )
     return export, registry
 
@@ -106,6 +107,28 @@ def _capture_renderer(obj, options, registry, render_passes, compute_passes):
                         compute_passes.extend(attr.get_export_compute_passes(options, registry))
 
 
+def _export_theme(scene, registry) -> dict:
+    """Find any renderer's buffer for theme color updates."""
+    from ..renderer import Renderer
+    for obj in scene.render_objects:
+        buf_id = _find_theme_buffer(obj, registry)
+        if buf_id:
+            return {"buffer_id": buf_id}
+    return {}
+
+
+def _find_theme_buffer(obj, registry) -> str | None:
+    """Recursively check if a renderer provides a theme-sensitive buffer."""
+    if hasattr(obj, 'get_theme_buffer_id'):
+        return obj.get_theme_buffer_id(registry)
+    if hasattr(obj, 'render_objects'):
+        for child in obj.render_objects:
+            buf_id = _find_theme_buffer(child, registry)
+            if buf_id:
+                return buf_id
+    return None
+
+
 def _export_camera(camera, options, registry) -> dict:
     """Export camera state and identify the camera buffer."""
     t = camera.transform