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_texturegrad.html
+++ b/docker-compose/requirements/nginx/static/three/examples/webgpu_texturegrad.html
@ -0,0 +1,151 @@
+<html lang="en">
+	<head>
+		<title>three.js webgpu - texture gradient</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>
+			<br />This example demonstrate texture gradient
+			<br /> Left canvas is using WebGPU Backend, right canvas is WebGL Backend.
+			<br /> The bottom half of the texture benefits from the gradient to achieve better blur quality.
+		</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 { If, vec4, float, timerLocal, cos, pow, vec2, uv, texture, tslFn } from 'three/tsl';
+
+			// WebGPU Backend
+			init();
+
+			// WebGL Backend
+			init( true );
+
+			async function init( forceWebGL = false ) {
+
+				const aspect = ( window.innerWidth / 2 ) / window.innerHeight;
+				const camera = new THREE.OrthographicCamera( - aspect, aspect );
+				camera.position.z = 2;
+
+				const scene = new THREE.Scene();
+
+				// texture
+
+				const material = new THREE.MeshBasicNodeMaterial( { color: 0xffffff } );
+
+				// load async brick_diffuse
+				const map = await new THREE.TextureLoader().loadAsync( 'textures/uv_grid_opengl.jpg' );
+
+				const elapsedTime = timerLocal();
+				material.colorNode = tslFn( () => {
+
+					const color = vec4( 1. ).toVar();
+
+					const vuv = uv().toVar();
+					const blur = pow( float( 0.0625 ).sub( cos( vuv.x.mul( 20.0 ).add( elapsedTime ) ) ).mul( 0.0625 ), 2.0 );
+
+					const grad = vec2( blur ).toVar();
+
+					If( vuv.y.greaterThan( 0.5 ), () => {
+
+						grad.assign( 0 );
+			
+					} );
+
+					color.assign(
+						texture( map, vuv.add( vec2( blur, blur ).mul( 0.5 ) ) ).grad( grad, grad ).mul( 0.25 )
+							.add( texture( map, vuv.add( vec2( blur, blur.negate() ).mul( 0.5 ) ) ).grad( grad, grad ).mul( 0.25 ) )
+							.add( texture( map, vuv.add( vec2( blur.negate(), blur ).mul( 0.5 ) ) ).grad( grad, grad ).mul( 0.25 ) )
+							.add( texture( map, vuv.add( vec2( blur.negate(), blur.negate() ).mul( 0.5 ) ) ).grad( grad, grad ).mul( 0.25 ) )
+					);
+
+
+					If( vuv.y.greaterThan( 0.497 ).and( vuv.y.lessThan( 0.503 ) ), () => {
+
+						color.assign( 1 );
+
+					} );
+			
+
+					return color;
+
+				} )();
+			
+				//
+
+				const box = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
+				scene.add( box );
+
+				const renderer = new THREE.WebGPURenderer( { antialias: false, forceWebGL: forceWebGL, trackTimestamp: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth / 2, window.innerHeight );
+
+				document.body.appendChild( renderer.domElement );
+				renderer.domElement.style.position = 'absolute';
+				renderer.domElement.style.top = '0';
+				renderer.domElement.style.left = '0';
+				renderer.domElement.style.width = '50%';
+				renderer.domElement.style.height = '100%';
+
+				if ( forceWebGL ) {
+
+					renderer.domElement.style.left = '50%';
+
+					scene.background = new THREE.Color( 0x212121 );
+			
+				} else {
+
+					scene.background = new THREE.Color( 0x313131 );
+
+				}
+
+				//
+
+
+				 const animate = async function () {
+
+					await renderer.renderAsync( scene, camera );
+
+			
+				};
+
+				renderer.setAnimationLoop( animate );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				function onWindowResize() {
+
+					renderer.setSize( window.innerWidth / 2, window.innerHeight );
+
+					const aspect = ( window.innerWidth / 2 ) / window.innerHeight;
+
+					const frustumHeight = camera.top - camera.bottom;
+
+					camera.left = - frustumHeight * aspect / 2;
+					camera.right = frustumHeight * aspect / 2;
+
+					camera.updateProjectionMatrix();
+
+					renderer.render( scene, camera );
+
+				}
+
+			}
+
+		</script>
+	</body>
+</html>