CesiumGS · pjcozzi · Oct 19, 2016 · Sep 19, 2016 · Sep 20, 2016 · Sep 20, 2016
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,165 @@
+<!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)"
+});
+
+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
@@ -87,17 +87,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}.'"
@@ -410,13 +410,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 : {

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
@@ -290,6 +290,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

diff --git a/Source/Scene/Cesium3DTileStyle.js b/Source/Scene/Cesium3DTileStyle.js
@@ -40,11 +40,11 @@ define([
      * @example
      * tileset.style = new Cesium.Cesium3DTileStyle({
      *     color : {
-     *         conditions : {
-     *             '${Height} >= 100' : 'color("purple", 0.5)',
-     *             '${Height} >= 50' : 'color("red")',
-     *             'true' : 'color("blue")'
-     *         }
+     *         conditions : [
+     *             ['${Height} >= 100', 'color("purple", 0.5)'],
+     *             ['${Height} >= 50', 'color("red")'],
+     *             ['true', 'color("blue")']
+     *         ]
      *     },
      *     show : '${Height} > 0',
      *     meta : {
@@ -62,6 +62,11 @@ define([
         this._show = undefined;
         this._meta = undefined;
 
+        this._colorShaderFunction = undefined;
+        this._showShaderFunction = undefined;
+        this._colorShaderFunctionReady = false;
+        this._showShaderFunctionReady = false;
+
         var style = this;
         if (typeof data === 'string') {
             RequestScheduler.request(data, loadJson).then(function(styleJson) {
@@ -80,6 +85,17 @@ define([
         that._style = clone(styleJson, true);
 
         styleJson = defaultValue(styleJson, defaultValue.EMPTY_OBJECT);
+
+        if (!defined(styleJson.color)) {
+            // If there is no color style do not create a shader function. Otherwise a function would be created by the default style (white).
+            that._colorShaderFunctionReady = true;
+        }
+
+        if (!defined(styleJson.show)) {
+            // If there is no show style do not create a shader function.
+            that._showShaderFunctionReady = true;
+        }
+
         var colorExpression = defaultValue(styleJson.color, DEFAULT_JSON_COLOR_EXPRESSION);
         var showExpression = defaultValue(styleJson.show, DEFAULT_JSON_BOOLEAN_EXPRESSION);
 
@@ -97,6 +113,8 @@ define([
             show = new Expression(String(showExpression));
         } else if (typeof(showExpression) === 'string') {
             show = new Expression(showExpression);
+        } else if (defined(showExpression.conditions)) {
+            show = new ConditionsExpression(showExpression);
         }
 
         that._show = show;
@@ -294,9 +312,52 @@ define([
             set : function(value) {
                 this._meta = value;
             }
-        },
-
+        }
     });
 
+    /**
+     * Gets the color shader function for this style.
+     *
+     * @param {String} functionName Name to give to the generated function.
+     * @param {String} attributePrefix Prefix that is added to any variable names to access vertex attributes.
+     * @param {Object} shaderState Stores information about the generated shader function, including whether it is translucent.
+     *
+     * @returns {String} The shader function.
+     *
+     * @private
+     */
+    Cesium3DTileStyle.prototype.getColorShaderFunction = function(functionName, attributePrefix, shaderState) {
+        if (this._colorShaderFunctionReady) {
+            // Return the cached result, may be undefined
+            return this._colorShaderFunction;
+        }
+
+        this._colorShaderFunctionReady = true;
+        this._colorShaderFunction = this.color.getShaderFunction(functionName, attributePrefix, shaderState, 'vec4');
+        return this._colorShaderFunction;
+    };
+
+    /**
+     * Gets the show shader function for this style.
+     *
+     * @param {String} functionName Name to give to the generated function.
+     * @param {String} attributePrefix Prefix that is added to any variable names to access vertex attributes.
+     * @param {Object} shaderState Stores information about the generated shader function, including whether it is translucent.
+     *
+     * @returns {String} The shader function.
+     *
+     * @private
+     */
+    Cesium3DTileStyle.prototype.getShowShaderFunction = function(functionName, attributePrefix, shaderState) {
+        if (this._showShaderFunctionReady) {
+            // Return the cached result, may be undefined
+            return this._showShaderFunction;
+        }
+
+        this._showShaderFunctionReady = true;
+        this._showShaderFunction = this.show.getShaderFunction(functionName, attributePrefix, shaderState, 'bool');
+        return this._showShaderFunction;
+    };
+
     return Cesium3DTileStyle;
 });