Site

- Fixed brightness on tv when change video

site/interface/site/home3D/Screen.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Screen.js                                          :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 23:13:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/24 11:39:09 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/24 16:56:57 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -15,12 +15,18 @@ import * as THREE from 'three'
 
 const loader = new GLTFLoader();
 
+let	light = {
+	point: 1,
+};
+
+
 class Screen
 {
 	screen = null;
 	tv = null;
-	pointLightIntensity = 1;
 	screenMaterial = null;
+	canvasVideo = null;
+	interval = null;
 
 	constructor(scene)
 	{
@@ -34,17 +40,17 @@ class Screen
 			this.tv = tv;
 			tv.position.set(0, 0.99, 2);
 			tv.material = new THREE.MeshPhysicalMaterial({color: 0xaaaaaa});
-			tv.material.roughness = 10;
+			tv.material.roughness = 1;
-			tv.material.metalness = 1;
+			tv.material.metalness = 1.05;
 			tv.scale.set(0.05, 0.05, 0.05);
 			tv.castShadow = true;
 			tv.receiveShadow = true;
 			scene.add(tv);
+			this.showVideo('/modeles/pong.mp4');
 		}, undefined, function ( error ) {
 			console.error( error );
 			throw Error("Can't open file 'tv.glb'");
 		} );
-		this.#showVideo('/modeles/pong.mp4')
 	}
 
 	#createScreen(scene)
@@ -54,7 +60,8 @@ class Screen
 		const	vertices 			= positionAttribute.array;
 		const	material			= new THREE.MeshStandardMaterial({color: 0xbbbbbb});
 		const	mesh				= new THREE.Mesh(geometry, material);
-		const	pointLight			= new THREE.PointLight( 0xffffff, 10 * this.pointLightIntensity, 0, 2);
+		// const	pointLight			= new THREE.PointLight( 0xffffff, 10 * light.point, 0, 2);
+		const	pointLight			= new THREE.SpotLight(0xffffff, 10 * light.point, 0, Math.PI / 1.6);
 
 		for (let i = 0; i < vertices.length; i += 3)
 		{
@@ -74,17 +81,27 @@ class Screen
 		pointLight.castShadow = true;
 		pointLight.shadow.mapSize.width = 2048;
 		pointLight.shadow.mapSize.height = 2048;
-		console.log(pointLight.shadow)
+		
+		const targetObject = new THREE.Object3D();
+		targetObject.position.set(0, 1.2, 0);
+		pointLight.target = targetObject;
+		pointLight.target.updateMatrixWorld();
 		scene.add(pointLight);
 		setInterval(() => {
 			const	intensity = Math.random() * 2 + 10;
 			
-			pointLight.intensity = intensity * this.pointLightIntensity > 13 * this.pointLightIntensity ? 13 * this.pointLightIntensity : intensity * this.pointLightIntensity;
+			pointLight.intensity = intensity * light.point > 13 * light.point ? 13 * light.point : intensity * light.point;
 		}, 100);
 		return (mesh);
 	}
 
-	#showVideo(path)
+	changeVideo(path)
+	{
+		this.#disposeVideo();
+		this.showVideo(path);
+	}
+	
+	showVideo(path)
 	{
 		const	canvas		= document.createElement('canvas');
 		const	context		= canvas.getContext('2d', { willReadFrequently: true });
@@ -92,9 +109,12 @@ class Screen
 		const	texture		= new THREE.CanvasTexture(canvas);
 		const	material	= new THREE.MeshBasicMaterial({ map: texture,color: 0xffffff, transparent: true, opacity: 1 });
 		
+		canvas.video = video;
+		canvas.context = context;
 		canvas.width = 534;
 		canvas.height = 360;
-		video.src = path + '?t=' + new Date().getTime();
+		this.canvasVideo = canvas;
+		video.src = path;
 		video.loop = true;
 		video.muted = true;
 		video.crossOrigin = 'anonymous';
@@ -107,37 +127,70 @@ class Screen
 			}).catch(err => console.error("Error playing video: ", err));
 		});
 
-		function addNoiseOnImage(context)
+		// function addNoiseOnImage(context)
-		{
+		// {
-			const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+		// 	const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-			const data = imageData.data;
+		// 	const data = imageData.data;
-			for (let i = 0; i < data.length; i += 4)
+		// 	for (let i = 0; i < data.length; i += 4)
-			{
+		// 	{
-				const r = data[i];
+		// 		const r = data[i];
-				const g = data[i + 1];
+		// 		const g = data[i + 1];
-				const b = data[i + 2];
+		// 		const b = data[i + 2];
-				const brightness = (3 * r + 4 * g + b) >>> 3;
+		// 		const brightness = (3 * r + 4 * g + b) >>> 3;
-				const noise = Math.random() * 128 - 32;
+		// 		const noise = Math.random() * 128 - 32;
-				data[i] = data[i + 1] = data[i + 2] = brightness + noise;
+		// 		data[i] = data[i + 1] = data[i + 2] = brightness + noise;
-			}
+		// 	}
-			context.putImageData(imageData, 0, 0);
+		// 	context.putImageData(imageData, 0, 0);
-		}
+		// }
 
 		function updateCanvas()
 		{
-			if (!video.paused && !video.ended)
+			if (canvas.video != null || canvas.video == undefined)
 			{
-				context.clearRect(0, 0, canvas.width, canvas.height);
+				if (canvas.video && !canvas.video.paused && !canvas.video.ended)
-				context.drawImage(video, 0, 0, canvas.width, canvas.height);
+				{
-				addNoiseOnImage(context);
+					context.clearRect(0, 0, canvas.width, canvas.height);
-				texture.needsUpdate = true;
+					context.drawImage(canvas.video, 0, 0, canvas.width, canvas.height);
+					// addNoiseOnImage(context);
+					texture.needsUpdate = true;
+				}
+				requestAnimationFrame(updateCanvas);
 			}
-			requestAnimationFrame(updateCanvas);
 		}
-		texture.offset.set(0.02, 0);
+		texture.offset.set(0.05, 0);
 		this.screen.material = material;
-		video.load();
+		canvas.video.load();
 	}
+
+	#disposeVideo()
+	{
+		if (this.canvasVideo)
+		{
+			const canvas	= this.canvasVideo;
+			const video		= canvas.video;
+			const texture	= this.screen.material.map;
+	
+			if (video)
+			{
+				video.pause();
+				video.src = '';
+				video.removeAttribute('src');
+				video.load();
+			}
+			if (texture)
+				texture.dispose();
+			canvas.video = null;
+			canvas.context = null;
+			if (this.screen)
+			{
+				this.screen.material.map = null;
+				this.screen.material.dispose();
+			}
+			this.canvasVideo = null;
+		}
+	}
+	
+
 };
 
-export { Screen };
+export { Screen, light };

site/interface/site/home3D/home3D.js

@@ -3,19 +3,20 @@
 /*                                                        :::      ::::::::   */
 /*   home3D.js                                          :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:19:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/24 11:41:18 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/24 16:47:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from 'three'
-import { Screen } from './Screen.js'
+import { Screen, light } from './Screen.js'
 
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
+import Stats from 'stats.js';
 
 const	scene			= new THREE.Scene();
 const	renderer		= new THREE.WebGLRenderer({antialias: true});
@@ -24,6 +25,10 @@ const	ambiantLight	= new THREE.AmbientLight(0xffffff, 35);
 const	screen			= new Screen(scene);
 const	cube			= createCube();
 
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mémoire
+document.body.appendChild(stats.dom);
+
 renderer.toneMapping = THREE.LinearToneMapping;
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@@ -41,7 +46,7 @@ composer.addPass(new RenderPass(scene, camera));
 
 const dofPass = new BokehPass(scene, camera, {
     focus: 10.0,
-    aperture: 0.020,
+    aperture: 0.02,
     maxblur: 0.01,
 });
 composer.addPass(dofPass);
@@ -102,18 +107,23 @@ function fadeInOut()
 	let interval = null;
 	isInFade = true;
 	interval = setInterval(() => {
-		screen.pointLightIntensity -= 0.2;
+		light.point -= 0.2;
 		screen.screen.material.opacity -= 0.05;
 		if (screen.screen.material.opacity <= 0)
 		{
 			clearInterval(interval);
 			setTimeout(() => {
 				interval = setInterval(() => {
-					screen.pointLightIntensity += 0.2;
+					light.point += 0.2;
 					screen.screen.material.opacity += 0.05;
 					if (screen.screen.material.opacity >= 1)
 					{
 						clearInterval(interval);
+						interval = setInterval(() => {
+							light.point += 0.2;
+							if (light.point >= 1)
+								clearInterval(interval);
+						}, 10);
 						isInFade = false;
 					}
 				}, 20);
@@ -132,6 +142,15 @@ function createCube()
 	scene.add(mesh);
 }
 
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
+
+document.addEventListener( 'mousemove', (event) => {
+	event.preventDefault();
+	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+});
+
 
 function home3D()
 {
@@ -151,11 +170,57 @@ function createPlane()
 	scene.add(mesh);
 }
 
+const video = {
+	pong: '/modeles/pong.mp4',
+	login: '/modeles/notLogin.webm'
+}
+let	actualVideo = -1;
+if (Math.random() % 100 > 0.97)
+	video.pong = './modeles/easteregg.webm'
+
+setTimeout(() => {
+	screen.changeVideo(video.pong);
+	actualVideo = 0;
+}, 100);
 
 function loop()
 {
+	stats.begin()
+	raycaster.setFromCamera( mouse, camera );
+	const intersects = raycaster.intersectObjects( scene.children, false );
+	
+	if (!screen.canvasVideo)
+	{
+		composer.render();
+		stats.end();
+		return ;
+	}
+	if (intersects.length === 0)
+	{
+		if (actualVideo != 0)
+		{
+			console.log("change 1");
+			screen.changeVideo(video.pong);
+			actualVideo = 0;
+		}
+	}
+	else if (intersects[0].object == screen.screen)
+	{
+		if (actualVideo != 1)
+		{
+			console.log("change 2");
+			screen.changeVideo(video.login);
+			actualVideo = 1;
+		}
+	}
+	else if (actualVideo != 0)
+	{
+		console.log("change 3");
+		screen.changeVideo(video.pong);
+		actualVideo = 0;
+	}
 	composer.render();
-	// renderer.render(scene, camera);
+	stats.end();
 }