jessikitty/newbury-nights
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix VP9-alpha transparency: drop sRGB on video texture, premultipliedAlpha off

Browse Source 
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.
This commit is contained in:
jessikitty
2026-06-19 22:00:03 +10:00
parent b2a863bd80
commit 6f8b67b583
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/preview.html
+9 -2
View File
@@ -215,9 +215,16 @@
vid.muted = true; vid.loop = true; vid.playsInline = true; vid.autoplay = true; vid.preload = 'auto'; vid.muted = true; vid.loop = true; vid.playsInline = true; vid.autoplay = true; vid.preload = 'auto';
vid.src = webm; vid.src = webm;
const tex = new THREE.VideoTexture(vid); 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; 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); mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), mat);
vid.onerror = () => { vid.onerror = () => {
if (group.userData.fell || !image) return; if (group.userData.fell || !image) return;