<commit_before># Guide to Using Lighting Effect

A deck.gl lighting effect is a visual approximation of environment illumination based on simplified models to make rendering appear more realistic.

To enable lighting in deck.gl, it is required that both the lighting effect and material instances are properly instantiated.

## Constructing A Lighting Effect Instance

A [LightingEffect](/docs/effects/lighting-effect.md) can be instantiated with a `lights` object:

```js
import {AmbientLight, PointLight, DirectionalLight, LightingEffect} from '@deck.gl/core';

// create ambient light source
const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});
// create point light source
const pointLight = new PointLight({
  color: [255, 255, 255],
  intensity: 2.0,
  // use coordinate system as the same as view state
  position: [-125, 50.5, 5000]
});
// create directional light source
const directionalLight = new DirectionalLight({<commit_msg>add embedded demo to lighting guide (#3048)<commit_after># Guide to Using Lighting Effect

A deck.gl lighting effect is a visual approximation of environment illumination based on simplified models to make rendering appear more realistic.

To enable lighting in deck.gl, it is required that both the lighting effect and material instances are properly instantiated.

<iframe height="450" style="width: 100%;" scrolling="no" title="deck.gl LightingEffect Demo" src="https://codepen.io/vis-gl/embed/ZZwrZz/?height=450&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/vis-gl/pen/ZZwrZz/'>deck.gl LightingEffect Demo</a> by vis.gl
  (<a href='https://codepen.io/vis-gl'>@vis-gl</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

*Interactive demo of LightingEffect*

## Constructing A Lighting Effect Instance

A [LightingEffect](/docs/effects/lighting-effect.md) can be instantiated with a `lights` object:

```js
import {AmbientLight, PointLight, DirectionalLight, LightingEffect} from '@deck.gl/core';

// create ambient light source
const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});
// create point light source
const pointLight = new PointLight({
  color: [255, 255, 255],
  intensity: 2.0,
  // use coordinate system as the same as view state
  position: [-125, 50.5, 5000]
});
// create directional light source
const directionalLight = new DirectionalLight({
{'fraction_non_alphanumeric': 0.11025848142164782, 'fraction_numerical': 0.031098546042003232, 'mean_word_length': 4.9975786924939465, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7376235', 'n_tokens_mistral': 791, 'n_tokens_neox': 700, 'n_words': 270}