Automatic Globe depth texture

Apps/Sandcastle/gallery/Box.html

@@ -43,7 +43,7 @@
     position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
     box : {
         dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
-        material : Cesium.Color.RED,
+        material : Cesium.Color.RED.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.BLACK
     }

Apps/Sandcastle/gallery/Circles and Ellipses.html

@@ -60,7 +60,7 @@
         semiMajorAxis : 300000.0,
         extrudedHeight : 200000.0,
         rotation : Cesium.Math.toRadians(45),
-        material : Cesium.Color.BLUE.withAlpha(0.7),
+        material : Cesium.Color.BLUE.withAlpha(0.5),
         outline : true
     }
 });

Apps/Sandcastle/gallery/Cylinders and Cones.html

@@ -36,7 +36,7 @@
         length : 400000.0,
         topRadius : 200000.0,
         bottomRadius : 200000.0,
-        material : Cesium.Color.GREEN,
+        material : Cesium.Color.GREEN.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.DARK_GREEN
     }

Apps/Sandcastle/gallery/GeoJSON and TopoJSON.html

@@ -38,7 +38,7 @@
 Sandcastle.addToolbarButton('Basic styling', function() {
     viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {
         stroke: Cesium.Color.HOTPINK,
-        fill: Cesium.Color.PINK,
+        fill: Cesium.Color.PINK.withAlpha(0.5),
         strokeWidth: 3
     }));
 });
@@ -72,8 +72,8 @@
 
             //Set the polygon material to our random color.
             entity.polygon.material = color;
-            //Outline each polygon in black.
-            entity.polygon.outlineColor = Cesium.Color.BLACK;
+            //Remove the outlines.
+            entity.polygon.outline = false;
 
             //Extrude the polygon based on the state's population.  Each entity
             //stores the properties for the GeoJSON feature it was created from

Apps/Sandcastle/gallery/Picking.html

@@ -144,6 +144,50 @@
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 });
 
+Sandcastle.addToolbarButton('Pick position', function() {
+    var ellipsoid = scene.globe.ellipsoid;
+
+    var modelEntity = viewer.entities.add({
+        name : 'milktruck',
+        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
+        model : {
+            uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf'
+        }
+    });
+    viewer.zoomTo(modelEntity);
+
+    var labelEntity = viewer.entities.add({
+        label : {
+            show : false,
+            horizontalOrigin : Cesium.HorizontalOrigin.LEFT
+        }
+    });
+
+    // Mouse over the globe to see the cartographic position
+    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+    handler.setInputAction(function(movement) {
+        var scene = viewer.scene;
+        var pickedObject = scene.pick(movement.endPosition);
+        if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id === modelEntity) {
+            var cartesian = viewer.scene.pickPosition(movement.endPosition);
+
+            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
+            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
+            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
+            var heightString = cartographic.height.toFixed(2);
+
+            labelEntity.position = cartesian;
+            labelEntity.label.show = true;
+            labelEntity.label.text = '(' + longitudeString + ', ' + latitudeString + ', ' + heightString + ')';
+
+            var camera = scene.camera;
+            labelEntity.label.eyeOffset = new Cesium.Cartesian3(0.0, 0.0, camera.frustum.near * 1.5 - Cesium.Cartesian3.distance(cartesian, camera.position));
+        } else {
+            labelEntity.label.show = false;
+        }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+});
+
 Sandcastle.reset = function() {
     viewer.entities.removeAll();
     handler = handler && handler.destroy();

Apps/Sandcastle/gallery/Polygon.html

@@ -61,7 +61,7 @@
                                                                -108.0, 30.0, 300000]),
         extrudedHeight: 0,
         perPositionHeight : true,
-        material : Cesium.Color.ORANGE,
+        material : Cesium.Color.ORANGE.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.BLACK
     }
@@ -100,7 +100,7 @@
                 }]
             }]
         },
-        material : Cesium.Color.BLUE,
+        material : Cesium.Color.BLUE.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.BLACK
     }

Apps/Sandcastle/gallery/Polyline Volume.html

@@ -71,7 +71,7 @@
                 new Cesium.Cartesian2(50000, 50000),
                 new Cesium.Cartesian2(-50000, 50000)],
         cornerType : Cesium.CornerType.BEVELED,
-        material : Cesium.Color.GREEN,
+        material : Cesium.Color.GREEN.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.BLACK
     }
@@ -85,9 +85,7 @@
                                                                -99.0, 36.0, 200000.0]),
         shape : computeStar(7, 70000, 50000),
         cornerType : Cesium.CornerType.MITERED,
-        material : Cesium.Color.BLUE,
-        outline : true,
-        outlineColor : Cesium.Color.BLACK
+        material : Cesium.Color.BLUE
     }
 });
 

Apps/Sandcastle/gallery/Spheres and Ellipsoids.html

@@ -43,7 +43,7 @@
     position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
     ellipsoid : {
         radii : new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
-        material : Cesium.Color.RED,
+        material : Cesium.Color.RED.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.BLACK
     }

Apps/Sandcastle/gallery/Wall.html

@@ -47,9 +47,7 @@
                                                         -97.0, 40.0, 100000.0,
                                                         -107.0, 40.0, 100000.0,
                                                         -107.0, 43.0, 100000.0]),
-        material : Cesium.Color.GREEN,
-        outline : true,
-        outlineColor : Cesium.Color.BLACK
+        material : Cesium.Color.GREEN
     }
 });
 
@@ -69,7 +67,7 @@
                                                         -90.0, 50.0]),
         maximumHeights : [100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000, 200000, 100000],
         minimumHeights : [0, 100000,  0, 100000, 0, 100000, 0, 100000, 0, 100000, 0],
-        material : Cesium.Color.BLUE,
+        material : Cesium.Color.BLUE.withAlpha(0.5),
         outline : true,
         outlineColor : Cesium.Color.BLACK
     }

Apps/Sandcastle/gallery/development/BillboardClampToGround.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Clamp billboards to terrain.">
+    <meta name="cesium-sandcastle-labels" content="Development">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+<div id="terrainMenu"></div>
+<div id="zoomButtons"></div>
+<div id="toggleLighting"></div>
+<div id="sampleButtons"></div>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    "use strict";
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
+    url : '//assets.agi.com/stk-terrain/world'
+});
+viewer.terrainProvider = cesiumTerrainProviderMeshes;
+viewer.scene.globe.depthTestAgainstTerrain = true;
+
+var ellipsoid = viewer.scene.globe.ellipsoid;
+var billboardCollection = viewer.scene.primitives.add(new Cesium.BillboardCollection({
+    scene : viewer.scene
+}));
+
+// seneca
+var centerLongitude = -1.385205433269729;
+var centerLatitude = 0.6777926580888163;
+
+var gridWidth = Math.floor(Math.random() * 100.0);
+var gridHeight = Math.floor(Math.random() * 100.0);
+var rectangleHalfSize = 0.0005;
+
+var e = new Cesium.Rectangle(centerLongitude - rectangleHalfSize, centerLatitude - rectangleHalfSize, centerLongitude + rectangleHalfSize, centerLatitude + rectangleHalfSize);
+
+for (var y = 0; y < gridHeight; ++y) {
+    for (var x = 0; x < gridWidth; ++x) {
+        var longitude = Cesium.Math.lerp(e.west, e.east, x / (gridWidth - 1));
+        var latitude = Cesium.Math.lerp(e.south, e.north, y / (gridHeight - 1));
+        var position = new Cesium.Cartographic(longitude, latitude);
+
+        billboardCollection.add({
+            position : ellipsoid.cartographicToCartesian(position),
+            image : '../images/facility.gif',
+            heightReference : Cesium.HeightReference.CLAMP_TO_GROUND
+        });
+    }
+}
+
+var billboard;
+
+Sandcastle.addToolbarButton('Add billboard', function() {
+    if (!Cesium.defined(billboard)) {
+        billboard = billboardCollection.add({
+            position : ellipsoid.cartographicToCartesian(new Cesium.Cartographic(centerLongitude, centerLatitude, 1000.0)),
+            image : '../images/Cesium_Logo_overlay.png',
+            scale : 0.7,
+            heightReference : Cesium.HeightReference.RELATIVE_TO_GROUND
+        });
+    }
+});
+
+Sandcastle.addToolbarButton('Remove billboard', function() {
+    if (Cesium.defined(billboard)) {
+        billboardCollection.remove(billboard);
+        billboard = undefined;
+    }
+});
+
+Sandcastle.addToolbarMenu([ {
+    text : 'Relative to ground',
+    onselect : function() {
+        if (Cesium.defined(billboard)) {
+            billboard.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND;
+        }
+    }
+}, {
+    text : 'Clamp to ground',
+    onselect : function() {
+        if (Cesium.defined(billboard)) {
+            billboard.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
+        }
+    }
+}, {
+    text : 'None',
+    onselect : function() {
+        if (Cesium.defined(billboard)) {
+            billboard.heightReference = Cesium.HeightReference.NONE;
+        }
+    }
+}]);
+
+var lonGran = 0.00005;
+
+Sandcastle.addToolbarButton('Increase longitude', function() {
+    if (Cesium.defined(billboard)) {
+        var cartographic = ellipsoid.cartesianToCartographic(billboard.position);
+        cartographic.longitude += lonGran;
+        billboard.position = ellipsoid.cartographicToCartesian(cartographic);
+    }
+});
+
+Sandcastle.addToolbarButton('Decrease longitude', function() {
+    if (Cesium.defined(billboard)) {
+        var cartographic = ellipsoid.cartesianToCartographic(billboard.position);
+        cartographic.longitude -= lonGran;
+        billboard.position = ellipsoid.cartographicToCartesian(cartographic);
+    }
+});
+
+//Sandcastle_End
+    Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>

CHANGES.md

@@ -8,11 +8,17 @@ Change Log
   * Deprecated `Camera.clone`. It will be removed in 1.11.
   * `WebMapServiceImageryProvider` constructor parameters `options.getFeatureInfoAsGeoJson` and `options.getFeatureInfoAsXml` have been deprecated and will be removed in Cesium 1.13.  Use `options.getFeatureInfoFormats` instead.
   * The Cesium sample models are now in the Binary glTF format (`.bgltf`).  Cesium will also include the models as plain glTF (`.gltf`) until Cesium 1.13.  Cesium support for `.gltf` will not be removed.
+  * Deprecated `Scene.fxaaOrderIndependentTranslucency`. Use `Scene.fxaa` which is now `true` by default.
+* Added `Billboard.heightReference` and `Label.heightReference` to clamp billboards and labels to terrain.
 * Added new `PointPrimitive` and `PointPrimitiveCollection`, which are faster and use less memory than billboards with circles.
 * Changed `Entity.point` back-end graphics to use the new `PointPrimitive` instead of billboards.  No change to the `Entity.point` API.
 * Added optional drilling limit to `Scene.drillPick`.
 * Added optional `ellipsoid` parameter to construction options of imagery and terrain providers that were lacking it.  Note that terrain bounding spheres are precomputed on the server, so any supplied terrain ellipsoid must match the one used by the server.
 * Upgraded Autolinker from version 0.15.2 to 0.17.1.
+* Fixed documentation for `Context.drawingBufferHeight` and `Context.drawingBufferWidth`.
+* Added debug option to `Scene` to show the depth buffer information for a specified view frustum slice and exposed capability in `CesiumInspector` widget.
+* Added `Scene.pickPosition` to reconstruct the cartesian world position from window coordinates.
+* The default mouse controls now support panning and zooming on 3D models and other opaque geometry.
 * Added `Camera.moveStart` and `Camera.moveEnd` events.
 * Added new leap second for 30 June 2015 at UTC 23:59:60.
 * `KmlDataSource` can now load a KML file that uses explicit XML namespacing, e.g. `kml:Document`.

Source/Renderer/AutomaticUniforms.js

@@ -160,6 +160,31 @@ define([
             }
         }),
 
+        /**
+         * An automatic GLSL uniform representing the depth after
+         * only the globe has been rendered and packed into an RGBA texture.
+         *
+         * @private
+         *
+         * @alias czm_globeDepthTexture
+         * @glslUniform
+         *
+         * @example
+         * // GLSL declaration
+         * uniform sampler2D czm_globeDepthTexture;
+         *
+         * // Get the depth at the current fragment
+         * vec2 coords = gl_FragCoord.xy / czm_viewport.zw;
+         * float depth = czm_unpackDepth(texture2D(czm_globeDepthTexture, coords));
+         */
+        czm_globeDepthTexture : new AutomaticUniform({
+            size : 1,
+            datatype : WebGLRenderingContext.SAMPLER_2D,
+            getValue : function(uniformState) {
+                return uniformState.globeDepthTexture;
+            }
+        }),
+
         /**
          * An automatic GLSL uniform representing a 4x4 model transformation matrix that
          * transforms model coordinates to world coordinates.

Source/Renderer/Context.js

@@ -909,10 +909,10 @@ define([
         },
 
         /**
-         * The drawingBufferWidth of the underlying GL context.
+         * The drawingBufferHeight of the underlying GL context.
          * @memberof Context.prototype
          * @type {Number}
-         * @see {@link https://www.khronos.org/registry/webgl/specs/1.0/#DOM-WebGLRenderingContext-drawingBufferWidth|drawingBufferWidth}
+         * @see {@link https://www.khronos.org/registry/webgl/specs/1.0/#DOM-WebGLRenderingContext-drawingBufferHeight|drawingBufferHeight}
          */
         drawingBufferHeight : {
             get : function() {
@@ -921,10 +921,10 @@ define([
         },
 
         /**
-         * The drawingBufferHeight of the underlying GL context.
+         * The drawingBufferWidth of the underlying GL context.
          * @memberof Context.prototype
          * @type {Number}
-         * @see {@link https://www.khronos.org/registry/webgl/specs/1.0/#DOM-WebGLRenderingContext-drawingBufferHeight|drawingBufferHeight}
+         * @see {@link https://www.khronos.org/registry/webgl/specs/1.0/#DOM-WebGLRenderingContext-drawingBufferWidth|drawingBufferWidth}
          */
         drawingBufferWidth : {
             get : function() {

Source/Renderer/PixelDatatype.js

@@ -31,4 +31,4 @@ define([
     };
 
     return freezeObject(PixelDatatype);
-});
+});