TerrainExtension: Support picking on draped layers (#8474)

Author: flostellbrink

examples/website/google-3d-tiles/app.jsx

@@ -32,6 +32,17 @@ const INITIAL_VIEW_STATE = {
 const BUILDING_DATA =
   'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson';
 
+function getTooltip({object}) {
+  return (
+    object && {
+      html: `\
+    <div><b>Distance to nearest tree</b></div>
+    <div>${object.properties.distance_to_nearest_tree}</div>
+    `
+    }
+  );
+}
+
 export default function App({data = TILESET_URL, distance = 0, opacity = 0.2}) {
   const [credits, setCredits] = useState('');
 
@@ -64,7 +75,8 @@ export default function App({data = TILESET_URL, distance = 0, opacity = 0.2}) {
       getFillColor: ({properties}) => colorScale(properties.distance_to_nearest_tree),
       opacity,
       getFilterValue: f => f.properties.distance_to_nearest_tree,
-      filterRange: [distance, 500]
+      filterRange: [distance, 500],
+      pickable: true
     })
   ];
 
@@ -75,6 +87,7 @@ export default function App({data = TILESET_URL, distance = 0, opacity = 0.2}) {
         initialViewState={INITIAL_VIEW_STATE}
         controller={{touchRotate: true, inertia: 250}}
         layers={layers}
+        getTooltip={getTooltip}
       />
       <div
         style={{position: 'absolute', left: '8px', bottom: '4px', color: 'white', fontSize: '10px'}}

modules/extensions/src/terrain/terrain-effect.ts

@@ -65,7 +65,8 @@ export class TerrainEffect implements Effect {
       return;
     }
 
-    const {viewports, isPicking = false} = opts;
+    const {viewports} = opts;
+    const isPicking = opts.pass.startsWith('picking');
     this.isPicking = isPicking;
     this.isDrapingEnabled = true;
 
@@ -200,7 +201,12 @@ export class TerrainEffect implements Effect {
             devicePixelRatio: 1
           }
         });
-        terrainCover.isDirty = false;
+
+        if (!this.isPicking) {
+          // IsDirty refers to the normal fbo, not the picking fbo.
+          // Only mark it as not dirty if the normal fbo was updated.
+          terrainCover.isDirty = false;
+        }
       }
     } catch (err) {
       terrainLayer.raiseError(err as Error, `Error rendering terrain cover ${terrainCover.id}`);