three-stdlib 2.15.2 → 2.16.1

package/postprocessing/OutlinePass.js

@@ -1,96 +1,169 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Pass = require("./Pass.js");
-const THREE = require("three");
-const CopyShader = require("../shaders/CopyShader.js");
-class OutlinePass extends Pass.Pass {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { Pass, FullScreenQuad } from './Pass.js';
+import { Vector2, Color, WebGLRenderTarget, MeshDepthMaterial, DoubleSide, RGBADepthPacking, NoBlending, UniformsUtils, ShaderMaterial, Matrix4, Vector3, AdditiveBlending } from 'three';
+import { CopyShader } from '../shaders/CopyShader.js';
+
+class OutlinePass extends Pass {
   constructor(resolution, scene, camera, selectedObjects) {
     super();
-    this.BlurDirectionX = new THREE.Vector2(1, 0);
-    this.BlurDirectionY = new THREE.Vector2(0, 1);
+
+    _defineProperty(this, "renderScene", void 0);
+
+    _defineProperty(this, "renderCamera", void 0);
+
+    _defineProperty(this, "selectedObjects", void 0);
+
+    _defineProperty(this, "visibleEdgeColor", void 0);
+
+    _defineProperty(this, "hiddenEdgeColor", void 0);
+
+    _defineProperty(this, "edgeGlow", void 0);
+
+    _defineProperty(this, "usePatternTexture", void 0);
+
+    _defineProperty(this, "edgeThickness", void 0);
+
+    _defineProperty(this, "edgeStrength", void 0);
+
+    _defineProperty(this, "downSampleRatio", void 0);
+
+    _defineProperty(this, "pulsePeriod", void 0);
+
+    _defineProperty(this, "resolution", void 0);
+
+    _defineProperty(this, "renderTargetMaskBuffer", void 0);
+
+    _defineProperty(this, "depthMaterial", void 0);
+
+    _defineProperty(this, "prepareMaskMaterial", void 0);
+
+    _defineProperty(this, "renderTargetDepthBuffer", void 0);
+
+    _defineProperty(this, "renderTargetMaskDownSampleBuffer", void 0);
+
+    _defineProperty(this, "renderTargetBlurBuffer1", void 0);
+
+    _defineProperty(this, "renderTargetBlurBuffer2", void 0);
+
+    _defineProperty(this, "edgeDetectionMaterial", void 0);
+
+    _defineProperty(this, "renderTargetEdgeBuffer1", void 0);
+
+    _defineProperty(this, "renderTargetEdgeBuffer2", void 0);
+
+    _defineProperty(this, "separableBlurMaterial1", void 0);
+
+    _defineProperty(this, "separableBlurMaterial2", void 0);
+
+    _defineProperty(this, "overlayMaterial", void 0);
+
+    _defineProperty(this, "materialCopy", void 0);
+
+    _defineProperty(this, "oldClearAlpha", void 0);
+
+    _defineProperty(this, "fsQuad", void 0);
+
+    _defineProperty(this, "tempPulseColor1", void 0);
+
+    _defineProperty(this, "tempPulseColor2", void 0);
+
+    _defineProperty(this, "textureMatrix", void 0);
+
+    _defineProperty(this, "patternTexture", void 0);
+
+    _defineProperty(this, "_visibilityCache", void 0);
+
+    _defineProperty(this, "_oldClearColor", void 0);
+
+    _defineProperty(this, "copyUniforms", void 0);
+
+    _defineProperty(this, "BlurDirectionX", new Vector2(1.0, 0.0));
+
+    _defineProperty(this, "BlurDirectionY", new Vector2(0.0, 1.0));
+
     this.renderScene = scene;
     this.renderCamera = camera;
-    this.selectedObjects = selectedObjects !== void 0 ? selectedObjects : [];
-    this.visibleEdgeColor = new THREE.Color(1, 1, 1);
-    this.hiddenEdgeColor = new THREE.Color(0.1, 0.04, 0.02);
-    this.edgeGlow = 0;
+    this.selectedObjects = selectedObjects !== undefined ? selectedObjects : [];
+    this.visibleEdgeColor = new Color(1, 1, 1);
+    this.hiddenEdgeColor = new Color(0.1, 0.04, 0.02);
+    this.edgeGlow = 0.0;
     this.usePatternTexture = false;
-    this.edgeThickness = 1;
-    this.edgeStrength = 3;
+    this.edgeThickness = 1.0;
+    this.edgeStrength = 3.0;
     this.downSampleRatio = 2;
     this.pulsePeriod = 0;
-    this._visibilityCache = /* @__PURE__ */ new Map();
-    this.resolution = resolution !== void 0 ? new THREE.Vector2(resolution.x, resolution.y) : new THREE.Vector2(256, 256);
+    this._visibilityCache = new Map();
+    this.resolution = resolution !== undefined ? new Vector2(resolution.x, resolution.y) : new Vector2(256, 256);
     const resx = Math.round(this.resolution.x / this.downSampleRatio);
     const resy = Math.round(this.resolution.y / this.downSampleRatio);
-    this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget(this.resolution.x, this.resolution.y);
-    this.renderTargetMaskBuffer.texture.name = "OutlinePass.mask";
+    this.renderTargetMaskBuffer = new WebGLRenderTarget(this.resolution.x, this.resolution.y);
+    this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
     this.renderTargetMaskBuffer.texture.generateMipmaps = false;
-    this.depthMaterial = new THREE.MeshDepthMaterial();
-    this.depthMaterial.side = THREE.DoubleSide;
-    this.depthMaterial.depthPacking = THREE.RGBADepthPacking;
-    this.depthMaterial.blending = THREE.NoBlending;
+    this.depthMaterial = new MeshDepthMaterial();
+    this.depthMaterial.side = DoubleSide;
+    this.depthMaterial.depthPacking = RGBADepthPacking;
+    this.depthMaterial.blending = NoBlending;
     this.prepareMaskMaterial = this.getPrepareMaskMaterial();
-    this.prepareMaskMaterial.side = THREE.DoubleSide;
-    this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ(
-      this.prepareMaskMaterial.fragmentShader,
-      this.renderCamera
-    );
-    this.renderTargetDepthBuffer = new THREE.WebGLRenderTarget(this.resolution.x, this.resolution.y);
-    this.renderTargetDepthBuffer.texture.name = "OutlinePass.depth";
+    this.prepareMaskMaterial.side = DoubleSide;
+    this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ(this.prepareMaskMaterial.fragmentShader, this.renderCamera);
+    this.renderTargetDepthBuffer = new WebGLRenderTarget(this.resolution.x, this.resolution.y);
+    this.renderTargetDepthBuffer.texture.name = 'OutlinePass.depth';
     this.renderTargetDepthBuffer.texture.generateMipmaps = false;
-    this.renderTargetMaskDownSampleBuffer = new THREE.WebGLRenderTarget(resx, resy);
-    this.renderTargetMaskDownSampleBuffer.texture.name = "OutlinePass.depthDownSample";
+    this.renderTargetMaskDownSampleBuffer = new WebGLRenderTarget(resx, resy);
+    this.renderTargetMaskDownSampleBuffer.texture.name = 'OutlinePass.depthDownSample';
     this.renderTargetMaskDownSampleBuffer.texture.generateMipmaps = false;
-    this.renderTargetBlurBuffer1 = new THREE.WebGLRenderTarget(resx, resy);
-    this.renderTargetBlurBuffer1.texture.name = "OutlinePass.blur1";
+    this.renderTargetBlurBuffer1 = new WebGLRenderTarget(resx, resy);
+    this.renderTargetBlurBuffer1.texture.name = 'OutlinePass.blur1';
     this.renderTargetBlurBuffer1.texture.generateMipmaps = false;
-    this.renderTargetBlurBuffer2 = new THREE.WebGLRenderTarget(Math.round(resx / 2), Math.round(resy / 2));
-    this.renderTargetBlurBuffer2.texture.name = "OutlinePass.blur2";
+    this.renderTargetBlurBuffer2 = new WebGLRenderTarget(Math.round(resx / 2), Math.round(resy / 2));
+    this.renderTargetBlurBuffer2.texture.name = 'OutlinePass.blur2';
     this.renderTargetBlurBuffer2.texture.generateMipmaps = false;
     this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
-    this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget(resx, resy);
-    this.renderTargetEdgeBuffer1.texture.name = "OutlinePass.edge1";
+    this.renderTargetEdgeBuffer1 = new WebGLRenderTarget(resx, resy);
+    this.renderTargetEdgeBuffer1.texture.name = 'OutlinePass.edge1';
     this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
-    this.renderTargetEdgeBuffer2 = new THREE.WebGLRenderTarget(Math.round(resx / 2), Math.round(resy / 2));
-    this.renderTargetEdgeBuffer2.texture.name = "OutlinePass.edge2";
+    this.renderTargetEdgeBuffer2 = new WebGLRenderTarget(Math.round(resx / 2), Math.round(resy / 2));
+    this.renderTargetEdgeBuffer2.texture.name = 'OutlinePass.edge2';
     this.renderTargetEdgeBuffer2.texture.generateMipmaps = false;
     const MAX_EDGE_THICKNESS = 4;
     const MAX_EDGE_GLOW = 4;
     this.separableBlurMaterial1 = this.getSeperableBlurMaterial(MAX_EDGE_THICKNESS);
-    this.separableBlurMaterial1.uniforms["texSize"].value.set(resx, resy);
-    this.separableBlurMaterial1.uniforms["kernelRadius"].value = 1;
+    this.separableBlurMaterial1.uniforms['texSize'].value.set(resx, resy);
+    this.separableBlurMaterial1.uniforms['kernelRadius'].value = 1;
     this.separableBlurMaterial2 = this.getSeperableBlurMaterial(MAX_EDGE_GLOW);
-    this.separableBlurMaterial2.uniforms["texSize"].value.set(Math.round(resx / 2), Math.round(resy / 2));
-    this.separableBlurMaterial2.uniforms["kernelRadius"].value = MAX_EDGE_GLOW;
-    this.overlayMaterial = this.getOverlayMaterial();
-    if (CopyShader.CopyShader === void 0)
-      console.error("THREE.OutlinePass relies on CopyShader");
-    const copyShader = CopyShader.CopyShader;
-    this.copyUniforms = THREE.UniformsUtils.clone(copyShader.uniforms);
-    this.copyUniforms["opacity"].value = 1;
-    this.materialCopy = new THREE.ShaderMaterial({
+    this.separableBlurMaterial2.uniforms['texSize'].value.set(Math.round(resx / 2), Math.round(resy / 2));
+    this.separableBlurMaterial2.uniforms['kernelRadius'].value = MAX_EDGE_GLOW; // Overlay material
+
+    this.overlayMaterial = this.getOverlayMaterial(); // copy material
+
+    if (CopyShader === undefined) console.error('THREE.OutlinePass relies on CopyShader');
+    const copyShader = CopyShader;
+    this.copyUniforms = UniformsUtils.clone(copyShader.uniforms);
+    this.copyUniforms['opacity'].value = 1.0;
+    this.materialCopy = new ShaderMaterial({
       uniforms: this.copyUniforms,
       vertexShader: copyShader.vertexShader,
       fragmentShader: copyShader.fragmentShader,
-      blending: THREE.NoBlending,
+      blending: NoBlending,
       depthTest: false,
       depthWrite: false,
       transparent: true
     });
     this.enabled = true;
     this.needsSwap = false;
-    this._oldClearColor = new THREE.Color();
+    this._oldClearColor = new Color();
     this.oldClearAlpha = 1;
-    this.fsQuad = new Pass.FullScreenQuad(this.materialCopy);
-    this.tempPulseColor1 = new THREE.Color();
-    this.tempPulseColor2 = new THREE.Color();
-    this.textureMatrix = new THREE.Matrix4();
-    function replaceDepthToViewZ(string, camera2) {
-      const type = camera2.isPerspectiveCamera ? "perspective" : "orthographic";
-      return string.replace(/DEPTH_TO_VIEW_Z/g, type + "DepthToViewZ");
+    this.fsQuad = new FullScreenQuad(this.materialCopy);
+    this.tempPulseColor1 = new Color();
+    this.tempPulseColor2 = new Color();
+    this.textureMatrix = new Matrix4();
+
+    function replaceDepthToViewZ(string, camera) {
+      const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
+      return string.replace(/DEPTH_TO_VIEW_Z/g, type + 'DepthToViewZ');
     }
   }
+
   dispose() {
     this.renderTargetMaskBuffer.dispose();
     this.renderTargetDepthBuffer.dispose();
@@ -100,6 +173,7 @@ class OutlinePass extends Pass.Pass {
     this.renderTargetEdgeBuffer1.dispose();
     this.renderTargetEdgeBuffer2.dispose();
   }
+
   setSize(width, height) {
     this.renderTargetMaskBuffer.setSize(width, height);
     this.renderTargetDepthBuffer.setSize(width, height);
@@ -108,15 +182,17 @@ class OutlinePass extends Pass.Pass {
     this.renderTargetMaskDownSampleBuffer.setSize(resx, resy);
     this.renderTargetBlurBuffer1.setSize(resx, resy);
     this.renderTargetEdgeBuffer1.setSize(resx, resy);
-    this.separableBlurMaterial1.uniforms["texSize"].value.set(resx, resy);
+    this.separableBlurMaterial1.uniforms['texSize'].value.set(resx, resy);
     resx = Math.round(resx / 2);
     resy = Math.round(resy / 2);
     this.renderTargetBlurBuffer2.setSize(resx, resy);
     this.renderTargetEdgeBuffer2.setSize(resx, resy);
-    this.separableBlurMaterial2.uniforms["texSize"].value.set(resx, resy);
+    this.separableBlurMaterial2.uniforms['texSize'].value.set(resx, resy);
   }
+
   changeVisibilityOfSelectedObjects(bVisible) {
     const cache = this._visibilityCache;
+
     function gatherSelectedMeshesCallBack(object) {
       if (object.isMesh) {
         if (bVisible === true) {
@@ -127,163 +203,194 @@ class OutlinePass extends Pass.Pass {
         }
       }
     }
+
     for (let i = 0; i < this.selectedObjects.length; i++) {
       const selectedObject = this.selectedObjects[i];
       selectedObject.traverse(gatherSelectedMeshesCallBack);
     }
   }
+
   changeVisibilityOfNonSelectedObjects(bVisible) {
     const cache = this._visibilityCache;
     const selectedMeshes = [];
+
     function gatherSelectedMeshesCallBack(object) {
-      if (object.isMesh)
-        selectedMeshes.push(object);
+      if (object.isMesh) selectedMeshes.push(object);
     }
+
     for (let i = 0; i < this.selectedObjects.length; i++) {
       const selectedObject = this.selectedObjects[i];
       selectedObject.traverse(gatherSelectedMeshesCallBack);
     }
+
     function VisibilityChangeCallBack(object) {
       if (object.isMesh || object.isSprite) {
+        // only meshes and sprites are supported by OutlinePass
         let bFound = false;
+
         for (let i = 0; i < selectedMeshes.length; i++) {
           const selectedObjectId = selectedMeshes[i].id;
+
           if (selectedObjectId === object.id) {
             bFound = true;
             break;
           }
         }
+
         if (bFound === false) {
           const visibility = object.visible;
+
           if (bVisible === false || cache.get(object) === true) {
             object.visible = bVisible;
           }
+
           cache.set(object, visibility);
         }
       } else if (object.isPoints || object.isLine) {
+        // the visibilty of points and lines is always set to false in order to
+        // not affect the outline computation
         if (bVisible === true) {
-          object.visible = cache.get(object);
+          object.visible = cache.get(object); // restore
         } else {
           cache.set(object, object.visible);
           object.visible = bVisible;
         }
       }
     }
+
     this.renderScene.traverse(VisibilityChangeCallBack);
   }
+
   updateTextureMatrix() {
-    this.textureMatrix.set(0.5, 0, 0, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1);
+    this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
     this.textureMatrix.multiply(this.renderCamera.projectionMatrix);
     this.textureMatrix.multiply(this.renderCamera.matrixWorldInverse);
   }
+
   render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
     if (this.selectedObjects.length > 0) {
       renderer.getClearColor(this._oldClearColor);
       this.oldClearAlpha = renderer.getClearAlpha();
       const oldAutoClear = renderer.autoClear;
       renderer.autoClear = false;
-      if (maskActive)
-        renderer.state.buffers.stencil.setTest(false);
-      renderer.setClearColor(16777215, 1);
+      if (maskActive) renderer.state.buffers.stencil.setTest(false);
+      renderer.setClearColor(0xffffff, 1); // Make selected objects invisible
+
       this.changeVisibilityOfSelectedObjects(false);
       const currentBackground = this.renderScene.background;
-      this.renderScene.background = null;
+      this.renderScene.background = null; // 1. Draw Non Selected objects in the depth buffer
+
       this.renderScene.overrideMaterial = this.depthMaterial;
       renderer.setRenderTarget(this.renderTargetDepthBuffer);
       renderer.clear();
-      renderer.render(this.renderScene, this.renderCamera);
+      renderer.render(this.renderScene, this.renderCamera); // Make selected objects visible
+
       this.changeVisibilityOfSelectedObjects(true);
-      this._visibilityCache.clear();
-      this.updateTextureMatrix();
+
+      this._visibilityCache.clear(); // Update Texture Matrix for Depth compare
+
+
+      this.updateTextureMatrix(); // Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects
+
       this.changeVisibilityOfNonSelectedObjects(false);
       this.renderScene.overrideMaterial = this.prepareMaskMaterial;
-      this.prepareMaskMaterial.uniforms["cameraNearFar"].value.set(
-        this.renderCamera.near,
-        this.renderCamera.far
-      );
-      this.prepareMaskMaterial.uniforms["depthTexture"].value = this.renderTargetDepthBuffer.texture;
-      this.prepareMaskMaterial.uniforms["textureMatrix"].value = this.textureMatrix;
+      this.prepareMaskMaterial.uniforms['cameraNearFar'].value.set(this.renderCamera.near, this.renderCamera.far);
+      this.prepareMaskMaterial.uniforms['depthTexture'].value = this.renderTargetDepthBuffer.texture;
+      this.prepareMaskMaterial.uniforms['textureMatrix'].value = this.textureMatrix;
       renderer.setRenderTarget(this.renderTargetMaskBuffer);
       renderer.clear();
       renderer.render(this.renderScene, this.renderCamera);
       this.renderScene.overrideMaterial = null;
       this.changeVisibilityOfNonSelectedObjects(true);
+
       this._visibilityCache.clear();
-      this.renderScene.background = currentBackground;
+
+      this.renderScene.background = currentBackground; // 2. Downsample to Half resolution
+
       this.fsQuad.material = this.materialCopy;
-      this.copyUniforms["tDiffuse"].value = this.renderTargetMaskBuffer.texture;
+      this.copyUniforms['tDiffuse'].value = this.renderTargetMaskBuffer.texture;
       renderer.setRenderTarget(this.renderTargetMaskDownSampleBuffer);
       renderer.clear();
       this.fsQuad.render(renderer);
       this.tempPulseColor1.copy(this.visibleEdgeColor);
       this.tempPulseColor2.copy(this.hiddenEdgeColor);
+
       if (this.pulsePeriod > 0) {
-        const scalar = (1 + 0.25) / 2 + Math.cos(performance.now() * 0.01 / this.pulsePeriod) * (1 - 0.25) / 2;
+        const scalar = (1 + 0.25) / 2 + Math.cos(performance.now() * 0.01 / this.pulsePeriod) * (1.0 - 0.25) / 2;
         this.tempPulseColor1.multiplyScalar(scalar);
         this.tempPulseColor2.multiplyScalar(scalar);
-      }
+      } // 3. Apply Edge Detection Pass
+
+
       this.fsQuad.material = this.edgeDetectionMaterial;
-      this.edgeDetectionMaterial.uniforms["maskTexture"].value = this.renderTargetMaskDownSampleBuffer.texture;
-      this.edgeDetectionMaterial.uniforms["texSize"].value.set(
-        this.renderTargetMaskDownSampleBuffer.width,
-        this.renderTargetMaskDownSampleBuffer.height
-      );
-      this.edgeDetectionMaterial.uniforms["visibleEdgeColor"].value = this.tempPulseColor1;
-      this.edgeDetectionMaterial.uniforms["hiddenEdgeColor"].value = this.tempPulseColor2;
+      this.edgeDetectionMaterial.uniforms['maskTexture'].value = this.renderTargetMaskDownSampleBuffer.texture;
+      this.edgeDetectionMaterial.uniforms['texSize'].value.set(this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height);
+      this.edgeDetectionMaterial.uniforms['visibleEdgeColor'].value = this.tempPulseColor1;
+      this.edgeDetectionMaterial.uniforms['hiddenEdgeColor'].value = this.tempPulseColor2;
       renderer.setRenderTarget(this.renderTargetEdgeBuffer1);
       renderer.clear();
-      this.fsQuad.render(renderer);
+      this.fsQuad.render(renderer); // 4. Apply Blur on Half res
+
       this.fsQuad.material = this.separableBlurMaterial1;
-      this.separableBlurMaterial1.uniforms["colorTexture"].value = this.renderTargetEdgeBuffer1.texture;
-      this.separableBlurMaterial1.uniforms["direction"].value = this.BlurDirectionX;
-      this.separableBlurMaterial1.uniforms["kernelRadius"].value = this.edgeThickness;
+      this.separableBlurMaterial1.uniforms['colorTexture'].value = this.renderTargetEdgeBuffer1.texture;
+      this.separableBlurMaterial1.uniforms['direction'].value = this.BlurDirectionX;
+      this.separableBlurMaterial1.uniforms['kernelRadius'].value = this.edgeThickness;
       renderer.setRenderTarget(this.renderTargetBlurBuffer1);
       renderer.clear();
       this.fsQuad.render(renderer);
-      this.separableBlurMaterial1.uniforms["colorTexture"].value = this.renderTargetBlurBuffer1.texture;
-      this.separableBlurMaterial1.uniforms["direction"].value = this.BlurDirectionY;
+      this.separableBlurMaterial1.uniforms['colorTexture'].value = this.renderTargetBlurBuffer1.texture;
+      this.separableBlurMaterial1.uniforms['direction'].value = this.BlurDirectionY;
       renderer.setRenderTarget(this.renderTargetEdgeBuffer1);
       renderer.clear();
-      this.fsQuad.render(renderer);
+      this.fsQuad.render(renderer); // Apply Blur on quarter res
+
       this.fsQuad.material = this.separableBlurMaterial2;
-      this.separableBlurMaterial2.uniforms["colorTexture"].value = this.renderTargetEdgeBuffer1.texture;
-      this.separableBlurMaterial2.uniforms["direction"].value = this.BlurDirectionX;
+      this.separableBlurMaterial2.uniforms['colorTexture'].value = this.renderTargetEdgeBuffer1.texture;
+      this.separableBlurMaterial2.uniforms['direction'].value = this.BlurDirectionX;
       renderer.setRenderTarget(this.renderTargetBlurBuffer2);
       renderer.clear();
       this.fsQuad.render(renderer);
-      this.separableBlurMaterial2.uniforms["colorTexture"].value = this.renderTargetBlurBuffer2.texture;
-      this.separableBlurMaterial2.uniforms["direction"].value = this.BlurDirectionY;
+      this.separableBlurMaterial2.uniforms['colorTexture'].value = this.renderTargetBlurBuffer2.texture;
+      this.separableBlurMaterial2.uniforms['direction'].value = this.BlurDirectionY;
       renderer.setRenderTarget(this.renderTargetEdgeBuffer2);
       renderer.clear();
-      this.fsQuad.render(renderer);
+      this.fsQuad.render(renderer); // Blend it additively over the input texture
+
       this.fsQuad.material = this.overlayMaterial;
-      this.overlayMaterial.uniforms["maskTexture"].value = this.renderTargetMaskBuffer.texture;
-      this.overlayMaterial.uniforms["edgeTexture1"].value = this.renderTargetEdgeBuffer1.texture;
-      this.overlayMaterial.uniforms["edgeTexture2"].value = this.renderTargetEdgeBuffer2.texture;
-      this.overlayMaterial.uniforms["patternTexture"].value = this.patternTexture;
-      this.overlayMaterial.uniforms["edgeStrength"].value = this.edgeStrength;
-      this.overlayMaterial.uniforms["edgeGlow"].value = this.edgeGlow;
-      this.overlayMaterial.uniforms["usePatternTexture"].value = this.usePatternTexture;
-      if (maskActive)
-        renderer.state.buffers.stencil.setTest(true);
+      this.overlayMaterial.uniforms['maskTexture'].value = this.renderTargetMaskBuffer.texture;
+      this.overlayMaterial.uniforms['edgeTexture1'].value = this.renderTargetEdgeBuffer1.texture;
+      this.overlayMaterial.uniforms['edgeTexture2'].value = this.renderTargetEdgeBuffer2.texture;
+      this.overlayMaterial.uniforms['patternTexture'].value = this.patternTexture;
+      this.overlayMaterial.uniforms['edgeStrength'].value = this.edgeStrength;
+      this.overlayMaterial.uniforms['edgeGlow'].value = this.edgeGlow;
+      this.overlayMaterial.uniforms['usePatternTexture'].value = this.usePatternTexture;
+      if (maskActive) renderer.state.buffers.stencil.setTest(true);
       renderer.setRenderTarget(readBuffer);
       this.fsQuad.render(renderer);
       renderer.setClearColor(this._oldClearColor, this.oldClearAlpha);
       renderer.autoClear = oldAutoClear;
     }
+
     if (this.renderToScreen) {
       this.fsQuad.material = this.materialCopy;
-      this.copyUniforms["tDiffuse"].value = readBuffer.texture;
+      this.copyUniforms['tDiffuse'].value = readBuffer.texture;
       renderer.setRenderTarget(null);
       this.fsQuad.render(renderer);
     }
   }
+
   getPrepareMaskMaterial() {
-    return new THREE.ShaderMaterial({
+    return new ShaderMaterial({
       uniforms: {
-        depthTexture: { value: null },
-        cameraNearFar: { value: new THREE.Vector2(0.5, 0.5) },
-        textureMatrix: { value: null }
+        depthTexture: {
+          value: null
+        },
+        cameraNearFar: {
+          value: new Vector2(0.5, 0.5)
+        },
+        textureMatrix: {
+          value: null
+        }
       },
       vertexShader: `#include <morphtarget_pars_vertex>
 				#include <skinning_pars_vertex>
@@ -313,13 +420,22 @@ class OutlinePass extends Pass.Pass {
 				}`
     });
   }
+
   getEdgeDetectionMaterial() {
-    return new THREE.ShaderMaterial({
+    return new ShaderMaterial({
       uniforms: {
-        maskTexture: { value: null },
-        texSize: { value: new THREE.Vector2(0.5, 0.5) },
-        visibleEdgeColor: { value: new THREE.Vector3(1, 1, 1) },
-        hiddenEdgeColor: { value: new THREE.Vector3(1, 1, 1) }
+        maskTexture: {
+          value: null
+        },
+        texSize: {
+          value: new Vector2(0.5, 0.5)
+        },
+        visibleEdgeColor: {
+          value: new Vector3(1.0, 1.0, 1.0)
+        },
+        hiddenEdgeColor: {
+          value: new Vector3(1.0, 1.0, 1.0)
+        }
       },
       vertexShader: `varying vec2 vUv;
 				void main() {
@@ -349,16 +465,25 @@ class OutlinePass extends Pass.Pass {
 				}`
     });
   }
+
   getSeperableBlurMaterial(maxRadius) {
-    return new THREE.ShaderMaterial({
+    return new ShaderMaterial({
       defines: {
         MAX_RADIUS: maxRadius
       },
       uniforms: {
-        colorTexture: { value: null },
-        texSize: { value: new THREE.Vector2(0.5, 0.5) },
-        direction: { value: new THREE.Vector2(0.5, 0.5) },
-        kernelRadius: { value: 1 }
+        colorTexture: {
+          value: null
+        },
+        texSize: {
+          value: new Vector2(0.5, 0.5)
+        },
+        direction: {
+          value: new Vector2(0.5, 0.5)
+        },
+        kernelRadius: {
+          value: 1.0
+        }
       },
       vertexShader: `varying vec2 vUv;
 				void main() {
@@ -392,16 +517,31 @@ class OutlinePass extends Pass.Pass {
 				}`
     });
   }
+
   getOverlayMaterial() {
-    return new THREE.ShaderMaterial({
+    return new ShaderMaterial({
       uniforms: {
-        maskTexture: { value: null },
-        edgeTexture1: { value: null },
-        edgeTexture2: { value: null },
-        patternTexture: { value: null },
-        edgeStrength: { value: 1 },
-        edgeGlow: { value: 1 },
-        usePatternTexture: { value: 0 }
+        maskTexture: {
+          value: null
+        },
+        edgeTexture1: {
+          value: null
+        },
+        edgeTexture2: {
+          value: null
+        },
+        patternTexture: {
+          value: null
+        },
+        edgeStrength: {
+          value: 1.0
+        },
+        edgeGlow: {
+          value: 1.0
+        },
+        usePatternTexture: {
+          value: 0.0
+        }
       },
       vertexShader: `varying vec2 vUv;
 				void main() {
@@ -428,11 +568,13 @@ class OutlinePass extends Pass.Pass {
 						finalColor += + visibilityFactor * (1.0 - maskColor.r) * (1.0 - patternColor.r);
 					gl_FragColor = finalColor;
 				}`,
-      blending: THREE.AdditiveBlending,
+      blending: AdditiveBlending,
       depthTest: false,
       depthWrite: false,
       transparent: true
     });
   }
+
 }
-exports.OutlinePass = OutlinePass;
+
+export { OutlinePass };

package/postprocessing/Pass.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("three");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(e);exports.FullScreenQuad=class{constructor(e){s.default(this,"camera",new t.OrthographicCamera(-1,1,1,-1,0,1)),s.default(this,"geometry",new t.PlaneGeometry(2,2)),s.default(this,"mesh",void 0),this.mesh=new t.Mesh(this.geometry,e)}get material(){return this.mesh.material}set material(e){this.mesh.material=e}dispose(){this.mesh.geometry.dispose()}render(e){e.render(this.mesh,this.camera)}},exports.Pass=class{constructor(){s.default(this,"enabled",!0),s.default(this,"needsSwap",!0),s.default(this,"clear",!1),s.default(this,"renderToScreen",!1)}setSize(e,t){}render(e,t,r,s,a){console.error("THREE.Pass: .render() must be implemented in derived pass.")}};