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;