From: Vincent Vanwaelscappel Date: Fri, 17 Aug 2018 17:18:32 +0000 (+0200) Subject: wip #809 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=219db752e37610144d73e9f3b8ffab69a7cddf1c;p=fluidbook-html5.git wip #809 @4 --- diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js index b0ba9855..9f11be0a 100644 --- a/js/libs/fluidbook/fluidbook.3dflip.js +++ b/js/libs/fluidbook/fluidbook.3dflip.js @@ -1,10 +1,6 @@ function Fluidbook3DFlip(fluidbook) { this.fluidbook = fluidbook; - this.meshes = []; - this.mixers = []; - this.hemisphereLight = null; - this.pointLight = null; this.camera = null; this.scene = null; this.renderer = null; @@ -12,16 +8,25 @@ function Fluidbook3DFlip(fluidbook) { this.action = null; this.clock = new THREE.Clock; this.mesh = null; + this.plane = null; + // Plane not displayed used for size calculations + this.sizePlane = null; this.loader = null; this.animation = null; - this.animationMixer = null; this._progressAnimation = 0; this._pageRotation = 0; this.ready = false; this.animationTime = parseFloat(this.fluidbook.datas.mobileTransitionDuration); this.textures = []; + // Performance settings this.lowPerf = this.fluidbook.support.android || this.fluidbook.support.iOS || this.fluidbook.support.IE > 0; + this.enableLight = !this.lowPerf; + this.enableShadow = !this.lowPerf && this.enableLight; + this.antialias = false; + this.qualityRatio = this.lowPerf ? 1 : 2; + this.triangles = this.lowPerf ? 2 : 5; + this.pixelRatio = window.devicePixelRatio * this.qualityRatio; this.jcontainer = $("#flip3dcontainer"); @@ -33,7 +38,6 @@ function Fluidbook3DFlip(fluidbook) { this.pi2 = Math.PI * 2; this.deg2rad = this.pi2 / 360; - var $this = this; this.init(); } @@ -53,32 +57,35 @@ Fluidbook3DFlip.prototype = { this.container = $(this.jcontainer).get(0); this.scene = new THREE.Scene(); - this.scene.add(new THREE.AmbientLight(0xffffff, 1.5)); + if (this.enableLight) { + this.scene.add(new THREE.AmbientLight(0xffffff, 1.5)); + } var far = 24000; var near = 1000; - this.enableShadow = !this.lowPerf; this.camera = new THREE.PerspectiveCamera(20, 1, near, far); this.camera.zoom = 1; this.camera.position.z = 8873 * 2; this.camera.updateProjectionMatrix(); - var lightIntensity = .30; - // - var light = new THREE.SpotLight(0xffffff, lightIntensity, 0, 1); - light.position.set(2000, 0, 1.72503 * 10000); - if (this.enableShadow) { - light.castShadow = true; - light.shadow.mapSize.width = 2048; // default - light.shadow.mapSize.height = 2048; // default - light.shadow.camera.near = near; - light.shadow.camera.far = far; - light.shadow.bias = -0.0075; - light.shadow.radius = 3; - } + if (this.enableLight) { + var lightIntensity = .30; + // + var light = new THREE.SpotLight(0xffffff, lightIntensity, 0, 1); + light.position.set(2000, 0, 1.72503 * 10000); + if (this.enableShadow) { + light.castShadow = true; + light.shadow.mapSize.width = 2048; // default + light.shadow.mapSize.height = 2048; // default + light.shadow.camera.near = near; + light.shadow.camera.far = far; + light.shadow.bias = -0.0075; + light.shadow.radius = 3; + } - this.scene.add(light); + this.scene.add(light); + } if (this.enableShadow) { var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale * 2, this.fluidbook.datas.height * this.geometryScale, 1, 1, true); @@ -94,26 +101,35 @@ Fluidbook3DFlip.prototype = { this.scene.add(this.shadowPlane); } - var triangles = 6; - if (this.lowPerf) { - triangles = 2; - } - - var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, Math.round(triangles * 5), Math.round(triangles), true); + var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, Math.round(this.triangles * 5), Math.round(this.triangles), true); var geometry2 = geometry.clone(); + var geometry3 = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, 1, 1, true); geometry.merge(geometry2, new THREE.Matrix4().makeRotationY(Math.PI), 1); var roughness = 0.8; - this.textures = [ - new THREE.MeshStandardMaterial({side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}), - new THREE.MeshStandardMaterial({side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}), - ]; + + if (this.enableLight) { + this.textures = [ + new THREE.MeshStandardMaterial({side: THREE.FrontSide, roughness: roughness}), + new THREE.MeshStandardMaterial({side: THREE.FrontSide, roughness: roughness}), + ]; + } else { + this.textures = [ + new THREE.MeshBasicMaterial({side: THREE.FrontSide}), + new THREE.MeshBasicMaterial({side: THREE.FrontSide}), + ]; + } geometry.translate(this.fluidbook.datas.width * this.geometryScale * 0.5, 0, 0); this.plane = new THREE.Mesh(geometry, this.textures); this.plane.castShadow = this.enableShadow; this.plane.receiveShadow = false; + this.sizePlane = new THREE.Mesh(geometry3); + this.sizePlane.castShadow = this.sizePlane.receiveShadow = false; + this.sizePlane.visible=false; + + this.scene.add(this.sizePlane); this.scene.add(this.plane); this.modifier = new ModifierStack(this.plane); @@ -122,19 +138,14 @@ Fluidbook3DFlip.prototype = { this.modifier.reset(); this.modifier.addModifier(this.bend); - this.renderer = new THREE.WebGLRenderer({antialias: !this.lowPerf, alpha: true}); + this.renderer = new THREE.WebGLRenderer({antialias: this.antialias, alpha: true}); if (this.enableShadow) { this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; } - var qualityRatio = 1.5; - if (this.lowPerf) { - qualityRatio = 1.2; - } - this.renderer.setClearColor(0x000000, 0); - this.renderer.setPixelRatio(window.devicePixelRatio * qualityRatio); + this.renderer.setPixelRatio(this.pixelRatio); this.renderer.setSize(this.pw, this.ph); this.container.appendChild(this.renderer.domElement); @@ -279,10 +290,10 @@ Fluidbook3DFlip.prototype = { if (this.turnRunning) { $("#flip3dcontainer").show(); } else { - // $("#flip3dcontainer").hide(); + $("#flip3dcontainer").hide(); } } else { - //$("#flip3dcontainer").hide(); + $("#flip3dcontainer").hide(); } }, @@ -307,13 +318,14 @@ Fluidbook3DFlip.prototype = { if (this._progressAnimation != 0 && this._progressAnimation != 1) { return; } + this.camera.updateProjectionMatrix(); var bookBox = $("#currentDoublePage").get(0).getBoundingClientRect(); - this.plane.scale.x = this.plane.scale.y = 1; + this.sizePlane.scale.x = this.sizePlane.scale.y = 1; - for (var i = 0; i < 100; i++) { - var bbox = new THREE.Box3().setFromObject(this.plane); + for (var i = 0; i < 5; i++) { + var bbox = new THREE.Box3().setFromObject(this.sizePlane); var min = this.to2D(bbox.min); var max = this.to2D(bbox.max); @@ -330,15 +342,15 @@ Fluidbook3DFlip.prototype = { var s = (bookBox.width / 2) / rect.width; - this.plane.scale.x *= s; - this.plane.scale.y *= s; - this.plane.rotateX(0); + this.sizePlane.scale.x *= s; + this.sizePlane.scale.y *= s; + this.sizePlane.rotateX(0); if (this.enableShadow) { - this.shadowPlane.scale.x = this.plane.scale.x; - this.shadowPlane.scale.y = this.plane.scale.y; + this.shadowPlane.scale.x = this.sizePlane.scale.x; + this.shadowPlane.scale.y = this.sizePlane.scale.y; } - bbox = new THREE.Box3().setFromObject(this.plane); + bbox = new THREE.Box3().setFromObject(this.sizePlane); min = this.to2D(bbox.min); max = this.to2D(bbox.max); rect = { @@ -348,10 +360,17 @@ Fluidbook3DFlip.prototype = { height: Math.abs(min.y - max.y) }; - this.plane.translateY(rect.y - bookBox.top); + this.sizePlane.translateY(rect.y - bookBox.top); } + + + this.plane.position.y = this.sizePlane.position.y; + this.plane.scale.x = this.sizePlane.scale.x; + this.plane.scale.y = this.sizePlane.scale.y; if (this.enableShadow) { - this.shadowPlane.position.y = this.plane.position.y; + this.shadowPlane.scale.x = this.sizePlane.scale.x; + this.shadowPlane.scale.y = this.sizePlane.scale.y; + this.shadowPlane.position.y = this.sizePlane.position.y; this.shadowPlane.rotateX(0); } }, diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 7f885a6e..1197a66f 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -23,6 +23,12 @@ Fluidbook.BOTTOM = 9; Fluidbook.prototype = { init: function (datas) { + + this.flags = {}; + this.networkPause = false; + this.networkPauseTimeout = null; + this.networkPauseQueue = []; + this.datas = datas; this.junk = datas.cacheDate; if (this.datas.landingPage != undefined && this.datas.landingPage != '') { @@ -99,7 +105,6 @@ Fluidbook.prototype = { this.pagetransitions = new FluidbookPageTransition(this); this.stats = new FluidbookStats(this); this.stats.track(10); - this.flags = {}; this.initTheme(); this.initKeyboardShortcuts(); @@ -421,7 +426,6 @@ Fluidbook.prototype = { }, - reloadCurrentPage: function () { this.pageTransition(this.currentPage); }, @@ -922,4 +926,36 @@ Fluidbook.prototype = { }); return res; }, + + pauseNetwork: function (during) { + this.networkPause = true; + clearTimeout(this.networkPauseTimeout); + var $this = this; + this.networkPauseTimeout = setTimeout(function () { + $this.networkPause = false; + $this.flushNetworkQueue(); + }, during + 500) + }, + + executeWhenNetwork: function (f) { + if (this.networkPause) { + this.networkPauseQueue.push(f); + return; + } + f(); + }, + + flushNetworkQueue: function () { + if (this.networkPauseQueue.length === 0 || this.networkPause) { + return; + } + + var f = this.networkPauseQueue.shift(); + f(); + + var $this = this; + setTimeout(function () { + $this.flushNetworkQueue(); + }, 100); + }, } diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 4223f353..f06fbe08 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -31,13 +31,14 @@ FluidbookLoader.prototype = { var $callback = callback; var $page = $pages.shift(); - if ($page > this.fluidbook.getMaxPage() || $page < 1) { + + if ($page == undefined || $page == 'undefined' || $page > this.fluidbook.getMaxPage() || $page < 1) { callback(); + return; } this._preloadPage($page, function () { $this.preloadPagesBeforeTransition($pages, $callback); }); - }, arePreloadedPages: function (pages) { @@ -54,15 +55,14 @@ FluidbookLoader.prototype = { if (this.toPreload.length == 0) { return; } - var $this = this; - var callback = function () { - $this.preloadPages(); - }; - - var preloadingPage = this.toPreload.shift(); - - this._preloadPage(preloadingPage, callback); + this.fluidbook.executeWhenNetwork(function () { + var callback = function () { + $this.preloadPages(); + }; + var preloadingPage = $this.toPreload.shift(); + $this._preloadPage(preloadingPage, callback); + }, 0, 1000); }, _preloadPage: function (page, callback) { @@ -96,11 +96,11 @@ FluidbookLoader.prototype = { return; } - var numPreloadAfter = 5; - var numPreloadBefore = 2; + var numPreloadAfter = 8; + var numPreloadBefore = 4; if (this.fluidbook.resize.orientation == 'portrait') { - numPreloadAfter = 3; - numPreloadBefore = 1; + numPreloadAfter = 4; + numPreloadBefore = 2; } var max = Math.min(page + numPreloadAfter, this.fluidbook.getMaxPage()); var min = Math.max(1, page - numPreloadBefore); @@ -146,6 +146,11 @@ FluidbookLoader.prototype = { } }, loadPage: function (pageNr, doublePage, position, callback) { + if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) { + callback(); + return; + } + // Si une page de gauche existe déjà dans la double page, on la retire $(doublePage).find('.' + position).each(function () { if ($(this).attr('id') != 'page_' + pageNr || pageNr == 0) { @@ -243,6 +248,10 @@ FluidbookLoader.prototype = { }); }, _loadBackground: function (page, callback) { + if (page <= 0 || page > this.fluidbook.datas.pages) { + callback(); + return; + } if (this.backgrounds[page] != undefined) { callback(); } else { @@ -257,6 +266,10 @@ FluidbookLoader.prototype = { } }, __loadBackground: function (page, callback) { + if (page <= 0 || page > this.fluidbook.datas.pages) { + callback(); + return; + } var url = this.getBackgroundURL(page); if (url == false) { callback(); @@ -265,6 +278,10 @@ FluidbookLoader.prototype = { this.backgrounds[page] = this.loadImage(url, null, null, null, callback); }, _loadTexture: function (page, callback) { + if (page <= 0 || page > this.fluidbook.datas.pages) { + callback(); + return; + } if (this.textures[page] != undefined) { callback(); } else { @@ -273,6 +290,10 @@ FluidbookLoader.prototype = { }, __loadTexture: function (page, callback) { + if (page <= 0 || page > this.fluidbook.datas.pages) { + callback(); + return; + } var url = this.getTextureURL(page); if (url == false) { callback(); @@ -282,7 +303,10 @@ FluidbookLoader.prototype = { }, loadTexts: function (pageNr, callback) { - + if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) { + callback(); + return; + } if (this.getVersionToLoad(pageNr) == 'raster') { callback(); return; @@ -301,6 +325,10 @@ FluidbookLoader.prototype = { } }, _loadTexts: function (pageNr, callback) { + if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) { + callback(); + return; + } // var w = this.fluidbook.datas.width / 0.75; // var h = this.fluidbook.datas.height / 0.75; this.texts[pageNr] = this.loadImage(this.getTextsURL(pageNr), null, null, 'image/svg+xml', callback); diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js index 313c4e68..fe749e0d 100644 --- a/js/libs/fluidbook/fluidbook.pagetransitions.js +++ b/js/libs/fluidbook/fluidbook.pagetransitions.js @@ -66,6 +66,7 @@ FluidbookPageTransition.prototype = { $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () { $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.flip, true, function () { $this.beforeTransition(pageNr, 3, turning); + $this.fluidbook.pauseNetwork(2000); $(doublePage).addClass(turning.nextFromClass + 'end').one($this.fluidbook.support.getTransitionEndEvent(), function () { if ($this.transitionning == false) { return; @@ -104,6 +105,7 @@ FluidbookPageTransition.prototype = { $this.flip3d.prepareTurn(turning, function () { $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () { $this.beforeTransition(pageNr, 3, turning); + $this.fluidbook.pauseNetwork(2000); $this.flip3d.playTurn(turning.dir, function () { $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.end, true, function () { $this.afterTransition(pageNr); @@ -219,6 +221,7 @@ FluidbookPageTransition.prototype = { } this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { + $this.fluidbook.pauseNetwork(2000); $this.beforeTransition(pageNr, 2, turning); $("#currentDoublePage").addClass('_2d').addClass('axis_' + $this.transitionAxis).addClass(turning.currentToClass); $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function (event) { @@ -247,6 +250,7 @@ FluidbookPageTransition.prototype = { } this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { + $this.fluidbook.pauseNetwork(2000); $this.beforeTransition(pageNr, 2, turning); $("#currentDoublePage").addClass('axis_' + $this.transitionAxis).addClass('_2d').addClass(turning.currentToClass); $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () { diff --git a/js/libs/fluidbook/fluidbook.stats.js b/js/libs/fluidbook/fluidbook.stats.js index 2b6732bd..92d11f08 100644 --- a/js/libs/fluidbook/fluidbook.stats.js +++ b/js/libs/fluidbook/fluidbook.stats.js @@ -137,24 +137,30 @@ FluidbookStats.prototype = { extra = ''; } - $.ajax({ - url: 'https://stats.fluidbook.com/stats2.php', - type: 'GET', - data: { - id: this.id, - vid: this.vid, - type: type, - page: page, - str: extra, - time: new Date().getTime() - }, - success: function () { + var $this = this; + setTimeout(function () { + $this.fluidbook.executeWhenNetwork(function () { + $.ajax({ + url: 'https://stats.fluidbook.com/stats2.php', + type: 'GET', + data: { + id: $this.id, + vid: $this.vid, + type: type, + page: page, + str: extra, + time: new Date().getTime() + }, + success: function () { - }, - error: function () { + }, + error: function () { + + } + }); + }); + }, 500); - } - }); } , };