From: Vincent Vanwaelscappel Date: Wed, 12 Dec 2018 17:47:16 +0000 (+0100) Subject: wip #2428 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ba524341616451c6fcd8cb1f53ce4510f46fbeb3;p=fluidbook-html5.git wip #2428 @4 --- diff --git a/_index.html b/_index.html index 6a14b2f6..0065c8ed 100644 --- a/_index.html +++ b/_index.html @@ -57,7 +57,9 @@
-
+
+ +
diff --git a/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js b/js/libs/fluidbook/cart/fluidbook.cart.remarkable.js index 82131ef6..087906c2 100644 --- 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 ca3793c7..efa1d340 100644 --- 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();