Visual effects system including lighting models, post-processing effects, and material properties for realistic 3D rendering.
Container effect that manages multiple light sources for 3D layer rendering.
class LightingEffect extends Effect {
constructor(props: {lights: Light[]});
/** Array of light sources */
lights: Light[];
}
interface Effect {
/** Unique effect identifier */
id: string;
/** Effect properties */
props: any;
/** Pre-render setup */
preRender(gl: WebGLRenderingContext, opts: PreRenderOptions): void;
/** Post-render cleanup */
postRender(gl: WebGLRenderingContext, opts: PostRenderOptions): void;
}
interface PreRenderOptions {
layers: Layer[];
layerFilter: Function;
viewports: Viewport[];
onViewportActive: Function;
views: View[];
}
interface PostRenderOptions {
layers: Layer[];
layerFilter: Function;
viewports: Viewport[];
}Different types of light sources for realistic 3D rendering.
/** Ambient light illuminates all surfaces equally */
class AmbientLight {
constructor(props: AmbientLightProps);
/** Light color */
color: Color;
/** Light intensity (0-1) */
intensity: number;
}
interface AmbientLightProps {
/** Light color [r, g, b] values 0-255 */
color?: Color;
/** Light intensity 0-1 */
intensity?: number;
}
/** Directional light simulates sunlight from infinite distance */
class DirectionalLight {
constructor(props: DirectionalLightProps);
/** Light color */
color: Color;
/** Light intensity */
intensity: number;
/** Light direction vector */
direction: [number, number, number];
}
interface DirectionalLightProps {
/** Light color [r, g, b] */
color?: Color;
/** Light intensity */
intensity?: number;
/** Direction vector [x, y, z] (will be normalized) */
direction?: [number, number, number];
}
/** Point light emanates from a specific position */
class PointLight {
constructor(props: PointLightProps);
/** Light color */
color: Color;
/** Light intensity */
intensity: number;
/** Light position */
position: Position;
/** Light attenuation with distance */
attenuation: [number, number, number];
}
interface PointLightProps {
/** Light color [r, g, b] */
color?: Color;
/** Light intensity */
intensity?: number;
/** Light position [x, y, z] */
position?: Position;
/** Attenuation coefficients [constant, linear, quadratic] */
attenuation?: [number, number, number];
}Base class for custom post-processing effects.
/**
* Base class for post-processing effects
*/
abstract class PostProcessEffect extends Effect {
constructor(id: string, props?: any);
/** Setup effect for rendering */
abstract setup(params: {gl: WebGLRenderingContext}): void;
/** Clean up effect resources */
abstract cleanup(params: {gl: WebGLRenderingContext}): void;
/** Render effect pass */
abstract render(params: {
gl: WebGLRenderingContext;
inputBuffer: any;
outputBuffer: any;
moduleParameters: any;
}): void;
}Material definitions for realistic surface rendering.
interface Material {
/** Ambient reflection coefficient (0-1) */
ambient?: number;
/** Diffuse reflection coefficient (0-1) */
diffuse?: number;
/** Shininess/specular exponent (0-128) */
shininess?: number;
/** Specular highlight color */
specularColor?: Color;
}Built-in shader modules for lighting calculations.
/** Gouraud lighting - per-vertex lighting */
declare const gouraudLighting: ShaderModule;
/** Phong lighting - per-pixel lighting */
declare const phongLighting: ShaderModule;
/** Shadow mapping for directional lights */
declare const shadow: ShaderModule;
interface ShaderModule {
name: string;
vs?: string;
fs?: string;
getUniforms?: (opts: any) => any;
dependencies?: ShaderModule[];
}Usage Examples:
import {Deck, ScatterplotLayer, LightingEffect, AmbientLight, DirectionalLight, PointLight} from 'deck.gl';
// Basic lighting setup
const ambientLight = new AmbientLight({
color: [255, 255, 255],
intensity: 0.1
});
const directionalLight = new DirectionalLight({
color: [255, 255, 255],
intensity: 0.8,
direction: [-1, -3, -1]
});
const pointLight = new PointLight({
color: [255, 255, 255],
intensity: 1.0,
position: [0, 0, 100],
attenuation: [1, 0.01, 0.001]
});
const lightingEffect = new LightingEffect({
lights: [ambientLight, directionalLight, pointLight]
});
const deck = new Deck({
canvas: 'deck-canvas',
initialViewState: {
longitude: -122.4,
latitude: 37.8,
zoom: 12,
pitch: 45
},
controller: true,
effects: [lightingEffect],
layers: [
new ScatterplotLayer({
id: 'points',
data: myData,
getPosition: d => d.coordinates,
getRadius: 100,
getFillColor: [255, 0, 0],
material: {
ambient: 0.2,
diffuse: 0.8,
shininess: 32,
specularColor: [255, 255, 255]
}
})
]
});
// Dynamic lighting
function updateLighting(timeOfDay) {
const sunIntensity = Math.max(0, Math.sin(timeOfDay * Math.PI / 12));
const moonIntensity = Math.max(0, -Math.sin(timeOfDay * Math.PI / 12)) * 0.3;
const sunLight = new DirectionalLight({
color: [255, 220, 180],
intensity: sunIntensity,
direction: [Math.cos(timeOfDay * Math.PI / 12), 0, -Math.sin(timeOfDay * Math.PI / 12)]
});
const moonLight = new DirectionalLight({
color: [200, 200, 255],
intensity: moonIntensity,
direction: [-Math.cos(timeOfDay * Math.PI / 12), 0, Math.sin(timeOfDay * Math.PI / 12)]
});
const lightingEffect = new LightingEffect({
lights: [ambientLight, sunLight, moonLight]
});
deck.setProps({effects: [lightingEffect]});
}type Light = AmbientLight | DirectionalLight | PointLight;
interface LightingUniforms {
lightSources: {
ambientLight: any;
directionalLights: any[];
pointLights: any[];
};
}