<!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;
                    varying vec3 uLightDirection;
                `,
                'vs:#main-end': `
                    vNormal = normalize(geometry.normal); // Ensure normals are normalized
                `,
                'fs:#decl': `
                    varying vec3 vNormal;
                    varying vec3 uLightDirection;  // Light direction uniform
                `,
                'fs:DECKGL_FILTER_COLOR': `
                    // Normalize the light direction vector
                    vec3 lightDir = normalize(uLightDirection);

                    // Debugging: Output the normal and light direction
                    vec3 normal = normalize(vNormal);

                    // Check if lightDir is zero
                    if (length(lightDir) == 0.0) {
                        lightDir = vec3(1.0, 1.0, 1.0); // Fallback to a default direction
                    }

                    // Compute the dot product between normal and light direction
                    float dotProduct = dot(normal, lightDir);

                    // Interpolate between white (dotProduct = 1) and grey (dotProduct < 1)
                    vec3 colorValue = mix(vec3(0.5), vec3(1.0), dotProduct);

                    // Set the final color
                    color = vec4(colorValue, 1.0);
                    // lightDir = vec3(1.0, 1.0, 1.0); 
                    // color = vec4(lightDir, 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.01 : 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
                        updateTriggers: {
                            getFillColor: [lightDirection]  // Trigger shader update when light changes
                        },
                        // Pass light direction as uniform
                        getUniforms: () => ({
                            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>
this is my application that uses deckgl
i want to take the normal surface of the geojson buildings and the lighting direction from _sunlight to determine which faces of the buildings are in the direction of the sun
and colour them accorgdingly
but the problem is that all the buildings appear dark shade of black