Handle multiple feature ID sets in ModelExperimental

Apps/Sandcastle/gallery/3D Tiles Next Photogrammetry Classification.html

@@ -51,7 +51,7 @@
         var scene = viewer.scene;
 
         var tileset = new Cesium.Cesium3DTileset({
-          url: Cesium.IonResource.fromAssetId(666297),
+          url: Cesium.IonResource.fromAssetId(775877),
         });
 
         var translation = new Cesium.Cartesian3(
@@ -107,8 +107,7 @@
             "const float TOTAL_FEATURES = 12.0;",
             "",
             "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
-            "  // NOTE: This is exposing internal details of the shader. It would be better if this was added to fsInput somewhere...",
-            "  float featureId = floor(texture2D(FEATURE_ID_TEXTURE, FEATURE_ID_TEXCOORD).FEATURE_ID_CHANNEL * 255.0 + 0.5);",
+            "  float featureId = fsInput.featureIds.featureId_0;",
             "",
             "  if (featureId == WINDOW || featureId == SKYLIGHT) {",
             "    material.alpha = 0.4;",
@@ -136,8 +135,7 @@
             "const float TRAFFIC_LIGHT = 11.0;",
             "",
             "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
-            "  // NOTE: This is exposing internal details of the shader. It would be better if this was added to fsInput somewhere...",
-            "  float featureId = floor(texture2D(FEATURE_ID_TEXTURE, FEATURE_ID_TEXCOORD).FEATURE_ID_CHANNEL * 255.0 + 0.5);",
+            "  float featureId = fsInput.featureIds.featureId_0;",
             "",
             "  if (featureId == CLOCK) {",
             "    // Shiny brass",
@@ -183,8 +181,7 @@
           fragmentShaderText: [
             "const float NOTHING_SELECTED = 12.0;",
             "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
-            "  // NOTE: This is exposing internal details of the shader. It would be better if this was added to fsInput somewhere...",
-            "  float featureId = floor(texture2D(FEATURE_ID_TEXTURE, FEATURE_ID_TEXCOORD).FEATURE_ID_CHANNEL * 255.0 + 0.5);",
+            "  float featureId = fsInput.featureIds.featureId_0;",
             "",
             "  if (u_selectedFeature < NOTHING_SELECTED && featureId == u_selectedFeature) {",
             "    material.specular = vec3(1.00, 0.85, 0.57);",
@@ -194,13 +191,68 @@
           ].join("\n"),
         });
 
+        var multipleFeatureIdsShader = new Cesium.CustomShader({
+          uniforms: {
+            u_selectedFeature: {
+              type: Cesium.UniformType.FLOAT,
+              value: NOTHING_SELECTED,
+            },
+          },
+          lightingModel: Cesium.LightingModel.UNLIT,
+          fragmentShaderText: [
+            "const float IDS0_WALL = 2.0;",
+            "const float IDS1_STREET = 0.0;",
+            "const float IDS1_TOWER = 1.0;",
+            "const vec3 XZ_DIRECTION = normalize(vec3(1.0, 0.0, 1.0));",
+            "const vec3 RED = vec3(1.0, 0.0, 0.0);",
+            "const vec3 YELLOW = vec3(0.0, 0.8, 0.0);",
+            "const vec3 BLACK = vec3(0.0);",
+            "const vec3 WHITE = vec3(1.0);",
+            "float stripes(float x) {",
+            "  return smoothstep(-0.4, 0.4, sin(2.0 * czm_pi * 10.0 * x));",
+            "}",
+            "",
+            "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {",
+            "  float featureId0 = fsInput.featureIds.featureId_0; // fine features",
+            "  float featureId1 = fsInput.featureIds.featureId_1; // coarse features",
+            "",
+            "  // since photogrammetry UVs are hard to work with, use",
+            "  // model space coordinates instead to make stripes in different",
+            "  // directions",
+            "  vec3 position = fsInput.attributes.positionMC / 100.0;",
+            "  float horizontalStripes = stripes(dot(position, XZ_DIRECTION));",
+            "  float verticalStripes = stripes(position.y);",
+            "",
+            "  // use both feature ID sets to determine where the features are",
+            "  float isWall = float(featureId0 == IDS0_WALL);",
+            "  float isStreet = float(featureId1 == IDS1_STREET);",
+            "  float isTower = float(featureId1 == IDS1_TOWER);",
+            "",
+            "  // composite several layers to make the final image",
+            "  // layer 0: original photogrammetry",
+            "  vec3 color = material.diffuse;",
+            "  // layer 1: overlay green stripes over the street",
+            "  color = mix(color, YELLOW, isStreet * horizontalStripes);",
+            "  // layer 2: paint the wall with red and black stripes",
+            "  vec3 wallColor = mix(BLACK, RED, horizontalStripes);",
+            "  color = mix(color, wallColor, isWall);",
+            "  // layer 3: paint the tower with black and white stripes",
+            "  vec3 towerColor = mix(BLACK, WHITE, verticalStripes);",
+            "  color = mix(color, towerColor, isTower);",
+            "",
+            "  material.diffuse = color;",
+            "}",
+          ].join("\n"),
+        });
+
         // Demo Functions =====================================================================
 
         function defaults() {
           tileset.style = undefined;
           tileset.customShader = unlitShader;
           tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.HIGHLIGHT;
           tileset.colorBlendAmount = 0.5;
+          tileset.featureIdIndex = 0;
         }
 
         var showPhotogrammetry = defaults;
@@ -211,6 +263,12 @@
           tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.MIX;
         }
 
+        function showAlternativeClassification() {
+          showClassification();
+          // This dataset has a second feature ID texture.
+          tileset.featureIdIndex = 1;
+        }
+
         function translucentWindows() {
           defaults();
           tileset.customShader = translucentWindowsShader;
@@ -226,6 +284,11 @@
           tileset.customShader = selectFeatureShader;
         }
 
+        function multipleFeatureIds() {
+          defaults();
+          tileset.customShader = multipleFeatureIdsShader;
+        }
+
         // Pick Handlers ======================================================================
 
         // HTML overlay for showing feature name on mouseover
@@ -304,6 +367,10 @@
             text: "Show Classification",
             onselect: showClassification,
           },
+          {
+            text: "Show Alternative Classification",
+            onselect: showAlternativeClassification,
+          },
           {
             text: "Translucent Windows",
             onselect: translucentWindows,
@@ -316,6 +383,10 @@
             text: "Golden Touch",
             onselect: goldenTouch,
           },
+          {
+            text: "Multiple Feature ID Sets",
+            onselect: multipleFeatureIds,
+          },
         ];
         Sandcastle.addToolbarMenu(demos);
 

Apps/Sandcastle/gallery/3D Tiles Next S2 Globe.html

@@ -105,8 +105,7 @@
           fragmentShaderText: [
             "void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)",
             "{",
-            "  // NOTE: this is exposing internal details of the shader.",
-            "  float featureId = floor(texture2D(FEATURE_ID_TEXTURE, FEATURE_ID_TEXCOORD).FEATURE_ID_CHANNEL * 255.0 + 0.5);",
+            "  float featureId = fsInput.featureIds.featureId_0;",
             "  // Use cartesian coordinates but scale to be roughly [-1, 1]",
             "  vec3 positionWC = fsInput.attributes.positionWC / 6.3e6;",
             "  if (featureId == 60.0)",

CHANGES.md

@@ -4,6 +4,8 @@
 
 ##### Additions :tada:
 
+- Feature IDs for styling and picking in `ModelExperimental` can now be selected via `(tileset|model).featureIdIndex` and `(tileset|model).instanceFeatureIdIndex`. [#10018](https://github.com/CesiumGS/cesium/pull/10018)
+- Added support for all types of feature IDs in `CustomShader`. [#10018](https://github.com/CesiumGS/cesium/pull/10018)
 - Added getters `Cesium3DTileFeature.featureId` and `ModelFeature.featureId` so the feature ID or batch ID can be accessed from a picked feature. [#10022](https://github.com/CesiumGS/cesium/pull/10022)
 - Added `I3dmLoader` to transcode .i3dm to `ModelExperimental`. [#9968](https://github.com/CesiumGS/cesium/pull/9968)
 - Added `PntsLoader` to transcode .pnts to `ModelExperimental`. [#9978](https://github.com/CesiumGS/cesium/pull/9978)

Source/Scene/Cesium3DTileset.js

@@ -963,6 +963,27 @@ function Cesium3DTileset(options) {
     ExperimentalFeatures.enableModelExperimental
   );
 
+  /**
+   * The index into the list of primitive feature IDs used for picking and
+   * styling. For EXT_feature_metadata, feature ID attributes are listed before
+   * feature ID textures. If both per-primitive and per-instance feature IDs are
+   * present, the instance feature IDs take priority.
+   *
+   * @type {Number}
+   * @experimental This feature is using part of the 3D Tiles spec that is not final and is subject to change without Cesium's standard deprecation policy.
+   */
+  this.featureIdIndex = defaultValue(options.featureIdIndex, 0);
+
+  /**
+   * The index into the list of instance feature IDs used for picking and
+   * styling. If both per-primitive and per-instance feature IDs are present,
+   * the instance feature IDs take priority.
+   *
+   * @type {Number}
+   * @experimental This feature is using part of the 3D Tiles spec that is not final and is subject to change without Cesium's standard deprecation policy.
+   */
+  this.instanceFeatureIdIndex = defaultValue(options.instanceFeatureIdIndex, 0);
+
   this._schemaLoader = undefined;
 
   var that = this;