Fixed jittering of planets with minimum scaling

Change-Id: I10d2202468518e85b4cea850a9a335bb70937856
Reviewed-by: Pasi Keränen <pasi.keranen@digia.com>

2 files changed, 132 insertions, 78 deletions

diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.js b/examples/canvas3d/canvas3d/threejs/planets/planets.js
index 5473e77..bf281ce 100644
--- a/examples/canvas3d/canvas3d/threejs/planets/planets.js
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.js
@@ -82,6 +82,10 @@ var currTimeD = startD;
 
 var auScale = 149597.870700; // AU in thousands of kilometers
 
+var focusedScaling = false;
+var focusedMinimumScale = 20;
+var actualScale;
+
 function initializeGL(canvas, eventSource, mainView) {
 
     planetCanvas = canvas;
@@ -138,59 +142,77 @@ function loadPlanetData() {
 
     var sun = { radius: 694.439, tilt: 63.87, period: 25.05 };
     planets.push(sun);
-    var mercury = { radius: 2.433722, tilt: 0.04, N1: 48.3313, N2: 0.0000324587,
-                    i1: 7.0047, i2: 0.0000000500, w1: 29.1241, w2: 0.0000101444,
-                    a1: 0.387098, a2: 0, e1: 0.205635, e2: 0.000000000559,
-                    M1: 168.6562, M2: 4.0923344368, period: 58.646,
-                    centerOfOrbit: SUN };
+    var mercury = {
+        radius: 2.433722, tilt: 0.04, N1: 48.3313, N2: 0.0000324587,
+        i1: 7.0047, i2: 0.0000000500, w1: 29.1241, w2: 0.0000101444,
+        a1: 0.387098, a2: 0, e1: 0.205635, e2: 0.000000000559,
+        M1: 168.6562, M2: 4.0923344368, period: 58.646,
+        centerOfOrbit: SUN
+    };
     planets.push(mercury);
-    var venus = { radius: 6.046079, tilt: 177.36, N1: 76.6799, N2: 0.0000246590,
-                  i1: 3.3946, i2: 0.0000000275, w1: 54.8910, w2: 0.0000138374,
-                  a1: 0.723330, a2: 0, e1: 0.006773, e2: -0.000000001302,
-                  M1: 48.0052, M2: 1.6021302244, period: 243.0185,
-                  centerOfOrbit: SUN };
+    var venus = {
+        radius: 6.046079, tilt: 177.36, N1: 76.6799, N2: 0.0000246590,
+        i1: 3.3946, i2: 0.0000000275, w1: 54.8910, w2: 0.0000138374,
+        a1: 0.723330, a2: 0, e1: 0.006773, e2: -0.000000001302,
+        M1: 48.0052, M2: 1.6021302244, period: 243.0185,
+        centerOfOrbit: SUN
+    };
     planets.push(venus);
-    var earth = { radius: 6.371, tilt: 25.44, N1: 174.873, N2: 0,
-                  i1: 0.00005, i2: 0, w1: 102.94719, w2: 0,
-                  a1: 1, a2: 0, e1: 0.01671022, e2: 0,
-                  M1: 357.529, M2: 0.985608, period: 0.997,
-                  centerOfOrbit: SUN };
+    var earth = {
+        radius: 6.371, tilt: 25.44, N1: 174.873, N2: 0,
+        i1: 0.00005, i2: 0, w1: 102.94719, w2: 0,
+        a1: 1, a2: 0, e1: 0.01671022, e2: 0,
+        M1: 357.529, M2: 0.985608, period: 0.997,
+        centerOfOrbit: SUN
+    };
     planets.push(earth);
-    var mars = { radius: 3.389372, tilt: 25.19, N1: 49.5574, N2: 0.0000211081,
-                 i1: 1.8497, i2: -0.0000000178, w1: 286.5016, w2: 0.0000292961,
-                 a1: 1.523688, a2: 0, e1: 0.093405, e2: 0.000000002516,
-                 M1: 18.6021, M2: 0.5240207766, period: 1.025957,
-                 centerOfOrbit: SUN };
+    var mars = {
+        radius: 3.389372, tilt: 25.19, N1: 49.5574, N2: 0.0000211081,
+        i1: 1.8497, i2: -0.0000000178, w1: 286.5016, w2: 0.0000292961,
+        a1: 1.523688, a2: 0, e1: 0.093405, e2: 0.000000002516,
+        M1: 18.6021, M2: 0.5240207766, period: 1.025957,
+        centerOfOrbit: SUN
+    };
     planets.push(mars);
-    var jupiter = { radius: 71.41254, tilt: 3.13, N1: 100.4542, N2: 0.0000276854,
-                    i1: 1.3030, i2: -0.0000001557, w1: 273.8777, w2: 0.0000164505,
-                    a1: 5.20256, a2: 0, e1: 0.048498, e2: 0.000000004469,
-                    M1: 19.8950, M2: 0.0830853001, period: 0.4135,
-                    centerOfOrbit: SUN };
+    var jupiter = {
+        radius: 71.41254, tilt: 3.13, N1: 100.4542, N2: 0.0000276854,
+        i1: 1.3030, i2: -0.0000001557, w1: 273.8777, w2: 0.0000164505,
+        a1: 5.20256, a2: 0, e1: 0.048498, e2: 0.000000004469,
+        M1: 19.8950, M2: 0.0830853001, period: 0.4135,
+        centerOfOrbit: SUN
+    };
     planets.push(jupiter);
-    var saturn = { radius: 60.19958, tilt: 26.73, N1: 113.6634, N2: 0.0000238980,
-                   i1: 2.4886, i2: -0.0000001081, w1: 339.3939, w2: 0.0000297661,
-                   a1: 9.55475, a2: 0, e1: 0.055546, e2: -0.000000009499,
-                   M1: 316.9670, M2: 0.0334442282, period: 0.4395,
-                   centerOfOrbit: SUN };
+    var saturn = {
+        radius: 60.19958, tilt: 26.73, N1: 113.6634, N2: 0.0000238980,
+        i1: 2.4886, i2: -0.0000001081, w1: 339.3939, w2: 0.0000297661,
+        a1: 9.55475, a2: 0, e1: 0.055546, e2: -0.000000009499,
+        M1: 316.9670, M2: 0.0334442282, period: 0.4395,
+        centerOfOrbit: SUN
+    };
     planets.push(saturn);
-    var uranus = { radius: 25.5286, tilt: 97.77, N1: 74.0005, N2: 0.000013978,
-                   i1: 0.7733, i2: 0.000000019, w1: 96.6612, w2: 0.000030565,
-                   a1: 19.18171, a2: -0.0000000155, e1: 0.047318, e2: 0.00000000745,
-                   M1: 142.5905, M2: 0.011725806, period: 0.71833,
-                   centerOfOrbit: SUN };
+    var uranus = {
+        radius: 25.5286, tilt: 97.77, N1: 74.0005, N2: 0.000013978,
+        i1: 0.7733, i2: 0.000000019, w1: 96.6612, w2: 0.000030565,
+        a1: 19.18171, a2: -0.0000000155, e1: 0.047318, e2: 0.00000000745,
+        M1: 142.5905, M2: 0.011725806, period: 0.71833,
+        centerOfOrbit: SUN
+    };
     planets.push(uranus);
-    var neptune = { radius: 24.73859, tilt: 28.32, N1: 131.7806, N2: 0.000030173,
-                    i1: 1.7700, i2: -0.000000255, w1: 272.8461, w2: 0.000006027,
-                    a1: 30.05826, a2: 0.00000003313, e1: 0.008606, e2: 0.00000000215,
-                    M1: 260.2471, M2: 0.005995147, period: 0.6713,
-                    centerOfOrbit: SUN };
+    var neptune = {
+        radius: 24.73859, tilt: 28.32, N1: 131.7806, N2: 0.000030173,
+        i1: 1.7700, i2: -0.000000255, w1: 272.8461, w2: 0.000006027,
+        a1: 30.05826, a2: 0.00000003313, e1: 0.008606, e2: 0.00000000215,
+        M1: 260.2471, M2: 0.005995147, period: 0.6713,
+        centerOfOrbit: SUN
+    };
     planets.push(neptune);
-    var moon = { radius: 1.5424, tilt: 28.32, N1: 125.1228, N2: -0.0529538083,
-                 i1: 5.1454, i2: 0, w1: 318.0634, w2: 0.1643573223,
-                 a1: 0.273, a2: 0, e1: 0.054900, e2: 0,
-                 M1: 115.3654, M2: 13.0649929509, period: 27.321582,
-                 centerOfOrbit: EARTH };
+    var moon = {
+        radius: 1.5424, tilt: 28.32, N1: 125.1228, N2: -0.0529538083,
+        i1: 5.1454, i2: 0, w1: 318.0634, w2: 0.1643573223,
+        a1: 0.273, a2: 0, e1: 0.054900, e2: 0,
+        M1: 115.3654, M2: 13.0649929509, period: 27.321582,
+        centerOfOrbit: EARTH
+    };
     planets.push(moon);
 
 }
@@ -264,10 +286,10 @@ function createSun(radius) {
 
     var texture = THREE.ImageUtils.loadTexture('qrc:/images/sunmap.jpg');
     var material = new THREE.MeshBasicMaterial({
-        map: texture,
-        bumpMap: texture,
-        bumpScale: 0.05
-    });
+                                                   map: texture,
+                                                   bumpMap: texture,
+                                                   bumpScale: 0.05
+                                               });
     var mesh = new THREE.Mesh(commonGeometry, material);
     mesh.scale.set(radius, radius, radius);
 
@@ -280,10 +302,10 @@ function createSun(radius) {
 function createPlanet(radius, scale, mapTexture, bumpTexture, specularTexture) {
 
     var material = new THREE.MeshPhongMaterial({
-        map: THREE.ImageUtils.loadTexture(mapTexture),
-        bumpMap: THREE.ImageUtils.loadTexture(bumpTexture),
-        bumpScale: scale
-    });
+                                                   map: THREE.ImageUtils.loadTexture(mapTexture),
+                                                   bumpMap: THREE.ImageUtils.loadTexture(bumpTexture),
+                                                   bumpScale: scale
+                                               });
 
     if (specularTexture) {
         material.specularMap = THREE.ImageUtils.loadTexture(specularTexture);
@@ -303,11 +325,11 @@ function createPlanet(radius, scale, mapTexture, bumpTexture, specularTexture) {
 function createEarthCloud() {
 
     var material = new THREE.MeshPhongMaterial({
-        map: THREE.ImageUtils.loadTexture('qrc:images/earthcloudmapcolortrans.png'),
-        side: THREE.DoubleSide,
-        transparent: true,
-        opacity: 0.8
-    });
+                                                   map: THREE.ImageUtils.loadTexture('qrc:images/earthcloudmapcolortrans.png'),
+                                                   side: THREE.DoubleSide,
+                                                   transparent: true,
+                                                   opacity: 0.8
+                                               });
     var mesh = new THREE.Mesh(commonGeometry, material);
 
     return mesh;
@@ -318,11 +340,11 @@ function createRing(radius, width, height, texture) {
 
     var geometry = new THREEx.Planets._RingGeometry(radius, width, height);
     var material = new THREE.MeshPhongMaterial({
-        map: THREE.ImageUtils.loadTexture(texture),
-        side: THREE.DoubleSide,
-        transparent: true,
-        opacity: 0.8
-    });
+                                                   map: THREE.ImageUtils.loadTexture(texture),
+                                                   side: THREE.DoubleSide,
+                                                   transparent: true,
+                                                   opacity: 0.8
+                                               });
     material.map.minFilter = THREE.NearestFilter;
     var mesh = new THREE.Mesh(geometry, material);
     mesh.lookAt(new THREE.Vector3(0, 90, 0));
@@ -335,9 +357,9 @@ function createStarfield(radius) {
 
     var texture = THREE.ImageUtils.loadTexture('qrc:/images/galaxy_starfield.png')
     var material = new THREE.MeshBasicMaterial({
-        map: texture,
-        side: THREE.BackSide
-    })
+                                                   map: texture,
+                                                   side: THREE.BackSide
+                                               })
     var geometry = new THREE.SphereGeometry(radius, 32, 32)
     var mesh = new THREE.Mesh(geometry, material)
 
@@ -362,14 +384,24 @@ function onSpeedChanged(value) {
 
 }
 
-function setScale(value) {
+function setScale(value, focused) {
+
+    // Save actual scale in focus mode
+    if (!focused)
+        actualScale = value;
+
+    // Limit minimum scaling in focus mode to avoid jitter caused by rounding errors
+    if (value <= focusedMinimumScale && (focusedScaling || focused)) {
+        planetScale = focusedMinimumScale;
+    } else {
+        planetScale = actualScale;
+    }
 
-    planetScale = value;
     for (var i = 0; i < objects.length; i++) {
         var object = objects[i];
         // first reset scale
         object.scale.set(planets[i]["radius"], planets[i]["radius"], planets[i]["radius"]);
-        if (i === 0) {
+        if (i === SUN) {
             object.scale.multiplyScalar(planetScale / 100);
         } else {
             object.scale.multiplyScalar(planetScale);
@@ -388,6 +420,17 @@ function setOldPlanet() {
     oldFocusedPlanetPosition = objects[planet].position.clone();
     qmlView.oldPlanet = qmlView.focusedPlanet;
 
+    if (qmlView.focusedPlanet !== SOLAR_SYSTEM && actualScale <= focusedMinimumScale) {
+        // Limit minimum scaling in focus mode to avoid jitter caused by rounding errors
+        planetScale = focusedMinimumScale;
+        setScale(focusedMinimumScale, true);
+        focusedScaling = true;
+    } else if (focusedScaling === true) {
+        // Restore normal scaling
+        focusedScaling = false;
+        setScale(actualScale);
+    }
+
 }
 
 function setCameraDistance(distance) {
@@ -485,10 +528,22 @@ function onDocumentMouseDown(x, y) {
             }
             i++;
         }
-        if (selectedPlanet < NUM_SELECTABLE_PLANETS)
+        if (selectedPlanet < NUM_SELECTABLE_PLANETS) {
             qmlView.focusedPlanet = selectedPlanet;
+            // Limit minimum scaling in focus mode to avoid jitter caused by rounding errors
+            if (actualScale <= focusedMinimumScale) {
+                planetScale = focusedMinimumScale;
+                setScale(focusedMinimumScale, true);
+            }
+            focusedScaling = true;
+        }
     } else {
         qmlView.focusedPlanet = SOLAR_SYSTEM;
+        // Restore normal scaling
+        if (focusedScaling === true) {
+            focusedScaling = false;
+            setScale(actualScale);
+        }
     }
 
 }
@@ -538,7 +593,7 @@ function paintGL(canvas) {
                       - Math.sin(N) * Math.sin(v + w) * Math.cos(iPlanet));
         var zh = -r * (Math.sin(N) * Math.cos(v + w)
                        + Math.cos(N) * Math.sin(v + w) * Math.cos(iPlanet));
-        var yh = r * (Math.sin(w+v) * Math.sin(iPlanet));
+        var yh = r * (Math.sin(w + v) * Math.sin(iPlanet));
 
         // Apply the position offset from the center of orbit to the bodies
         var centerOfOrbit = objects[planet["centerOfOrbit"]];
@@ -546,7 +601,6 @@ function paintGL(canvas) {
                             centerOfOrbit.position.y + yh * auScale,
                             centerOfOrbit.position.z + zh * auScale);
 
-
         // Calculate and apply the appropriate axis tilt to the bodies
         // and rotate them around the axis
         var radians = planet["tilt"] * Math.PI / 180; // tilt in radians
diff --git a/examples/canvas3d/canvas3d/threejs/planets/planets.qml b/examples/canvas3d/canvas3d/threejs/planets/planets.qml
index 9396056..3253d9d 100644
--- a/examples/canvas3d/canvas3d/threejs/planets/planets.qml
+++ b/examples/canvas3d/canvas3d/threejs/planets/planets.qml
@@ -59,8 +59,8 @@ Item {
         target: mainview
         properties: "xLookAtOffset, yLookAtOffset, zLookAtOffset"
         to: 0
-        easing.type: Easing.InOutQuad
-        duration: 1000
+        easing.type: Easing.InOutQuint
+        duration: 1250
     }
 
     NumberAnimation {
@@ -68,14 +68,14 @@ Item {
         target: mainview
         properties: "xCameraOffset, yCameraOffset, zCameraOffset"
         to: 0
-        easing.type: Easing.InOutQuad
-        duration: 1000
+        easing.type: Easing.InOutQuint
+        duration: 2500
     }
 
     Behavior on cameraNear {
         PropertyAnimation {
-            easing.type: Easing.InOutQuad
-            duration: 1000
+            easing.type: Easing.InOutQuint
+            duration: 2500
         }
     }
     //! [1]