feat(layers): port TextLayer glyph rendering to WebGPU

examples/website/text/app.tsx

@@ -17,6 +17,7 @@ import {load} from '@loaders.gl/core';
 
 import type {Color, MapViewState} from '@deck.gl/core';
 import type {CollisionFilterExtensionProps} from '@deck.gl/extensions';
+import type {Device} from '@luma.gl/core';
 
 // Sample data
 const DATA_URL =
@@ -51,11 +52,13 @@ const colorScale = scaleLog<Color>()
   ]);
 
 export default function App({
+  device,
   data,
   noOverlap = true,
   fontSize = 32,
   mapStyle = MAP_STYLE
 }: {
+  device?: Device;
   data?: City[];
   noOverlap?: boolean;
   fontSize?: number;
@@ -97,11 +100,13 @@ export default function App({
       sizeMaxPixels: sizeMaxPixels * 2,
       sizeMinPixels: sizeMinPixels * 2
     },
-    extensions: [new CollisionFilterExtension()]
+    // CollisionFilterExtension has not been ported to WebGPU yet.
+    extensions: device?.type === 'webgpu' ? [] : [new CollisionFilterExtension()]
   });
 
   return (
     <DeckGL
+      device={device}
       views={new MapView({repeat: true})}
       layers={[textLayer]}
       initialViewState={INITIAL_VIEW_STATE}

modules/layers/src/text-layer/multi-icon-layer/multi-icon-layer.ts

@@ -10,6 +10,7 @@ import {TextModuleProps, textUniforms, ContentAlignModes} from '../text-uniforms
 
 import vs from './multi-icon-layer-vertex.glsl';
 import fs from './multi-icon-layer-fragment.glsl';
+import {shaderWGSL as source} from './multi-icon-layer.wgsl';
 
 import type {IconLayerProps} from '../../icon-layer/icon-layer';
 import type {
@@ -69,7 +70,13 @@ export default class MultiIconLayer<DataT, ExtraPropsT extends {} = {}> extends
 
   getShaders() {
     const shaders = super.getShaders();
-    return {...shaders, modules: [...shaders.modules, textUniforms, sdfUniforms], vs, fs};
+    const textShaders = {
+      ...shaders,
+      modules: [...shaders.modules, textUniforms, sdfUniforms],
+      vs,
+      fs
+    };
+    return this.context.device.type === 'webgpu' ? {...textShaders, source} : textShaders;
   }
 
   initializeState() {
@@ -84,10 +91,12 @@ export default class MultiIconLayer<DataT, ExtraPropsT extends {} = {}> extends
       rowIndexes: {
         type: 'uint32',
         size: 1,
+        bufferGroup: 'icon-instance-data',
         accessor: (object, {index}) => index
       },
       instanceClipRect: {
         size: 4,
+        bufferGroup: 'icon-instance-data',
         accessor: 'getContentBox',
         defaultValue: [0, 0, -1, -1]
       }