Merge pull request #4725 from AnalyticalGraphicsInc/rectangle-texture

pjcozzi · web-flow · commit 7e7cd7ef0936 · 2016-12-07T10:09:23.000-05:00
Fix RectangleGeometry texture rotation
diff --git a/Apps/Sandcastle/gallery/Rectangle.html b/Apps/Sandcastle/gallery/Rectangle.html
@@ -42,7 +42,7 @@
 var greenRectangle = viewer.entities.add({
     name : 'Green translucent, rotated, and extruded rectangle at height with outline',
     rectangle : {
-        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
+        coordinates : Cesium.Rectangle.fromDegrees(-110.0, 30.0, -100.0, 40.0),
         material : Cesium.Color.GREEN.withAlpha(0.5),
         rotation : Cesium.Math.toRadians(45),
         extrudedHeight : 300000.0,
@@ -52,6 +52,22 @@
     }
 });
 
+var rotation = Cesium.Math.toRadians(30);
+
+function getRotationValue() {
+    rotation += 0.005;
+    return rotation;
+}
+viewer.entities.add({
+    name: 'Rotating rectangle with rotating texture coordinate',
+    rectangle: {
+        coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0),
+        material: '../images/Cesium_Logo_Color.jpg',
+        rotation: new Cesium.CallbackProperty(getRotationValue, false),
+        stRotation: new Cesium.CallbackProperty(getRotationValue, false)
+    }
+});
+
 viewer.zoomTo(viewer.entities);
 //Sandcastle_End
     Sandcastle.finishedLoading();
diff --git a/Apps/Sandcastle/gallery/Rectangle.jpg b/Apps/Sandcastle/gallery/Rectangle.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -5,6 +5,7 @@ Change Log
 
 * Added the ability to blend a `Model` with a color/translucency. Added `color`, `colorBlendMode`, and `colorBlendAmount` properties to `Model`, `ModelGraphics`, and CZML. Added `ColorBlendMode` enum. [#4547](https://github.com/AnalyticalGraphicsInc/cesium/pull/4547)
 * Fixed tooltips for gallery thumbnails in Sandcastle [#4702](https://github.com/AnalyticalGraphicsInc/cesium/pull/4702)
+* Fixed texture rotation for `RectangleGeometry` [#2737](https://github.com/AnalyticalGraphicsInc/cesium/issues/2737)
 
 ### 1.28 - 2016-12-01
 
diff --git a/Source/Core/RectangleGeometry.js b/Source/Core/RectangleGeometry.js
@@ -752,9 +752,9 @@ define([
         return result;
     };
 
-    var textureMatrixScratch = new Matrix2();
     var tangentRotationMatrixScratch = new Matrix3();
     var nwScratch = new Cartographic();
+    var stNwScratch = new Cartographic();
     var quaternionScratch = new Quaternion();
     var centerScratch = new Cartographic();
     /**
@@ -776,30 +776,27 @@ define([
         var surfaceHeight = rectangleGeometry._surfaceHeight;
         var extrude = rectangleGeometry._extrude;
         var extrudedHeight = rectangleGeometry._extrudedHeight;
+        var rotation = rectangleGeometry._rotation;
         var stRotation = rectangleGeometry._stRotation;
         var vertexFormat = rectangleGeometry._vertexFormat;
 
-        var options = RectangleGeometryLibrary.computeOptions(rectangleGeometry, rectangle, nwScratch);
+        var options = RectangleGeometryLibrary.computeOptions(rectangleGeometry, rectangle, nwScratch, stNwScratch);
 
-        var textureMatrix = textureMatrixScratch;
         var tangentRotationMatrix = tangentRotationMatrixScratch;
-        if (defined(stRotation)) {
-            // negate angle for a counter-clockwise rotation
-            Matrix2.fromRotation(-stRotation, textureMatrix);
+        if (stRotation !== 0 || rotation !== 0) {
             var center = Rectangle.center(rectangle, centerScratch);
-            var axis = ellipsoid.cartographicToCartesian(center, v1Scratch);
-            Cartesian3.normalize(axis, axis);
+            var axis = ellipsoid.geodeticSurfaceNormalCartographic(center, v1Scratch);
             Quaternion.fromAxisAngle(axis, -stRotation, quaternionScratch);
             Matrix3.fromQuaternion(quaternionScratch, tangentRotationMatrix);
         } else {
-            Matrix2.clone(Matrix2.IDENTITY, textureMatrix);
             Matrix3.clone(Matrix3.IDENTITY, tangentRotationMatrix);
         }
 
-        options.lonScalar = 1.0 / rectangle.width;
-        options.latScalar = 1.0 / rectangle.height;
+        options.lonScalar = 1.0 / rectangleGeometry._rectangle.width;
+        options.latScalar = 1.0 / rectangleGeometry._rectangle.height;
         options.vertexFormat = vertexFormat;
-        options.textureMatrix = textureMatrix;
+        options.rotation = rotation;
+        options.stRotation = stRotation;
         options.tangentRotationMatrix = tangentRotationMatrix;
         options.size = options.width * options.height;
 
diff --git a/Source/Core/RectangleGeometryLibrary.js b/Source/Core/RectangleGeometryLibrary.js
@@ -1,22 +1,22 @@
 /*global define*/
 define([
-        './Cartesian3',
-        './Cartographic',
-        './defined',
-        './DeveloperError',
-        './GeographicProjection',
-        './Math',
-        './Matrix2',
-        './Rectangle'
-    ], function(
-        Cartesian3,
-        Cartographic,
-        defined,
-        DeveloperError,
-        GeographicProjection,
-        CesiumMath,
-        Matrix2,
-        Rectangle) {
+    './Cartesian3',
+    './Cartographic',
+    './defined',
+    './DeveloperError',
+    './GeographicProjection',
+    './Math',
+    './Matrix2',
+    './Rectangle'
+], function(
+    Cartesian3,
+    Cartographic,
+    defined,
+    DeveloperError,
+    GeographicProjection,
+    CesiumMath,
+    Matrix2,
+    Rectangle) {
     'use strict';
 
     var cos = Math.cos;
@@ -55,10 +55,17 @@ define([
         position.z = kZ / gamma;
 
         if (defined(options.vertexFormat) && options.vertexFormat.st) {
-            st.x = (stLongitude - rectangle.west) * options.lonScalar;
-            st.y = (stLatitude - rectangle.south) * options.latScalar;
-
-            Matrix2.multiplyByVector(options.textureMatrix, st, st);
+            var stNwCorner = options.stNwCorner;
+            if (defined(stNwCorner)) {
+                stLatitude = stNwCorner.latitude - options.stGranYCos * row + col * options.stGranXSin;
+                stLongitude = stNwCorner.longitude + row * options.stGranYSin + col * options.stGranXCos;
+
+                st.x = (stLongitude - options.stWest) * options.lonScalar;
+                st.y = (stLatitude - options.stSouth) * options.latScalar;
+            } else {
+                st.x = (stLongitude - rectangle.west) * options.lonScalar;
+                st.y = (stLatitude - rectangle.south) * options.latScalar;
+            }
         }
     };
 
@@ -67,14 +74,65 @@ define([
     var centerScratch = new Cartographic();
     var centerCartesian = new Cartesian3();
     var proj = new GeographicProjection();
+
+    function getRotationOptions(nwCorner, rotation, granularityX, granularityY, center, width, height) {
+        var cosRotation = Math.cos(rotation);
+        var granYCos = granularityY * cosRotation;
+        var granXCos = granularityX * cosRotation;
+
+        var sinRotation = Math.sin(rotation);
+        var granYSin = granularityY * sinRotation;
+        var granXSin = granularityX * sinRotation;
+
+        nwCartesian = proj.project(nwCorner, nwCartesian);
+
+        nwCartesian = Cartesian3.subtract(nwCartesian, centerCartesian, nwCartesian);
+        var rotationMatrix = Matrix2.fromRotation(rotation, rotationMatrixScratch);
+        nwCartesian = Matrix2.multiplyByVector(rotationMatrix, nwCartesian, nwCartesian);
+        nwCartesian = Cartesian3.add(nwCartesian, centerCartesian, nwCartesian);
+        nwCorner = proj.unproject(nwCartesian, nwCorner);
+
+        width -= 1;
+        height -= 1;
+
+        var latitude = nwCorner.latitude;
+        var latitude0 = latitude + width * granXSin;
+        var latitude1 = latitude - granYCos * height;
+        var latitude2 = latitude - granYCos * height + width * granXSin;
+
+        var north = Math.max(latitude, latitude0, latitude1, latitude2);
+        var south = Math.min(latitude, latitude0, latitude1, latitude2);
+
+        var longitude = nwCorner.longitude;
+        var longitude0 = longitude + width * granXCos;
+        var longitude1 = longitude + height * granYSin;
+        var longitude2 = longitude + height * granYSin + width * granXCos;
+
+        var east = Math.max(longitude, longitude0, longitude1, longitude2);
+        var west = Math.min(longitude, longitude0, longitude1, longitude2);
+
+        return {
+            north: north,
+            south: south,
+            east: east,
+            west: west,
+            granYCos : granYCos,
+            granYSin : granYSin,
+            granXCos : granXCos,
+            granXSin : granXSin,
+            nwCorner : nwCorner
+        };
+    }
+
     /**
      * @private
      */
-    RectangleGeometryLibrary.computeOptions = function(geometry, rectangle, nwCorner) {
+    RectangleGeometryLibrary.computeOptions = function(geometry, rectangle, nwCorner, stNwCorner) {
         var granularity = geometry._granularity;
         var ellipsoid = geometry._ellipsoid;
         var surfaceHeight = geometry._surfaceHeight;
         var rotation = geometry._rotation;
+        var stRotation = geometry._stRotation;
         var extrudedHeight = geometry._extrudedHeight;
         var east = rectangle.east;
         var west = rectangle.west;
@@ -103,76 +161,73 @@ define([
 
         nwCorner = Rectangle.northwest(rectangle, nwCorner);
         var center = Rectangle.center(rectangle, centerScratch);
-
-        var granYCos = granularityY;
-        var granXCos = granularityX;
-        var granYSin = 0.0;
-        var granXSin = 0.0;
-
-        if (defined(rotation) && rotation !== 0) {
-            var cosRotation = Math.cos(rotation);
-            granYCos *= cosRotation;
-            granXCos *= cosRotation;
-
-            var sinRotation = Math.sin(rotation);
-            granYSin = granularityY * sinRotation;
-            granXSin = granularityX * sinRotation;
-
+        if (rotation !== 0 || stRotation !== 0) {
             if (center.longitude < nwCorner.longitude) {
                 center.longitude += CesiumMath.TWO_PI;
             }
-
-            nwCartesian = proj.project(nwCorner, nwCartesian);
             centerCartesian = proj.project(center, centerCartesian);
+        }
 
-            nwCartesian = Cartesian3.subtract(nwCartesian, centerCartesian, nwCartesian);
-            var rotationMatrix = Matrix2.fromRotation(rotation, rotationMatrixScratch);
-            nwCartesian = Matrix2.multiplyByVector(rotationMatrix, nwCartesian, nwCartesian);
-            nwCartesian = Cartesian3.add(nwCartesian, centerCartesian, nwCartesian);
-            nwCorner = proj.unproject(nwCartesian, nwCorner);
-
-            var latitude = nwCorner.latitude;
-            var latitude0 = latitude + (width - 1) * granXSin;
-            var latitude1 = latitude - granYCos * (height - 1);
-            var latitude2 = latitude - granYCos * (height - 1) + (width - 1) * granXSin;
-
-            north = Math.max(latitude, latitude0, latitude1, latitude2);
-            south = Math.min(latitude, latitude0, latitude1, latitude2);
+        var granYCos = granularityY;
+        var granXCos = granularityX;
+        var granYSin = 0.0;
+        var granXSin = 0.0;
 
-            var longitude = nwCorner.longitude;
-            var longitude0 = longitude + (width - 1) * granXCos;
-            var longitude1 = longitude + (height - 1) * granYSin;
-            var longitude2 = longitude + (height - 1) * granYSin + (width - 1) * granXCos;
+        var options = {
+            granYCos : granYCos,
+            granYSin : granYSin,
+            granXCos : granXCos,
+            granXSin : granXSin,
+            ellipsoid : ellipsoid,
+            surfaceHeight : surfaceHeight,
+            extrudedHeight : extrudedHeight,
+            nwCorner : nwCorner,
+            rectangle : rectangle,
+            width: width,
+            height: height
+        };
 
-            east = Math.max(longitude, longitude0, longitude1, longitude2);
-            west = Math.min(longitude, longitude0, longitude1, longitude2);
+        if (rotation !== 0) {
+            var rotationOptions = getRotationOptions(nwCorner, rotation, granularityX, granularityY, center, width, height);
+            north = rotationOptions.north;
+            south = rotationOptions.south;
+            east = rotationOptions.east;
+            west = rotationOptions.west;
 
             //>>includeStart('debug', pragmas.debug);
             if (north < -CesiumMath.PI_OVER_TWO || north > CesiumMath.PI_OVER_TWO ||
-                    south < -CesiumMath.PI_OVER_TWO || south > CesiumMath.PI_OVER_TWO) {
+                south < -CesiumMath.PI_OVER_TWO || south > CesiumMath.PI_OVER_TWO) {
                 throw new DeveloperError('Rotated rectangle is invalid.  It crosses over either the north or south pole.');
             }
             //>>includeEnd('debug')
 
+            options.granYCos = rotationOptions.granYCos;
+            options.granYSin = rotationOptions.granYSin;
+            options.granXCos = rotationOptions.granXCos;
+            options.granXSin = rotationOptions.granXSin;
+
             rectangle.north = north;
             rectangle.south = south;
             rectangle.east = east;
             rectangle.west = west;
         }
 
-         return {
-            granYCos : granYCos,
-            granYSin : granYSin,
-            granXCos : granXCos,
-            granXSin : granXSin,
-            ellipsoid : ellipsoid,
-            width : width,
-            height : height,
-            surfaceHeight : surfaceHeight,
-            extrudedHeight : extrudedHeight,
-            nwCorner: nwCorner,
-            rectangle: rectangle
-        };
+        if (stRotation !== 0) {
+            rotation = rotation - stRotation;
+            stNwCorner = Rectangle.northwest(rectangle, stNwCorner);
+
+            var stRotationOptions = getRotationOptions(stNwCorner, rotation, granularityX, granularityY, center, width, height);
+
+            options.stGranYCos =  stRotationOptions.granYCos;
+            options.stGranXCos = stRotationOptions.granXCos;
+            options.stGranYSin = stRotationOptions.granYSin;
+            options.stGranXSin = stRotationOptions.granXSin;
+            options.stNwCorner = stNwCorner;
+            options.stWest = stRotationOptions.west;
+            options.stSouth = stRotationOptions.south;
+        }
+
+        return options;
     };
 
     return RectangleGeometryLibrary;
diff --git a/Specs/Core/RectangleGeometrySpec.js b/Specs/Core/RectangleGeometrySpec.js
@@ -145,6 +145,28 @@ defineSuite([
         expect(st[length - 1]).toEqualEpsilon(0.0, CesiumMath.EPSILON14);
     });
 
+    it('compute texture coordinate rotation with rectangle rotation', function() {
+        var rectangle = new Rectangle(-1, -1, 1, 1);
+        var angle = CesiumMath.toRadians(30);
+        var m = RectangleGeometry.createGeometry(new RectangleGeometry({
+            vertexFormat : VertexFormat.POSITION_AND_ST,
+            rectangle : rectangle,
+            rotation: angle,
+            stRotation : angle,
+            granularity : 1.0
+        }));
+        var st = m.attributes.st.values;
+
+        expect(st[0]).toEqual(0.0); //top left corner
+        expect(st[1]).toEqual(1.0);
+        expect(st[4]).toEqual(1.0); //top right corner
+        expect(st[5]).toEqual(1.0);
+        expect(st[12]).toEqual(0.0); //bottom left corner
+        expect(st[13]).toEqual(0.0);
+        expect(st[16]).toEqual(1.0); //bottom right corner
+        expect(st[17]).toEqual(0.0);
+    });
+
     it('throws without rectangle', function() {
         expect(function() {
             return new RectangleGeometry({});
