three-stdlib 2.16.0 → 2.16.1

package/utils/ShadowMapViewer.js

@@ -1,100 +1,141 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const THREE = require("three");
-const UnpackDepthRGBAShader = require("../shaders/UnpackDepthRGBAShader.js");
-var ShadowMapViewer = function(light) {
+import { OrthographicCamera, Scene, UniformsUtils, ShaderMaterial, PlaneGeometry, Mesh, Texture, LinearFilter, MeshBasicMaterial, DoubleSide } from 'three';
+import { UnpackDepthRGBAShader } from '../shaders/UnpackDepthRGBAShader.js';
+
+/**
+ * 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:
+ *		var 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:
+ *		var 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();
+ */
+
+var ShadowMapViewer = function (light) {
+  //- Internals
   var scope = this;
-  var doRenderLabel = light.name !== void 0 && light.name !== "";
-  var userAutoClearSetting;
+  var doRenderLabel = light.name !== undefined && light.name !== '';
+  var userAutoClearSetting; //Holds the initial position and dimension of the HUD
+
   var frame = {
     x: 10,
     y: 10,
     width: 256,
     height: 256
   };
-  var camera = new THREE.OrthographicCamera(
-    window.innerWidth / -2,
-    window.innerWidth / 2,
-    window.innerHeight / 2,
-    window.innerHeight / -2,
-    1,
-    10
-  );
+  var camera = new OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 10);
   camera.position.set(0, 0, 2);
-  var scene = new THREE.Scene();
-  var shader = UnpackDepthRGBAShader.UnpackDepthRGBAShader;
-  var uniforms = THREE.UniformsUtils.clone(shader.uniforms);
-  var material = new THREE.ShaderMaterial({
-    uniforms,
+  var scene = new Scene(); //HUD for shadow map
+
+  var shader = UnpackDepthRGBAShader;
+  var uniforms = UniformsUtils.clone(shader.uniforms);
+  var material = new ShaderMaterial({
+    uniforms: uniforms,
     vertexShader: shader.vertexShader,
     fragmentShader: shader.fragmentShader
   });
-  var plane = new THREE.PlaneGeometry(frame.width, frame.height);
-  var mesh = new THREE.Mesh(plane, material);
-  scene.add(mesh);
+  var plane = new PlaneGeometry(frame.width, frame.height);
+  var mesh = new Mesh(plane, material);
+  scene.add(mesh); //Label for light's name
+
   var labelCanvas, labelMesh;
+
   if (doRenderLabel) {
-    labelCanvas = document.createElement("canvas");
-    var context = labelCanvas.getContext("2d");
-    context.font = "Bold 20px Arial";
+    labelCanvas = document.createElement('canvas');
+    var context = labelCanvas.getContext('2d');
+    context.font = 'Bold 20px Arial';
     var labelWidth = context.measureText(light.name).width;
     labelCanvas.width = labelWidth;
-    labelCanvas.height = 25;
-    context.font = "Bold 20px Arial";
-    context.fillStyle = "rgba( 255, 0, 0, 1 )";
+    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);
-    var labelTexture = new THREE.Texture(labelCanvas);
-    labelTexture.magFilter = THREE.LinearFilter;
-    labelTexture.minFilter = THREE.LinearFilter;
+    var labelTexture = new Texture(labelCanvas);
+    labelTexture.magFilter = LinearFilter;
+    labelTexture.minFilter = LinearFilter;
     labelTexture.needsUpdate = true;
-    var labelMaterial = new THREE.MeshBasicMaterial({
+    var labelMaterial = new MeshBasicMaterial({
       map: labelTexture,
-      side: THREE.DoubleSide
+      side: DoubleSide
     });
     labelMaterial.transparent = true;
-    var labelPlane = new THREE.PlaneGeometry(labelCanvas.width, labelCanvas.height);
-    labelMesh = new THREE.Mesh(labelPlane, labelMaterial);
+    var 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);
-  }
-  this.enabled = true;
+  } //- 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) {
+    set: function (width, height) {
       this.width = width;
       this.height = height;
-      mesh.scale.set(this.width / frame.width, this.height / frame.height, 1);
+      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) {
+    set: function (x, y) {
       this.x = x;
       this.y = y;
       var width = scope.size.width;
       var 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) {
+
+  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
       uniforms.tDiffuse.value = light.shadow.map.texture;
       userAutoClearSetting = renderer.autoClear;
-      renderer.autoClear = false;
+      renderer.autoClear = false; // To allow render overlay
+
       renderer.clearDepth();
       renderer.render(scene, camera);
-      renderer.autoClear = userAutoClearSetting;
+      renderer.autoClear = userAutoClearSetting; //Restore user's setting
     }
   };
-  this.updateForWindowResize = function() {
+
+  this.updateForWindowResize = function () {
     if (this.enabled) {
       camera.left = window.innerWidth / -2;
       camera.right = window.innerWidth / 2;
@@ -104,11 +145,16 @@ var ShadowMapViewer = function(light) {
       this.update();
     }
   };
-  this.update = function() {
+
+  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();
 };
+
 ShadowMapViewer.prototype.constructor = ShadowMapViewer;
-exports.ShadowMapViewer = ShadowMapViewer;
+
+export { ShadowMapViewer };

package/utils/SkeletonUtils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,n,o,i,s,a,l,p,m,u,c=require("three"),x={retarget:(s=new c.Vector3,a=new c.Quaternion,l=new c.Vector3,p=new c.Matrix4,m=new c.Matrix4,u=new c.Matrix4,function(e,t,r){(r=r||{}).preserveMatrix=void 0===r.preserveMatrix||r.preserveMatrix,r.preservePosition=void 0===r.preservePosition||r.preservePosition,r.preserveHipPosition=void 0!==r.preserveHipPosition&&r.preserveHipPosition,r.useTargetMatrix=void 0!==r.useTargetMatrix&&r.useTargetMatrix,r.hip=void 0!==r.hip?r.hip:"hip",r.names=r.names||{};var n,o,i,c,x,d,f=t.isObject3D?t.skeleton.bones:this.getBones(t),h=e.isObject3D?e.skeleton.bones:this.getBones(e);if(e.isObject3D?e.skeleton.pose():(r.useTargetMatrix=!0,r.preserveMatrix=!1),r.preservePosition)for(x=[],d=0;d<h.length;d++)x.push(h[d].position.clone());if(r.preserveMatrix)for(e.updateMatrixWorld(),e.matrixWorld.identity(),d=0;d<e.children.length;++d)e.children[d].updateMatrixWorld(!0);if(r.offsets)for(n=[],d=0;d<h.length;++d)o=h[d],i=r.names[o.name]||o.name,r.offsets&&r.offsets[i]&&(o.matrix.multiply(r.offsets[i]),o.matrix.decompose(o.position,o.quaternion,o.scale),o.updateMatrixWorld()),n.push(o.matrixWorld.clone());for(d=0;d<h.length;++d){if(o=h[d],i=r.names[o.name]||o.name,c=this.getBoneByName(i,f),u.copy(o.matrixWorld),c){if(c.updateMatrixWorld(),r.useTargetMatrix?m.copy(c.matrixWorld):(m.copy(e.matrixWorld).invert(),m.multiply(c.matrixWorld)),l.setFromMatrixScale(m),m.scale(l.set(1/l.x,1/l.y,1/l.z)),u.makeRotationFromQuaternion(a.setFromRotationMatrix(m)),e.isObject3D){var v=h.indexOf(o),g=n?n[v]:p.copy(e.skeleton.boneInverses[v]).invert();u.multiply(g)}u.copyPosition(m)}o.parent&&o.parent.isBone?(o.matrix.copy(o.parent.matrixWorld).invert(),o.matrix.multiply(u)):o.matrix.copy(u),r.preserveHipPosition&&i===r.hip&&o.matrix.setPosition(s.set(0,o.position.y,0)),o.matrix.decompose(o.position,o.quaternion,o.scale),o.updateMatrixWorld()}if(r.preservePosition)for(d=0;d<h.length;++d)o=h[d],(i=r.names[o.name]||o.name)!==r.hip&&o.position.copy(x[d]);r.preserveMatrix&&e.updateMatrixWorld(!0)}),retargetClip:function(e,t,r,n){(n=n||{}).useFirstFramePosition=void 0!==n.useFirstFramePosition&&n.useFirstFramePosition,n.fps=void 0!==n.fps?n.fps:30,n.names=n.names||[],t.isObject3D||(t=this.getHelperFromSkeleton(t));var o,i,s,a,l,p,m=Math.round(r.duration*(n.fps/1e3)*1e3),u=1/n.fps,x=[],d=new c.AnimationMixer(t),f=this.getBones(e.skeleton),h=[];for(d.clipAction(r).play(),d.update(0),t.updateMatrixWorld(),l=0;l<m;++l){var v=l*u;for(this.retarget(e,t,n),p=0;p<f.length;++p)a=n.names[f[p].name]||f[p].name,this.getBoneByName(a,t.skeleton)&&(i=f[p],s=h[p]=h[p]||{bone:i},n.hip===a&&(s.pos||(s.pos={times:new Float32Array(m),values:new Float32Array(3*m)}),n.useFirstFramePosition&&(0===l&&(o=i.position.clone()),i.position.sub(o)),s.pos.times[l]=v,i.position.toArray(s.pos.values,3*l)),s.quat||(s.quat={times:new Float32Array(m),values:new Float32Array(4*m)}),s.quat.times[l]=v,i.quaternion.toArray(s.quat.values,4*l));d.update(u),t.updateMatrixWorld()}for(l=0;l<h.length;++l)(s=h[l])&&(s.pos&&x.push(new c.VectorKeyframeTrack(".bones["+s.bone.name+"].position",s.pos.times,s.pos.values)),x.push(new c.QuaternionKeyframeTrack(".bones["+s.bone.name+"].quaternion",s.quat.times,s.quat.values)));return d.uncacheAction(r),new c.AnimationClip(r.name,-1,x)},getHelperFromSkeleton:function(e){var t=new c.SkeletonHelper(e.bones[0]);return t.skeleton=e,t},getSkeletonOffsets:(e=new c.Vector3,t=new c.Vector3,r=new c.Vector3,n=new c.Vector3,o=new c.Vector2,i=new c.Vector2,function(s,a,l){(l=l||{}).hip=void 0!==l.hip?l.hip:"hip",l.names=l.names||{},a.isObject3D||(a=this.getHelperFromSkeleton(a));var p,m,u,x,d=Object.keys(l.names),f=Object.values(l.names),h=a.isObject3D?a.skeleton.bones:this.getBones(a),v=s.isObject3D?s.skeleton.bones:this.getBones(s),g=[];for(s.skeleton.pose(),x=0;x<v.length;++x)if(p=v[x],u=l.names[p.name]||p.name,(m=this.getBoneByName(u,h))&&u!==l.hip){var M=this.getNearestBone(p.parent,d),y=this.getNearestBone(m.parent,f);M.updateMatrixWorld(),y.updateMatrixWorld(),e.setFromMatrixPosition(M.matrixWorld),t.setFromMatrixPosition(p.matrixWorld),r.setFromMatrixPosition(y.matrixWorld),n.setFromMatrixPosition(m.matrixWorld),o.subVectors(new c.Vector2(t.x,t.y),new c.Vector2(e.x,e.y)).normalize(),i.subVectors(new c.Vector2(n.x,n.y),new c.Vector2(r.x,r.y)).normalize();var b=o.angle()-i.angle(),w=(new c.Matrix4).makeRotationFromEuler(new c.Euler(0,0,b));p.matrix.multiply(w),p.matrix.decompose(p.position,p.quaternion,p.scale),p.updateMatrixWorld(),g[u]=w}return g}),renameBones:function(e,t){var r=this.getBones(e);for(let e=0;e<r.length;++e){var n=r[e];t[n.name]&&(n.name=t[n.name])}return this},getBones:function(e){return Array.isArray(e)?e:e.bones},getBoneByName:function(e,t){for(let r=0,n=this.getBones(t);r<n.length;r++)if(e===n[r].name)return n[r]},getNearestBone:function(e,t){for(;e.isBone;){if(-1!==t.indexOf(e.name))return e;e=e.parent}},findBoneTrackData:function(e,t){var r=/\[(.*)\]\.(.*)/,n={name:e};for(let i=0;i<t.length;++i){var o=r.exec(t[i].name);o&&e===o[1]&&(n[o[2]]=i)}return n},getEqualsBonesNames:function(e,t){var r=this.getBones(e),n=this.getBones(t),o=[];e:for(let e=0;e<r.length;e++){var i=r[e].name;for(let e=0;e<n.length;e++)if(i===n[e].name){o.push(i);continue e}}return o},clone:function(e){var t=new Map,r=new Map,n=e.clone();return d(e,n,(function(e,n){t.set(n,e),r.set(e,n)})),n.traverse((function(e){if(e.isSkinnedMesh){var n=e,o=t.get(e),i=o.skeleton.bones;n.skeleton=o.skeleton.clone(),n.bindMatrix.copy(o.bindMatrix),n.skeleton.bones=i.map((function(e){return r.get(e)})),n.bind(n.skeleton,n.bindMatrix)}})),n}};function d(e,t,r){r(e,t);for(let n=0;n<e.children.length;n++)d(e.children[n],t.children[n],r)}exports.SkeletonUtils=x;