Let the viewport composite over what is behind it

Background colour gains a meaningful alpha. Below 1 the viewport composites
over whatever the host has stacked behind it rather than painting a colour
of its own; at 0 it clears to nothing, so the model draws over another 3D
view, a map, or ordinary page content. There is no depth interaction -- the
layer behind is strictly behind and cannot occlude the model.

Honouring the alpha needs a premultiplied surface. configureSurface asks for
one only when the platform advertises it, the same way it picks a present
mode, and falls back to Auto otherwise -- this machine's Vulkan surface
offers opaque compositing only, so hardcoding premultiplied would have
requested a mode it does not support. The clear follows that choice: scaled
by alpha when premultiplied, held at 1 when not, since scaling would
otherwise just darken the colour for an alpha nobody reads.

ViewportWindow::setBackgroundColor now forwards to core rather than writing
through a reference proxy, dropping one more member from the friend
declaration it is meant to shrink. The screenshot QImage is tagged
premultiplied to match what the main pass leaves in the buffer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/ifcviewer-web/CMakeLists.txt

@@ -114,7 +114,7 @@ target_link_options(IfcViewerWeb PRIVATE
     # EMSCRIPTEN_KEEPALIVE alone keeps the symbols in the binary but doesn't
     # add them to Module. ccall lets the host page (web/ifcviewer.js) pass a JS string (the ?model
     # URL) to load_sidecar_from_url_c without manual heap marshalling.
-    "-sEXPORTED_FUNCTIONS=['_main','_malloc','_free','_raf_tick_c','_load_sidecar_from_source_c','_clear_scene_c','_ifcv_on_range_done','_ifcv_chunks_resident_c','_ifcv_chunks_total_c','_ifcv_model_count_c','_ifcv_model_resident_c','_ifcv_model_total_c','_ifcv_bytes_total_c','_ifcv_bytes_needed_c','_ifcv_bytes_loaded_c','_view_all_c','_frame_selection_c','_toggle_projection_c','_projection_is_ortho_c','_standard_view_c','_toggle_fly_c','_fly_is_active_c','_hide_selected_c','_isolate_selected_c','_show_all_c','_hide_all_c','_toggle_xray_c','_xray_is_active_c','_toggle_section_c','_clear_section_c','_section_is_active_c','_ifcv_get_camera_c','_ifcv_set_camera_c','_ifcv_set_ortho_c','_ifcv_set_nav_preset_c','_ifcv_get_selection_c','_ifcv_get_active_object_c','_ifcv_apply_selection_c','_ifcv_set_visible_c','_ifcv_get_hidden_c','_ifcv_set_color_c','_ifcv_clear_colors_c','_ifcv_request_objects_c','_ifcv_set_selection_outline_c','_ifcv_selection_outline_is_on_c']"
+    "-sEXPORTED_FUNCTIONS=['_main','_malloc','_free','_raf_tick_c','_load_sidecar_from_source_c','_clear_scene_c','_ifcv_on_range_done','_ifcv_chunks_resident_c','_ifcv_chunks_total_c','_ifcv_model_count_c','_ifcv_model_resident_c','_ifcv_model_total_c','_ifcv_bytes_total_c','_ifcv_bytes_needed_c','_ifcv_bytes_loaded_c','_view_all_c','_frame_selection_c','_toggle_projection_c','_projection_is_ortho_c','_standard_view_c','_toggle_fly_c','_fly_is_active_c','_hide_selected_c','_isolate_selected_c','_show_all_c','_hide_all_c','_toggle_xray_c','_xray_is_active_c','_toggle_section_c','_clear_section_c','_section_is_active_c','_ifcv_get_camera_c','_ifcv_set_camera_c','_ifcv_set_ortho_c','_ifcv_set_nav_preset_c','_ifcv_set_background_c','_ifcv_get_selection_c','_ifcv_get_active_object_c','_ifcv_apply_selection_c','_ifcv_set_visible_c','_ifcv_get_hidden_c','_ifcv_set_color_c','_ifcv_clear_colors_c','_ifcv_request_objects_c','_ifcv_set_selection_outline_c','_ifcv_selection_outline_is_on_c']"
     # ccall: the host page (web/ifcviewer.js) passes the ?model URL string to load_sidecar_from_url_c,
     # and the nav-preset name to ifcv_set_nav_preset_c.
     # HEAPU8: lets tooling/tests read the wasm heap size (e.g. to verify a large

src/ifcviewer-web/main_web.cpp

@@ -635,6 +635,15 @@ extern "C" EMSCRIPTEN_KEEPALIVE void ifcv_set_ortho_c(int on) {
     if (bool(on) != g_app->core.projectionOrtho()) g_app->core.toggleProjection();
 }
 
+// Background colour, RGBA in [0..1]. Alpha 0 clears the canvas to nothing, so
+// whatever the host page has stacked behind it shows through. See
+// ViewportCore::setBackgroundColor.
+extern "C" EMSCRIPTEN_KEEPALIVE void ifcv_set_background_c(float r, float g,
+                                                           float b, float a) {
+    if (!g_app || !g_app->ready) return;
+    g_app->core.setBackgroundColor(r, g, b, a);
+}
+
 // Mouse navigation scheme: "blender" | "rhino" | "revit" | "web". The preset
 // only rewrites the button/modifier table classifyPress reads, so unlike the
 // rest of the scripting API it does not need the GPU app to be live — a host

src/ifcviewer-web/tests/background.spec.mjs

@@ -0,0 +1,114 @@
+// This file was generated with the assistance of an AI coding tool.
+//
+// Background colour, and specifically its alpha. The alpha only means
+// anything if two separate things are right: the surface has to be
+// configured with a premultiplied composite mode, or the channel is
+// discarded before it reaches the compositor; and the clear value has to be
+// scaled by it, or the viewport adds its background colour on top of the
+// layer behind instead of vanishing. Both failures are invisible at the
+// default opaque alpha, so nothing else in the suite would catch either.
+import { test, expect } from '@playwright/test';
+import zlib from 'node:zlib';
+
+// Decode the top-left pixel (RGB) of a PNG buffer. Row 0 pixel 0 is
+// filter-agnostic — every PNG predictor references zero neighbours there —
+// so this can skip filter handling entirely.
+function firstPixelRGB(png) {
+  let off = 8, colorType = 6;
+  const idat = [];
+  while (off + 8 <= png.length) {
+    const len = png.readUInt32BE(off);
+    const type = png.toString('ascii', off + 4, off + 8);
+    const data = png.subarray(off + 8, off + 8 + len);
+    if (type === 'IHDR') colorType = data[9];
+    else if (type === 'IDAT') idat.push(data);
+    else if (type === 'IEND') break;
+    off += 12 + len;
+  }
+  const raw = zlib.inflateSync(Buffer.concat(idat));
+  return [raw[1], raw[2], raw[3]];  // skip the row filter byte
+}
+
+// A 1x1 sample just inside the canvas corner — background, clear of the
+// framed model. Screenshotting through the browser rather than reading the
+// canvas back in-page is deliberate: a WebGPU swap-chain texture isn't
+// persisted for 2D copy, but the browser's own capture path composites the
+// GPU layer against what is behind it, which is the whole point here.
+async function cornerPixel(page) {
+  const box = await page.locator('#viewer-canvas').boundingBox();
+  const png = await page.screenshot({
+    clip: { x: Math.round(box.x + 6), y: Math.round(box.y + 6), width: 1, height: 1 },
+  });
+  return firstPixelRGB(png);
+}
+
+function watchGpuErrors(page) {
+  const errors = [];
+  page.on('console', (msg) => {
+    if (/Uncaptured WebGPU error|is invalid|Not enough memory left/i.test(msg.text()))
+      errors.push(msg.text());
+  });
+  page.on('pageerror', (e) => errors.push('pageerror: ' + e.message));
+  return errors;
+}
+
+async function bootViewer(page) {
+  await page.goto('/scripting.html');
+  await page.waitForFunction(() => !!(window.viewer && window.viewer.isLive()),
+                             null, { timeout: 30_000 });
+  await page.waitForTimeout(1200);
+}
+
+test('an opaque background colour reaches the clear', async ({ page }) => {
+  const gpuErrors = watchGpuErrors(page);
+  await bootViewer(page);
+
+  await page.evaluate(() => window.viewer.setBackground('#c81e1e'));
+  await page.waitForTimeout(600);
+
+  const [r, g, b] = await cornerPixel(page);
+  expect(r, `expected the red clear, got ${r},${g},${b}`).toBeGreaterThan(150);
+  expect(g, `expected the red clear, got ${r},${g},${b}`).toBeLessThan(80);
+  expect(b, `expected the red clear, got ${r},${g},${b}`).toBeLessThan(80);
+
+  expect(gpuErrors, gpuErrors.join('\n')).toEqual([]);
+});
+
+test('alpha 0 clears to nothing and the layer behind shows through', async ({ page }) => {
+  const gpuErrors = watchGpuErrors(page);
+  await bootViewer(page);
+
+  // #viewer-box is the element the canvas sits in front of — where a host
+  // page would stack a second view. Paint it a colour neither the scene nor
+  // the palette uses, so a match can only mean the canvas showed through.
+  await page.evaluate(() => {
+    document.getElementById('viewer-box').style.background = '#ff00ff';
+  });
+  await page.waitForTimeout(300);
+
+  const before = await cornerPixel(page);
+  expect(
+    Math.max(...before),
+    `the corner is already bright before the alpha changed (${before}) — it is not `
+      + `sampling background, so the assertion below would prove nothing`,
+  ).toBeLessThan(90);
+
+  // White at zero alpha, not transparent black: black would pass even if the
+  // clear forgot to scale by alpha, since scaling black changes nothing.
+  // White separates the two — premultiplied it becomes (0,0,0,0) and the
+  // magenta behind survives intact, unscaled it is added on top and washes
+  // the corner out to white.
+  await page.evaluate(() => window.viewer.setBackground('#ffffff00'));
+  await page.waitForTimeout(600);
+
+  const [r, g, b] = await cornerPixel(page);
+  const got = `got ${r},${g},${b}`;
+  const why = `expected the magenta behind the canvas. Washed-out/white means the `
+            + `clear was not premultiplied, or the surface fell back to an opaque `
+            + `composite mode and held alpha at 1. ${got}`;
+  expect(r, why).toBeGreaterThan(200);
+  expect(g, why).toBeLessThan(60);
+  expect(b, why).toBeGreaterThan(200);
+
+  expect(gpuErrors, gpuErrors.join('\n')).toEqual([]);
+});

src/ifcviewer-web/web/ifcviewer.js

@@ -320,6 +320,40 @@
         if (c.ortho !== undefined) Module._ifcv_set_ortho_c(c.ortho ? 1 : 0);
       },
 
+      // ---- Background ------------------------------------------------------
+
+      // Clear colour, as '#rgb' / '#rrggbb' / '#rrggbbaa' or {r, g, b, a} with
+      // 0-255 channels. Alpha defaults to opaque.
+      //
+      // Unlike setColor, an alpha of 0 here is meaningful rather than the "no
+      // override" sentinel: it clears the canvas to nothing, letting whatever
+      // is behind it in the DOM show through. Stack anything under the canvas
+      // — another 3D view, a map, ordinary page content — and the model draws
+      // on top of it. There is no depth interaction: the layer behind is
+      // strictly behind, so it reads as a backdrop and cannot occlude the
+      // model. Requires a platform that composites the canvas with alpha;
+      // where it does not, the colour still applies and the alpha is ignored.
+      setBackground: function (color) {
+        let r, g, b, a = 255;
+        if (typeof color === 'string') {
+          let hex = color.replace(/^#/, '');
+          if (hex.length === 3) hex = hex.split('').map(function (c) { return c + c; }).join('');
+          if (hex.length !== 6 && hex.length !== 8) {
+            throw new Error('setBackground: expected #rgb, #rrggbb or #rrggbbaa, got ' + color);
+          }
+          r = parseInt(hex.slice(0, 2), 16);
+          g = parseInt(hex.slice(2, 4), 16);
+          b = parseInt(hex.slice(4, 6), 16);
+          if (hex.length === 8) a = parseInt(hex.slice(6, 8), 16);
+        } else if (color && typeof color === 'object') {
+          r = color.r | 0; g = color.g | 0; b = color.b | 0;
+          if (color.a !== undefined) a = color.a | 0;
+        } else {
+          throw new Error('setBackground: expected a colour, got ' + color);
+        }
+        Module._ifcv_set_background_c(r / 255, g / 255, b / 255, a / 255);
+      },
+
       // ---- Navigation ------------------------------------------------------
 
       // Which mouse buttons orbit / pan / select, as one of NAV_PRESETS: