Merge pull request #4336 from AnalyticalGraphicsInc/pnts-styling

3D Tiles - Point Cloud Styling
CesiumGS · Oct 19, 2016 · 8780fc4 · 8780fc4
2 parents 5aa2a0e + 45d96d8
commit 8780fc4
Show file tree

Hide file tree

Showing 28 changed files with 2,455 additions and 501 deletions.
diff --git a/Apps/Sandcastle/gallery/3D Tiles Point Cloud Styling.html b/Apps/Sandcastle/gallery/3D Tiles Point Cloud Styling.html
@@ -0,0 +1,170 @@
+<!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="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
+    <meta name="cesium-sandcastle-labels" content="Showcases">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/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);
+    #toolbar button { display: block; }
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar"></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+
+var viewer = new Cesium.Viewer('cesiumContainer', {
+    scene3DOnly : true
+});
+
+var scene = viewer.scene;
+var url = '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudWithPerPointProperties/';
+
+var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
+    url : url
+}));
+
+tileset.readyPromise.then(function(tileset) {
+    var boundingSphere = tileset.boundingSphere;
+    viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
+});
+
+var styles = [];
+function addStyle(name, style) {
+    styles.push({
+        name : name,
+        style : style
+    });
+}
+
+addStyle('No Style', {});
+
+addStyle('Red', {
+    color : "color('#ff0000')"
+});
+
+addStyle('Color Gradient', {
+    color : "color() * ${temperature}"
+});
+
+addStyle('Step Red/Blue', {
+    color : "${temperature} > 0.5 ? color('red') : color('blue')"
+});
+
+addStyle('Interpolate Red/Blue', {
+    color : "color('red') * ${temperature} + color('blue') * (1.0 - ${temperature})"
+});
+
+addStyle('Color Ramp', {
+    color : {
+        conditions : [
+            ["${temperature} < 0.1", "color('#000099')"],
+            ["${temperature} < 0.2", "color('#00cc99', 1.0)"],
+            ["${temperature} < 0.3", "color('#66ff33', 0.5)"],
+            ["${temperature} < 0.4", "rgba(255, 255, 0, 0.1)"],
+            ["${temperature} < 0.5", "rgb(255, 128, 0)"],
+            ["${temperature} < 0.6", "color('red')"],
+            ["${temperature} < 0.7", "color('rgb(255, 102, 102)')"],
+            ["${temperature} < 0.8", "hsl(0.875, 1.0, 0.6)"],
+            ["${temperature} < 0.9", "hsla(0.83, 1.0, 0.5, 0.1)"],
+            ["true", "color('#FFFFFF', 1.0)"]
+        ]
+    }
+});
+
+addStyle('Transparency', {
+    color : "rgba(0, 255, 0, ${temperature})"
+});
+
+addStyle('Hide Low Temperature', {
+    color : "rgb(${temperature}*255, 0, 0)",
+    show : "${temperature} > 0.3"
+});
+
+addStyle('Show Subsections', {
+    show : "${id} == 1 || ${id} > 250 && ${id} < 300"
+});
+
+addStyle('Mod', {
+    show : "${id} % 2 == 0"
+});
+
+addStyle('Secondary Color', {
+    color : {
+        expression : "[${secondaryColor}[0], ${secondaryColor}[1], ${secondaryColor}[2], 1.0]",
+        conditions : [
+            ["${id} < 250", "${expression}"],
+            ["${id} < 500", "${expression} * ${expression}"],
+            ["${id} < 750", "${expression} / 5.0"],
+            ["${id} < 1000", "rgb(0, 0, Number(${expression}[0] < 0.5) * 255)"]
+        ]
+    }
+});
+
+addStyle('Use point colors', {
+    color : "${COLOR} * ${temperature} + rgb(128,128,128)"
+});
+
+addStyle('Use point positions', {
+    show : "${POSITION}[0] > 0.5 || ${POSITION}[1] > 0.5 || ${POSITION}[2] > 0.5"
+});
+
+addStyle('Color based on position', {
+    color : "rgb(${POSITION}[0] * 255, ${POSITION}[1] * 255, ${POSITION}[2] * 255)"
+});
+
+addStyle('Style point size', {
+    color : "color('red')",
+    pointSize : "${temperature} * 10"
+});
+
+function setStyle(style) {
+    tileset.style = new Cesium.Cesium3DTileStyle(style);
+}
+
+function getSetStyleFunction(style) {
+    return function() {
+        setStyle(style);
+    };
+}
+
+var styleOptions = [];
+for (var j = 0; j < styles.length; ++j) {
+    var style = styles[j];
+    styleOptions.push({
+        text : style.name,
+        onselect : getSetStyleFunction(style.style)
+    });
+}
+
+Sandcastle.addToolbarMenu(styleOptions);
+
+///////////////////////////////////////////////////////////////////////////////
+
+//Sandcastle_End
+Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/3D Tiles Point Cloud Styling.jpg b/Apps/Sandcastle/gallery/3D Tiles Point Cloud Styling.jpg
diff --git a/Apps/Sandcastle/gallery/3D Tiles.html b/Apps/Sandcastle/gallery/3D Tiles.html
@@ -89,17 +89,17 @@
 //              "color" : "rgb(100, 255, 190)",
 //              "color" : "hsla(0.9, 0.6, 0.7, 0.75)",
                 "color" : {
-                    "conditions" : {
-                        "${Height} >= 83" : "color('purple', 0.5)",
-                        "${Height} >= 80" : "color('red')",
-                        "${Height} >= 70" : "color('orange')",
-                        "${Height} >= 12" : "color('yellow')",
-                        "${Height} >= 7" : "color('lime')",
-                        "${Height} >= 1" : "color('cyan')",
-                        "true" : "color('blue')"
-                    }
+                    "conditions" : [
+                        ["${Height} >= 83", "color('purple', 0.5)"],
+                        ["${Height} >= 80", "color('red')"],
+                        ["${Height} >= 70", "color('orange')"],
+                        ["${Height} >= 12", "color('yellow')"],
+                        ["${Height} >= 7", "color('lime')"],
+                        ["${Height} >= 1", "color('cyan')"],
+                        ["true", "color('blue')"]
+                    ]
                 },
-//              "show": false
+//              "show": false,
 //              "show" : "${Height} >= 0",
                 "meta" : {
                     "description" : "'Building id ${id} has height ${Height}.'"
@@ -416,13 +416,13 @@
 }
 
 function styleFunction(name) {
-    var conditions = {};
+    var conditions = [];
     var intervalSize = Math.floor(100/numberofColors);
     for (var i = numberofColors; i >= 0; --i) {
         var cond = '${' + name + '} > ' + (i * intervalSize);
-        conditions[cond] = getRandomColor();
+        conditions.push([cond, getRandomColor()]);
     }
-    conditions['true'] = getRandomColor();
+    conditions.push(['true', getRandomColor()]);
 
     tileset.style = new Cesium.Cesium3DTileStyle({
         color : {
@@ -491,7 +491,7 @@
 
     var leftOperand = 0;
     var rightOperand = 0;
-    var op = '===';
+    var op = '==';
 
     // Left operand (properties and literals)
 
@@ -505,7 +505,7 @@
 
     // Operator
 
-    var ops = ['<', '<=', '>', '>=', '===', '!=='];
+    var ops = ['<', '<=', '>', '>=', '==', '!='];
     var operators = [{
         text : 'Operator',
         onselect : function() {

diff --git a/Apps/Sandcastle/gallery/3D Tiles.jpg b/Apps/Sandcastle/gallery/3D Tiles.jpg
diff --git a/Source/Scene/Batched3DModel3DTileContent.js b/Source/Scene/Batched3DModel3DTileContent.js
@@ -295,6 +295,13 @@ define([
         this.batchTable.setAllColor(color);
     };
 
+    /**
+     * Part of the {@link Cesium3DTileContent} interface.
+     */
+    Batched3DModel3DTileContent.prototype.applyStyleWithShader = function(frameState, style) {
+        return false;
+    };
+
     /**
      * Part of the {@link Cesium3DTileContent} interface.
      */

diff --git a/Source/Scene/Cesium3DTileContent.js b/Source/Scene/Cesium3DTileContent.js
@@ -198,6 +198,25 @@ define([
         DeveloperError.throwInstantiationError();
     };
 
+    /**
+     * Apply a style to the content using a shader instead of a batch table. Currently this is only
+     * applicable for {@link PointCloud3DTileContent}.
+     * <p>
+     * This is used to implement the <code>Cesium3DTileContent</code> interface, but is
+     * not part of the public Cesium API.
+     * </p>
+     *
+     * @param {FrameSate} frameState The frame state.
+     * @param {Cesium3DTileStyle} style The style.
+     *
+     * @returns {Boolean} <code>true</code> if this content is styled with a shader; otherwise, <code>false</code>.
+     *
+     * @private
+     */
+    Cesium3DTileContent.prototype.applyStyleWithShader = function(frameState, style) {
+        DeveloperError.throwInstantiationError();
+    };
+
     /**
      * Called by the tile during tileset traversal to get the draw commands needed to render this content.
      * When the tile's content is in the PROCESSING state, this creates WebGL resources to ultimately