Examples: Simpified webgl_kinect and renamed to webgl_video_kinect.

examples/files.js

@@ -60,7 +60,6 @@ var files = {
 		"webgl_interactive_points",
 		"webgl_interactive_raycasting_points",
 		"webgl_interactive_voxelpainter",
-		"webgl_kinect",
 		"webgl_layers",
 		"webgl_lensflares",
 		"webgl_lightprobe",
@@ -229,6 +228,7 @@ var files = {
 		"webgl_test_memory2",
 		"webgl_tonemapping",
 		"webgl_trails",
+		"webgl_video_kinect",
 		"webgl_video_panorama_equirectangular",
 		"webgl_water",
 		"webgl_water_flowmap"

examples/webgl_kinect.html → examples/webgl_video_kinect.html

@@ -101,64 +101,61 @@
 				center.z = - 1000;
 
 				var video = document.getElementById( 'video' );
-				video.addEventListener( 'loadedmetadata', function () {
 
-					var texture = new THREE.VideoTexture( video );
-					texture.minFilter = THREE.NearestFilter;
+				var texture = new THREE.VideoTexture( video );
+				texture.minFilter = THREE.NearestFilter;
 
-					var width = 640, height = 480;
-					var nearClipping = 850, farClipping = 4000;
+				var width = 640, height = 480;
+				var nearClipping = 850, farClipping = 4000;
 
-					geometry = new THREE.BufferGeometry();
+				geometry = new THREE.BufferGeometry();
 
-					var vertices = new Float32Array( width * height * 3 );
+				var vertices = new Float32Array( width * height * 3 );
 
-					for ( var i = 0, j = 0, l = vertices.length; i < l; i += 3, j ++ ) {
+				for ( var i = 0, j = 0, l = vertices.length; i < l; i += 3, j ++ ) {
 
-						vertices[ i ] = j % width;
-						vertices[ i + 1 ] = Math.floor( j / width );
+					vertices[ i ] = j % width;
+					vertices[ i + 1 ] = Math.floor( j / width );
 
-					}
+				}
 
-					geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+				geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
 
-					material = new THREE.ShaderMaterial( {
+				material = new THREE.ShaderMaterial( {
 
-						uniforms: {
+					uniforms: {
 
-							"map": { value: texture },
-							"width": { value: width },
-							"height": { value: height },
-							"nearClipping": { value: nearClipping },
-							"farClipping": { value: farClipping },
+						"map": { value: texture },
+						"width": { value: width },
+						"height": { value: height },
+						"nearClipping": { value: nearClipping },
+						"farClipping": { value: farClipping },
 
-							"pointSize": { value: 2 },
-							"zOffset": { value: 1000 }
+						"pointSize": { value: 2 },
+						"zOffset": { value: 1000 }
 
-						},
-						vertexShader: document.getElementById( 'vs' ).textContent,
-						fragmentShader: document.getElementById( 'fs' ).textContent,
-						blending: THREE.AdditiveBlending,
-						depthTest: false, depthWrite: false,
-						transparent: true
+					},
+					vertexShader: document.getElementById( 'vs' ).textContent,
+					fragmentShader: document.getElementById( 'fs' ).textContent,
+					blending: THREE.AdditiveBlending,
+					depthTest: false, depthWrite: false,
+					transparent: true
 
-					} );
+				} );
 
-					mesh = new THREE.Points( geometry, material );
-					scene.add( mesh );
+				mesh = new THREE.Points( geometry, material );
+				scene.add( mesh );
 
-					var gui = new GUI();
-					gui.add( material.uniforms.nearClipping, 'value', 1, 10000, 1.0 ).name( 'nearClipping' );
-					gui.add( material.uniforms.farClipping, 'value', 1, 10000, 1.0 ).name( 'farClipping' );
-					gui.add( material.uniforms.pointSize, 'value', 1, 10, 1.0 ).name( 'pointSize' );
-					gui.add( material.uniforms.zOffset, 'value', 0, 4000, 1.0 ).name( 'zOffset' );
-					gui.close();
-
-
-				}, false );
+				var gui = new GUI();
+				gui.add( material.uniforms.nearClipping, 'value', 1, 10000, 1.0 ).name( 'nearClipping' );
+				gui.add( material.uniforms.farClipping, 'value', 1, 10000, 1.0 ).name( 'farClipping' );
+				gui.add( material.uniforms.pointSize, 'value', 1, 10, 1.0 ).name( 'pointSize' );
+				gui.add( material.uniforms.zOffset, 'value', 0, 4000, 1.0 ).name( 'zOffset' );
 
 				video.play();
 
+				//
+
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

test/e2e/puppeteer.js

@@ -43,12 +43,12 @@ const exceptionList = [
 	'index',
 	'css3d_youtube', // video tag not deterministic enough
 	'webaudio_visualizer', // audio can't be analyzed without proper audio hook
-	'webgl_kinect', // video tag not deterministic enough
 	'webgl_loader_texture_pvrtc', // not supported in CI, useless
 	'webgl_materials_envmaps_parallax', // empty for some reason
 	'webgl_raymarching_reflect', // exception for Github Actions
 	'webgl_test_memory2', // gives fatal error in puppeteer
 	'webgl_tiled_forward', // exception for Github Actions
+	'webgl_video_kinect', // video tag not deterministic enough
 	'webgl_worker_offscreencanvas', // in a worker, not robust
 
 ].concat( ( process.platform === "win32" ) ? [