Docker

- Update three in static file
2024-08-24 20:46:11 +02:00
parent 7c14bf2836
commit b5d13ccf6f
2000 changed files with 2010104 additions and 59 deletions
--- a/docker-compose/requirements/nginx/static/three/examples/webgpu_rtt.html
+++ b/docker-compose/requirements/nginx/static/three/examples/webgpu_rtt.html
@ -0,0 +1,120 @@
+<html lang="en">
+	<head>
+		<title>three.js webgpu - rtt</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - rtt
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from '/static/three/build/three.module.js';
+			import { texture, uniform } from 'three/tsl';
+
+			let camera, scene, renderer;
+			const mouse = new THREE.Vector2();
+
+			let quadMesh, renderTarget;
+
+			let box;
+
+			const dpr = window.devicePixelRatio;
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
+				camera.position.z = 3;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x0066FF );
+
+				// textured mesh
+
+				const loader = new THREE.TextureLoader();
+				const uvTexture = loader.load( './textures/uv_grid_opengl.jpg' );
+
+				const geometryBox = new THREE.BoxGeometry();
+				const materialBox = new THREE.MeshBasicNodeMaterial();
+				materialBox.colorNode = texture( uvTexture );
+
+				//
+
+				box = new THREE.Mesh( geometryBox, materialBox );
+				scene.add( box );
+
+				//
+
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( dpr );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				renderTarget = new THREE.RenderTarget( window.innerWidth * dpr, window.innerHeight * dpr );
+
+				window.addEventListener( 'mousemove', onWindowMouseMove );
+				window.addEventListener( 'resize', onWindowResize );
+
+				// FX
+
+				// modulate the final color based on the mouse position
+
+				const screenFXNode = uniform( mouse );
+
+				const materialFX = new THREE.MeshBasicNodeMaterial();
+				materialFX.colorNode = texture( renderTarget.texture ).rgb.saturation( screenFXNode.x.oneMinus() ).hue( screenFXNode.y );
+
+				quadMesh = new THREE.QuadMesh( materialFX );
+
+			}
+
+			function onWindowMouseMove( e ) {
+
+				mouse.x = e.offsetX / window.innerWidth;
+				mouse.y = e.offsetY / window.innerHeight;
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
+
+			}
+
+			function animate() {
+
+				box.rotation.x += 0.01;
+				box.rotation.y += 0.02;
+
+				renderer.setRenderTarget( renderTarget );
+				renderer.render( scene, camera );
+
+				renderer.setRenderTarget( null );
+				quadMesh.render( renderer );
+
+			}
+
+		</script>
+	</body>
+</html>