feat(layers): WebGPU SolidPolygonLayer

examples/website/geojson/app.tsx

@@ -2,16 +2,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import React, {useState} from 'react';
-import {createRoot} from 'react-dom/client';
-import {Map} from 'react-map-gl/maplibre';
-import {DeckGL} from '@deck.gl/react';
-import {GeoJsonLayer, PolygonLayer} from '@deck.gl/layers';
-import {LightingEffect, AmbientLight, _SunLight as SunLight} from '@deck.gl/core';
-import {scaleThreshold} from 'd3-scale';
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Map } from 'react-map-gl/maplibre';
+import { DeckGL } from '@deck.gl/react';
+import { GeoJsonLayer, PolygonLayer } from '@deck.gl/layers';
+import { LightingEffect, AmbientLight, _SunLight as SunLight } from '@deck.gl/core';
+import { scaleThreshold } from 'd3-scale';
 
-import type {Color, Position, PickingInfo, MapViewState} from '@deck.gl/core';
-import type {Feature, Geometry} from 'geojson';
+import type { Device, DeviceProps } from '@luma.gl/core';
+import type { Color, Position, PickingInfo, MapViewState } from '@deck.gl/core';
+import type { Feature, Geometry } from 'geojson';
 
 // Source data GeoJSON
 const DATA_URL =
@@ -74,7 +75,7 @@ type BlockProperties = {
   growth: number;
 };
 
-function getTooltip({object}: PickingInfo<Feature<Geometry, BlockProperties>>) {
+function getTooltip({ object }: PickingInfo<Feature<Geometry, BlockProperties>>) {
   return (
     object && {
       html: `\
@@ -89,14 +90,18 @@ function getTooltip({object}: PickingInfo<Feature<Geometry, BlockProperties>>) {
 }
 
 export default function App({
+  device,
+  deviceProps,
   data = DATA_URL,
   mapStyle = MAP_STYLE
 }: {
+  device?: Device;
+  deviceProps?: DeviceProps;
   data?: string | Feature<Geometry, BlockProperties>[];
   mapStyle?: string;
 }) {
   const [effects] = useState(() => {
-    const lightingEffect = new LightingEffect({ambientLight, dirLight});
+    const lightingEffect = new LightingEffect({ ambientLight, dirLight });
     lightingEffect.shadowColor = [0, 0, 0, 0.5];
     return [lightingEffect];
   });
@@ -127,6 +132,8 @@ export default function App({
 
   return (
     <DeckGL
+      device={device}
+      deviceProps={deviceProps}
       layers={layers}
       effects={effects}
       initialViewState={INITIAL_VIEW_STATE}
@@ -138,6 +145,6 @@ export default function App({
   );
 }
 
-export function renderToDOM(container: HTMLDivElement) {
-  createRoot(container).render(<App />);
+export function renderToDOM(container: HTMLDivElement, device?: Device, deviceProps?: DeviceProps) {
+  createRoot(container).render(<App deviceProps={deviceProps} />);
 }

examples/website/geojson/index.html

@@ -14,6 +14,7 @@
 </body>
 <script type="module">
   import {renderToDOM} from './app.tsx';
-  renderToDOM(document.getElementById('app'));
+  import {webgpuAdapter} from '@luma.gl/webgpu';
+  renderToDOM(document.getElementById('app'), undefined, {adapters: [webgpuAdapter], type: 'webgl'});
 </script>
 </html>

examples/website/geojson/package.json

@@ -13,7 +13,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "d3-scale": "^4.0.0",
-    "deck.gl": "^9.0.0",
+    "deck.gl": "^9.2.0-alpha.2",
     "maplibre-gl": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

modules/layers/src/solid-polygon-layer/solid-polygon-layer.ts

@@ -13,6 +13,7 @@ import {solidPolygonUniforms, SolidPolygonProps} from './solid-polygon-layer-uni
 import vsTop from './solid-polygon-layer-vertex-top.glsl';
 import vsSide from './solid-polygon-layer-vertex-side.glsl';
 import fs from './solid-polygon-layer-fragment.glsl';
+import {shaderWGSL as source} from './solid-polygon-layer.wgsl';
 
 import type {
   LayerProps,
@@ -134,13 +135,18 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
   };
 
   getShaders(type) {
+    const modules =
+      this.context.device.type === 'webgpu'
+        ? [project32, picking, solidPolygonUniforms]
+        : [project32, gouraudMaterial, picking, solidPolygonUniforms];
     return super.getShaders({
       vs: type === 'top' ? vsTop : vsSide,
       fs,
       defines: {
         RING_WINDING_ORDER_CW: !this.props._normalize && this.props._windingOrder === 'CCW' ? 0 : 1
       },
-      modules: [project32, gouraudMaterial, picking, solidPolygonUniforms]
+      modules,
+      ...(type === 'top' ? {source} : {})
     });
   }
 
@@ -282,7 +288,8 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
   }
 
   draw({uniforms}) {
-    const {extruded, filled, wireframe, elevationScale} = this.props;
+    const {filled, wireframe, elevationScale} = this.props;
+    const extruded = this.props.extruded && this.context.device.type !== 'webgpu';
     const {topModel, sideModel, wireframeModel, polygonTesselator} = this.state;
 
     const renderUniforms: SolidPolygonProps = {
@@ -292,13 +299,13 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
     };
 
     // Note - the order is important
-    if (wireframeModel && wireframe) {
+    if (wireframeModel && wireframe && extruded) {
       wireframeModel.setInstanceCount(polygonTesselator.instanceCount - 1);
       wireframeModel.shaderInputs.setProps({solidPolygon: {...renderUniforms, isWireframe: true}});
       wireframeModel.draw(this.context.renderPass);
     }
 
-    if (sideModel && filled) {
+    if (sideModel && filled && extruded) {
       sideModel.setInstanceCount(polygonTesselator.instanceCount - 1);
       sideModel.shaderInputs.setProps({solidPolygon: renderUniforms});
       sideModel.draw(this.context.renderPass);
@@ -372,7 +379,8 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
   }
 
   protected _getModels() {
-    const {id, filled, extruded} = this.props;
+    const {id, filled} = this.props;
+    const extruded = this.props.extruded && this.context.device.type !== 'webgpu';
 
     let topModel;
     let sideModel;

modules/layers/src/solid-polygon-layer/solid-polygon-layer.wgsl.ts

@@ -0,0 +1,57 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const shaderWGSL = /* wgsl */ `\
+struct LayerUniforms {
+  opacity: f32,
+};
+var<private> layer: LayerUniforms = LayerUniforms(1.0);
+// @group(0) @binding(1) var<uniform> layer: LayerUniforms;
+
+// Placeholder filter functions
+fn deckgl_filter_gl_position(p: vec4<f32>, geometry: Geometry) -> vec4<f32> {
+  return p;
+}
+fn deckgl_filter_color(color: vec4<f32>, geometry: Geometry) -> vec4<f32> {
+  return color;
+}
+
+struct Attributes {
+  @location(0) positions: vec3<f32>,
+  @location(1) positions64Low: vec3<f32>,
+  @location(2) elevations: f32,
+  @location(3) fillColors: vec4<f32>,
+  @location(4) lineColors: vec4<f32>,
+  @location(5) pickingColors: vec3<f32>,
+};
+
+struct Varyings {
+  @builtin(position) gl_Position: vec4<f32>,
+  @location(0) vColor: vec4<f32>,
+};
+
+@vertex
+fn vertexMain(attributes: Attributes) -> Varyings {
+  geometry.worldPosition = attributes.positions;
+  geometry.pickingColor = attributes.pickingColors;
+  let projectResult = project_position_to_clipspace_and_commonspace(attributes.positions, attributes.positions64Low, vec3<f32>(0.0));
+  var position = projectResult.clipPosition;
+  geometry.position = projectResult.commonPosition;
+  position = deckgl_filter_gl_position(position, geometry);
+
+  var vColor = vec4<f32>(attributes.fillColors.rgb, attributes.fillColors.a * layer.opacity);
+  vColor = deckgl_filter_color(vColor, geometry);
+
+  var output: Varyings;
+  output.gl_Position = position;
+  output.vColor = vColor;
+  return output;
+}
+
+@fragment
+fn fragmentMain(varyings: Varyings) -> @location(0) vec4<f32> {
+  var fragColor = varyings.vColor;
+  return fragColor;
+}
+`;

modules/widgets/package.json

@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.1.0",
-    "@luma.gl/core": "^9.1.9"
+    "@luma.gl/core": "^9.2.0-alpha.5"
   },
   "gitHead": "13ace64fc2cee08c133afc882fc307253489a4e4"
 }