Fix: TV screen material renders video as is

tv-player/src/scene/screen-shaders.js

@@ -0,0 +1,18 @@
+export const screenVertexShader = `
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+export const screenFragmentShader = `
+varying vec2 vUv;
+uniform sampler2D videoTexture;
+
+void main() {
+    // Sample the video texture
+    gl_FragColor = texture2D(videoTexture, vUv);
+}
+`;

tv-player/src/scene/tv-set.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { state } from '../state.js';
 import { createVcr } from './vcr.js';
+import { screenVertexShader, screenFragmentShader } from '../shaders/screen-shaders.js';
 
 export function createTvSet(x, z, rotY) {
     // --- Materials (MeshPhongMaterial) ---
@@ -177,12 +178,15 @@ export function turnTvScreenOn() {
     if (state.tvScreen.material) {
         state.tvScreen.material.dispose();
     }
-    state.tvScreen.material = new THREE.MeshBasicMaterial({
+
-        color: 0xffffff,
+    state.tvScreen.material = new THREE.ShaderMaterial({
-        map: state.videoTexture,
+        uniforms: {
-        fog: false,
+            videoTexture: { value: state.videoTexture }
-        lightMapIntensity: 0,
+        },
-        reflectivity: 0
+        vertexShader: screenVertexShader,
+        fragmentShader: screenFragmentShader,
+        transparent: true,
     });
+
     state.tvScreen.material.needsUpdate = true;
 }

tv-player/src/shaders/screen-shaders.js

@@ -0,0 +1,19 @@
+export const screenVertexShader = `
+varying vec2 vUv;
+
+void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+
+export const screenFragmentShader = `
+varying vec2 vUv;
+uniform sampler2D videoTexture;
+
+void main() {
+    // Sample the video texture
+    gl_FragColor = texture2D(videoTexture, vUv);
+}
+`;
+