From 6f8b67b583c020674c43081ab762e7687c471bae Mon Sep 17 00:00:00 2001 From: jessikitty Date: Fri, 19 Jun 2026 22:00:03 +1000 Subject: [PATCH] Fix VP9-alpha transparency: drop sRGB on video texture, premultipliedAlpha off The WebM carries real alpha (alpha_mode=1) but rendered opaque because the VideoTexture was forced to SRGBColorSpace and the material assumed premultiplied alpha, crushing transparent regions to black. Removing the colorspace override and setting premultipliedAlpha:false keys the black out. --- public/preview.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/public/preview.html b/public/preview.html index 304cbde..fd7cbce 100644 --- a/public/preview.html +++ b/public/preview.html @@ -215,9 +215,16 @@ vid.muted = true; vid.loop = true; vid.playsInline = true; vid.autoplay = true; vid.preload = 'auto'; vid.src = webm; const tex = new THREE.VideoTexture(vid); - tex.colorSpace = THREE.SRGBColorSpace; + // VP9-alpha WebMs carry straight (non-premultiplied) alpha. Leave the + // texture in the default (linear/no-color-conversion) space — forcing + // SRGBColorSpace here makes three.js crush the alpha to black. The + // material below blends on the video's own alpha with premultipliedAlpha + // off so transparent regions stay see-through. tex.minFilter = THREE.LinearFilter; tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = false; - const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide, depthWrite: false }); + const mat = new THREE.MeshBasicMaterial({ + map: tex, transparent: true, side: THREE.DoubleSide, + depthWrite: false, premultipliedAlpha: false, + }); mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), mat); vid.onerror = () => { if (group.userData.fell || !image) return;