From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 25 Jun 2018 17:49:47 +0000 (+0200)
Subject: wip #809 @6
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=ebdbc0f72cc7b94ec60ea24909b263bb29973269;p=fluidbook-html5.git

wip #809 @6
---

diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js
index 0d5565e4..2835f51e 100644
--- a/js/libs/fluidbook/fluidbook.3dflip.js
+++ b/js/libs/fluidbook/fluidbook.3dflip.js
@@ -19,6 +19,8 @@ function Fluidbook3DFlip(fluidbook) {
     this.ready = false;
     this.animationTime = 1.2;
 
+    this.lowPerf = this.fluidbook.support.android || this.fluidbook.support.iOS || this.fluidbook.support.IE > 0;
+
     this.jcontainer = $("#flip3dcontainer");
 
     this.pw = this.fluidbook.resize.ww;
@@ -49,7 +51,7 @@ Fluidbook3DFlip.prototype = {
 
         var far = 24000;
         var near = 1000;
-        this.enableShadow = true;
+        this.enableShadow = false && !this.lowPerf;
 
         this.camera = new THREE.PerspectiveCamera(20, 1, near, far);
         this.camera.zoom = 1;
@@ -86,7 +88,7 @@ Fluidbook3DFlip.prototype = {
         // 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, 10, 10, true);
+            var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale * 2, this.fluidbook.datas.height * this.geometryScale, 3, 3, true);
             var shadowTexture = new THREE.ShadowMaterial({
                 color: 0x000000,
                 side: THREE.FrontSide,
@@ -109,16 +111,18 @@ Fluidbook3DFlip.prototype = {
     texturesLoaded: function (t1, t2) {
         var $this = this;
 
+        var triangles = 10;
+        if (this.lowPerf) {
+            triangles = 3;
+        }
 
-        var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, 50, 10, true);
+        var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, triangles * 5, triangles, true);
         var geometry2 = geometry.clone();
         geometry.merge(geometry2, new THREE.Matrix4().makeRotationY(Math.PI), 1);
 
         var roughness = 0.8;
 
         var textures = [
-            //new THREE.MeshPhongMaterial({color: 0xff00ff, side: THREE.FrontSide, overdraw: 0.5}),
-            //new THREE.MeshPhongMaterial({color: 0x00ff00, side: THREE.FrontSide, overdraw: 0.5}),
             new THREE.MeshStandardMaterial({map: t1, side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}),
             new THREE.MeshStandardMaterial({map: t2, side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}),
         ];
@@ -128,7 +132,6 @@ Fluidbook3DFlip.prototype = {
         this.plane.castShadow = this.enableShadow;
         this.plane.receiveShadow = false;
 
-
         this.scene.add(this.plane);
 
         this.modifier = new ModifierStack(this.plane);
@@ -137,13 +140,19 @@ Fluidbook3DFlip.prototype = {
         this.modifier.reset();
         this.modifier.addModifier(this.bend);
 
-        this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+        this.renderer = new THREE.WebGLRenderer({antialias: !this.lowPerf, alpha: true});
         if (this.enableShadow) {
             this.renderer.shadowMap.enabled = true;
             this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         }
+
+        var qualityRatio = 2;
+        if (this.lowPerf) {
+            qualityRatio = 1.5;
+        }
+
         this.renderer.setClearColor(0x000000, 0);
-        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setPixelRatio(window.devicePixelRatio * qualityRatio);
         this.renderer.setSize(this.pw, this.ph);
         this.container.appendChild(this.renderer.domElement);
 
@@ -154,12 +163,14 @@ Fluidbook3DFlip.prototype = {
     },
 
     prepareTexture: function (page, callback) {
-        var d = 4096;
+        var d = 2048;
         var c = document.getElementById("pscanvas");
+        c.width = d;
+        c.height = d;
         var ctx = c.getContext("2d");
         ctx.clearRect(0, 0, d, d);
         var img = new Image();
-        img.src = "data/background/300/t" + page + ".jpg";
+        img.src = "data/background/150/t" + page + ".jpg";
         img.onload = function () {
             ctx.drawImage(img, 0, 0, d, d);
             var i = new Image();
@@ -174,9 +185,7 @@ Fluidbook3DFlip.prototype = {
 
     play: function () {
         this.guessCameraZoom();
-
         this.playAnimation();
-
     },
 
     playAnimation: function () {
@@ -257,6 +266,7 @@ Fluidbook3DFlip.prototype = {
 
         var bookBox = $("#currentDoublePage").get(0).getBoundingClientRect();
         var s = (bookBox.width / 2) / rect.width;
+        console.log(s);
         this.plane.scale.x *= s;
         this.plane.scale.y *= s;
         this.plane.rotateX(0);
@@ -265,8 +275,7 @@ Fluidbook3DFlip.prototype = {
             this.shadowPlane.scale.y = this.plane.scale.y;
         }
 
-
-        for (i = 0; i < 40; i++) {
+        for (var i = 0; i < 40; i++) {
             bbox = new THREE.Box3().setFromObject(this.plane);
             min = this.to2D(bbox.min);
             max = this.to2D(bbox.max);
@@ -277,7 +286,10 @@ Fluidbook3DFlip.prototype = {
                 height: Math.abs(min.y - max.y)
             };
 
-            this.plane.translateY(rect.y - bookBox.y);
+            console.log(rect.y);
+            console.log(bookBox.y);
+
+            this.plane.translateY(rect.y - bookBox.top);
         }
         if (this.enableShadow) {
             this.shadowPlane.position.y = this.plane.position.y;