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/webgl_clipculldistance.html
+++ b/docker-compose/requirements/nginx/static/three/examples/webgl_clipculldistance.html
@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js WebGL 2 - clip cull distance</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="container"></div>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener" >three.js</a> - vertex shader clipping via
+			<a href="https://registry.khronos.org/webgl/extensions/WEBGL_clip_cull_distance/" target="_blank" rel="noopener" >WEBGL_clip_cull_distance</a>
+			<div id="notSupported" style="display:none">WEBGL_clip_cull_distance not supported</div>
+		</div>
+
+		<script id="vertexShader" type="x-shader/x-vertex">
+
+			uniform float time;
+
+			varying vec4 vColor;
+
+			void main() {
+
+				vColor = color;
+
+				#ifdef USE_CLIP_DISTANCE
+					vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+					gl_ClipDistance[ 0 ] = worldPosition.x - sin( time ) * ( 0.5 );
+				#endif
+
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+			}
+
+		</script>
+
+		<script id="fragmentShader" type="x-shader/x-fragment">
+
+			varying vec4 vColor;
+
+			void main() {
+
+				gl_FragColor = vColor;
+
+			}
+
+		</script>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+			import * as THREE from '/static/three/build/three.module.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			let camera, controls, clock, scene, renderer, stats;
+
+			let material;
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
+				camera.position.z = 2;
+
+				scene = new THREE.Scene();
+
+				clock = new THREE.Clock();
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+
+				if ( renderer.extensions.has( 'WEBGL_clip_cull_distance' ) === false ) {
+
+					document.getElementById( 'notSupported' ).style.display = '';
+					return;
+
+				}
+
+				const ext = renderer
+					.getContext()
+					.getExtension( 'WEBGL_clip_cull_distance' );
+				const gl = renderer.getContext();
+
+				gl.enable( ext.CLIP_DISTANCE0_WEBGL );
+
+				// geometry
+
+				const vertexCount = 200 * 3;
+
+				const geometry = new THREE.BufferGeometry();
+
+				const positions = [];
+				const colors = [];
+
+				for ( let i = 0; i < vertexCount; i ++ ) {
+
+					// adding x,y,z
+					positions.push( Math.random() - 0.5 );
+					positions.push( Math.random() - 0.5 );
+					positions.push( Math.random() - 0.5 );
+
+					// adding r,g,b,a
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+
+				}
+
+				const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
+				colorAttribute.normalized = true;
+
+				geometry.setAttribute( 'position', positionAttribute );
+				geometry.setAttribute( 'color', colorAttribute );
+
+				// material
+
+				material = new THREE.ShaderMaterial( {
+
+					uniforms: {
+						time: { value: 1.0 }
+					},
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					side: THREE.DoubleSide,
+					transparent: true,
+					vertexColors: true
+
+				} );
+
+				material.extensions.clipCullDistance = true;
+
+				const mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				//
+
+				controls = new OrbitControls( camera, renderer.domElement );
+
+				//
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				controls.update();
+				stats.update();
+
+				material.uniforms.time.value = clock.getElapsedTime();
+
+				renderer.render( scene, camera );
+
+			}
+		</script>
+	</body>
+</html>