feat: apply phong shading to extruded path layer

src/layers/extruded-path-layer/extruded-path-layer-fragment.glsl.ts

@@ -29,6 +29,9 @@ uniform float miterLimit;
 in vec4 vColor;
 in vec2 vCornerOffset;
 in float vMiterLength;
+in vec3 vNormal;
+in vec3 cameraPosition;
+
 /*
  * vPathPosition represents the relative coordinates of the current fragment on the path segment.
  * vPathPosition.x - position along the width of the path, between [-1, 1]. 0 is the center line.
@@ -37,6 +40,7 @@ in float vMiterLength;
 in vec2 vPathPosition;
 in float vPathLength;
 in float vJointType;
+in vec3 vCommonPosition;
 
 out vec4 fragColor;
 
@@ -53,7 +57,12 @@ void main(void) {
       discard;
     }
   }
-  fragColor = vColor;
+
+  vec3 N = normalize(vNormal);
+
+  vec3 lightColor = lighting_getLightColor(vColor.rgb, cameraPosition, vCommonPosition, N);
+
+  fragColor = vec4(lightColor, vColor.a);
 
   DECKGL_FILTER_COLOR(fragColor, geometry);
 }

src/layers/extruded-path-layer/extruded-path-layer-vertex.glsl.ts

@@ -55,6 +55,9 @@ out float vMiterLength;
 out vec2 vPathPosition;
 out float vPathLength;
 out float vJointType;
+out vec3 vNormal;
+out vec3 vCommonPosition;
+out vec3 cameraPosition;
 
 const float EPSILON = 0.001;
 const vec3 ZERO_OFFSET = vec3(0.0);
@@ -209,6 +212,8 @@ void main() {
   currPosition = project_position(currPosition, currPosition64Low);
   nextPosition = project_position(nextPosition, nextPosition64Low);
 
+  vCommonPosition = currPosition;
+
   width = vec3(project_pixel_size(widthPixels), 0.0);
   DECKGL_FILTER_SIZE(width, geometry);
 
@@ -223,5 +228,25 @@ void main() {
   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
 
   DECKGL_FILTER_COLOR(vColor, geometry);
+
+  // Compute normals
+  vec3 segment = nextPosition - currPosition;
+  float lenXY = length(segment.xy);
+  if (lenXY < 1e-6) {
+    lenXY = 1.0;
+  }
+  vec2 dir = segment.xy / lenXY;
+
+  // 2) Compute outward normal in XY plane (walls are vertical => no tilt in Z)
+  //    This normal points "out" horizontally. If you want inside vs. outside, flip sign.
+  vec2 normalXY = vec2(-dir.y, dir.x);
+  normalXY = normalize(normalXY);
+
+  // 3) Approximate the normal
+  //    For purely vertical walls, normal in world space is (nx, ny, 0).
+  //    We'll store it as vNormal for the fragment shader.
+  vNormal = vec3(normalXY, 0.);
+
+  cameraPosition = project_uCameraPosition;
 }
 `;

src/layers/extruded-path-layer/extruded-path-layer.ts

@@ -3,6 +3,7 @@ import { fs } from "./extruded-path-layer-fragment.glsl";
 import { vs } from "./extruded-path-layer-vertex.glsl";
 import { Geometry, Model } from "@luma.gl/engine";
 import type { Accessor, Color } from "@deck.gl/core";
+import { phongLighting, Material } from "@deck.gl/core";
 import { TransitionSettings } from "@deck.gl/core/dist/lib/attribute/transition-settings";
 import { NumberArray, TypedArray } from "@math.gl/types";
 import * as _ from "lodash";
@@ -13,6 +14,14 @@ export type ExtrudedPathLayerProps<DataT> = PathLayerProps<DataT> & {
      * @default [20, 20, 20, 255]
      */
     getSideColor?: Accessor<DataT, Color | Color[]>;
+
+    /**
+     * Material props for lighting effect.
+     *
+     * @default true
+     * @see https://deck.gl/docs/developer-guide/using-lighting#constructing-a-material-instance
+     */
+    material?: Material;
 };
 
 const ATTRIBUTE_TRANSITION: Partial<TransitionSettings> = {
@@ -41,17 +50,22 @@ export class ExtrudedPathLayer<
     static defaultProps = {
         ...PathLayer.defaultProps,
         getSideColor: { type: "accessor", value: DEFAULT_SIDE_COLOR },
+
+        // Optional material for 'lighting' shader module
+        material: true,
     };
     static layerName = "ExtrudedPathLayer";
 
     /**
      * Override PathLayer shaders with ones that draw path side walls.
      */
     getShaders() {
+        const parentShaders = super.getShaders();
         return {
             ...super.getShaders(),
             vs,
             fs,
+            modules: [...parentShaders.modules, phongLighting],
         };
     }