3D Tiles - Point Cloud Styling

Apps/Sandcastle/gallery/3D Tiles Point Cloud Styling.html

@@ -129,6 +129,11 @@
     color : "rgb(${POSITION}[0] * 255, ${POSITION}[1] * 255, ${POSITION}[2] * 255)"
 });
 
+addStyle('Style point size', {
+    color : "color('red')",
+    size : "${temperature} * 10"
+});
+
 function setStyle(style) {
     tileset.style = new Cesium.Cesium3DTileStyle(style);
 }

Source/Scene/Cesium3DTileStyle.js

@@ -27,6 +27,7 @@ define([
 
     var DEFAULT_JSON_COLOR_EXPRESSION = 'color("#ffffff")';
     var DEFAULT_JSON_BOOLEAN_EXPRESSION = true;
+    var DEFAULT_JSON_NUMBER_EXPRESSION = 1.0;
 
     /**
      * Evaluates an expression defined using the
@@ -60,12 +61,15 @@ define([
         this._readyPromise = when.defer();
         this._color = undefined;
         this._show = undefined;
+        this._size = undefined;
         this._meta = undefined;
 
         this._colorShaderFunction = undefined;
         this._showShaderFunction = undefined;
+        this._sizeShaderFunction = undefined;
         this._colorShaderFunctionReady = false;
         this._showShaderFunctionReady = false;
+        this._sizeShaderFunctionReady = false;
 
         var style = this;
         if (typeof data === 'string') {
@@ -96,8 +100,13 @@ define([
             that._showShaderFunctionReady = true;
         }
 
+        if (!defined(styleJson.size)) {
+            that._sizeShaderFunctionReady = true;
+        }
+
         var colorExpression = defaultValue(styleJson.color, DEFAULT_JSON_COLOR_EXPRESSION);
         var showExpression = defaultValue(styleJson.show, DEFAULT_JSON_BOOLEAN_EXPRESSION);
+        var sizeExpression = defaultValue(styleJson.size, DEFAULT_JSON_NUMBER_EXPRESSION);
 
         var color;
         if (typeof(colorExpression) === 'string') {
@@ -119,6 +128,17 @@ define([
 
         that._show = show;
 
+        var size;
+        if (typeof(sizeExpression) === 'number') {
+            size = new Expression(String(sizeExpression));
+        } else if (typeof(sizeExpression) === 'string') {
+            size = new Expression(sizeExpression);
+        } else if (defined(sizeExpression.conditions)) {
+            size = new ConditionsExpression(sizeExpression);
+        }
+
+        that._size = size;
+
         var meta = {};
         if (defined(styleJson.meta)) {
             var metaJson = defaultValue(styleJson.meta, defaultValue.EMPTY_OBJECT);
@@ -279,6 +299,50 @@ define([
             }
         },
 
+        /**
+         * Gets or sets the {@link StyleExpression} object used to evaluate the style's <code>size</code> property.
+         * <p>
+         * The expression must return or convert to a <code>Number</code>.
+         * </p>
+         *
+         * @memberof Cesium3DTileStyle.prototype
+         *
+         * @type {StyleExpression}
+         *
+         * @exception {DeveloperError} The style is not loaded.  Use Cesium3DTileStyle.readyPromise or wait for Cesium3DTileStyle.ready to be true.
+         *
+         * @example
+         * var style = new Cesium3DTileStyle({
+         *     size : '(${Temperature} > 90) ? 2.0 : 1.0'
+         * });
+         * style.size.evaluate(feature); // returns a Number
+         *
+         * @example
+         * var style = new Cesium.Cesium3DTileStyle();
+         * // Override size expression with a custom function
+         * style.size = {
+         *     evaluate : function(feature) {
+         *         return 1.0;
+         *     }
+         * };
+         *
+         * @see {@link https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling|3D Tiles Styling language}
+         */
+        size : {
+            get : function() {
+                //>>includeStart('debug', pragmas.debug);
+                if (!this._ready) {
+                    throw new DeveloperError('The style is not loaded.  Use Cesium3DTileStyle.readyPromise or wait for Cesium3DTileStyle.ready to be true.');
+                }
+                //>>includeEnd('debug');
+
+                return this._size;
+            },
+            set : function(value) {
+                this._size = value;
+            }
+        },
+
         /**
          * Gets or sets the object containing application-specific expression that can be explicitly
          * evaluated, e.g., for display in a UI.
@@ -359,5 +423,27 @@ define([
         return this._showShaderFunction;
     };
 
+    /**
+     * Gets the size 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.getSizeShaderFunction = function(functionName, attributePrefix, shaderState) {
+        if (this._sizeShaderFunctionReady) {
+            // Return the cached result, may be undefined
+            return this._sizeShaderFunction;
+        }
+
+        this._sizeShaderFunctionReady = true;
+        this._sizeShaderFunction = this.size.getShaderFunction(functionName, attributePrefix, shaderState, 'float');
+        return this._sizeShaderFunction;
+    };
+
     return Cesium3DTileStyle;
 });

Source/Scene/Cesium3DTileStyleEngine.js

@@ -2,13 +2,11 @@
 define([
        '../Core/Color',
        '../Core/defined',
-       '../Core/defineProperties',
-       './PointCloud3DTileContent'
+       '../Core/defineProperties'
     ], function(
         Color,
         defined,
-        defineProperties,
-        PointCloud3DTileContent) {
+        defineProperties) {
     'use strict';
 
     /**

Source/Scene/PointCloud3DTileContent.js

@@ -820,6 +820,7 @@ define([
 
         var colorStyleFunction;
         var showStyleFunction;
+        var sizeStyleFunction;
         var styleTranslucent = isTranslucent;
 
         if (hasBatchTable) {
@@ -833,13 +834,15 @@ define([
             };
             colorStyleFunction = style.getColorShaderFunction('getColorFromStyle', 'czm_tiles3d_style_', shaderState);
             showStyleFunction = style.getShowShaderFunction('getShowFromStyle', 'czm_tiles3d_style_', shaderState);
+            sizeStyleFunction = style.getSizeShaderFunction('getSizeFromStyle', 'czm_tiles3d_style_', shaderState);
             styleTranslucent = shaderState.translucent;
         }
 
         content._styleTranslucent = styleTranslucent;
 
         var hasColorStyle = defined(colorStyleFunction);
         var hasShowStyle = defined(showStyleFunction);
+        var hasSizeStyle = defined(sizeStyleFunction);
 
         // Get the properties in use by the style
         var styleableProperties = [];
@@ -855,6 +858,11 @@ define([
             getStyleableSemantics(showStyleFunction, styleableSemantics);
             showStyleFunction = modifyStyleFunction(showStyleFunction);
         }
+        if (hasSizeStyle) {
+            getStyleableProperties(sizeStyleFunction, styleableProperties);
+            getStyleableSemantics(sizeStyleFunction, styleableSemantics);
+            sizeStyleFunction = modifyStyleFunction(sizeStyleFunction);
+        }
 
         var usesColorSemantic = styleableSemantics.indexOf('COLOR') >= 0;
         var usesNormalSemantic = styleableSemantics.indexOf('NORMAL') >= 0;
@@ -966,6 +974,10 @@ define([
             vs += showStyleFunction;
         }
 
+        if (hasSizeStyle) {
+            vs += sizeStyleFunction;
+        }
+
         vs += 'void main() \n' +
               '{ \n';
 
@@ -1012,6 +1024,12 @@ define([
             vs += '    float show = float(getShowFromStyle(position, color, normal)); \n';
         }
 
+        if (hasSizeStyle) {
+            vs += '    gl_PointSize = getSizeFromStyle(position, color, normal); \n';
+        } else {
+            vs += '    gl_PointSize = u_pointSize; \n';
+        }
+
         vs += '    color = color * u_highlightColor; \n';
 
         if (hasNormals) {
@@ -1022,8 +1040,7 @@ define([
         }
 
         vs += '    v_color = color; \n' +
-              '    gl_Position = czm_modelViewProjection * vec4(position, 1.0); \n' +
-              '    gl_PointSize = u_pointSize; \n';
+              '    gl_Position = czm_modelViewProjection * vec4(position, 1.0); \n';
 
         if (hasNormals && backFaceCulling) {
             vs += '    float visible = step(-normal.z, 0.0); \n' +

Specs/Data/Cesium3DTiles/Style/style.json

@@ -1,4 +1,5 @@
 {
   "color" : "color('red')",
-  "show" : "${id} < 100"
+  "show" : "${id} < 100",
+  "size" : "${id} / 100"
 }