@xviewer.js/core 1.0.0-alpha.45 → 1.0.0-alpha.46

package/dist/main.js

@@ -3146,6 +3146,79 @@ class Reflector extends Component {
     }
 }
 
+class PerformanceMonitor extends Component {
+    subscribe(subscriber) {
+        this.subscriptions.set(Symbol(), subscriber);
+    }
+    constructor({ iterations = 10, ms = 250, threshold = 0.75, step = 0.1, factor: _factor = 0.5, flipflops = Infinity, bounds = (refreshrate)=>refreshrate > 100 ? [
+            60,
+            100
+        ] : [
+            40,
+            60
+        ], onIncline, onDecline, onChange, onFallback }){
+        super();
+        this.fps = 0;
+        this.index = 0;
+        this.factor = 0.5;
+        this.flipped = 0;
+        this.refreshrate = 0;
+        this.fallback = false;
+        this.frames = [];
+        this.averages = [];
+        this.subscriptions = new Map();
+        let lastFactor = 0;
+        const decimalPlacesRatio = Math.pow(10, 0);
+        this.update = (dt)=>{
+            // If the fallback has been reached do not continue running samples
+            if (this.fallback) return;
+            const { frames, averages } = this;
+            if (averages.length < iterations) {
+                frames.push(performance.now());
+                const msPassed = frames[frames.length - 1] - frames[0];
+                if (msPassed >= ms) {
+                    this.fps = Math.round(frames.length / msPassed * 1000 * decimalPlacesRatio) / decimalPlacesRatio;
+                    this.refreshrate = Math.max(this.refreshrate, this.fps);
+                    averages[this.index++ % iterations] = this.fps;
+                    if (averages.length === iterations) {
+                        const [lower, upper] = bounds(this.refreshrate);
+                        const upperBounds = averages.filter((value)=>value >= upper);
+                        const lowerBounds = averages.filter((value)=>value < lower);
+                        // Trigger incline when more than -threshold- avgs exceed the upper bound
+                        if (upperBounds.length > iterations * threshold) {
+                            this.factor = Math.min(1, this.factor + step);
+                            this.flipped++;
+                            if (onIncline) onIncline(this);
+                            this.subscriptions.forEach((value)=>value.onIncline && value.onIncline(this));
+                        }
+                        // Trigger decline when more than -threshold- avgs are below the lower bound
+                        if (lowerBounds.length > iterations * threshold) {
+                            this.factor = Math.max(0, this.factor - step);
+                            this.flipped++;
+                            if (onDecline) onDecline(this);
+                            this.subscriptions.forEach((value)=>value.onDecline && value.onDecline(this));
+                        }
+                        if (lastFactor !== this.factor) {
+                            lastFactor = this.factor;
+                            if (onChange) onChange(this);
+                            this.subscriptions.forEach((value)=>value.onChange && value.onChange(this));
+                        }
+                        if (this.flipped > flipflops && !this.fallback) {
+                            this.fallback = true;
+                            if (onFallback) onFallback(this);
+                            this.subscriptions.forEach((value)=>value.onFallback && value.onFallback(this));
+                        }
+                        this.averages = [];
+                    // Resetting the refreshrate creates more problems than it solves atm
+                    // this.refreshrate = 0
+                    }
+                    this.frames = [];
+                }
+            }
+        };
+    }
+}
+
 const vert_fullscreen = /*glsl*/ `
 varying vec2 vUv;
 void main() {
@@ -4838,7 +4911,7 @@ class Viewer extends EventEmitter {
         node.visible = active;
         return node;
     }
-    createRenderTarget(width, height, nearest = false, floatType = false, msaa = 0, mipmap = false) {
+    createRenderTarget(width, height, nearest = false, floatType = false, msaa = 0, mipmap = false, depth = false) {
         return new three.WebGLRenderTarget(width, height, {
             wrapS: three.ClampToEdgeWrapping,
             wrapT: three.ClampToEdgeWrapping,
@@ -4847,13 +4920,13 @@ class Viewer extends EventEmitter {
             type: typeof floatType === "boolean" ? floatType ? this.DATA_FLOAT_TYPE : three.UnsignedByteType : floatType,
             anisotropy: 0,
             colorSpace: three.LinearSRGBColorSpace,
-            depthBuffer: false,
+            depthBuffer: depth,
             stencilBuffer: false,
             samples: SystemInfo.isSupportMSAA ? msaa : 0,
             generateMipmaps: mipmap
         });
     }
-    createCubeRenderTarget(size, nearest = false, floatType = false, msaa = 0, mipmap = false) {
+    createCubeRenderTarget(size, nearest = false, floatType = false, msaa = 0, mipmap = false, depth = false) {
         return new three.WebGLCubeRenderTarget(size, {
             wrapS: three.ClampToEdgeWrapping,
             wrapT: three.ClampToEdgeWrapping,
@@ -4862,7 +4935,7 @@ class Viewer extends EventEmitter {
             type: typeof floatType === "boolean" ? floatType ? this.DATA_FLOAT_TYPE : three.UnsignedByteType : floatType,
             anisotropy: 0,
             colorSpace: three.LinearSRGBColorSpace,
-            depthBuffer: false,
+            depthBuffer: depth,
             stencilBuffer: false,
             samples: SystemInfo.isSupportMSAA ? msaa : 0,
             generateMipmaps: mipmap
@@ -5245,7 +5318,14 @@ class EnvironmentPlugin extends Plugin {
             }
         }
     }
-    onRender() {
+    onRender(dt) {
+        if (this._elapsed >= this.interval || this._elapsed === 0) {
+            this._elapsed = 0;
+            this._renderFrame();
+        }
+        this._elapsed += dt;
+    }
+    _renderFrame() {
         const { renderer } = this.viewer;
         const autoClear = renderer.autoClear;
         const oldTarget = renderer.getRenderTarget();
@@ -5282,14 +5362,16 @@ class EnvironmentPlugin extends Plugin {
         };
         this._debug = false;
         this._debugNode = null;
+        this._elapsed = 0;
         this.performance = _Performance.HIGH;
         this.envMapIntensity = 1;
         this.reflectExposure = 1;
         this.reflectBlurIntensity = 5;
+        this.interval = 0;
         this.install = ()=>{
             const viewer = this.viewer;
             this._scene = scene || viewer.scene;
-            const cubeRenderTarget = viewer.createCubeRenderTarget(resolution, false, floatType, 0, true);
+            const cubeRenderTarget = viewer.createCubeRenderTarget(resolution, false, floatType, 0, true, true);
             this._cubeCamera = new three.CubeCamera(near || viewer.camera.near, far || viewer.camera.far, cubeRenderTarget);
             this._cubeCamera.position.copy(position);
             this._cubeCamera.layers.mask = layer;
@@ -5338,6 +5420,9 @@ __decorate([
         step: 0.1
     })
 ], EnvironmentPlugin.prototype, "reflectBlurIntensity", void 0);
+__decorate([
+    property
+], EnvironmentPlugin.prototype, "interval", void 0);
 
 class BoxProjectionPlugin extends Plugin {
     get debug() {
@@ -5482,6 +5567,7 @@ exports.FInterpTo = FInterpTo;
 exports.FreelookVirtualCamera = FreelookVirtualCamera;
 exports.Logger = Logger;
 exports.ObjectInstance = ObjectInstance;
+exports.PerformanceMonitor = PerformanceMonitor;
 exports.Perlin = Perlin;
 exports.Plane = Plane;
 exports.Plugin = Plugin;