Lighting and post-processing

• Add LightingEffect for extruded or mesh layers; flat points and text gain no shading.
• Set direction as the incoming light vector, not the light position.
• Order effects with lighting first and post-processing last in the effects array.

var ambient = new deck.AmbientLight({
  color: [255, 255, 255],
  intensity: 1.2
});

var sun = new deck.DirectionalLight({
  color: [255, 240, 214],
  intensity: 1.8,
  direction: [-1.2, -3, -1.6]
});

var lighting = new deck.LightingEffect({
  ambientLight: ambient,
  dirLight: sun
});

var hexLayer = new deck.HexagonLayer({
  id: 'density-lit',
  data: stations,
  getPosition: function (d) { return [d.lng, d.lat]; },
  radius: 800,
  extruded: true,
  elevationScale: 14,
  material: {
    ambient: 0.45,
    diffuse: 0.7,
    shininess: 32,
    specularColor: [80, 90, 100]
  }
});

new deck.Deck({
  container: 'map',
  initialViewState: { longitude: 116.40, latitude: 39.93, zoom: 10.5, pitch: 50 },
  controller: true,
  effects: [lighting],
  layers: [hexLayer]
});

import { PostProcessEffect } from '@deck.gl/core';
import { BloomEffect } from '@luma.gl/effects';

var bloom = new PostProcessEffect({
  effect: new BloomEffect()
});

var deckgl = new deck.Deck({
  container: 'map',
  initialViewState: { longitude: 116.40, latitude: 39.93, zoom: 10.5 },
  controller: true,
  effects: [lighting, bloom],
  layers: layers
});

• Lighting needs normals, so a custom layer with only positions stays flat.
• The picking buffer bypasses post-processing, so hover positions can look slightly off.