dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: dejvino:293834b704db1c51295102793462cf66170e5b37
Branches Tags
dejvino:main
..
compare: dejvino:192fc394616913318410b50470e6b4b87abfabaa
Branches Tags
dejvino:main

No commits in common. "293834b704db1c51295102793462cf66170e5b37" and "192fc394616913318410b50470e6b4b87abfabaa" have entirely different histories.
293834b704 ... 192fc39461

8 changed files with 31 additions and 175 deletions
Show Stats Expand all files Collapse all files

13
tv-player/src/core/animate.js
View File

@ -1,15 +1,15 @@
import * as THREE from 'three';
import { updateDoor } from '../scene/door.js';
import { updateVcrDisplay } from '../scene/vcr-display.js';
import { updateDoor } from '../scene/door.js';
import { state } from '../state.js';
import { updateScreenEffect } from '../scene/tv-set.js'
function updateCamera() {
const globalTime = Date.now() * 0.00003;
const lookAtTime = Date.now() * 0.0002;
const globalTime = Date.now() * 0.00005;
const lookAtTime = Date.now() * 0.00003;
const camAmplitude = 0.2;
const lookAmplitude = 0.1;
const camAmplitude = 0.5;
const lookAmplitude = 0.05;
// Base Camera Position in front of the TV
const baseX = -0.5;
@ -166,7 +166,6 @@ export function animate() {
updateBooks();
updateDoor();
updatePictureFrame();
updateScreenEffect();
// RENDER!
state.renderer.render(state.scene, state.camera);

20
tv-player/src/core/video-player.js
View File

@ -1,6 +1,5 @@
import * as THREE from 'three';
import { state } from '../state.js';
import { turnTvScreenOff, turnTvScreenOn, setScreenEffect } from '../scene/tv-set.js';
// --- Play video by index ---
export function playVideoByIndex(index) {
@ -15,10 +14,14 @@ export function playVideoByIndex(index) {
if (index < 0 || index >= state.videoUrls.length) {
console.info('End of playlist reached. Reload tapes to start again.');
setScreenEffect(2, () => { // Power-down effect
state.screenLight.intensity = 0.0;
turnTvScreenOff();
state.screenLight.intensity = 0.0;
state.tvScreen.material.dispose();
state.tvScreen.material = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Deep black
shininess: 5,
specular: 0x111111
});
state.tvScreen.material.needsUpdate = true;
state.isVideoLoaded = false;
state.lastUpdateTime = -1; // force VCR to redraw
return;
@ -41,10 +44,11 @@ export function playVideoByIndex(index) {
state.videoTexture.needsUpdate = true;
// 2. Apply the video texture to the screen mesh
turnTvScreenOn();
// 3. Start playback and trigger the warm-up effect simultaneously
setScreenEffect(1); // Trigger warm-up
state.tvScreen.material.dispose();
state.tvScreen.material = new THREE.MeshBasicMaterial({ map: state.videoTexture });
state.tvScreen.material.needsUpdate = true;
// 3. Start playback
state.videoElement.play().then(() => {
state.isVideoLoaded = true;
// Use the defined base intensity for screen glow

12
tv-player/src/scene/door.js
View File

@ -77,15 +77,15 @@ export function updateDoor() {
if (stateTimer <= 0) {
const nextState = Math.random();
if (nextState < 0.1) {
if (nextState < 0.4) {
doorState = DOOR_STATES.RESTING;
stateTimer = 2 + Math.random() * 5;
} else if (nextState < 0.5) {
} else if (nextState < 0.7) {
doorState = DOOR_STATES.OPENING;
stateTimer = 2 + Math.random() * 5;
stateTimer = 2 + Math.random() * 4;
} else {
doorState = DOOR_STATES.CLOSING;
stateTimer = 3 + Math.random() * 2;
stateTimer = 3 + Math.random() * 3;
}
}
@ -97,7 +97,7 @@ export function updateDoor() {
break;
case DOOR_STATES.CLOSING:
if (doorGroupPanel.rotation.y < minAngle) {
doorGroupPanel.rotation.y += speed * 2;
doorGroupPanel.rotation.y += speed;
}
break;
}
@ -105,7 +105,7 @@ export function updateDoor() {
// Outside material pulsating glow
if (outsideMaterial) {
const glowMin = 0.001;
const glowMax = 0.005;
const glowMax = 0.01;
const glowSpeed = 0.0001; // Speed of the pulsation
glowIntensity += glowDirection * glowSpeed;
if (glowIntensity >= glowMax) {

2
tv-player/src/scene/room-walls.js
View File

@ -63,7 +63,7 @@ export function createRoomWalls() {
ceiling.receiveShadow = true;
state.scene.add(ceiling);
state.crawlSurfaces.push(backWall, leftWall, rightWall);
state.crawlSurfaces.push(backWall, frontWall, leftWall, rightWall);
// --- 6. Add a Window to the Back Wall ---
const windowWidth = 1.5;

18
tv-player/src/scene/screen-shaders.js
View File

@ -1,18 +0,0 @@
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);
}
`;

82
tv-player/src/scene/tv-set.js
View File

@ -1,7 +1,6 @@
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) ---
@ -137,7 +136,12 @@ export function createTvSet(x, z, rotY) {
// Position the curved screen
state.tvScreen.position.set(0.0, 1.5, -2.1);
turnTvScreenOff();
state.tvScreen.material = new THREE.MeshPhongMaterial({
color: 0x0a0a0a, // Deep black
shininess: 5,
specular: 0x111111
});
state.tvScreen.material.needsUpdate = true;
tvGroup.add(state.tvScreen);
tvGroup.position.set(x, 0, z);
@ -160,78 +164,4 @@ export function createTvSet(x, z, rotY) {
tvGroup.add(vcr);
state.scene.add(tvGroup);
}
export function turnTvScreenOff() {
if (state.tvScreen.material) {
state.tvScreen.material.dispose();
}
state.tvScreen.material = new THREE.MeshPhongMaterial({
color: 0x203530,
shininess: 45,
specular: 0x111111,
});
state.tvScreen.material.needsUpdate = true;
}
export function turnTvScreenOn() {
if (state.tvScreen.material) {
state.tvScreen.material.dispose();
}
state.tvScreen.material = new THREE.ShaderMaterial({
uniforms: {
videoTexture: { value: state.videoTexture },
u_effect_type: { value: 0.0 },
u_effect_strength: { value: 0.0 },
},
vertexShader: screenVertexShader,
fragmentShader: screenFragmentShader,
transparent: true,
});
state.tvScreen.material.needsUpdate = true;
setScreenEffect(1); // Trigger warm-up
}
/**
* Controls the warm-up and power-down effects on the TV screen.
* @param {number} effectType - 0 normal, 1 for warm-up, 2 for power-down.
* @param {function} onComplete - Optional callback when the animation finishes.
*/
export function setScreenEffect(effectType, onComplete) {
const material = state.tvScreen.material;
if (!material.uniforms) return;
state.screenEffect.active = true;
state.screenEffect.type = effectType;
state.screenEffect.startTime = state.clock.getElapsedTime() * 1000;
state.screenEffect.onComplete = onComplete;
}
/**
* Updates the screen effect animation. Should be called in the main render loop.
*/
export function updateScreenEffect() {
if (!state.screenEffect.active) return;
const material = state.tvScreen.material;
if (!material.uniforms) return;
const elapsedTime = (state.clock.getElapsedTime() * 1000) - state.screenEffect.startTime;
const progress = Math.min(elapsedTime / state.screenEffect.duration, 1.0);
const easedProgress = state.screenEffect.easing(progress);
material.uniforms.u_effect_type.value = state.screenEffect.type;
material.uniforms.u_effect_strength.value = easedProgress;
if (progress >= 1.0) {
state.screenEffect.active = false;
material.uniforms.u_effect_strength.value = (state.screenEffect.type === 2) ? 1.0 : 0.0; // Final state
if (state.screenEffect.onComplete) {
state.screenEffect.onComplete();
}
material.uniforms.u_effect_type.value = 0.0; // Reset effect type
}
}

50
tv-player/src/shaders/screen-shaders.js
View File

@ -1,50 +0,0 @@
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;
uniform float u_effect_type; // 0: none, 1: warmup, 2: powerdown
uniform float u_effect_strength; // 0.0 to 1.0
void main() {
vec2 centeredUv = vUv - 0.5;
vec4 finalColor;
if (u_effect_type < 0.5) { // No effect
finalColor = texture2D(videoTexture, vUv);
} else if (u_effect_type < 1.5) { // Warm-up effect
// A bright dot expands to reveal the screen content
float effectRadius = u_effect_strength * 0.75; // Max radius of 0.75 (sqrt(0.5*0.5 + 0.5*0.5))
float distanceToCenter = length(centeredUv);
// Smoothly transition the edge of the circle
float vignette = smoothstep(effectRadius, effectRadius - 0.1, distanceToCenter);
vec4 videoColor = texture2D(videoTexture, vUv);
finalColor = videoColor * vignette * u_effect_strength; // Fade in brightness
} else { // Power-down effect
// The image collapses into a bright horizontal line and fades
float collapseFactor = 1.0 - u_effect_strength;
// Squeeze the UVs vertically
vec2 squeezedUv = vec2(vUv.x, 0.5 + (vUv.y - 0.5) * collapseFactor);
vec4 videoColor = texture2D(videoTexture, squeezedUv);
// Create a bright glow where the line is
float lineGlow = pow(1.0 - abs(centeredUv.y) / (0.5 * collapseFactor + 0.01), 20.0);
finalColor = videoColor * collapseFactor + vec4(0.8, 0.9, 1.0, 1.0) * lineGlow * u_effect_strength;
}
gl_FragColor = finalColor;
}
`;

9
tv-player/src/state.js
View File

@ -8,21 +8,12 @@ export function initState() {
scene: null,
camera: null,
renderer: null,
clock: new THREE.Clock(),
tvScreen: null,
videoTexture: null,
screenLight: null,
lampLightPoint: null,
lampLightSpot: null,
effectsManager: null,
screenEffect: {
active: false,
type: 0,
startTime: 0,
duration: 1000, // in ms
onComplete: null,
easing: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t, // easeInOutQuad
},
// VCR Display
lastUpdateTime: -1,