Add multifrustum near/far planes to DebugCameraPrimitive

CHANGES.md

@@ -32,6 +32,7 @@ Change Log
 * The attribute `perInstanceAttribute` of `DebugAppearance` has been made optional and defaults to `false`.
 * Fixed a bug that would cause a crash when `debugShowFrustums` is enabled with OIT. [#4864](https://github.com/AnalyticalGraphicsInc/cesium/pull/4864)
 * Added the ability to run the unit tests with a [WebGL Stub](https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Documentation/Contributors/TestingGuide#run-with-webgl-stub), which makes all WebGL calls a noop and ignores test expectations that rely on reading back from WebGL.  Use the web link from the main index.html or run with `npm run test-webgl-stub`.
+* Added support to `DebugCameraPrimitive` to draw multifrustum planes. `CesiumInspector` also displays this toggle.
 
 ### 1.29 - 2017-01-02
 

Source/Scene/DebugCameraPrimitive.js

@@ -92,19 +92,15 @@ define([
         this._planesPrimitive = undefined;
     }
 
-    var frustumCornersNDC = new Array(8);
-    frustumCornersNDC[0] = new Cartesian4(-1.0, -1.0, -1.0, 1.0);
-    frustumCornersNDC[1] = new Cartesian4(1.0, -1.0, -1.0, 1.0);
-    frustumCornersNDC[2] = new Cartesian4(1.0, 1.0, -1.0, 1.0);
-    frustumCornersNDC[3] = new Cartesian4(-1.0, 1.0, -1.0, 1.0);
-    frustumCornersNDC[4] = new Cartesian4(-1.0, -1.0, 1.0, 1.0);
-    frustumCornersNDC[5] = new Cartesian4(1.0, -1.0, 1.0, 1.0);
-    frustumCornersNDC[6] = new Cartesian4(1.0, 1.0, 1.0, 1.0);
-    frustumCornersNDC[7] = new Cartesian4(-1.0, 1.0, 1.0, 1.0);
+    var frustumCornersNDC = new Array(4);
+    frustumCornersNDC[0] = new Cartesian4(-1.0, -1.0, 1.0, 1.0);
+    frustumCornersNDC[1] = new Cartesian4(1.0, -1.0, 1.0, 1.0);
+    frustumCornersNDC[2] = new Cartesian4(1.0, 1.0, 1.0, 1.0);
+    frustumCornersNDC[3] = new Cartesian4(-1.0, 1.0, 1.0, 1.0);
 
     var scratchMatrix = new Matrix4();
-    var scratchFrustumCorners = new Array(8);
-    for (var i = 0; i < 8; ++i) {
+    var scratchFrustumCorners = new Array(4);
+    for (var i = 0; i < 4; ++i) {
         scratchFrustumCorners[i] = new Cartesian4();
     }
 
@@ -130,14 +126,28 @@ define([
             var viewProjection = Matrix4.multiply(projection, view, scratchMatrix);
             var inverseViewProjection = Matrix4.inverse(viewProjection, scratchMatrix);
 
-            var positions = new Float64Array(8 * 3);
-            for (var i = 0; i < 8; ++i) {
-                var corner = Cartesian4.clone(frustumCornersNDC[i], scratchFrustumCorners[i]);
-                Matrix4.multiplyByVector(inverseViewProjection, corner, corner);
-                Cartesian3.divideByScalar(corner, corner.w, corner); // Handle the perspective divide
-                positions[i * 3] = corner.x;
-                positions[i * 3 + 1] = corner.y;
-                positions[i * 3 + 2] = corner.z;
+            var frustumSplits = frameState.frustumSplits;
+            var numFrustums = frustumSplits.length - 1;
+
+            var positions = new Float64Array(3 * 4 * (numFrustums + 1));
+            var f;
+            for (f = 0; f < numFrustums + 1; ++f) {
+                for (var i = 0; i < 4; ++i) {
+                    var corner = Cartesian4.clone(frustumCornersNDC[i], scratchFrustumCorners[i]);
+
+                    Matrix4.multiplyByVector(inverseViewProjection, corner, corner);
+                    Cartesian3.divideByScalar(corner, corner.w, corner); // Handle the perspective divide
+                    Cartesian3.subtract(corner, this._camera.positionWC, corner);
+                    Cartesian3.normalize(corner, corner);
+
+                    var fac = Cartesian3.dot(this._camera.directionWC, corner);
+                    Cartesian3.multiplyByScalar(corner, frustumSplits[f] / fac, corner);
+                    Cartesian3.add(corner, this._camera.positionWC, corner);
+
+                    positions[12 * f + i * 3] = corner.x;
+                    positions[12 * f + i * 3 + 1] = corner.y;
+                    positions[12 * f + i * 3 + 2] = corner.z;
+                }
             }
 
             var boundingSphere = new BoundingSphere.fromVertices(positions);
@@ -149,8 +159,33 @@ define([
                 values : positions
             });
 
+            var offset;
+
             // Create the outline primitive
-            var outlineIndices = new Uint16Array([0,1,1,2,2,3,3,0,0,4,4,7,7,3,7,6,6,2,2,1,1,5,5,4,5,6]);
+            var outlineIndices = new Uint16Array(8 * (2 * numFrustums + 1));
+            // Build the far planes
+            for (f = 0; f < numFrustums + 1; ++f) {
+                outlineIndices[f * 8] = f * 4;
+                outlineIndices[f * 8 + 1] = f * 4 + 1;
+                outlineIndices[f * 8 + 2] = f * 4 + 1;
+                outlineIndices[f * 8 + 3] = f * 4 + 2;
+                outlineIndices[f * 8 + 4] = f * 4 + 2;
+                outlineIndices[f * 8 + 5] = f * 4 + 3;
+                outlineIndices[f * 8 + 6] = f * 4 + 3;
+                outlineIndices[f * 8 + 7] = f * 4;
+            }
+            // Build the sides of the frustums
+            for (f = 0; f < numFrustums; ++f) {
+                offset = (numFrustums + 1 + f) * 8;
+                outlineIndices[offset] = f * 4;
+                outlineIndices[offset + 1] = f * 4 + 4;
+                outlineIndices[offset + 2] = f * 4 + 1;
+                outlineIndices[offset + 3] = f * 4 + 5;
+                outlineIndices[offset + 4] = f * 4 + 2;
+                outlineIndices[offset + 5] = f * 4 + 6;
+                outlineIndices[offset + 6] = f * 4 + 3;
+                outlineIndices[offset + 7] = f * 4 + 7;
+            }
 
             this._outlinePrimitive = new Primitive({
                 geometryInstances : new GeometryInstance({
@@ -174,7 +209,47 @@ define([
             });
 
             // Create the planes primitive
-            var planesIndices = new Uint16Array([4,5,6,4,6,7,5,1,2,5,2,6,7,6,2,7,2,3,0,1,5,0,5,4,0,4,7,0,7,3,1,0,3,1,3,2]);
+            var planesIndices = new Uint16Array(6 * (5 * numFrustums + 1));
+            // Build the far planes
+            for (f = 0; f < numFrustums + 1; ++f) {
+                planesIndices[f * 6] = f * 4;
+                planesIndices[f * 6 + 1] = f * 4 + 1;
+                planesIndices[f * 6 + 2] = f * 4 + 2;
+                planesIndices[f * 6 + 3] = f * 4;
+                planesIndices[f * 6 + 4] = f * 4 + 2;
+                planesIndices[f * 6 + 5] = f * 4 + 3;
+            }
+            // Build the sides of the frustums
+            for (f = 0; f < numFrustums; ++f) {
+                offset = (numFrustums + 1 + 4 * f) * 6;
+                planesIndices[offset] = 4 * f + 4;
+                planesIndices[offset + 1] = 4 * f;
+                planesIndices[offset + 2] = 4 * f + 3;
+                planesIndices[offset + 3] = 4 * f + 4;
+                planesIndices[offset + 4] = 4 * f + 3;
+                planesIndices[offset + 5] = 4 * f + 7;
+
+                planesIndices[offset + 6] = 4 * f + 4;
+                planesIndices[offset + 7] = 4 * f;
+                planesIndices[offset + 8] = 4 * f + 1;
+                planesIndices[offset + 9] = 4 * f + 4;
+                planesIndices[offset + 10] = 4 * f + 1;
+                planesIndices[offset + 11] = 4 * f + 5;
+
+                planesIndices[offset + 12] = 4 * f + 7;
+                planesIndices[offset + 13] = 4 * f + 3;
+                planesIndices[offset + 14] = 4 * f + 2;
+                planesIndices[offset + 15] = 4 * f + 7;
+                planesIndices[offset + 16] = 4 * f + 2;
+                planesIndices[offset + 17] = 4 * f + 6;
+
+                planesIndices[offset + 18] = 4 * f + 6;
+                planesIndices[offset + 19] = 4 * f + 2;
+                planesIndices[offset + 20] = 4 * f + 1;
+                planesIndices[offset + 21] = 4 * f + 6;
+                planesIndices[offset + 22] = 4 * f + 1;
+                planesIndices[offset + 23] = 4 * f + 5;
+            }
 
             this._planesPrimitive = new Primitive({
                 geometryInstances : new GeometryInstance({

Source/Scene/FrameState.js

@@ -235,6 +235,13 @@ define([
         * @default 0.0
         */
         this.imagerySplitPosition = 0.0;
+
+        /**
+         * Distances to the near and far planes of the camera frustums
+         * @type {Number[]}
+         * @default [1.0, 1000.0]
+         */
+        this.frustumSplits = [1.0, 1000.0];
     }
 
     /**

Source/Scene/Scene.js

@@ -42,6 +42,7 @@ define([
         './Camera',
         './CreditDisplay',
         './CullingVolume',
+        './DebugCameraPrimitive',
         './DepthPlane',
         './DeviceOrientationCameraController',
         './Fog',
@@ -109,6 +110,7 @@ define([
         Camera,
         CreditDisplay,
         CullingVolume,
+        DebugCameraPrimitive,
         DepthPlane,
         DeviceOrientationCameraController,
         Fog,
@@ -515,6 +517,9 @@ define([
          */
         this.debugShowDepthFrustum = 1;
 
+        this._debugShowFrustumPlanes = false;
+        this._debugFrustumPlanes = undefined;
+
         /**
          * When <code>true</code>, enables Fast Approximate Anti-aliasing even when order independent translucency
          * is unsupported.
@@ -944,6 +949,36 @@ define([
             }
         },
 
+        /**
+         * This property is for debugging only; it is not for production use.
+         * <p>
+         * When <code>true</code>, draws outlines to show the boundaries of the camera frustums
+         * </p>
+         *
+         * @type Boolean
+         *
+         * @default false
+         */
+        debugShowFrustumPlanes : {
+            get : function() {
+                return this._debugShowFrustumPlanes;
+            },
+            set : function(value) {
+                if (!value) {
+                    if (defined(this._debugFrustumPlanes)) {
+                        this._debugFrustumPlanes = this._debugFrustumPlanes && this._debugFrustumPlanes.destroy();
+                    }
+                } else if (value !== this._debugShowFrustumPlanes) { 
+                    this._debugFrustumPlanes = this._debugFrustumPlanes && this._debugFrustumPlanes.destroy();
+                    this._debugFrustumPlanes = new DebugCameraPrimitive({
+                        camera: this.camera,
+                        updateOnChange: false
+                    });
+                }
+                this._debugShowFrustumPlanes = value;
+            }
+        },
+
         /**
          * Gets whether or not the scene is optimized for 3D only viewing.
          * @memberof Scene.prototype
@@ -1430,6 +1465,15 @@ define([
             updateFrustums(near, far, farToNearRatio, numFrustums, frustumCommandsList, is2D, scene.nearToFarDistance2D);
             createPotentiallyVisibleSet(scene);
         }
+
+        var frustumSplits = frameState.frustumSplits;
+        frustumSplits.length = numFrustums + 1;
+        for (var j = 0; j < numFrustums; ++j) {
+            frustumSplits[j] = frustumCommandsList[j].near;
+            if (j === numFrustums - 1) {
+                frustumSplits[j + 1] = frustumCommandsList[j].far;
+            }
+        }
     }
 
     function getAttributeLocations(shaderProgram) {
@@ -2240,6 +2284,9 @@ define([
 
         scene._groundPrimitives.update(frameState);
         scene._primitives.update(frameState);
+        if (defined(scene._debugFrustumPlanes)) {
+            scene._debugFrustumPlanes.update(frameState);
+        }
 
         updateShadowMaps(scene);
 
@@ -2896,6 +2943,7 @@ define([
         this._sunPostProcess = this._sunPostProcess && this._sunPostProcess.destroy();
         this._depthPlane = this._depthPlane && this._depthPlane.destroy();
         this._transitioner.destroy();
+        this._debugFrustumPlanes = this._debugFrustumPlanes && this._debugFrustumPlanes.destroy();
 
         if (defined(this._globeDepth)) {
             this._globeDepth.destroy();

Source/Widgets/CesiumInspector/CesiumInspector.js

@@ -80,6 +80,7 @@ define([
         generalSection.className = 'cesium-cesiumInspector-section';
         generalSection.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : generalVisible, "cesium-cesiumInspector-hide" : !generalVisible}');
         panel.appendChild(generalSection);
+
         var debugShowFrustums = document.createElement('div');
         generalSection.appendChild(debugShowFrustums);
         var frustumStats = document.createElement('div');
@@ -92,6 +93,14 @@ define([
         debugShowFrustums.appendChild(document.createTextNode('Show Frustums'));
         debugShowFrustums.appendChild(frustumStats);
 
+        var debugShowFrustumPlanes = document.createElement('div');
+        generalSection.appendChild(debugShowFrustumPlanes);
+        var frustumPlanesCheckbox = document.createElement('input');
+        frustumPlanesCheckbox.type = 'checkbox';
+        frustumPlanesCheckbox.setAttribute('data-bind', 'checked: frustumPlanes');
+        debugShowFrustumPlanes.appendChild(frustumPlanesCheckbox);
+        debugShowFrustumPlanes.appendChild(document.createTextNode('Show Frustum Planes'));
+
         var performanceDisplay = document.createElement('div');
         generalSection.appendChild(performanceDisplay);
         var pdCheckbox = document.createElement('input');

Source/Widgets/CesiumInspector/CesiumInspectorViewModel.js

@@ -107,6 +107,13 @@ define([
          */
         this.frustums = false;
 
+        /**
+         * Gets or sets the show frustum planes state.  This property is observable.
+         * @type {Boolean}
+         * @default false
+         */
+        this.frustumPlanes = false;
+
         /**
          * Gets or sets the show performance display state.  This property is observable.
          * @type {Boolean}
@@ -305,6 +312,7 @@ define([
 
         knockout.track(this, [
             'frustums',
+            'frustumPlanes',
             'performance',
             'shaderCacheText',
             'primitiveBoundingSphere',
@@ -351,6 +359,10 @@ define([
             that._scene.debugShowFrustums = val;
         });
 
+        this._frustumPlanesSubscription = knockout.getObservable(this, 'frustumPlanes').subscribe(function(val) {
+            that._scene.debugShowFrustumPlanes = val;
+        });
+
         this._performanceSubscription = knockout.getObservable(this, 'performance').subscribe(function(val) {
             if (val) {
                 that._performanceDisplay = new PerformanceDisplay({
@@ -940,6 +952,7 @@ define([
     CesiumInspectorViewModel.prototype.destroy = function() {
         this._eventHandler.destroy();
         this._frustumsSubscription.dispose();
+        this._frustumPlanesSubscription.dispose();
         this._performanceSubscription.dispose();
         this._primitiveBoundingSphereSubscription.dispose();
         this._primitiveReferenceFrameSubscription.dispose();