CesiumGS · lilleyse · Jul 2, 2019 · Apr 8, 2019 · Apr 8, 2019 · Apr 8, 2019
diff --git a/Apps/Sandcastle/gallery/Labels SDF.html b/Apps/Sandcastle/gallery/Labels SDF.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Create and style textual labels.">
+    <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 {
+        background: rgba(42, 42, 42, 0.8);
+        padding: 4px;
+        border-radius: 4px;
+    }
+
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+    <table><tbody>
+        <tr>
+            <td>Outline</td>
+            <td>
+                <input type="range" min="0.0" max="8.0" step="0.01" data-bind="value: outlineWidth, valueUpdate: 'input'">
+                <input type="text" size="5" data-bind="value: outlineWidth">
+            </td>
+        </tr>
+
+        <tr>
+            <td>Scale</td>
+            <td>
+                <input type="range" min="0.1" max="20.0" step="0.01" data-bind="value: scale, valueUpdate: 'input'">
+                <input type="text" size="5" data-bind="value: scale">
+            </td>
+        </tr>
+
+        <tr>
+            <td class="header">Outline Color</td>
+        </tr>
+        <tr>
+            <td>Color</td>
+            <td><select data-bind="options: outlineColors, value: outlineColor"></select></td>
+        </tr>
+
+        <tr>
+            <td class="header">Texture Atlas Stats</td>
+        </tr>
+        <tr>
+            <td>
+                <div id="atlasStats">
+                </div>
+            </td>
+        </tr>
+    </tbody>
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+
+function getColor(colorName, alpha) {
+    var color = Cesium.Color[colorName.toUpperCase()];
+    return Cesium.Color.fromAlpha(color, parseFloat(alpha));
+}
+
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+// The viewModel tracks the state of our mini application.
+var viewModel = {
+    outlineWidth: 0.75,
+    scale: 1.0,
+    outlineColor : 'Red',
+    outlineColors : ['Red', 'Green', 'Blue', 'Yellow', 'Gray', 'Black']
+};
+
+// Convert the viewModel members into knockout observables.
+Cesium.knockout.track(viewModel);
+// Bind the viewModel to the DOM elements of the UI that call for it.
+var toolbar = document.getElementById('toolbar');
+Cesium.knockout.applyBindings(viewModel, toolbar);
+
+// Create a label collection with two labels
+var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
+var label = labels.add({
+  position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
+  text : 'Philadelphia',
+  fillColor: Cesium.Color.WHITE,
+  backgroundColor: Cesium.Color.BLACK,
+  font : '48px Calibri',
+  style: Cesium.LabelStyle.FILL_AND_OUTLINE
+});
+
+var morgantown = labels.add({
+  position : Cesium.Cartesian3.fromDegrees(-79.9559, 39.6295),
+  text : 'Morgantown',
+  fillColor: Cesium.Color.YELLOW,
+  font : '24px Calibri',
+  outlineColor: Cesium.Color.BLUE,
+  outlineWidth: 2.0,
+  style: Cesium.LabelStyle.FILL_AND_OUTLINE
+});
+
+var atlasStats = document.getElementById("atlasStats");
+
+Cesium.knockout.getObservable(viewModel, 'outlineWidth').subscribe(
+    function(newValue) {
+        label.outlineWidth = parseFloat(newValue);
+    }
+);
+
+Cesium.knockout.getObservable(viewModel, 'scale').subscribe(
+    function(newValue) {
+        label.scale = parseFloat(newValue);
+    }
+);
+
+Cesium.knockout.getObservable(viewModel, 'outlineColor').subscribe(
+    function(newValue) {
+        label.outlineColor = getColor(newValue, 1.0);
+    }
+);
+
+Sandcastle.addToggleButton('Debug Atlas', labels._billboardCollection.debugTextureAtlas, function(checked) {
+    labels._billboardCollection.debugTextureAtlas = checked;
+});
+
+var outlineDelta = 0.1;
+
+var fontDelta = -1.0;
+var fontSize = 48.0;
+var minFontSize = 1.0;
+var maxFontSize = 48.0;
+
+viewer.scene.preUpdate.addEventListener(function(scene, time) {
+    if (labels._textureAtlas) {
+        var info = 'Number Of Images=' + labels._textureAtlas.numberOfImages + '<br/>';
+        info += 'Dimensions ' + labels._textureAtlas._texture.width + ' x ' + labels._textureAtlas._texture.height;
+        atlasStats.innerHTML = info;
+    }
+
+    morgantown.outlineWidth += outlineDelta;
+    if (morgantown.outlineWidth >= 4.0 || morgantown.outlineWidth <= 0.0) {
+        outlineDelta *= -1.0;
+    }
+
+    fontSize += fontDelta;
+    if (fontSize >= maxFontSize || fontSize <= minFontSize) {
+        fontDelta *= -1.0;
+    }
+    morgantown.font = fontSize + "px Calibri";
+});
+//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/Labels SDF.jpg b/Apps/Sandcastle/gallery/Labels SDF.jpg
diff --git a/CHANGES.md b/CHANGES.md
@@ -5,6 +5,7 @@ Change Log
 
 ##### Additions :tada:
 * Added support for the `KHR_texture_transform` glTF extension. [#7549](https://github.com/AnalyticalGraphicsInc/cesium/pull/7549)
+* Reworked label rendering to use signed distance fields for crisper text.
 
 ##### Fixes :wrench:
 * Fixed an error where `clampToHeightMostDetailed` or `sampleHeightMostDetailed` would crash if entities were created when the promise resolved. [#7690](https://github.com/AnalyticalGraphicsInc/cesium/pull/7690)

diff --git a/Source/Scene/Billboard.js b/Source/Scene/Billboard.js
@@ -195,6 +195,8 @@ define([
         this._mode = SceneMode.SCENE3D;
 
         this._clusterShow = true;
+        this._outlineColor = Color.clone(defaultValue(options.outlineColor, Color.BLACK));
+        this._outlineWidth = defaultValue(options.outlineWidth, 0.0);
 
         this._updateClamping();
     }
@@ -216,7 +218,8 @@ define([
     var DISTANCE_DISPLAY_CONDITION = Billboard.DISTANCE_DISPLAY_CONDITION = 14;
     var DISABLE_DEPTH_DISTANCE = Billboard.DISABLE_DEPTH_DISTANCE = 15;
     Billboard.TEXTURE_COORDINATE_BOUNDS = 16;
-    Billboard.NUMBER_OF_PROPERTIES = 17;
+    var SDF = Billboard.SDF = 17;
+    Billboard.NUMBER_OF_PROPERTIES = 18;
 
     function makeDirty(billboard, propertyChanged) {
         var billboardCollection = billboard._billboardCollection;
@@ -944,6 +947,49 @@ define([
                     makeDirty(this, SHOW_INDEX);
                 }
             }
+        },
+
+        /**
+         * The outline color of this Billboard.  Effective only for SDF billboards like Label glyphs.
+         * @memberof Billboard.prototype
+         * @type {Color}
+         * @private
+         */
+        outlineColor : {
+            get : function() {
+                return this._outlineColor;
+            },
+            set : function(value) {
+                //>>includeStart('debug', pragmas.debug);
+                if (!defined(value)) {
+                    throw new DeveloperError('value is required.');
+                }
+                //>>includeEnd('debug');
+
+                var outlineColor = this._outlineColor;
+                if (!Color.equals(outlineColor, value)) {
+                    Color.clone(value, outlineColor);
+                    makeDirty(this, SDF);
+                }
+            }
+        },
+
+        /**
+         * The outline width of this Billboard.  Effective only for SDF billboards like Label glyphs.
+         * @memberof Billboard.prototype
+         * @type {Number}
+         * @private
+         */
+        outlineWidth : {
+            get : function() {
+                return this._outlineWidth;
+            },
+            set : function(value) {
+                if (this._outlineWidth !== value) {
+                    this._outlineWidth = value;
+                    makeDirty(this, SDF);
+                }
+            }
         }
     });