@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.16.8 → 3.16.9

package/dist/managers/environmentGeometry/ContactShadow.js

@@ -1,289 +1,299 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContactShadow = void 0;
-const THREE = __importStar(require("three"));
-const HorizontalBlurShader_js_1 = require("three/examples/jsm/shaders/HorizontalBlurShader.js");
-const VerticalBlurShader_js_1 = require("three/examples/jsm/shaders/VerticalBlurShader.js");
-const SDObject_1 = require("../../objects/SDObject");
-class ContactShadow {
-    // #endregion Properties (16)
-    // #region Constructors (1)
-    constructor(_renderingEngine, _parent) {
-        this._renderingEngine = _renderingEngine;
-        this._parent = _parent;
-        // #region Properties (16)
-        this._blur = 1.5;
-        this._color = "#ffffff";
-        this._darkness = 2.5;
-        this._height = 0.25;
-        this._opacity = 1;
-        this._currentGridExtents = 1;
-        this._originalMaterials = new Map();
-        this._contactShadowObject = new SDObject_1.SDObject("contactShadow", "");
-        this._contactShadowObject.visible = false;
-        this._contactShadowObject.userData.ambientOcclusion = false;
-        this._parent.add(this._contactShadowObject);
-        this.createContactShadow();
-    }
-    // #endregion Constructors (1)
-    // #region Public Getters And Setters (10)
-    get blur() {
-        return this._blur;
-    }
-    set blur(value) {
-        this._blur = value;
-    }
-    get darkness() {
-        return this._darkness;
-    }
-    set darkness(value) {
-        this._darkness = value;
-    }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        this._height = value;
-        this._shadowCamera.far = this._currentGridExtents * value;
-        this._shadowCamera.updateProjectionMatrix();
-        // const cameraHelper = new THREE.CameraHelper(this._shadowCamera);
-        // this._parent.add(cameraHelper);
-        this._renderingEngine.renderingManager.updateShadowMap();
-    }
-    get opacity() {
-        return this._opacity;
-    }
-    set opacity(value) {
-        this._opacity = value;
-        this._plane.material.opacity = value;
-    }
-    get visible() {
-        return this._contactShadowObject.visible;
-    }
-    set visible(value) {
-        this._contactShadowObject.visible = value;
-    }
-    // #endregion Public Getters And Setters (10)
-    // #region Public Methods (3)
-    changeSceneExtents(position, divisions, gridExtents) {
-        this._currentGridExtents = gridExtents;
-        const widthAndHeight = 2 * gridExtents;
-        const planeGeometry = new THREE.PlaneGeometry(widthAndHeight, widthAndHeight);
-        this._plane.geometry.dispose();
-        this._plane.geometry = planeGeometry;
-        this._fillPlane.geometry.dispose();
-        this._fillPlane.geometry = planeGeometry;
-        this._blurPlane.geometry.dispose();
-        this._blurPlane.geometry = planeGeometry;
-        this._shadowCamera = new THREE.OrthographicCamera(-widthAndHeight / 2, widthAndHeight / 2, widthAndHeight / 2, -widthAndHeight / 2, 0, gridExtents * this._height);
-        this._shadowCamera.up.set(0, 1, 0);
-        this._shadowCamera.position.set(0, 0, -gridExtents / 50);
-        this._shadowCamera.lookAt(0, 0, 1);
-        this._shadowCamera.updateProjectionMatrix();
-        this._shadowGroup.add(this._shadowCamera);
-        // const cameraHelper = new THREE.CameraHelper(this._shadowCamera);
-        // this._parent.add(cameraHelper);
-        this._contactShadowObject.position.set(position[0], position[1], position[2]);
-        this._renderingEngine.renderingManager.updateShadowMap();
-    }
-    render() {
-        const initialGridVisibility = this._renderingEngine.gridVisibility;
-        this._renderingEngine.gridVisibility = false;
-        const initialGroundPlaneVisibility = this._renderingEngine.groundPlaneVisibility;
-        this._renderingEngine.groundPlaneVisibility = false;
-        const initialGroundPlaneShadowVisibility = this._renderingEngine.groundPlaneShadowVisibility;
-        this._renderingEngine.groundPlaneShadowVisibility = false;
-        this._blurPlane.visible = false;
-        this._fillPlane.visible = false;
-        this._plane.visible = false;
-        const excludedObjects = [];
-        this._renderingEngine.scene.traverse(function (object) {
-            if (object.visible === true) {
-                if (object instanceof THREE.Line ||
-                    object instanceof THREE.LineLoop ||
-                    object instanceof THREE.LineSegments ||
-                    object instanceof THREE.Points) {
-                    excludedObjects.push(object);
-                    object.visible = false;
-                }
-            }
-        });
-        // remove the background
-        const initialBackground = this._renderingEngine.scene.background;
-        this._renderingEngine.scene.background = null;
-        // Apply transparency-aware depth materials to all mesh objects
-        this._originalMaterials.clear();
-        this._renderingEngine.scene.traverse((object) => {
-            if (object instanceof THREE.Mesh && object.material) {
-                this._originalMaterials.set(object, object.material);
-                object.material = this.createTransparencyAwareDepthMaterial(object.material);
-            }
-        });
-        // set renderer clear alpha
-        const initialClearAlpha = this._renderingEngine.renderer.getClearAlpha();
-        this._renderingEngine.renderer.setClearAlpha(0);
-        // render to the render target to get the depths
-        this._renderingEngine.renderer.setRenderTarget(this._renderTarget);
-        this._renderingEngine.renderer.render(this._renderingEngine.scene, this._shadowCamera);
-        // Restore original materials
-        this._originalMaterials.forEach((originalMaterial, object) => {
-            if (object instanceof THREE.Mesh) {
-                object.material = originalMaterial;
-            }
-        });
-        this._originalMaterials.clear();
-        this.blurShadow(this._blur);
-        // // a second pass to reduce the artifacts
-        // // (0.4 is the minimum blur amount so that the artifacts are gone)
-        this.blurShadow(this._blur * 0.4);
-        // reset and render the normal scene
-        this._renderingEngine.renderer.setRenderTarget(null);
-        this._renderingEngine.renderer.setClearAlpha(initialClearAlpha);
-        this._renderingEngine.scene.background = initialBackground;
-        for (const object of excludedObjects)
-            object.visible = true;
-        this._plane.visible = true;
-        this._renderingEngine.gridVisibility = initialGridVisibility;
-        this._renderingEngine.groundPlaneVisibility =
-            initialGroundPlaneVisibility;
-        this._renderingEngine.groundPlaneShadowVisibility =
-            initialGroundPlaneShadowVisibility;
-    }
-    updatePosition(position) {
-        this._contactShadowObject.position.set(position[0], position[1], position[2]);
-    }
-    // #endregion Public Methods (3)
-    // #region Private Methods (3)
-    createTransparencyAwareDepthMaterial(originalMaterial) {
-        let materialOpacity = 1.0;
-        let isTransparent = false;
-        // Extract opacity and transparency from the original material
-        if (Array.isArray(originalMaterial)) {
-            // For multi-materials, use the opacity of the first material that has opacity
-            const materialWithOpacity = originalMaterial.find((mat) => "opacity" in mat &&
-                typeof mat.opacity === "number");
-            if (materialWithOpacity) {
-                materialOpacity = materialWithOpacity.opacity;
-                isTransparent =
-                    materialWithOpacity.transparent ||
-                        materialOpacity < 1.0;
-            }
-        }
-        else if ("opacity" in originalMaterial &&
-            typeof originalMaterial.opacity === "number") {
-            materialOpacity = originalMaterial.opacity;
-            isTransparent =
-                originalMaterial.transparent || materialOpacity < 1.0;
-        }
-        // If the material is not transparent or has full opacity, treat it as opaque for shadows
-        if (!isTransparent || materialOpacity >= 1.0) {
-            materialOpacity = 1.0;
-        }
-        // Calculate adjusted darkness based on material opacity
-        const adjustedDarkness = this._darkness * materialOpacity;
-        // Create a new depth material for this specific object
-        const depthMaterial = new THREE.MeshDepthMaterial();
-        depthMaterial.side = THREE.DoubleSide;
-        depthMaterial.userData.darkness = { value: adjustedDarkness };
-        depthMaterial.onBeforeCompile = (shader) => {
-            shader.uniforms.darkness = depthMaterial.userData.darkness;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactShadow = void 0;
+const THREE = __importStar(require("three"));
+const HorizontalBlurShader_js_1 = require("three/examples/jsm/shaders/HorizontalBlurShader.js");
+const VerticalBlurShader_js_1 = require("three/examples/jsm/shaders/VerticalBlurShader.js");
+const SDObject_1 = require("../../objects/SDObject");
+class ContactShadow {
+    // #endregion Properties (16)
+    // #region Constructors (1)
+    constructor(_renderingEngine, _parent) {
+        this._renderingEngine = _renderingEngine;
+        this._parent = _parent;
+        // #region Properties (16)
+        this._blur = 1.5;
+        this._color = "#ffffff";
+        this._darkness = 2.5;
+        this._height = 0.25;
+        this._opacity = 1;
+        this._currentGridExtents = 1;
+        this._originalMaterials = new Map();
+        this._contactShadowObject = new SDObject_1.SDObject("contactShadow", "");
+        this._contactShadowObject.visible = false;
+        this._contactShadowObject.userData.ambientOcclusion = false;
+        this._parent.add(this._contactShadowObject);
+        this.createContactShadow();
+    }
+    // #endregion Constructors (1)
+    // #region Public Getters And Setters (10)
+    get blur() {
+        return this._blur;
+    }
+    set blur(value) {
+        this._blur = value;
+    }
+    get darkness() {
+        return this._darkness;
+    }
+    set darkness(value) {
+        this._darkness = value;
+    }
+    get height() {
+        return this._height;
+    }
+    set height(value) {
+        this._height = value;
+        this._shadowCamera.far = this._currentGridExtents * value;
+        this._shadowCamera.updateProjectionMatrix();
+        // const cameraHelper = new THREE.CameraHelper(this._shadowCamera);
+        // this._parent.add(cameraHelper);
+        this._renderingEngine.renderingManager.updateShadowMap();
+    }
+    get opacity() {
+        return this._opacity;
+    }
+    set opacity(value) {
+        this._opacity = value;
+        this._plane.material.opacity = value;
+    }
+    get visible() {
+        return this._contactShadowObject.visible;
+    }
+    set visible(value) {
+        this._contactShadowObject.visible = value;
+    }
+    // #endregion Public Getters And Setters (10)
+    // #region Public Methods (3)
+    changeSceneExtents(position, divisions, gridExtents) {
+        this._currentGridExtents = gridExtents;
+        const widthAndHeight = 2 * gridExtents;
+        const planeGeometry = new THREE.PlaneGeometry(widthAndHeight, widthAndHeight);
+        this._plane.geometry.dispose();
+        this._plane.geometry = planeGeometry;
+        this._fillPlane.geometry.dispose();
+        this._fillPlane.geometry = planeGeometry;
+        this._blurPlane.geometry.dispose();
+        this._blurPlane.geometry = planeGeometry;
+        this._shadowCamera = new THREE.OrthographicCamera(-widthAndHeight / 2, widthAndHeight / 2, widthAndHeight / 2, -widthAndHeight / 2, 0, gridExtents * this._height);
+        this._shadowCamera.up.set(0, 1, 0);
+        this._shadowCamera.position.set(0, 0, -gridExtents / 50);
+        this._shadowCamera.lookAt(0, 0, 1);
+        this._shadowCamera.updateProjectionMatrix();
+        this._shadowGroup.add(this._shadowCamera);
+        // const cameraHelper = new THREE.CameraHelper(this._shadowCamera);
+        // this._parent.add(cameraHelper);
+        this._contactShadowObject.position.set(position[0], position[1], position[2]);
+        this._renderingEngine.renderingManager.updateShadowMap();
+    }
+    render() {
+        const initialGridVisibility = this._renderingEngine.gridVisibility;
+        this._renderingEngine.gridVisibility = false;
+        const initialGroundPlaneVisibility = this._renderingEngine.groundPlaneVisibility;
+        this._renderingEngine.groundPlaneVisibility = false;
+        const initialGroundPlaneShadowVisibility = this._renderingEngine.groundPlaneShadowVisibility;
+        this._renderingEngine.groundPlaneShadowVisibility = false;
+        this._blurPlane.visible = false;
+        this._fillPlane.visible = false;
+        this._plane.visible = false;
+        const excludedObjects = [];
+        this._renderingEngine.scene.traverse(function (object) {
+            if (object.visible === true) {
+                if (object instanceof THREE.Line ||
+                    object instanceof THREE.LineLoop ||
+                    object instanceof THREE.LineSegments ||
+                    object instanceof THREE.Points) {
+                    excludedObjects.push(object);
+                    object.visible = false;
+                }
+            }
+        });
+        // remove the background
+        const initialBackground = this._renderingEngine.scene.background;
+        this._renderingEngine.scene.background = null;
+        // Apply transparency-aware depth materials to all mesh objects
+        this._originalMaterials.clear();
+        this._renderingEngine.scene.traverse((object) => {
+            if (object instanceof THREE.Mesh && object.material) {
+                this._originalMaterials.set(object, object.material);
+                object.material = this.createTransparencyAwareDepthMaterial(object.material);
+            }
+        });
+        // set renderer clear alpha
+        const initialClearAlpha = this._renderingEngine.renderer.getClearAlpha();
+        this._renderingEngine.renderer.setClearAlpha(0);
+        // render to the render target to get the depths
+        this._renderingEngine.renderer.setRenderTarget(this._renderTarget);
+        this._renderingEngine.renderer.render(this._renderingEngine.scene, this._shadowCamera);
+        // Restore original materials
+        this._originalMaterials.forEach((originalMaterial, object) => {
+            if (object instanceof THREE.Mesh) {
+                object.material = originalMaterial;
+            }
+        });
+        this._originalMaterials.clear();
+        this.blurShadow(this._blur);
+        // // a second pass to reduce the artifacts
+        // // (0.4 is the minimum blur amount so that the artifacts are gone)
+        this.blurShadow(this._blur * 0.4);
+        // reset and render the normal scene
+        this._renderingEngine.renderer.setRenderTarget(null);
+        this._renderingEngine.renderer.setClearAlpha(initialClearAlpha);
+        this._renderingEngine.scene.background = initialBackground;
+        for (const object of excludedObjects)
+            object.visible = true;
+        this._plane.visible = true;
+        this._renderingEngine.gridVisibility = initialGridVisibility;
+        this._renderingEngine.groundPlaneVisibility =
+            initialGroundPlaneVisibility;
+        this._renderingEngine.groundPlaneShadowVisibility =
+            initialGroundPlaneShadowVisibility;
+    }
+    updatePosition(position) {
+        this._contactShadowObject.position.set(position[0], position[1], position[2]);
+    }
+    // #endregion Public Methods (3)
+    // #region Private Methods (3)
+    createTransparencyAwareDepthMaterial(originalMaterial) {
+        let materialOpacity = 1.0;
+        let isTransparent = false;
+        // Extract opacity and transparency from the original material
+        if (Array.isArray(originalMaterial)) {
+            // For multi-materials, use the opacity of the first material that has opacity
+            const materialWithOpacity = originalMaterial.find((mat) => "opacity" in mat &&
+                typeof mat.opacity === "number");
+            if (materialWithOpacity) {
+                materialOpacity = materialWithOpacity.opacity;
+                isTransparent =
+                    materialWithOpacity.transparent ||
+                        materialOpacity < 1.0;
+            }
+        }
+        else if ("opacity" in originalMaterial &&
+            typeof originalMaterial.opacity === "number") {
+            materialOpacity = originalMaterial.opacity;
+            isTransparent =
+                originalMaterial.transparent || materialOpacity < 1.0;
+        }
+        // If the material is not transparent or has full opacity, treat it as opaque for shadows
+        if (!isTransparent || materialOpacity >= 1.0) {
+            materialOpacity = 1.0;
+        }
+        // Calculate adjusted darkness based on material opacity
+        const adjustedDarkness = this._darkness * materialOpacity;
+        // Create a new depth material for this specific object
+        const depthMaterial = new THREE.MeshDepthMaterial();
+        depthMaterial.side = THREE.DoubleSide;
+        depthMaterial.userData.darkness = { value: adjustedDarkness };
+        depthMaterial.onBeforeCompile = (shader) => {
+            shader.uniforms.darkness = depthMaterial.userData.darkness;
             shader.fragmentShader = /* glsl */ `
 				uniform float darkness;
 				${shader.fragmentShader.replace("gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );", "gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * darkness );")}
-			`;
-        };
-        depthMaterial.depthTest = false;
-        depthMaterial.depthWrite = false;
-        return depthMaterial;
-    }
-    blurShadow(amount) {
-        this._blurPlane.visible = true;
-        // blur horizontally and draw in the renderTargetBlur
-        this._blurPlane.material = this._horizontalBlurMaterial;
-        this._blurPlane.material.uniforms.tDiffuse.value = this._renderTarget.texture;
-        this._horizontalBlurMaterial.uniforms.h.value = (amount * 1) / 256;
-        this._renderingEngine.renderer.setRenderTarget(this._renderTargetBlur);
-        this._renderingEngine.renderer.render(this._blurPlane, this._shadowCamera);
-        // blur vertically and draw in the main renderTarget
-        this._blurPlane.material = this._verticalBlurMaterial;
-        this._blurPlane.material.uniforms.tDiffuse.value = this._renderTargetBlur.texture;
-        this._verticalBlurMaterial.uniforms.v.value = (amount * 1) / 256;
-        this._renderingEngine.renderer.setRenderTarget(this._renderTarget);
-        this._renderingEngine.renderer.render(this._blurPlane, this._shadowCamera);
-        this._blurPlane.visible = false;
-    }
-    createContactShadow() {
-        const widthAndHeight = 1;
-        // the container, if you need to move the plane just move this
-        this._shadowGroup = new THREE.Group();
-        this._contactShadowObject.add(this._shadowGroup);
-        // the render target that will show the shadows in the plane texture
-        this._renderTarget = new THREE.WebGLRenderTarget(512, 512);
-        this._renderTarget.texture.generateMipmaps = false;
-        // the render target that we will use to blur the first render target
-        this._renderTargetBlur = new THREE.WebGLRenderTarget(512, 512);
-        this._renderTargetBlur.texture.generateMipmaps = false;
-        // make a plane and make it face up
-        const planeGeometry = new THREE.PlaneGeometry(widthAndHeight, widthAndHeight);
-        const planeMaterial = new THREE.MeshBasicMaterial({
-            map: this._renderTarget.texture,
-            opacity: this._opacity,
-            transparent: true,
-            depthWrite: false,
-        });
-        this._plane = new THREE.Mesh(planeGeometry, planeMaterial);
-        // make sure it's rendered after the fillPlane
-        this._plane.renderOrder = 1;
-        this._shadowGroup.add(this._plane);
-        // // the y from the texture is flipped!
-        // this._plane.rotateZ(-Math.PI/2);
-        this._plane.scale.x = -1;
-        // this._plane.scale.y = -1;
-        // the plane onto which to blur the texture
-        this._blurPlane = new THREE.Mesh(planeGeometry);
-        this._blurPlane.rotateX(Math.PI);
-        this._blurPlane.visible = false;
-        this._shadowGroup.add(this._blurPlane);
-        // the plane with the color of the ground
-        const fillPlaneMaterial = new THREE.MeshBasicMaterial({
-            color: this._color,
-            opacity: 0,
-            transparent: true,
-            depthWrite: false,
-        });
-        this._fillPlane = new THREE.Mesh(planeGeometry, fillPlaneMaterial);
-        this._shadowGroup.add(this._fillPlane);
-        // the camera to render the depth material from
-        this._shadowCamera = new THREE.OrthographicCamera(-widthAndHeight / 2, widthAndHeight / 2, widthAndHeight / 2, -widthAndHeight / 2, 0, 1);
-        this._shadowGroup.add(this._shadowCamera);
-        this._horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader_js_1.HorizontalBlurShader);
-        this._horizontalBlurMaterial.depthTest = false;
-        this._verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader_js_1.VerticalBlurShader);
-        this._verticalBlurMaterial.depthTest = false;
-    }
-}
-exports.ContactShadow = ContactShadow;
+			`;
+        };
+        depthMaterial.depthTest = false;
+        depthMaterial.depthWrite = false;
+        return depthMaterial;
+    }
+    blurShadow(amount) {
+        this._blurPlane.visible = true;
+        // blur horizontally and draw in the renderTargetBlur
+        this._blurPlane.material = this._horizontalBlurMaterial;
+        this._blurPlane.material.uniforms.tDiffuse.value = this._renderTarget.texture;
+        this._horizontalBlurMaterial.uniforms.h.value = (amount * 1) / 256;
+        this._renderingEngine.renderer.setRenderTarget(this._renderTargetBlur);
+        this._renderingEngine.renderer.render(this._blurPlane, this._shadowCamera);
+        // blur vertically and draw in the main renderTarget
+        this._blurPlane.material = this._verticalBlurMaterial;
+        this._blurPlane.material.uniforms.tDiffuse.value = this._renderTargetBlur.texture;
+        this._verticalBlurMaterial.uniforms.v.value = (amount * 1) / 256;
+        this._renderingEngine.renderer.setRenderTarget(this._renderTarget);
+        this._renderingEngine.renderer.render(this._blurPlane, this._shadowCamera);
+        this._blurPlane.visible = false;
+    }
+    createContactShadow() {
+        const widthAndHeight = 1;
+        // the container, if you need to move the plane just move this
+        this._shadowGroup = new THREE.Group();
+        this._contactShadowObject.add(this._shadowGroup);
+        // the render target that will show the shadows in the plane texture
+        this._renderTarget = new THREE.WebGLRenderTarget(512, 512);
+        this._renderTarget.texture.generateMipmaps = false;
+        // the render target that we will use to blur the first render target
+        this._renderTargetBlur = new THREE.WebGLRenderTarget(512, 512);
+        this._renderTargetBlur.texture.generateMipmaps = false;
+        // make a plane and make it face up
+        const planeGeometry = new THREE.PlaneGeometry(widthAndHeight, widthAndHeight);
+        const planeMaterial = new THREE.MeshBasicMaterial({
+            map: this._renderTarget.texture,
+            opacity: this._opacity,
+            transparent: true,
+            depthWrite: false,
+        });
+        this._plane = new THREE.Mesh(planeGeometry, planeMaterial);
+        // make sure it's rendered after the fillPlane
+        this._plane.renderOrder = 1;
+        this._shadowGroup.add(this._plane);
+        // // the y from the texture is flipped!
+        // this._plane.rotateZ(-Math.PI/2);
+        this._plane.scale.x = -1;
+        // this._plane.scale.y = -1;
+        // the plane onto which to blur the texture
+        this._blurPlane = new THREE.Mesh(planeGeometry);
+        this._blurPlane.rotateX(Math.PI);
+        this._blurPlane.visible = false;
+        this._shadowGroup.add(this._blurPlane);
+        // the plane with the color of the ground
+        const fillPlaneMaterial = new THREE.MeshBasicMaterial({
+            color: this._color,
+            opacity: 0,
+            transparent: true,
+            depthWrite: false,
+        });
+        this._fillPlane = new THREE.Mesh(planeGeometry, fillPlaneMaterial);
+        this._shadowGroup.add(this._fillPlane);
+        // the camera to render the depth material from
+        this._shadowCamera = new THREE.OrthographicCamera(-widthAndHeight / 2, widthAndHeight / 2, widthAndHeight / 2, -widthAndHeight / 2, 0, 1);
+        this._shadowGroup.add(this._shadowCamera);
+        this._horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader_js_1.HorizontalBlurShader);
+        this._horizontalBlurMaterial.depthTest = false;
+        this._verticalBlurMaterial = new THREE.ShaderMaterial(VerticalBlurShader_js_1.VerticalBlurShader);
+        this._verticalBlurMaterial.depthTest = false;
+    }
+}
+exports.ContactShadow = ContactShadow;
 //# sourceMappingURL=ContactShadow.js.map