USER
<!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() functionASSISTANT
To dynamically update the `uLightDirection` uniform in your shader based on the slider's input, you need to ensure that:
1. **The shader uses the `uLightDirection` uniform instead of a hardcoded `tempLightDirection`.**
2. **The uniform is correctly passed and updated within your DeckGL layer.**
Here's how you can achieve this:
### 1. Modify the `NormalMapExtension` to Use `uLightDirection`
Update your `NormalMapExtension` to declare and use the `uLightDirection` uniform instead of the hardcoded `tempLightDirection`. Here's the revised extension:
```javascript
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;
uniform vec3 uLightDirection; // Declare the uniform
`,
'fs:DECKGL_FILTER_COLOR': `
// Normalize the light direction vector
vec3 lightDir = normalize(uLightDirection);
// 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);
`
}
};
}
// Define the uniforms that this extension needs
initializeState() {
this.getShaders().modules = this.getShaders().modules || [];
}
// Pass the uniform to the shader
getUniforms(props) {
return {
uLightDirection: props.uLightDirection || [0, 0, -1]
};
}
}
```
### 2. Update the `GeoJsonLayer` to Pass the Updated `uLightDirection`
Ensure that the `GeoJsonLayer` correctly receives and updates the `uLightDirection` uniform whenever the light direction changes. Here's how you can adjust your `redraw` function and layer setup:
```javascript
// 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: {
// Trigger shader update when light changes
uLightDirection: lightDirection
},
// Pass light direction as uniform
uLightDirection: lightDirection
}),
groundLayer
]
});
}
```
### 3. Ensure `uLightDirection` is Updated When the Slider Changes
When the slider's value changes, update the `directionalLight`'s timestamp, which should, in turn, update the light direction. Ensure that the new `uLightDirection` is correctly passed to the layer:
```javascript
// 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();
});
```
### 4. Complete Revised HTML Code
Putting it all together, here's the complete revised HTML with the necessary changes:
```html
<!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;
uniform vec3 uLightDirection; // Declare the uniform
`,
'fs:DECKGL_FILTER_COLOR': `
// Normalize the light direction vector
vec3 lightDir = normalize(uLightDirection);
// 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);
`
}
};
}
getUniforms(props) {
return {
uLightDirection: props.uLightDirection || [0, 0, -1]
};
}
}
// 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('Light Direction:', 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: {
uLightDirection: lightDirection // Trigger shader update when light changes
},
// Pass light direction as uniform
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>
```
### 5. Explanation of Changes
1. **Shader Modification:**
- **Uniform Declaration:** Added `uniform vec3 uLightDirection;` to the fragment shader declarations.
- **Shader Logic:** Replaced `tempLightDirection` with `uLightDirection` to ensure the shader uses the dynamic light direction.
2. **LayerExtension Adjustments:**
- **Uniforms Passing:** Implemented `getUniforms` method to pass `uLightDirection` from the layer's props to the shader.
3. **GeoJsonLayer Configuration:**
- **Uniform Passing:** Added `uLightDirection` to the layer's props and `updateTriggers` to ensure the shader updates when the light direction changes.
4. **Redraw Function:**
- **Uniform Update:** The `redraw` function fetches the latest `lightDirection` from `directionalLight` and passes it to the `GeoJsonLayer`.
### 6. Additional Considerations
- **Performance Optimization:**
- **Layer Reuse:** Instead of creating a new `NormalMapExtension` instance on every redraw, consider initializing it once and reusing it.
- **Error Handling:**
- **Data Fetching:** Add error handling for the `fetchData` function to manage scenarios where the GeoJSON data might fail to load.
- **Uniform Validation:**
- **Light Direction:** Ensure `lightDirection` is always a normalized vector to prevent unexpected shading results.
### 7. Verifying the Changes
After implementing the above changes:
1. **Monitor the Console:**
- Ensure that the `console.log('Light Direction:', lightDirection);` correctly outputs the updated light direction based on the slider's value.
2. **Visual Verification:**
- Observe the buildings' colors updating in real-time as you move the slider, reflecting the changes in lighting based on the new `uLightDirection`.
3. **Shader Inspection:**
- Use browser developer tools to inspect the WebGL shader programs and verify that `uLightDirection` is being updated correctly.
By following these steps, your shader should now correctly receive and utilize the updated `uLightDirection` uniform, allowing dynamic lighting based on user input via the slider.