Visual enhancement system including lighting models, shadows, and post-processing effects for creating realistic and visually appealing 3D visualizations.
Abstract base class for all visual effects in deck.gl.
/**
* Base class for all visual effects
* Handles pre-render and post-render processing
*/
abstract class Effect {
constructor(props?: any);
/** Called before layer rendering */
preRender(gl: WebGLRenderingContext, params: PreRenderOptions): void;
/** Called after layer rendering */
postRender(gl: WebGLRenderingContext, params: PostRenderOptions): void;
/** Clean up effect resources */
cleanup(): void;
}
interface PreRenderOptions {
/** Render layers pass */
layersPass: any;
/** View manager */
viewManager: any;
/** Effect manager */
effectManager: any;
}
interface PostRenderOptions {
/** Render layers pass */
layersPass: any;
/** View manager */
viewManager: any;
/** Effect manager */
effectManager: any;
}Comprehensive lighting system supporting multiple light types and realistic shading.
/**
* Lighting effect providing realistic shading and illumination
* Supports ambient, directional, and point lights
*/
class LightingEffect extends Effect {
constructor(props?: LightingEffectProps);
/** Add a light to the effect */
addLight(light: AmbientLight | DirectionalLight | PointLight): void;
/** Remove a light from the effect */
removeLight(light: AmbientLight | DirectionalLight | PointLight): void;
/** Get all lights */
getLights(): (AmbientLight | DirectionalLight | PointLight)[];
}
interface LightingEffectProps {
/** Array of light instances */
lights?: (AmbientLight | DirectionalLight | PointLight)[];
/** Enable shadows */
shadowColor?: Color;
}Usage Example:
import { Deck, LightingEffect, AmbientLight, DirectionalLight, PointLight } from "deck.gl";
const lightingEffect = new LightingEffect({
lights: [
new AmbientLight({
color: [255, 255, 255],
intensity: 0.3
}),
new DirectionalLight({
color: [255, 255, 255],
intensity: 0.8,
direction: [-1, -1, -1]
}),
new PointLight({
color: [255, 255, 255],
intensity: 1.0,
position: [0, 0, 100]
})
]
});
const deck = new Deck({
effects: [lightingEffect],
// ... other props
});Provides uniform illumination from all directions.
/**
* Ambient light providing uniform illumination
* Simulates light scattered by the atmosphere
*/
class AmbientLight {
constructor(props?: AmbientLightOptions);
}
interface AmbientLightOptions {
/** Light color */
color?: Color;
/** Light intensity (0-1) */
intensity?: number;
}Provides parallel light rays from a specific direction, like sunlight.
/**
* Directional light providing parallel rays
* Simulates distant light sources like the sun
*/
class DirectionalLight {
constructor(props?: DirectionalLightOptions);
}
interface DirectionalLightOptions {
/** Light color */
color?: Color;
/** Light intensity (0-1) */
intensity?: number;
/** Light direction vector */
direction?: [number, number, number];
/** Enable shadow casting */
_shadow?: boolean;
}Provides omnidirectional light from a specific position.
/**
* Point light radiating in all directions
* Simulates light bulbs or other point sources
*/
class PointLight {
constructor(props?: PointLightOptions);
}
interface PointLightOptions {
/** Light color */
color?: Color;
/** Light intensity */
intensity?: number;
/** Light position in world coordinates */
position?: [number, number, number];
/** Light attenuation factor */
attenuation?: number;
}/**
* Camera-attached light (experimental)
* Moves with the camera for consistent illumination
*/
class _CameraLight {
constructor(props?: CameraLightOptions);
}
/**
* Sun light with time-based positioning (experimental)
* Automatically calculates sun position based on time and location
*/
class _SunLight {
constructor(props?: SunLightOptions);
}
interface CameraLightOptions {
color?: Color;
intensity?: number;
}
interface SunLightOptions {
/** Timestamp for sun calculation */
timestamp: number;
/** Latitude for sun calculation */
latitude: number;
/** Longitude for sun calculation */
longitude: number;
color?: Color;
intensity?: number;
}Base class for screen-space post-processing effects.
/**
* Base class for post-processing effects
* Applies screen-space effects after layer rendering
*/
class PostProcessEffect extends Effect {
constructor(props?: PostProcessEffectProps);
}
interface PostProcessEffectProps {
/** Custom shader modules */
modules?: any[];
/** Effect parameters */
parameters?: {[key: string]: any};
}Material properties for controlling how surfaces interact with light.
interface Material {
/** Ambient reflection coefficient */
ambient?: number;
/** Diffuse reflection coefficient */
diffuse?: number;
/** Specular shininess exponent */
shininess?: number;
/** Specular reflection color */
specularColor?: Color;
}Usage Example:
import { PolygonLayer } from "deck.gl";
const layer = new PolygonLayer({
id: 'buildings',
data: buildingData,
extruded: true,
getElevation: d => d.height,
getFillColor: [255, 255, 255],
material: {
ambient: 0.2,
diffuse: 0.6,
shininess: 32,
specularColor: [255, 255, 255]
}
});import {
Deck,
PolygonLayer,
LightingEffect,
AmbientLight,
DirectionalLight,
_SunLight
} from "deck.gl";
// Create realistic lighting for architectural visualization
const lightingEffect = new LightingEffect({
lights: [
// Ambient light for general illumination
new AmbientLight({
color: [64, 128, 255], // Slightly blue for sky color
intensity: 0.2
}),
// Main sun light
new DirectionalLight({
color: [255, 255, 255],
intensity: 1.0,
direction: [-1, -1, -0.5], // From top-left
_shadow: true
}),
// Fill light from opposite direction
new DirectionalLight({
color: [255, 255, 255],
intensity: 0.3,
direction: [1, 1, -0.5]
})
]
});
const buildingLayer = new PolygonLayer({
id: 'buildings',
data: buildingData,
extruded: true,
getPolygon: d => d.polygon,
getElevation: d => d.height,
getFillColor: d => d.color,
material: {
ambient: 0.15,
diffuse: 0.7,
shininess: 16,
specularColor: [255, 255, 255]
}
});import { _SunLight } from "deck.gl";
function createTimeBasedLighting(timestamp: number, latitude: number, longitude: number) {
return new LightingEffect({
lights: [
new AmbientLight({
color: [64, 128, 255],
intensity: 0.15
}),
new _SunLight({
timestamp,
latitude,
longitude,
color: [255, 255, 255],
intensity: 1.0
})
]
});
}
// Update lighting based on time
const currentTime = Date.now();
const cityLat = 37.7749;
const cityLng = -122.4194;
const lightingEffect = createTimeBasedLighting(currentTime, cityLat, cityLng);// Create a scene with multiple point lights
const multiPointLighting = new LightingEffect({
lights: [
new AmbientLight({
color: [32, 32, 32],
intensity: 0.1
}),
// Street lamp 1
new PointLight({
color: [255, 200, 100], // Warm white
intensity: 2.0,
position: [-122.45, 37.75, 20],
attenuation: 0.01
}),
// Street lamp 2
new PointLight({
color: [255, 200, 100],
intensity: 2.0,
position: [-122.46, 37.76, 20],
attenuation: 0.01
}),
// Building spotlight
new PointLight({
color: [100, 200, 255], // Cool white
intensity: 3.0,
position: [-122.455, 37.755, 50],
attenuation: 0.005
})
]
});Shadow rendering is expensive and should be used sparingly:
// Enable shadows only for key directional lights
new DirectionalLight({
color: [255, 255, 255],
intensity: 1.0,
direction: [-1, -1, -1],
_shadow: true // Experimental shadow feature
});Use appropriate material values for performance:
// Efficient material for large datasets
const efficientMaterial = {
ambient: 0.2,
diffuse: 0.8,
shininess: 4, // Lower values are faster
specularColor: [255, 255, 255]
};
// High-quality material for hero objects
const qualityMaterial = {
ambient: 0.1,
diffuse: 0.6,
shininess: 64, // Higher values for realistic reflections
specularColor: [255, 255, 255]
};