@xviewer.js/core 1.0.0-alpha.27 → 1.0.0-alpha.29

package/dist/module.js

@@ -3,7 +3,7 @@ import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
-import { EquirectangularReflectionMapping, FileLoader, TextureLoader, SRGBColorSpace, MathUtils, Vector3, Quaternion, Raycaster, Vector2, LinearInterpolant, Spherical, Object3D, Mesh, BoxGeometry, SphereGeometry, PlaneGeometry, Color, Plane as Plane$1, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, HalfFloatType, ShaderMaterial, UniformsUtils, Scene, OrthographicCamera, NoBlending, AdditiveBlending, FloatType, UnsignedByteType, BufferGeometry, Float32BufferAttribute, ClampToEdgeWrapping, NearestFilter, LinearFilter, LinearMipMapLinearFilter, LinearSRGBColorSpace, WebGLCubeRenderTarget, DataTexture, RGBAFormat, UVMapping, WebGLRenderer, PCFSoftShadowMap, LoadingManager, LinearToneMapping, PMREMGenerator, MeshBasicMaterial, CubeCamera, Box3Helper, Box3, ShaderLib, ShaderChunk } from 'three';
+import { EquirectangularReflectionMapping, FileLoader, TextureLoader, SRGBColorSpace, MathUtils, Vector3, Quaternion, Raycaster, Vector2, LinearInterpolant, Spherical, Object3D, Mesh, BoxGeometry, SphereGeometry, PlaneGeometry, Plane as Plane$1, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, HalfFloatType, LinearMipMapLinearFilter, LinearFilter, ShaderMaterial, UniformsUtils, Color, Scene, OrthographicCamera, NoBlending, AdditiveBlending, FloatType, UnsignedByteType, BufferGeometry, Float32BufferAttribute, ClampToEdgeWrapping, NearestFilter, LinearSRGBColorSpace, WebGLCubeRenderTarget, DataTexture, RGBAFormat, UVMapping, WebGLRenderer, PCFSoftShadowMap, LoadingManager, LinearToneMapping, PMREMGenerator, MeshBasicMaterial, CubeCamera, Box3Helper, Box3, ShaderLib, ShaderChunk } from 'three';
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 
 class EventEmitter {
@@ -971,7 +971,7 @@ class TweenChain {
     _chainTween() {
         let tween = this._tween;
         if (this._chainedTween) {
-            tween = new Tween(this._object);
+            tween = new Tween(this._object, this._group);
             this._chainedTween.chain(tween);
         }
         this._chainedTween = tween;
@@ -979,6 +979,7 @@ class TweenChain {
     }
     constructor(object, group){
         this._object = object;
+        this._group = group;
         this._tween = new Tween(object, group);
     }
 }
@@ -2896,68 +2897,11 @@ class Plane extends Mesh {
     }
 }
 
-const ReflectorShader = {
-    name: 'ReflectorShader',
-    uniforms: {
-        color: {
-            value: null
-        },
-        tDiffuse: {
-            value: null
-        },
-        textureMatrix: {
-            value: null
-        }
-    },
-    vertexShader: /* glsl */ `
-		uniform mat4 textureMatrix;
-		varying vec4 vUv;
-
-		#include <common>
-		#include <logdepthbuf_pars_vertex>
-
-		void main() {
-			vUv = textureMatrix * vec4( position, 1.0 );
-			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-			#include <logdepthbuf_vertex>
-		}`,
-    fragmentShader: /* glsl */ `
-		uniform vec3 color;
-		uniform sampler2D tDiffuse;
-		varying vec4 vUv;
-
-		#include <logdepthbuf_pars_fragment>
-
-		float blendOverlay( float base, float blend ) {
-			return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
-		}
-
-		vec3 blendOverlay( vec3 base, vec3 blend ) {
-			return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
-		}
-
-		void main() {
-			#include <logdepthbuf_fragment>
-
-			vec4 base = texture2DProj( tDiffuse, vUv );
-			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
-
-			#include <tonemapping_fragment>
-			#include <colorspace_fragment>
-		}`
-};
-class Reflector extends Mesh {
-    constructor(options = {}){
-        super(options.geometry || new PlaneGeometry());
-        this.isReflector = true;
-        const color = options.color !== undefined ? new Color(options.color) : new Color(0x7F7F7F);
-        const textureWidth = options.textureWidth || 512;
-        const textureHeight = options.textureHeight || 512;
-        const clipBias = options.clipBias || 0;
-        const multisample = options.multisample !== undefined ? options.multisample : 4;
-        const defaultNormal = options.normal || new Vector3(0, 0, 1);
+class Reflector extends Component {
+    constructor({ textureWidth = 512, textureHeight = 512, clipBias = 0, multisample = 4, layer = 0, normal = new Vector3(0, 0, 1), mipmap = false } = {}){
+        super();
         const reflectorPlane = new Plane$1();
-        const normal = new Vector3();
+        const reflectorNormal = new Vector3();
         const reflectorWorldPosition = new Vector3();
         const cameraWorldPosition = new Vector3();
         const rotationMatrix = new Matrix4();
@@ -2968,51 +2912,37 @@ class Reflector extends Mesh {
         const q = new Vector4();
         const textureMatrix = new Matrix4();
         const virtualCamera = new PerspectiveCamera();
-        virtualCamera.layers.set(options.layer || 0);
+        virtualCamera.layers.set(layer);
         const renderTarget = new WebGLRenderTarget(textureWidth, textureHeight, {
             samples: multisample,
-            type: HalfFloatType
-        });
-        const shader = ReflectorShader;
-        const material = options.material || new ShaderMaterial({
-            name: shader.name ,
-            uniforms: UniformsUtils.clone(shader.uniforms),
-            fragmentShader: shader.fragmentShader,
-            vertexShader: shader.vertexShader
+            type: HalfFloatType,
+            minFilter: mipmap ? LinearMipMapLinearFilter : LinearFilter,
+            generateMipmaps: mipmap
         });
-        if (material.uniforms.tDiffuse) {
-            material.uniforms.tDiffuse.value = renderTarget.texture;
-        }
-        if (material.uniforms.textureMatrix) {
-            material.uniforms.textureMatrix.value = textureMatrix;
-        }
-        if (material.uniforms.color) {
-            material.uniforms.color.value = color;
-        }
-        this.material = material;
-        const scope = this;
-        this.onBeforeRender = function(renderer, scene, camera) {
-            reflectorWorldPosition.setFromMatrixPosition(scope.matrixWorld);
+        this.update = ()=>{
+            const node = this.node;
+            const { renderer, camera, scene } = this.viewer;
+            reflectorWorldPosition.setFromMatrixPosition(node.matrixWorld);
             cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-            rotationMatrix.extractRotation(scope.matrixWorld);
-            normal.copy(defaultNormal);
-            normal.applyMatrix4(rotationMatrix);
+            rotationMatrix.extractRotation(node.matrixWorld);
+            reflectorNormal.copy(normal);
+            reflectorNormal.applyMatrix4(rotationMatrix);
             view.subVectors(reflectorWorldPosition, cameraWorldPosition);
             // Avoid rendering when reflector is facing away
-            if (view.dot(normal) > 0) return;
-            view.reflect(normal).negate();
+            if (view.dot(reflectorNormal) > 0) return;
+            view.reflect(reflectorNormal).negate();
             view.add(reflectorWorldPosition);
             rotationMatrix.extractRotation(camera.matrixWorld);
             lookAtPosition.set(0, 0, -1);
             lookAtPosition.applyMatrix4(rotationMatrix);
             lookAtPosition.add(cameraWorldPosition);
             target.subVectors(reflectorWorldPosition, lookAtPosition);
-            target.reflect(normal).negate();
+            target.reflect(reflectorNormal).negate();
             target.add(reflectorWorldPosition);
             virtualCamera.position.copy(view);
             virtualCamera.up.set(0, 1, 0);
             virtualCamera.up.applyMatrix4(rotationMatrix);
-            virtualCamera.up.reflect(normal);
+            virtualCamera.up.reflect(reflectorNormal);
             virtualCamera.lookAt(target);
             virtualCamera.far = camera.far; // Used in WebGLBackground
             virtualCamera.updateMatrixWorld();
@@ -3021,10 +2951,10 @@ class Reflector extends Mesh {
             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);
             textureMatrix.multiply(virtualCamera.projectionMatrix);
             textureMatrix.multiply(virtualCamera.matrixWorldInverse);
-            textureMatrix.multiply(scope.matrixWorld);
+            textureMatrix.multiply(node.matrixWorld);
             // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
             // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-            reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
+            reflectorPlane.setFromNormalAndCoplanarPoint(reflectorNormal, reflectorWorldPosition);
             reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
             clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
             const projectionMatrix = virtualCamera.projectionMatrix;
@@ -3040,7 +2970,7 @@ class Reflector extends Mesh {
             projectionMatrix.elements[10] = clipPlane.z + 1.0 - clipBias;
             projectionMatrix.elements[14] = clipPlane.w;
             // Render
-            scope.visible = false;
+            node.visible = false;
             const currentRenderTarget = renderer.getRenderTarget();
             const currentActiveCubeFace = renderer.getActiveCubeFace();
             const currentActiveMipmapLevel = renderer.getActiveMipmapLevel();
@@ -3060,7 +2990,7 @@ class Reflector extends Mesh {
             if (viewport !== undefined) {
                 renderer.state.viewport(viewport);
             }
-            scope.visible = true;
+            node.visible = true;
         };
         this.getRenderTarget = function() {
             return renderTarget;
@@ -3068,9 +2998,8 @@ class Reflector extends Mesh {
         this.getTextureMatrix = function() {
             return textureMatrix;
         };
-        this.dispose = function() {
+        this.onDestroy = function() {
             renderTarget.dispose();
-            scope.material.dispose();
         };
     }
 }
@@ -3203,7 +3132,13 @@ void main() {
     #include <beginnormal_vertex>
     #include <defaultnormal_vertex>
 
-    vec4 positionWS = modelMatrix * vec4(position, 1.0);
+    vec4 transformed = vec4(position, 1.);
+
+#ifdef USE_INSTANCING
+    transformed = instanceMatrix * transformed;
+#endif
+
+    vec4 positionWS = modelMatrix * transformed;
     vec4 mvPosition = viewMatrix * positionWS;
 
     vUv = uv;
@@ -3220,26 +3155,29 @@ void main() {
     vUv3 = uv2;
 #endif
 
-    vUv4 = textureMatrix * vec4(position, 1.0);
+    vUv4 = textureMatrix * transformed;
 
     vViewPosition = -mvPosition.xyz;
     vNormal = normalize(transformedNormal);
 
     gl_Position = projectionMatrix * mvPosition;
+
     #include <logdepthbuf_vertex>
 }
 `;
 const frag_Reflector = `
 uniform vec3      color;
+uniform float     alpha;
 uniform float     roughness;
 uniform float     metalness;
-uniform sampler2D tDiffuse;
+uniform sampler2D map;
 uniform sampler2D normalMap;
 uniform sampler2D roughnessMap;
 uniform sampler2D aoMap;
 uniform float     aoMapIntensity;
 uniform sampler2D lightMap;
 uniform float     lightMapIntensity;
+uniform sampler2D tReflect;
 
 varying vec2 vUv;
 
@@ -3278,7 +3216,15 @@ void main() {
 	vec3 multiScattering = vec3( 0.0 );
 
     float metalnessFactor = metalness;
-    vec3  diffuseColor = color.rgb * ( 1.0 - metalnessFactor );
+
+    vec4 diffuseColor = vec4(color, alpha);
+
+#ifdef USE_MAP
+    diffuseColor *= texture2D(map, vUv);
+#endif
+
+    diffuseColor.rgb = diffuseColor.rgb * ( 1.0 - metalnessFactor );
+
     vec3  specularColor = mix( vec3( 0.04 ), diffuseColor.rgb, metalnessFactor );
     float specularF90 = 1.0;
 
@@ -3287,13 +3233,13 @@ void main() {
     computeMultiscattering( geometryNormal, geometryViewDir, specularColor, specularF90, roughnessFactor, singleScattering, multiScattering );
 
     vec3 totalScattering = singleScattering + multiScattering;
-	vec3 diffuse = diffuseColor * ( 1.0 - max( max( totalScattering.r, totalScattering.g ), totalScattering.b ) );
+	vec3 diffuse = diffuseColor.rgb * ( 1.0 - max( max( totalScattering.r, totalScattering.g ), totalScattering.b ) );
 
     vec3 irradiance = vec3(0.);
     irradiance += texture2D(lightMap, UV_LIGHTMAP).rgb * lightMapIntensity;
 
     float lod = roughnessFactor * (1.7 - 0.7 * roughnessFactor) * 6.;
-    vec4  reflectColor = textureLod(tDiffuse, reflectUv, lod);
+    vec4  reflectColor = textureLod(tReflect, reflectUv, lod);
 
     vec3 f_specular = vec3(0.);
     vec3 f_diffuse = vec3(0.);
@@ -3305,14 +3251,14 @@ void main() {
     float dotNV = saturate( dot( geometryNormal, geometryViewDir ) );
     f_specular *= computeSpecularOcclusion(dotNV, ambientOcclusion, roughnessFactor);
 
-    gl_FragColor = vec4(f_specular + f_diffuse, 1.);
+    gl_FragColor = vec4(f_specular + f_diffuse, diffuseColor.a);
 
     #include <tonemapping_fragment>
     #include <colorspace_fragment>
 }
 `;
 class ReflectorMaterial extends ShaderMaterial {
-    onBeforeCompile(shader, renderer) {
+    onBeforeCompile(shader) {
         const channels = [];
         if (this.aoMap && this.aoMap.channel) {
             channels.push([
@@ -3342,6 +3288,12 @@ class ReflectorMaterial extends ShaderMaterial {
             shader.defines[key] = "vUv" + channel;
         });
     }
+    get alpha() {
+        return this.uniforms.alpha.value;
+    }
+    set alpha(v) {
+        this.uniforms.alpha.value = v;
+    }
     get metalness() {
         return this.uniforms.metalness.value;
     }
@@ -3354,33 +3306,35 @@ class ReflectorMaterial extends ShaderMaterial {
     set roughness(v) {
         this.uniforms.roughness.value = v;
     }
+    get map() {
+        return this.uniforms.map.value;
+    }
+    set map(v) {
+        this.uniforms.map.value = v;
+    }
     get roughnessMap() {
         return this.uniforms.roughnessMap.value;
     }
     set roughnessMap(v) {
         this.uniforms.roughnessMap.value = v;
-        this.needsUpdate = true;
     }
     get normalMap() {
         return this.uniforms.normalMap.value;
     }
     set normalMap(v) {
         this.uniforms.normalMap.value = v;
-        this.needsUpdate = true;
     }
     get aoMap() {
         return this.uniforms.aoMap.value;
     }
     set aoMap(v) {
         this.uniforms.aoMap.value = v;
-        this.needsUpdate = true;
     }
     get lightMap() {
         return this.uniforms.lightMap.value;
     }
     set lightMap(v) {
         this.uniforms.lightMap.value = v;
-        this.needsUpdate = true;
     }
     constructor(...args){
         super(...args);
@@ -3396,12 +3350,18 @@ class ReflectorMaterial extends ShaderMaterial {
             color: {
                 value: new Color(0xffffff)
             },
-            tDiffuse: {
+            alpha: {
+                value: 1
+            },
+            map: {
                 value: null
             },
-            textureMatrix: {
+            tReflect: {
                 value: null
             },
+            textureMatrix: {
+                value: new Matrix4()
+            },
             metalness: {
                 value: 0
             },
@@ -3429,6 +3389,13 @@ class ReflectorMaterial extends ShaderMaterial {
         };
     }
 }
+__decorate([
+    property({
+        min: 0,
+        max: 1,
+        step: 0.01
+    })
+], ReflectorMaterial.prototype, "alpha", null);
 __decorate([
     property({
         min: 0,
@@ -3478,6 +3445,28 @@ class DebugPlugin extends Plugin {
 
 const LOD_MIN = 4;
 const _flatCamera = /*@__PURE__*/ new OrthographicCamera();
+// Golden Ratio
+const PHI = (1 + Math.sqrt(5)) / 2;
+const INV_PHI = 1 / PHI;
+// Vertices of a dodecahedron (except the opposites, which represent the
+// same axis), used as axis directions evenly spread on a sphere.
+const _axisDirections = [
+    /*@__PURE__*/ new Vector3(1, 1, 1),
+    /*@__PURE__*/ new Vector3(-1, 1, 1),
+    /*@__PURE__*/ new Vector3(1, 1, -1),
+    /*@__PURE__*/ new Vector3(-1, 1, -1),
+    /*@__PURE__*/ new Vector3(0, PHI, INV_PHI),
+    /*@__PURE__*/ new Vector3(0, PHI, -INV_PHI),
+    /*@__PURE__*/ new Vector3(INV_PHI, 0, PHI),
+    /*@__PURE__*/ new Vector3(-INV_PHI, 0, PHI),
+    /*@__PURE__*/ new Vector3(PHI, INV_PHI, 0),
+    /*@__PURE__*/ new Vector3(-PHI, INV_PHI, 0)
+];
+const _Performance = {
+    HIGH: 0,
+    MEDIUM: 1,
+    LOW: 2
+};
 function _setViewport(target, x, y, width, height) {
     target.viewport.set(x, y, width, height);
     target.scissor.set(x, y, width, height);
@@ -3559,6 +3548,9 @@ function _getCubeMapMaterial() {
             },
             lod: {
                 value: 0
+            },
+            exposure: {
+                value: 1
             }
         },
         vertexShader: _getCommonVertexShader(),
@@ -3569,9 +3561,11 @@ function _getCubeMapMaterial() {
             varying vec3 vOutputDirection;
             uniform samplerCube envMap;
             uniform float       lod;
+            uniform float       exposure;
 
             void main() {
                 gl_FragColor = textureCubeLodEXT(envMap, vOutputDirection, lod);
+                gl_FragColor.rgb *= exposure;
             }
         `,
         blending: AdditiveBlending,
@@ -4848,12 +4842,13 @@ class MergeRefectPass {
         return this._envMapTarget;
     }
     dispose() {
+        this._sourceTarget.dispose();
         this._envMapTarget.dispose();
         this._pmremGenerator.dispose();
     }
     mergeReflect(info) {
-        this._pmremGenerator._clearTexture(this._envMapTarget, this.envMapIntensity);
-        this._pmremGenerator._mergeReflect(this._envMapTarget, this._reflectMap);
+        this._pmremGenerator._copyTexture(this._envMapTarget, this._sourceTarget.texture, info.envMapIntensity);
+        this._pmremGenerator._mergeReflect(this._envMapTarget, this._reflectMap, info.performance);
         info.envMapTarget = this._envMapTarget;
         info.lodMax = this._pmremGenerator._lodMeshes.length - 1;
     }
@@ -4876,6 +4871,8 @@ class MergeRefectPass {
             const uniforms = this._copyTexMaterial.uniforms;
             uniforms.map.value = texture;
             uniforms.intensity.value = intensity;
+            targetOut.scissorTest = false;
+            _setViewport(targetOut, 0, 0, targetOut.width, targetOut.height);
             const renderer = this._renderer;
             renderer.autoClear = true;
             renderer.setRenderTarget(targetOut);
@@ -4883,31 +4880,45 @@ class MergeRefectPass {
             renderer.setRenderTarget(null);
         };
         pmremGenerator._clearTexture = function(targetOut, intensity) {
-            const source = this._pingPongRenderTarget;
-            if (this._sourceInit === false) {
-                this._sourceInit = true;
-                source.scissorTest = false;
-                _setViewport(source, 0, 0, source.width, source.height);
-                this._copyTexture(source, targetOut.texture);
-            } else {
-                this._copyTexture(targetOut, source.texture, intensity);
-            }
+            this._copyTexture(targetOut, this._sourceTarget.texture, intensity);
         };
-        pmremGenerator._mergeReflect = function(sourceTarget, reflectMap, clear = false) {
+        pmremGenerator._mergeReflect = function(sourceTarget, reflectMap, performance) {
             const renderer = this._renderer;
             const autoClear = renderer.autoClear;
             const cubeMapMaterial = this._cubeMapMaterial;
             const uniforms = this._cubeMapMaterial.uniforms;
             uniforms.envMap.value = reflectMap;
-            renderer.autoClear = clear;
-            for(let i = 0; i < this._lodMeshes.length - 1; i++){
-                uniforms.lod.value = i < 5 ? 0 : i;
-                this._blit(sourceTarget, i, cubeMapMaterial);
+            renderer.autoClear = false;
+            if (performance === _Performance.HIGH) {
+                for(let i = 0; i < this._lodMeshes.length - 1; i++){
+                    uniforms.lod.value = i < 5 ? 0 : i;
+                    this._blit(sourceTarget, i, cubeMapMaterial);
+                }
+            } else if (performance === _Performance.MEDIUM) {
+                for(let i = 0; i < this._lodMeshes.length; i++){
+                    if (i < 4) {
+                        uniforms.lod.value = 0;
+                        this._blit(sourceTarget, i, cubeMapMaterial);
+                    } else {
+                        this._pmremblur(sourceTarget, i - 1, i);
+                    }
+                }
+            } else {
+                uniforms.lod.value = 0;
+                this._blit(sourceTarget, 0, cubeMapMaterial);
+                for(let i = 1; i < this._lodMeshes.length; i++){
+                    this._pmremblur(sourceTarget, i - 1, i);
+                }
             }
             sourceTarget.scissorTest = false;
             _setViewport(sourceTarget, 0, 0, sourceTarget.width, sourceTarget.height);
             renderer.autoClear = autoClear;
         };
+        pmremGenerator._pmremblur = function(targetOut, lodIn, lodOut) {
+            const sigma = Math.sqrt(this._sigmas[lodOut] * this._sigmas[lodOut] - this._sigmas[lodIn] * this._sigmas[lodIn]);
+            const poleAxis = _axisDirections[lodIn % _axisDirections.length];
+            this._blur(targetOut, lodIn, lodOut, sigma, poleAxis);
+        };
         pmremGenerator._blit = function(targetOut, lodOut, material) {
             const renderer = this._renderer;
             const _lodMax = this._lodMax;
@@ -4924,10 +4935,11 @@ class MergeRefectPass {
         return pmremGenerator;
     }
     constructor({ envMap, reflectMap, viewer }){
-        this.envMapIntensity = 1;
         this._reflectMap = reflectMap;
         this._pmremGenerator = this._getPMREMExtension(viewer.renderer);
         this._envMapTarget = this._pmremGenerator._fromTextureExtension(reflectMap, envMap);
+        this._sourceTarget = this._envMapTarget.clone();
+        this._pmremGenerator._copyTexture(this._sourceTarget, this._envMapTarget.texture);
         viewer.scene.environment = this._envMapTarget.texture;
     }
 }
@@ -4942,12 +4954,21 @@ function mipGaussianBlendWeight(sigma, lod) {
 
 const MAX_LOD = 10;
 class MergeMipBlurPass {
-    get blurIntensity() {
-        return this._blurIntensity;
+    get envMapTarget() {
+        return this._envMapTarget;
+    }
+    dispose() {
+        this._envMapTarget.dispose();
+        this._pmremGenerator.dispose();
+    }
+    mergeMipBlur(info) {
+        this._setBlurIntensity(info.blurIntensity);
+        const targetIn = this._pmremGenerator._applyMipBlur(this._envMapTarget, this._reflectMap, this._blurMinLod, this._blurMaxLod, this._sigma, info.exposure);
+        this._pmremGenerator._mipCopy(info.envMapTarget, targetIn, info.lodMax, this._blurMinLod);
     }
-    set blurIntensity(v) {
-        if (this._blurIntensity !== v) {
-            this._blurIntensity = v;
+    _setBlurIntensity(blurIntensity) {
+        if (this._blurIntensity !== blurIntensity) {
+            this._blurIntensity = blurIntensity;
             this._sigma = MathUtils.lerp(1, 40, this._blurIntensity / 10);
             for(let lod = 0; lod <= MAX_LOD; lod++){
                 let w = mipGaussianBlendWeight(this._sigma, lod);
@@ -4961,17 +4982,6 @@ class MergeMipBlurPass {
             }
         }
     }
-    get envMapTarget() {
-        return this._envMapTarget;
-    }
-    dispose() {
-        this._envMapTarget.dispose();
-        this._pmremGenerator.dispose();
-    }
-    mergeMipBlur(info) {
-        const targetIn = this._pmremGenerator._applyMipBlur(this._envMapTarget, this._reflectMap, this._blurMinLod, this._blurMaxLod, this._sigma, this.exposure);
-        this._pmremGenerator._mipCopy(info.envMapTarget, targetIn, info.lodMax, this._blurMinLod);
-    }
     _getPMREMExtension(renderer) {
         const pmremGenerator = new PMREMGenerator(renderer);
         pmremGenerator._fromTextureExtension = function(texture) {
@@ -4982,7 +4992,7 @@ class MergeMipBlurPass {
             this._lodMeshes = this._lodPlanes.map((v)=>new Mesh(v, this._mipBlurMaterial));
             return target;
         };
-        pmremGenerator._applyMipBlur = function(sourceTarget, texture, blurMinLod, blurMaxLod, sigma, exposure) {
+        pmremGenerator._applyMipBlur = function(sourceTarget, texture, blurMinLod, blurMaxLod, sigma, exposure = 1) {
             const pingPongRenderTarget = this._pingPongRenderTarget;
             const uniforms = this._mipBlurMaterial.uniforms;
             uniforms.envMap.value = texture;
@@ -5035,7 +5045,6 @@ class MergeMipBlurPass {
         this._blurMinLod = 0;
         this._blurMaxLod = MAX_LOD;
         this._blurIntensity = -1;
-        this.exposure = 1;
         this._reflectMap = reflectMap;
         this._pmremGenerator = this._getPMREMExtension(viewer.renderer);
         this._envMapTarget = this._pmremGenerator._fromTextureExtension(reflectMap);
@@ -5063,13 +5072,15 @@ class EnvironmentPlugin extends Plugin {
                         }),
                         position: new Vector3(1.1, 3, 0)
                     });
-                    viewer.addNode(Plane, {
-                        parent: this._debugNode,
-                        material: new MeshBasicMaterial({
-                            map: this._mipBlurPass.envMapTarget.texture
-                        }),
-                        position: new Vector3(0, 3, 0)
-                    });
+                    if (this._mipBlurPass) {
+                        viewer.addNode(Plane, {
+                            parent: this._debugNode,
+                            material: new MeshBasicMaterial({
+                                map: this._mipBlurPass.envMapTarget.texture
+                            }),
+                            position: new Vector3(0, 3, 0)
+                        });
+                    }
                 }
             }
             if (this._debugNode) {
@@ -5083,24 +5094,38 @@ class EnvironmentPlugin extends Plugin {
         const oldTarget = renderer.getRenderTarget();
         const oldActiveCubeFace = renderer.getActiveCubeFace();
         const oldActiveMipmapLevel = renderer.getActiveMipmapLevel();
-        this._reflectPass.envMapIntensity = this.envMapIntensity;
-        this._mipBlurPass.exposure = this.reflectExposure;
-        this._mipBlurPass.blurIntensity = this.reflectBlurIntensity;
         renderer.autoClear = true;
         this._cubeCamera.update(renderer, this._scene);
+        this._mergeInfo.performance = this.performance;
+        this._mergeInfo.exposure = this.reflectExposure;
+        this._mergeInfo.envMapIntensity = this.envMapIntensity;
+        this._mergeInfo.blurIntensity = this.reflectBlurIntensity;
         this._reflectPass.mergeReflect(this._mergeInfo);
-        this._mipBlurPass.mergeMipBlur(this._mergeInfo);
+        if (this.performance === _Performance.HIGH) {
+            if (this._mipBlurPass === undefined) {
+                this._mipBlurPass = new MergeMipBlurPass({
+                    viewer: this.viewer,
+                    reflectMap: this._cubeCamera.renderTarget.texture
+                });
+            }
+            this._mipBlurPass.mergeMipBlur(this._mergeInfo);
+        }
         renderer.autoClear = autoClear;
         renderer.setRenderTarget(oldTarget, oldActiveCubeFace, oldActiveMipmapLevel);
     }
     constructor({ envMap, scene, near, far, layer = 0, resolution = 256, floatType = HalfFloatType, position = new Vector3(0, 1, 0) } = {}){
         super();
         this._mergeInfo = {
+            performance: _Performance.HIGH,
             envMapTarget: null,
-            lodMax: 0
+            envMapIntensity: 1,
+            blurIntensity: 1,
+            lodMax: 0,
+            exposure: 1
         };
         this._debug = false;
         this._debugNode = null;
+        this.performance = _Performance.LOW;
         this.envMapIntensity = 1;
         this.reflectExposure = 1;
         this.reflectBlurIntensity = 5;
@@ -5117,20 +5142,24 @@ class EnvironmentPlugin extends Plugin {
                 reflectMap,
                 envMap
             });
-            this._mipBlurPass = new MergeMipBlurPass({
-                viewer,
-                reflectMap
-            });
         };
         this.uninstall = ()=>{
             this._reflectPass.dispose();
-            this._mipBlurPass.dispose();
+            if (this._mipBlurPass) {
+                this._mipBlurPass.dispose();
+            }
         };
     }
 }
+EnvironmentPlugin.Performance = _Performance;
 __decorate([
     property
 ], EnvironmentPlugin.prototype, "debug", null);
+__decorate([
+    property({
+        value: _Performance
+    })
+], EnvironmentPlugin.prototype, "performance", void 0);
 __decorate([
     property({
         min: 0,