super-three 0.168.0 → 0.169.1

package/examples/jsm/utils/GeometryCompressionUtils.js

@@ -11,27 +11,19 @@ import {
 	Matrix4,
 	Vector3
 } from 'three';
-import { PackedPhongMaterial } from './PackedPhongMaterial.js';
 
 
 
 /**
- * Make the input mesh.geometry's normal attribute encoded and compressed by 3 different methods.
- * Also will change the mesh.material to `PackedPhongMaterial` which let the vertex shader program decode the normal data.
+ * Make the input geometry's normal attribute encoded and compressed by 3 different methods.
  *
- * @param {THREE.Mesh} mesh
+ * @param {THREE.BufferGeometry} geometry
  * @param {String} encodeMethod		"DEFAULT" || "OCT1Byte" || "OCT2Byte" || "ANGLES"
  *
  */
-function compressNormals( mesh, encodeMethod ) {
+function compressNormals( geometry, encodeMethod ) {
 
-	if ( ! mesh.geometry ) {
-
-		console.error( 'Mesh must contain geometry. ' );
-
-	}
-
-	const normal = mesh.geometry.attributes.normal;
+	const normal = geometry.attributes.normal;
 
 	if ( ! normal ) {
 
@@ -66,8 +58,8 @@ function compressNormals( mesh, encodeMethod ) {
 
 		}
 
-		mesh.geometry.setAttribute( 'normal', new BufferAttribute( result, 3, true ) );
-		mesh.geometry.attributes.normal.bytes = result.length * 1;
+		geometry.setAttribute( 'normal', new BufferAttribute( result, 3, true ) );
+		geometry.attributes.normal.bytes = result.length * 1;
 
 	} else if ( encodeMethod == 'OCT1Byte' ) {
 
@@ -88,8 +80,8 @@ function compressNormals( mesh, encodeMethod ) {
 
 		}
 
-		mesh.geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
-		mesh.geometry.attributes.normal.bytes = result.length * 1;
+		geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
+		geometry.attributes.normal.bytes = result.length * 1;
 
 	} else if ( encodeMethod == 'OCT2Byte' ) {
 
@@ -104,8 +96,8 @@ function compressNormals( mesh, encodeMethod ) {
 
 		}
 
-		mesh.geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
-		mesh.geometry.attributes.normal.bytes = result.length * 2;
+		geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
+		geometry.attributes.normal.bytes = result.length * 2;
 
 	} else if ( encodeMethod == 'ANGLES' ) {
 
@@ -120,8 +112,8 @@ function compressNormals( mesh, encodeMethod ) {
 
 		}
 
-		mesh.geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
-		mesh.geometry.attributes.normal.bytes = result.length * 2;
+		geometry.setAttribute( 'normal', new BufferAttribute( result, 2, true ) );
+		geometry.attributes.normal.bytes = result.length * 2;
 
 	} else {
 
@@ -129,60 +121,22 @@ function compressNormals( mesh, encodeMethod ) {
 
 	}
 
-	mesh.geometry.attributes.normal.needsUpdate = true;
-	mesh.geometry.attributes.normal.isPacked = true;
-	mesh.geometry.attributes.normal.packingMethod = encodeMethod;
-
-	// modify material
-	if ( ! ( mesh.material instanceof PackedPhongMaterial ) ) {
-
-		mesh.material = new PackedPhongMaterial().copy( mesh.material );
-
-	}
-
-	if ( encodeMethod == 'ANGLES' ) {
-
-		mesh.material.defines.USE_PACKED_NORMAL = 0;
-
-	}
-
-	if ( encodeMethod == 'OCT1Byte' ) {
-
-		mesh.material.defines.USE_PACKED_NORMAL = 1;
-
-	}
-
-	if ( encodeMethod == 'OCT2Byte' ) {
-
-		mesh.material.defines.USE_PACKED_NORMAL = 1;
-
-	}
-
-	if ( encodeMethod == 'DEFAULT' ) {
-
-		mesh.material.defines.USE_PACKED_NORMAL = 2;
-
-	}
+	geometry.attributes.normal.needsUpdate = true;
+	geometry.attributes.normal.isPacked = true;
+	geometry.attributes.normal.packingMethod = encodeMethod;
 
 }
 
 
 /**
-	 * Make the input mesh.geometry's position attribute encoded and compressed.
-	 * Also will change the mesh.material to `PackedPhongMaterial` which let the vertex shader program decode the position data.
+	 * Make the input geometry's position attribute encoded and compressed.
 	 *
-	 * @param {THREE.Mesh} mesh
+	 * @param {THREE.BufferGeometry} geometry
 	 *
 	 */
-function compressPositions( mesh ) {
+function compressPositions( geometry ) {
 
-	if ( ! mesh.geometry ) {
-
-		console.error( 'Mesh must contain geometry. ' );
-
-	}
-
-	const position = mesh.geometry.attributes.position;
+	const position = geometry.attributes.position;
 
 	if ( ! position ) {
 
@@ -204,47 +158,27 @@ function compressPositions( mesh ) {
 	const result = quantizedEncode( array, encodingBytes );
 
 	const quantized = result.quantized;
-	const decodeMat = result.decodeMat;
 
 	// IMPORTANT: calculate original geometry bounding info first, before updating packed positions
-	if ( mesh.geometry.boundingBox == null ) mesh.geometry.computeBoundingBox();
-	if ( mesh.geometry.boundingSphere == null ) mesh.geometry.computeBoundingSphere();
+	if ( geometry.boundingBox == null ) geometry.computeBoundingBox();
+	if ( geometry.boundingSphere == null ) geometry.computeBoundingSphere();
 
-	mesh.geometry.setAttribute( 'position', new BufferAttribute( quantized, 3 ) );
-	mesh.geometry.attributes.position.isPacked = true;
-	mesh.geometry.attributes.position.needsUpdate = true;
-	mesh.geometry.attributes.position.bytes = quantized.length * encodingBytes;
-
-	// modify material
-	if ( ! ( mesh.material instanceof PackedPhongMaterial ) ) {
-
-		mesh.material = new PackedPhongMaterial().copy( mesh.material );
-
-	}
-
-	mesh.material.defines.USE_PACKED_POSITION = 0;
-
-	mesh.material.uniforms.quantizeMatPos.value = decodeMat;
-	mesh.material.uniforms.quantizeMatPos.needsUpdate = true;
+	geometry.setAttribute( 'position', new BufferAttribute( quantized, 3 ) );
+	geometry.attributes.position.isPacked = true;
+	geometry.attributes.position.needsUpdate = true;
+	geometry.attributes.position.bytes = quantized.length * encodingBytes;
 
 }
 
 /**
- * Make the input mesh.geometry's uv attribute encoded and compressed.
- * Also will change the mesh.material to `PackedPhongMaterial` which let the vertex shader program decode the uv data.
+ * Make the input geometry's uv attribute encoded and compressed.
  *
- * @param {THREE.Mesh} mesh
+ * @param {THREE.BufferGeometry} geometry
  *
  */
-function compressUvs( mesh ) {
+function compressUvs( geometry ) {
 
-	if ( ! mesh.geometry ) {
-
-		console.error( 'Mesh must contain geometry property. ' );
-
-	}
-
-	const uvs = mesh.geometry.attributes.uv;
+	const uvs = geometry.attributes.uv;
 
 	if ( ! uvs ) {
 
@@ -281,39 +215,20 @@ function compressUvs( mesh ) {
 
 		}
 
-		mesh.geometry.setAttribute( 'uv', new BufferAttribute( result, 2, true ) );
-		mesh.geometry.attributes.uv.isPacked = true;
-		mesh.geometry.attributes.uv.needsUpdate = true;
-		mesh.geometry.attributes.uv.bytes = result.length * 2;
-
-		if ( ! ( mesh.material instanceof PackedPhongMaterial ) ) {
-
-			mesh.material = new PackedPhongMaterial().copy( mesh.material );
-
-		}
-
-		mesh.material.defines.USE_PACKED_UV = 0;
+		geometry.setAttribute( 'uv', new BufferAttribute( result, 2, true ) );
+		geometry.attributes.uv.isPacked = true;
+		geometry.attributes.uv.needsUpdate = true;
+		geometry.attributes.uv.bytes = result.length * 2;
 
 	} else {
 
 		// use quantized encoding method
 		result = quantizedEncodeUV( array, 2 );
 
-		mesh.geometry.setAttribute( 'uv', new BufferAttribute( result.quantized, 2 ) );
-		mesh.geometry.attributes.uv.isPacked = true;
-		mesh.geometry.attributes.uv.needsUpdate = true;
-		mesh.geometry.attributes.uv.bytes = result.quantized.length * 2;
-
-		if ( ! ( mesh.material instanceof PackedPhongMaterial ) ) {
-
-			mesh.material = new PackedPhongMaterial().copy( mesh.material );
-
-		}
-
-		mesh.material.defines.USE_PACKED_UV = 1;
-
-		mesh.material.uniforms.quantizeMatUV.value = result.decodeMat;
-		mesh.material.uniforms.quantizeMatUV.needsUpdate = true;
+		geometry.setAttribute( 'uv', new BufferAttribute( result.quantized, 2 ) );
+		geometry.attributes.uv.isPacked = true;
+		geometry.attributes.uv.needsUpdate = true;
+		geometry.attributes.uv.bytes = result.quantized.length * 2;
 
 	}
 

package/examples/jsm/utils/ShadowMapViewer.js

@@ -1,13 +1,12 @@
 import {
 	DoubleSide,
-	LinearFilter,
+	CanvasTexture,
 	Mesh,
 	MeshBasicMaterial,
 	OrthographicCamera,
 	PlaneGeometry,
 	Scene,
 	ShaderMaterial,
-	Texture,
 	UniformsUtils
 } from 'three';
 import { UnpackDepthRGBAShader } from '../shaders/UnpackDepthRGBAShader.js';
@@ -93,13 +92,9 @@ class ShadowMapViewer {
 			context.fillStyle = 'rgba( 255, 0, 0, 1 )';
 			context.fillText( light.name, 0, 20 );
 
-			const labelTexture = new Texture( labelCanvas );
-			labelTexture.magFilter = LinearFilter;
-			labelTexture.minFilter = LinearFilter;
-			labelTexture.needsUpdate = true;
+			const labelTexture = new CanvasTexture( labelCanvas );
 
-			const labelMaterial = new MeshBasicMaterial( { map: labelTexture, side: DoubleSide } );
-			labelMaterial.transparent = true;
+			const labelMaterial = new MeshBasicMaterial( { map: labelTexture, side: DoubleSide, transparent: true } );
 
 			const labelPlane = new PlaneGeometry( labelCanvas.width, labelCanvas.height );
 			labelMesh = new Mesh( labelPlane, labelMaterial );

package/examples/jsm/utils/ShadowMapViewerGPU.js

@@ -0,0 +1,201 @@
+import {
+	DoubleSide,
+	CanvasTexture,
+	Mesh,
+	MeshBasicMaterial,
+	NodeMaterial,
+	OrthographicCamera,
+	PlaneGeometry,
+	Scene,
+	Texture
+} from 'three';
+import { texture } from 'three/tsl';
+
+/**
+ * This is a helper for visualising a given light's shadow map.
+ * It works for shadow casting lights: DirectionalLight and SpotLight.
+ * It renders out the shadow map and displays it on a HUD.
+ *
+ * Example usage:
+ *	1) Import ShadowMapViewer into your app.
+ *
+ *	2) Create a shadow casting light and name it optionally:
+ *		let light = new DirectionalLight( 0xffffff, 1 );
+ *		light.castShadow = true;
+ *		light.name = 'Sun';
+ *
+ *	3) Create a shadow map viewer for that light and set its size and position optionally:
+ *		let shadowMapViewer = new ShadowMapViewer( light );
+ *		shadowMapViewer.size.set( 128, 128 );	//width, height  default: 256, 256
+ *		shadowMapViewer.position.set( 10, 10 );	//x, y in pixel	 default: 0, 0 (top left corner)
+ *
+ *	4) Render the shadow map viewer in your render loop:
+ *		shadowMapViewer.render( renderer );
+ *
+ *	5) Optionally: Update the shadow map viewer on window resize:
+ *		shadowMapViewer.updateForWindowResize();
+ *
+ *	6) If you set the position or size members directly, you need to call shadowMapViewer.update();
+ */
+
+class ShadowMapViewer {
+
+	constructor( light ) {
+
+		//- Internals
+		const scope = this;
+		const doRenderLabel = ( light.name !== undefined && light.name !== '' );
+		let currentAutoClear;
+
+		//Holds the initial position and dimension of the HUD
+		const frame = {
+			x: 10,
+			y: 10,
+			width: 256,
+			height: 256
+		};
+
+		const camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10 );
+		camera.position.set( 0, 0, 2 );
+		const scene = new Scene();
+
+		//HUD for shadow map
+
+		const material = new NodeMaterial();
+
+		const shadowMapUniform = texture( new Texture() );
+		material.fragmentNode = shadowMapUniform;
+
+		const plane = new PlaneGeometry( frame.width, frame.height );
+		const mesh = new Mesh( plane, material );
+
+		scene.add( mesh );
+
+		//Label for light's name
+		let labelCanvas, labelMesh;
+
+		if ( doRenderLabel ) {
+
+			labelCanvas = document.createElement( 'canvas' );
+
+			const context = labelCanvas.getContext( '2d' );
+			context.font = 'Bold 20px Arial';
+
+			const labelWidth = context.measureText( light.name ).width;
+			labelCanvas.width = labelWidth;
+			labelCanvas.height = 25;	//25 to account for g, p, etc.
+
+			context.font = 'Bold 20px Arial';
+			context.fillStyle = 'rgba( 255, 0, 0, 1 )';
+			context.fillText( light.name, 0, 20 );
+
+			const labelTexture = new CanvasTexture( labelCanvas );
+
+			const labelMaterial = new MeshBasicMaterial( { map: labelTexture, side: DoubleSide, transparent: true } );
+
+			const labelPlane = new PlaneGeometry( labelCanvas.width, labelCanvas.height );
+			labelMesh = new Mesh( labelPlane, labelMaterial );
+
+			scene.add( labelMesh );
+
+		}
+
+		function resetPosition() {
+
+			scope.position.set( scope.position.x, scope.position.y );
+
+		}
+
+		//- API
+		// Set to false to disable displaying this shadow map
+		this.enabled = true;
+
+		// Set the size of the displayed shadow map on the HUD
+		this.size = {
+			width: frame.width,
+			height: frame.height,
+			set: function ( width, height ) {
+
+				this.width = width;
+				this.height = height;
+
+				mesh.scale.set( this.width / frame.width, this.height / frame.height, 1 );
+
+				//Reset the position as it is off when we scale stuff
+				resetPosition();
+
+			}
+		};
+
+		// Set the position of the displayed shadow map on the HUD
+		this.position = {
+			x: frame.x,
+			y: frame.y,
+			set: function ( x, y ) {
+
+				this.x = x;
+				this.y = y;
+
+				const width = scope.size.width;
+				const height = scope.size.height;
+
+				mesh.position.set( - window.innerWidth / 2 + width / 2 + this.x, window.innerHeight / 2 - height / 2 - this.y, 0 );
+
+				if ( doRenderLabel ) labelMesh.position.set( mesh.position.x, mesh.position.y - scope.size.height / 2 + labelCanvas.height / 2, 0 );
+
+			}
+		};
+
+		this.render = function ( renderer ) {
+
+			if ( this.enabled ) {
+
+				//Because a light's .shadowMap is only initialised after the first render pass
+				//we have to make sure the correct map is sent into the shader, otherwise we
+				//always end up with the scene's first added shadow casting light's shadowMap
+				//in the shader
+				//See: https://github.com/mrdoob/three.js/issues/5932
+				shadowMapUniform.value = light.shadow.map.texture;
+
+				currentAutoClear = renderer.autoClear;
+				renderer.autoClear = false; // To allow render overlay
+				renderer.clearDepth();
+				renderer.render( scene, camera );
+				renderer.autoClear = currentAutoClear;
+
+			}
+
+		};
+
+		this.updateForWindowResize = function () {
+
+			if ( this.enabled ) {
+
+				 camera.left = window.innerWidth / - 2;
+				 camera.right = window.innerWidth / 2;
+				 camera.top = window.innerHeight / 2;
+				 camera.bottom = window.innerHeight / - 2;
+				 camera.updateProjectionMatrix();
+
+				 this.update();
+
+			}
+
+		};
+
+		this.update = function () {
+
+			this.position.set( this.position.x, this.position.y );
+			this.size.set( this.size.width, this.size.height );
+
+		};
+
+		//Force an update to set position/size
+		this.update();
+
+	}
+
+}
+
+
+export { ShadowMapViewer };