wip #2428 @4

diff --git a/_index.html b/_index.html
index 6a14b2f672a1c671b4268d37c623c99ba3acf1b3..0065c8ed8bce3aebae01328feb281e0d5718604d 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -57,7 +57,9 @@
 
     <div id="z" class="nozoom">
         <div id="center-fluidbook">
-            <div id="flip3dcontainer"></div>
+            <div id="flip3dcontainer">
+                <canvas width="1024" height="1024"></canvas>
+            </div>
             <div id="fluidbook">
                 <div id="edges">
                     <div class="edge left">

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js b/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js
index 82131ef6d7d5d772b75325bd828e6bee0dfea8d7..087906c2b3c2132031f48ae465b6656743dc9eab 100644 (file)
--- a/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js
@@ -22,7 +22,7 @@ FluidbookCartRemarkable.prototype = {
                 $this.fluidbook.hideLoader();
                 $this.updateCartFromData($(data), callback);
             },
-        })
+        });
     },
 
     updateCartFromData: function (data, callback) {

diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js
index ca3793c75bb2391ace59479f439d3ebb136cb876..efa1d340d66cb4c019a4cbab2aebdc3c231eb0c4 100644 (file)
--- a/js/libs/fluidbook/fluidbook.3dflip.js
+++ b/js/libs/fluidbook/fluidbook.3dflip.js
@@ -1,4 +1,5 @@
 function Fluidbook3DFlip(fluidbook) {
+    var $this = this;
     this.fluidbook = fluidbook;
 
     this.camera = null;
@@ -21,6 +22,8 @@ function Fluidbook3DFlip(fluidbook) {
     this.performancesFrames = 0;
     this.performancesTestStart = null;
     this.performancesTestEnd = null;
+    this.performancesMode = '';
+    this.benchmark = {};
 
     this.textures = [];
 
@@ -34,10 +37,62 @@ function Fluidbook3DFlip(fluidbook) {
     this.pi2 = Math.PI * 2;
     this.deg2rad = this.pi2 / 360;
 
-    this.init();
+    this.testBenchmark(function () {
+        $this.init();
+    });
 }
 
 Fluidbook3DFlip.prototype = {
+    webglEnabled: function () {
+        return this.fluidbook.support.IE === 0 && Modernizr.webgl;
+    },
+
+    testBenchmark: function (cb) {
+        // IE doesn't need benchmark test, it's always treated as very low perf (
+        if (!this.webglEnabled()) {
+            cb();
+        }
+        var $this = this;
+        try {
+            var canvas = $this.jcontainer.find('canvas').get(0);
+            var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+            var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+            var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+
+            var m = /\((.*)\)/.exec(renderer);
+            if (m.length > 0) {
+                renderer = m[1];
+            }
+
+            var splits = this.fluidbook.datas.gupse;
+            $.each(splits, function (k, split) {
+                var e = renderer.split(split);
+                if (e.length > 1) {
+                    renderer = e[0].trim();
+                }
+            });
+
+            if (this.fluidbook.datas.gpusc[renderer] !== undefined) {
+                this.benchmark = this.fluidbook.datas.gpusc[renderer];
+                cb();
+            } else {
+                $.ajax({
+                    url: "https://workshop.fluidbook.com/services/gup",
+                    dataType: 'json',
+                    data: {gup: btoa(renderer)},
+                    success: function (data) {
+                        $this.benchmark = parseInt(data);
+                        cb();
+                    }, error: function () {
+                        cb();
+                    }
+                });
+            }
+        } catch (e) {
+            cb();
+        }
+    },
+
     init: function () {
         var $this = this;
 
@@ -48,17 +103,75 @@ Fluidbook3DFlip.prototype = {
         this.geometryScale = 3;
 
         this.container = $(this.jcontainer).get(0);
+
         this.init3D('performancesTest');
 
         this.animate(true);
 
         $(this.fluidbook).on('fluidbook.ready', function () {
             $this.guessCameraZoom(true);
-        })
+        });
+
+        key('⌘+alt+w, ctrl+alt+w', function () {
+            $this.debugGPU();
+        });
 
         this.resize();
     },
 
+    _guessTestMode: function () {
+        var testMode = '';
+        if (!this.webglEnabled()) {
+            return 'veryLowPerf';
+        }
+        if (isNaN(this.benchmark) || this.benchmark === 0) {
+            return 'lowPerf';
+        }
+        var b = 60 * (this.benchmark / 3580);
+        if (b > 50) {
+            return 'highPerf';
+        } else if (b > 30) {
+            return 'lowPerf';
+        }
+        return 'veryLowPerf';
+    },
+
+    guessTestMode: function () {
+        var mode = this._guessTestMode();
+
+        if (mode === 'highPerf') {
+            if (this.fluidbook.support.edge || this.fluidbook.support.android || this.fluidbook.support.macOs || this.fluidbook.support.iOS) {
+                return 'lowPerf';
+            }
+        }
+        return mode;
+    },
+
+    debugGPU: function () {
+        console.log('Performances mode', this.performancesMode);
+        console.log('Render engine', this.renderEngine);
+
+        try {
+            var canvas = this.jcontainer.find('canvas').get(0);
+            var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+            debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+            vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+            renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+            console.log('GPU vendor', vendor);
+            console.log('GPU renderer', renderer);
+            console.log(gl);
+        } catch (e) {
+
+        }
+
+        console.log('Quality ratio: ' + this.qualityRatio);
+        console.log('Triangles: ' + this.triangles);
+        console.log('Animation time: ' + this.animationTime);
+        console.log('Antialias: ' + this.antialias);
+        console.log('Lights enabled: ' + this.enableLight);
+        console.log('Shadows enabled: ' + this.enableShadow);
+    },
+
     init3D: function (performanceMode) {
         try {
             this.dispose3D();
@@ -66,20 +179,34 @@ Fluidbook3DFlip.prototype = {
 
         }
 
-        if (performanceMode === 'disable') {
+        this.performancesMode = performanceMode;
+
+        if (this.performancesMode === 'disable') {
             return;
         }
 
-        if (performanceMode === undefined || performanceMode === 'auto' || performanceMode === 'performancesTest') {
-            this.veryLowPerf = this.fluidbook.support.IE > 0;
-            this.lowPerf = !Modernizr.webgl || this.veryLowPerf || this.fluidbook.support.edge || this.fluidbook.support.android || this.fluidbook.support.macOs || this.fluidbook.support.iOS;
-        } else if (performanceMode === 'lowPerf') {
-            this.lowPerf = true;
-            this.veryLowPerf = false;
-        } else if (performanceMode === 'highPerf') {
-            this.lowPerf = this.veryLowPerf = false;
-        } else if (performanceMode === 'veryLowPerf') {
-            this.veryLowPerf = this.lowPerf = true;
+        if (this.performancesMode === 'performancesTest') {
+            var testMode = this.guessTestMode();
+            if (testMode === 'highPerf') {
+                this.lowPerf = this.veryLowPerf = false;
+            } else if (testMode === 'lowPerf') {
+                this.lowPerf = true;
+                this.veryLowPerf = false;
+            } else if (testMode === 'veryLowPerf') {
+                this.veryLowPerf = this.lowPerf = true;
+            }
+        } else {
+            if (this.performancesMode === undefined || this.performancesMode === 'auto') {
+                this.veryLowPerf = this.fluidbook.support.IE > 0;
+                this.lowPerf = !Modernizr.webgl || this.veryLowPerf || this.fluidbook.support.edge || this.fluidbook.support.android || this.fluidbook.support.macOs || this.fluidbook.support.iOS;
+            } else if (this.performancesMode === 'lowPerf') {
+                this.lowPerf = true;
+                this.veryLowPerf = false;
+            } else if (this.performancesMode === 'highPerf') {
+                this.lowPerf = this.veryLowPerf = false;
+            } else if (this.performancesMode === 'veryLowPerf') {
+                this.veryLowPerf = this.lowPerf = true;
+            }
         }
 
         // Performance settings
@@ -111,7 +238,7 @@ Fluidbook3DFlip.prototype = {
         // #2399
         this.animationTime = Math.max(0.4, this.animationTime);
 
-        if (performanceMode === 'performancesTest') {
+        if (this.performancesMode === 'performancesTest') {
             this.qualityRatio = Math.min(.75, this.qualityRatio);
             this.triangles = Math.min(2, this.triangles);
         }
@@ -119,13 +246,6 @@ Fluidbook3DFlip.prototype = {
         this.pixelRatio = window.devicePixelRatio * this.qualityRatio;
         this.frames = 0;
 
-        // console.log('Quality ratio: ' + this.qualityRatio);
-        // console.log('Triangles: ' + this.triangles);
-        // console.log('Animation time: ' + this.animationTime);
-        // console.log('Antialias: ' + this.antialias);
-        // console.log('Lights enabled: ' + this.enableLight);
-        // console.log('Shadows enabled: ' + this.enableShadow);
-
         return this.initThree();
     },
 
@@ -349,31 +469,35 @@ Fluidbook3DFlip.prototype = {
     adjustPerformancesSettings: function (callback) {
         var $this = this;
         var newMode;
-        if (this.veryLowPerf) {
-            newMode = 'veryLowPerf';
+
+        var res = this.getPerformancesTestResult();
+        if (!this.lowPerf) {
+            if (res < 5) {
+                newMode = 'disable';
+            } else if (res < 20) {
+                newMode = 'veryLowPerf';
+            } else if (res < 40) {
+                newMode = 'lowPerf';
+            } else {
+                newMode = 'highPerf';
+            }
+        } else if (this.veryLowPerf) {
+            if (res < 30) {
+                newMode = 'disable';
+            } else {
+                newMode = 'veryLowPerf';
+            }
         } else {
-            var res = this.getPerformancesTestResult();
-            if (!this.lowPerf) {
-                if (res < 5) {
-                    newMode = 'disable';
-                } else if (res < 10) {
-                    newMode = 'veryLowPerf';
-                } else if (res < 40) {
-                    newMode = 'lowPerf';
-                } else {
-                    newMode = 'highPerf';
-                }
+            if (res < 10) {
+                newMode = 'disable';
+            } else if (res < 40) {
+                newMode = 'veryLowPerf';
             } else {
-                if (res < 10) {
-                    newMode = 'disable';
-                } else if (res < 40) {
-                    newMode = 'veryLowPerf';
-                } else {
-                    newMode = 'lowPerf';
-                }
+                newMode = 'lowPerf';
             }
         }
 
+
         if (newMode !== 'disable') {
             this.init3D(newMode);
             callback();