<!DOCTYPE html>
    <html>
    <head>
        <title>DeckGL GeoJson Normal Map Example</title>
        <script src="https://unpkg.com/deck.gl@8.5.9/dist.min.js"></script>
        <style>    
            #timestamp-slider {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 80%;
                z-index: 10;
            }
        </style>

    </head>
    <body>
        <div id="container" style="width: 100vw; height: 100vh;"></div>
        <input type="range" id="timestamp-slider" min="0" max="86400000" value="1554927200000" step="1000">

        <script>
            const {DeckGL, GeoJsonLayer, LayerExtension, _SunLight, LightingEffect, PolygonLayer} = deck;

            class NormalMapExtension extends LayerExtension {
    getShaders() {
        return {
            inject: {
                'vs:#decl': `
                    varying vec3 vNormal;
                `,
                'vs:#main-end': `
                    vNormal = normalize(geometry.normal); // Ensure normals are normalized
                `,
                'fs:#decl': `
                    varying vec3 vNormal;
                    // Temporary light direction value
                    vec3 tempLightDirection = vec3(-0.004111416421258364, 0.6603599246799875, -0.7509379908698536);
                    // Arbitrary light direction
                `,
                'fs:DECKGL_FILTER_COLOR': `
                    // Normalize the temporary light direction vector
                    vec3 lightDir = normalize(tempLightDirection);

                    // Compute the dot product between normal and light direction
                    vec3 normal = normalize(vNormal);
                    float dotProduct = max(dot(normal, lightDir), 0.0); // Clamp to [0, 1]

                    // Set colors based on dot product
                    vec3 colorInSunlight = vec3(0.5, 0.0, 0.5); // Purple color
                    vec3 colorInShadow = vec3(1.0, 0.647, 0.0); // Orange color
                    vec3 colorValue = mix(colorInShadow, colorInSunlight, dotProduct);

                    // Set the final color
                    color = vec4(colorValue, 1.0);
                `
            }
        };
    }
}





            // Initialize DeckGL
            const deckgl = new DeckGL({
                container: 'container',
                initialViewState: {
                    longitude: -123.12, // Centered around Vancouver
                    latitude: 49.28,
                    zoom: 12,         
                    pitch: 45,        
                    bearing: 0
                },
                controller: true,
            });

            // SunLight setup
            let directionalLight = new _SunLight({
                timestamp: 1554927200000, 
                color: [255, 255, 255],
                intensity: 1.0,
                _shadow: true, // Enable shadows
            });

            // Lighting effect with shadows enabled
            const lightingEffect = new LightingEffect({ directionalLight });
            
            // Ground layer for shadows
            const groundLayer = new PolygonLayer({
                id: 'ground',
                data: [
                    {
                        position: [
                            [-123.465413, 49.534587], // Bottom-left
                            [-122.774587, 49.534587], // Top-left
                            [-122.774587, 48.925413], // Top-right
                            [-123.465413, 48.925413]  // Bottom-right
                        ]
                    }
                ],
                getPolygon: f => f.position,
                stroked: false,
                filled: true,
                getFillColor: [255, 0, 0, 40],
                shadowEnabled: true  // Enable shadows on the ground layer
            });

            // Fetch GeoJSON data
            async function fetchData() {
                const response = await fetch('https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json');
                const data = await response.json();
                return data;
            }

            // Redraw function to set layers and pass uniforms
            async function redraw() {
                const data = await fetchData();

                const lightDirection = directionalLight.direction;
                console.log(lightDirection); // Get light direction from _SunLight

                deckgl.setProps({
                    effects: [lightingEffect],   
                    layers: [
                        new GeoJsonLayer({
                            id: 'geojson-layer',
                            data: data,
                            filled: true,
                            extruded: true,      
                            getFillColor: [255, 255, 255], // Default color   
                            getElevation: f => f.properties.valuePerSqm ? f.properties.valuePerSqm * 0.1 : 0, // Calculate height based on valuePerSqm
                            pickable: true,
                            shadowEnabled: true,  // Enable shadows on buildings
                            extensions: [new NormalMapExtension()],
                            parameters: {depthTest: true},    // Enable depth test for shadows
                            autoHighlight: true,
                            updateTriggers: {
                                all: [lightDirection]  // Trigger shader update when light changes
                            },
                            // Pass light direction as uniform
                            uniforms: () => ({
                                uLightDirection: lightDirection
                            })
                        }),
                        groundLayer
                    ]
                });
            }

            // Initial draw call
            redraw();

            // Update light direction on slider input
            const slider = document.getElementById('timestamp-slider');
            slider.addEventListener('input', function(event) {
                const newTimestamp = parseInt(event.target.value, 10);
                directionalLight.timestamp = newTimestamp; // Update timestamp

                // Recalculate light direction and redraw
                redraw();
            });
        </script>
    </body>
    </html>
In this change the templight to uLightDirection
the problem that I see is that only the first instance of uLightDirection is passed to the shader that is (0,0,-1)
and when the slider changes the timestamp still the code uses this (0,0,-1) value and not the new value of ulightdirection that is being printed in the console
maybe you need to add certain attributes using attribute manager
and implement the draw() function