Added debug label for tile url

CHANGES.md

@@ -1,6 +1,10 @@
 Change Log
 ==========
 
+### 1.36 - 2017-08-01
+
+* Added ability to show tile urls in the 3D Tiles Inspector. [#5592](https://github.com/AnalyticalGraphicsInc/cesium/pull/5592)
+
 ### 1.35.2 - 2017-07-11
 
 * This is an npm-only release to fix an issue with using Cesium in Node.js.

Source/Scene/Cesium3DTileset.js

@@ -114,6 +114,7 @@ define([
      * @param {Boolean} [options.debugShowGeometricError=false] For debugging only. When true, draws labels to indicate the geometric error of each tile.
      * @param {Boolean} [options.debugShowRenderingStatistics=false] For debugging only. When true, draws labels to indicate the number of commands, points, triangles and features for each tile.
      * @param {Boolean} [options.debugShowMemoryUsage=false] For debugging only. When true, draws labels to indicate the texture and geometry memory in megabytes used by each tile.
+     * @param {Boolean} [options.debugShowUrl=false] For debugging only. When true, draws labels to indicate the url of each tile.
      *
      * @exception {DeveloperError} The tileset must be 3D Tiles version 0.0 or 1.0.  See {@link https://github.com/AnalyticalGraphicsInc/3d-tiles#spec-status}
      *
@@ -319,116 +320,6 @@ define([
          */
         this.colorBlendAmount = 0.5;
 
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * Determines if only the tiles from last frame should be used for rendering.  This
-         * effectively "freezes" the tileset to the previous frame so it is possible to zoom
-         * out and see what was rendered.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugFreezeFrame = defaultValue(options.debugFreezeFrame, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, assigns a random color to each tile.  This is useful for visualizing
-         * what models belong to what tiles, especially with additive refinement where models
-         * from parent tiles may be interleaved with models from child tiles.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugColorizeTiles = defaultValue(options.debugColorizeTiles, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, renders each tile's content as a wireframe.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugWireframe = defaultValue(options.debugWireframe, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, renders the bounding volume for each visible tile.  The bounding volume is
-         * white if the tile's content has an explicit bounding volume; otherwise, it
-         * is red.  Tiles that are not at final resolution are yellow.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugShowBoundingVolume = defaultValue(options.debugShowBoundingVolume, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, renders a blue bounding volume for each tile's content.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugShowContentBoundingVolume = defaultValue(options.debugShowContentBoundingVolume, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, renders the viewer request volume for each tile.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugShowViewerRequestVolume = defaultValue(options.debugShowViewerRequestVolume, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, draws labels to indicate the geometric error of each tile.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugShowGeometricError = defaultValue(options.debugShowGeometricError, false);
-
-        this._tileDebugLabels = undefined;
-        this.debugPickedTileLabelOnly = false;
-        this.debugPickedTile = undefined;
-        this.debugPickPosition = undefined;
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, draws labels to indicate the number of commands, points, triangles and features of each tile.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugShowRenderingStatistics = defaultValue(options.debugShowRenderingStatistics, false);
-
-        /**
-         * This property is for debugging only; it is not optimized for production use.
-         * <p>
-         * When true, draws labels to indicate the geometry and texture memory usage of each tile.
-         * </p>
-         *
-         * @type {Boolean}
-         * @default false
-         */
-        this.debugShowMemoryUsage = defaultValue(options.debugShowMemoryUsage, false);
-
         /**
          * The event fired to indicate progress of loading new tiles.  This event is fired when a new tile
          * is requested, when a requested tile is finished downloading, and when a downloaded tile has been
@@ -683,6 +574,11 @@ define([
          */
         this.debugShowViewerRequestVolume = defaultValue(options.debugShowViewerRequestVolume, false);
 
+        this._tileDebugLabels = undefined;
+        this.debugPickedTileLabelOnly = false;
+        this.debugPickedTile = undefined;
+        this.debugPickPosition = undefined;
+
         /**
          * This property is for debugging only; it is not optimized for production use.
          * <p>
@@ -716,6 +612,17 @@ define([
          */
         this.debugShowMemoryUsage = defaultValue(options.debugShowMemoryUsage, false);
 
+        /**
+         * This property is for debugging only; it is not optimized for production use.
+         * <p>
+         * When true, draws labels to indicate the url of each tile.
+         * </p>
+         *
+         * @type {Boolean}
+         * @default false
+         */
+        this.debugShowUrl = defaultValue(options.debugShowUrl, false);
+
         var that = this;
 
         // We don't know the distance of the tileset until tileset.json is loaded, so use the default distance for now
@@ -1448,6 +1355,11 @@ define([
             attributes += 2;
         }
 
+        if (tileset.debugShowUrl) {
+            labelString += '\nUrl: ' + tile._header.content.url;
+            attributes++;
+        }
+
         var newLabel = {
             text : labelString.substring(1),
             position : position,
@@ -1565,7 +1477,7 @@ define([
         // Number of commands added by each update above
         statistics.numberOfCommands = (commandList.length - numberOfInitialCommands);
 
-        if (tileset.debugShowGeometricError || tileset.debugShowRenderingStatistics || tileset.debugShowMemoryUsage) {
+        if (tileset.debugShowGeometricError || tileset.debugShowRenderingStatistics || tileset.debugShowMemoryUsage || tileset.debugShowUrl) {
             if (!defined(tileset._tileDebugLabels)) {
                 tileset._tileDebugLabels = new LabelCollection();
             }

Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspector.js

@@ -126,6 +126,7 @@ define([
         tileDebugLabelsPanelContents.appendChild(makeCheckbox('showGeometricError', 'Geometric Error'));
         tileDebugLabelsPanelContents.appendChild(makeCheckbox('showRenderingStatistics', 'Rendering Statistics'));
         tileDebugLabelsPanelContents.appendChild(makeCheckbox('showMemoryUsage', 'Memory Usage (MB)'));
+        tileDebugLabelsPanelContents.appendChild(makeCheckbox('showUrl', 'Url'));
 
         optimizationPanelContents.appendChild(makeCheckbox('skipLevelOfDetail', 'Skip Tile LODs'));
         var skipScreenSpaceErrorFactorContainer = document.createElement('div');

Source/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspectorViewModel.js

@@ -548,7 +548,6 @@ define([
         });
         /**
          * Displays the number of commands, points, triangles and features used per tile.  This property is observable.
-         * @memberof Cesium3DTilesInspectorViewModel.prototype
          *
          * @type {Boolean}
          * @default false
@@ -569,13 +568,32 @@ define([
         });
         /**
          * Displays the memory used per tile.  This property is observable.
-         * @memberof Cesium3DTilesInspectorViewModel.prototype
          *
          * @type {Boolean}
          * @default false
          */
         this.showMemoryUsage = false;
 
+        var showUrl = knockout.observable();
+        knockout.defineProperty(this, 'showUrl', {
+            get : function() {
+                return showUrl();
+            },
+            set : function(value) {
+                showUrl(value);
+                if (defined(that._tileset)) {
+                    that._tileset.debugShowUrl = value;
+                }
+            }
+        });
+        /**
+         * Gets or sets the flag to show the tile url.  This property is observable.
+         *
+         * @type {Boolean}
+         * @default false
+         */
+        this.showUrl = false;
+
         var maximumScreenSpaceError = knockout.observable();
         knockout.defineProperty(this, 'maximumScreenSpaceError', {
             get : function() {
@@ -817,7 +835,7 @@ define([
         this._definedProperties = ['properties', 'dynamicScreenSpaceError', 'colorBlendMode', 'picking', 'colorize', 'wireframe', 'showBoundingVolumes',
                                    'showContentBoundingVolumes', 'showRequestVolumes', 'freezeFrame', 'maximumScreenSpaceError', 'dynamicScreenSpaceErrorDensity', 'baseScreenSpaceError',
                                    'skipScreenSpaceErrorFactor', 'skipLevelOfDetail', 'skipLevels', 'immediatelyLoadDesiredLevelOfDetail', 'loadSiblings', 'dynamicScreenSpaceErrorDensitySliderValue',
-                                   'dynamicScreenSpaceErrorFactor', 'pickActive', 'showOnlyPickedTileDebugLabel', 'showGeometricError', 'showRenderingStatistics', 'showMemoryUsage'];
+                                   'dynamicScreenSpaceErrorFactor', 'pickActive', 'showOnlyPickedTileDebugLabel', 'showGeometricError', 'showRenderingStatistics', 'showMemoryUsage', 'showUrl'];
         this._removePostRenderEvent = scene.postRender.addEventListener(function() {
             that._update();
         });
@@ -928,7 +946,8 @@ define([
                                     'showOnlyPickedTileDebugLabel',
                                     'showGeometricError',
                                     'showRenderingStatistics',
-                                    'showMemoryUsage'];
+                                    'showMemoryUsage',
+                                    'showUrl'];
                     var length = settings.length;
                     for (var i = 0; i < length; ++i) {
                         var setting = settings[i];

Specs/Scene/Cesium3DTilesetSpec.js

@@ -1442,6 +1442,7 @@ defineSuite([
             tileset.debugShowGeometricError = true;
             tileset.debugShowRenderingStatistics = true;
             tileset.debugShowMemoryUsage = true;
+            tileset.debugShowUrl = true;
             viewRootOnly();
             scene.renderForSpecs();
             expect(tileset._tileDebugLabels).toBeDefined();
@@ -1451,12 +1452,14 @@ defineSuite([
                            'Triangles: 120\n' +
                            'Features: 10\n' +
                            'Texture Memory: 0\n' +
-                           'Geometry Memory: 0.008';
+                           'Geometry Memory: 0.008\n' +
+                           'Url: parent.b3dm';
             expect(tileset._tileDebugLabels._labels[0].text).toEqual(expected);
 
             tileset.debugShowGeometricError = false;
             tileset.debugShowRenderingStatistics = false;
             tileset.debugShowMemoryUsage = false;
+            tileset.debugShowUrl = false;
             scene.renderForSpecs();
             expect(tileset._tileDebugLabels).not.toBeDefined();
         });
@@ -1468,6 +1471,7 @@ defineSuite([
             tileset.debugShowGeometricError = true;
             tileset.debugShowRenderingStatistics = true;
             tileset.debugShowMemoryUsage = true;
+            tileset.debugShowUrl = true;
             tileset.debugPickedTileLabelOnly = true;
 
             var scratchPosition = new Cartesian3(1.0, 1.0, 1.0);
@@ -1482,7 +1486,8 @@ defineSuite([
                            'Triangles: 120\n' +
                            'Features: 10\n' +
                            'Texture Memory: 0\n' +
-                           'Geometry Memory: 0.008';
+                           'Geometry Memory: 0.008\n' +
+                           'Url: parent.b3dm';
             expect(tileset._tileDebugLabels.get(0).text).toEqual(expected);
             expect(tileset._tileDebugLabels.get(0).position).toEqual(scratchPosition);
 

Specs/Widgets/Cesium3DTilesInspector/Cesium3DTilesInspectorViewModelSpec.js

@@ -158,6 +158,13 @@ defineSuite([
             viewModel.showMemoryUsage = false;
             expect(viewModel.tileset.debugShowMemoryUsage).toBe(false);
         });
+
+        it('showUrl', function() {
+            viewModel.showUrl = true;
+            expect(viewModel.tileset.debugShowUrl).toBe(true);
+            viewModel.showUrl = false;
+            expect(viewModel.tileset.debugShowUrl).toBe(false);
+        });
     });
 
     describe('update options', function() {