or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

aggregation-layers.mdcarto-integration.mdcore-api.mdeffects-lighting.mdextensions.mdgeo-layers.mdindex.mdintegration.mdjson-configuration.mdlayers.mdmesh-layers.mdviews-controllers.md
tile.json

effects-lighting.mddocs/

Effects and Lighting

Visual effects system including lighting models, post-processing effects, and material properties for realistic 3D rendering.

Capabilities

LightingEffect

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[];
}

Light Sources

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];
}

PostProcessEffect

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 Properties

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;
}

Shader Modules

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]});
}

Types

type Light = AmbientLight | DirectionalLight | PointLight;

interface LightingUniforms {
  lightSources: {
    ambientLight: any;
    directionalLights: any[];
    pointLights: any[];
  };
}