[v9] CollisionFilterExtension (#8255)

Author: felixpalmer

modules/extensions/src/collision-filter/collision-filter-effect.ts

@@ -247,7 +247,7 @@ export default class CollisionFilterEffect implements Effect {
     const depthBuffer = new WEBGLRenderbuffer(
       // @ts-expect-error TODO v9 needs to be WebGLDevice
       device,
-      {format: 'depth16', width, height}
+      {format: 'depth16unorm', width, height}
     );
     this.collisionFBOs[collisionGroup] = device.createFramebuffer({
       id: `collision-${collisionGroup}`,
@@ -261,12 +261,9 @@ export default class CollisionFilterEffect implements Effect {
 
   destroyFBO(collisionGroup: string) {
     const fbo = this.collisionFBOs[collisionGroup];
-    // @ts-expect-error
-    const attachments = fbo.attachments as Texture[];
-    for (const attachment of Object.values(attachments)) {
-      attachment.delete();
-    }
-    fbo.delete();
+    fbo.colorAttachments[0]?.destroy();
+    fbo.depthStencilAttachment?.destroy();
+    fbo.destroy();
     delete this.collisionFBOs[collisionGroup];
   }
 }

modules/extensions/src/collision-filter/collision-filter-pass.ts

@@ -7,18 +7,18 @@ type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
 export default class CollisionFilterPass extends LayersPass {
   renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions) {
     const padding = 1;
+    const clearColor = [0, 0, 0, 0];
 
     return withGLParameters(
       this.device,
       {
         scissorTest: true,
         scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],
-        clearColor: [0, 0, 0, 0],
         blend: false,
         depthTest: true,
         depthRange: [0, 1]
       },
-      () => this.render({...options, target, pass: 'collision'})
+      () => this.render({...options, clearColor, target, pass: 'collision'})
     );
   }
 

modules/extensions/src/collision-filter/shader-module.ts

@@ -89,7 +89,7 @@ type CollisionModuleSettings = {
 };
 
 /* eslint-disable camelcase */
-type CollisionUniforms = {collision_sort?: boolean; collision_texture?: Framebuffer | Texture};
+type CollisionUniforms = {collision_sort?: boolean; collision_texture?: Texture};
 
 const getCollisionUniforms = (
   opts: CollisionModuleSettings | {},
@@ -101,7 +101,8 @@ const getCollisionUniforms = (
   const {collisionFBO, drawToCollisionMap, dummyCollisionMap} = opts;
   return {
     collision_sort: Boolean(drawToCollisionMap),
-    collision_texture: !drawToCollisionMap && collisionFBO ? collisionFBO : dummyCollisionMap
+    collision_texture:
+      !drawToCollisionMap && collisionFBO ? collisionFBO.colorAttachments[0] : dummyCollisionMap
   };
 };
 
@@ -112,4 +113,4 @@ export default {
   vs,
   inject,
   getUniforms: getCollisionUniforms
-} as ShaderModule;
+} as ShaderModule<CollisionModuleSettings>;

test/apps/collision/app.jsx

@@ -6,7 +6,7 @@ import DeckGL from '@deck.gl/react';
 import {OPERATION} from '@deck.gl/core';
 import {GeoJsonLayer, SolidPolygonLayer, TextLayer} from '@deck.gl/layers';
 import {CollisionFilterExtension, MaskExtension} from '@deck.gl/extensions';
-import {cartoVectorTableSource, VectorTileLayer} from '@deck.gl/carto';
+import {VectorTileLayer, vectorTableSource} from '@deck.gl/carto';
 
 const accessToken = 'XXX';
 const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json';
@@ -17,7 +17,7 @@ const PLACES =
 const US_STATES =
   'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'; //eslint-disable-line
 
-const cartoData = cartoVectorTableSource({
+const cartoData = vectorTableSource({
   accessToken,
   connectionName: 'bigquery',
   tableName: 'cartobq.public_account.populated_places'