pex-renderer
Version:
Physically Based Renderer (PBR) and scene graph designed as ECS for PEX: define entities to be rendered as collections of components with their update orchestrated by systems.
1,095 lines (751 loc) • 103 kB
Markdown
# pex-renderer
[](https://www.npmjs.com/package/pex-renderer)
[](https://www.npmjs.com/package/pex-renderer)
[](https://bundlephobia.com/package/pex-renderer)
[](https://github.com/pex-gl/pex-renderer/blob/main/package.json)
[](https://github.com/microsoft/TypeScript)
[](https://conventionalcommits.org)
[](https://github.com/prettier/prettier)
[](https://github.com/eslint/eslint)
[](https://github.com/pex-gl/pex-renderer/blob/main/LICENSE.md)
Physically Based Renderer (PBR) and scene graph designed as ECS for [PEX](https://pex.gl): define entities to be rendered as collections of components with their update orchestrated by systems.
## Installation
```bash
npm install pex-renderer
```
## Usage
```js
import {
renderEngine as createRenderEngine,
world as createWorld,
entity as createEntity,
components,
} from "pex-renderer";
import createContext from "pex-context";
import { sphere } from "primitive-geometry";
const ctx = createContext({ pixelRatio: devicePixelRatio });
const renderEngine = createRenderEngine({ ctx });
const world = createWorld();
const cameraEntity = createEntity({
transform: components.transform({ position: [0, 0, 3] }),
camera: components.camera(),
orbiter: components.orbiter(),
});
world.add(cameraEntity);
const skyEntity = createEntity({
skybox: components.skybox({ sunPosition: [1, 0.5, 1] }),
reflectionProbe: components.reflectionProbe(),
});
world.add(skyEntity);
const geometryEntity = createEntity({
transform: components.transform({ position: [0, 0, 0] }),
geometry: components.geometry(sphere()),
material: components.material({
baseColor: [1, 0, 0, 1],
metallic: 0,
roughness: 0.5,
}),
});
world.add(geometryEntity);
ctx.frame(() => {
renderEngine.update(world.entities);
renderEngine.render(world.entities, cameraEntity);
});
```
## Architecture
- components are **plain old data** objects
- data lives in components or system caches
- systems are functions
- systems communicate through components
- system order is maintained by the user
## API
<!-- api-start -->
## Modules
<dl>
<dt><a href="#module_pex-renderer">pex-renderer</a></dt>
<dd></dd>
<dt><a href="#module_components">components</a></dt>
<dd></dd>
<dt><a href="#module_systems">systems</a></dt>
<dd></dd>
<dt><a href="#module_renderer">renderer</a></dt>
<dd></dd>
</dl>
## Typedefs
<dl>
<dt><a href="#Entity">Entity</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#AmbientLightComponentOptions">AmbientLightComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#AnimationComponentOptions">AnimationComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#AreaLightComponentOptions">AreaLightComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#AxesHelperComponentOptions">AxesHelperComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#BoundingBoxHelperComponentOptions">BoundingBoxHelperComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#CameraHelperComponentOptions">CameraHelperComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#CameraView">CameraView</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#CameraComponentOptions">CameraComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#DirectionalLightComponentOptions">DirectionalLightComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#GeometryComponentOptions">GeometryComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#GridHelperComponentOptions">GridHelperComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#LightHelperComponentOptions">LightHelperComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#TextureTransform">TextureTransform</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#MaterialComponentOptions">MaterialComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#LineMaterialComponentOptions">LineMaterialComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#MorphComponentOptions">MorphComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#OrbiterComponentOptions">OrbiterComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#PointLightComponentOptions">PointLightComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#SSAOComponentOptions">SSAOComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#DoFComponentOptions">DoFComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#MSAAComponentOptions">MSAAComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#AAComponentOptions">AAComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#FogComponentOptions">FogComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#BloomComponentOptions">BloomComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#LutComponentOptions">LutComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#ColorCorrectionComponentOptions">ColorCorrectionComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#VignetteComponentOptions">VignetteComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#FilmGrainComponentOptions">FilmGrainComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#PostProcessingComponentOptions">PostProcessingComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#ReflectionProbeComponentOptions">ReflectionProbeComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#SkinComponentOptions">SkinComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#SkyboxComponentOptions">SkyboxComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#SpotLightComponentOptions">SpotLightComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#TransformComponentOptions">TransformComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#VertexHelperComponentOptions">VertexHelperComponentOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#SystemOptions">SystemOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#SystemUpdate">SystemUpdate</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#SystemDispose">SystemDispose</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#System">System</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#RenderEngineOptions">RenderEngineOptions</a></dt>
<dd></dd>
<dt><a href="#RenderEngineRender">RenderEngineRender</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#RenderEngineDebug">RenderEngineDebug</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#RenderEngine">RenderEngine</a> : <code><a href="#System">System</a></code></dt>
<dd></dd>
<dt><a href="#RendererSystemRender">RendererSystemRender</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#RendererSystemStageOptions">RendererSystemStageOptions</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#RendererSystemStage">RendererSystemStage</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#RendererSystem">RendererSystem</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#WorldAdd">WorldAdd</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#WorldAddSystem">WorldAddSystem</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#WorldUpdate">WorldUpdate</a> : <code>function</code></dt>
<dd></dd>
<dt><a href="#World">World</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#RenderGraph">RenderGraph</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#ResourceCacheUsage">ResourceCacheUsage</a> : <code>"Transient"</code> | <code>"Retained"</code></dt>
<dd></dd>
<dt><a href="#ResourceCache">ResourceCache</a> : <code>object</code></dt>
<dd></dd>
<dt><a href="#RenderView">RenderView</a> : <code>object</code></dt>
<dd></dd>
</dl>
<a name="module_pex-renderer"></a>
## pex-renderer
- [pex-renderer](#module_pex-renderer)
- [.components](#module_pex-renderer.components) : [<code>components</code>](#module_components)
- [.systems](#module_pex-renderer.systems) : [<code>systems</code>](#module_systems)
- [.world()](#module_pex-renderer.world) ⇒ [<code>World</code>](#World)
- [.entity([components])](#module_pex-renderer.entity) ⇒ [<code>Entity</code>](#Entity)
- [.renderEngine()](#module_pex-renderer.renderEngine) ⇒ [<code>RenderEngine</code>](#RenderEngine)
- [.renderGraph(ctx)](#module_pex-renderer.renderGraph) ⇒ [<code>RenderGraph</code>](#RenderGraph)
- [.resourceCache(ctx)](#module_pex-renderer.resourceCache) ⇒ [<code>ResourceCache</code>](#ResourceCache)
<a name="module_pex-renderer.components"></a>
### pex-renderer.components : [<code>components</code>](#module_components)
All components as a function returning a component with default values.
**Kind**: static property of [<code>pex-renderer</code>](#module_pex-renderer)
<a name="module_pex-renderer.systems"></a>
### pex-renderer.systems : [<code>systems</code>](#module_systems)
All systems as a function returning a system with a type property and an update function.
**Kind**: static property of [<code>pex-renderer</code>](#module_pex-renderer)
<a name="module_pex-renderer.world"></a>
### pex-renderer.world() ⇒ [<code>World</code>](#World)
Create a world object to store entities and systems
**Kind**: static method of [<code>pex-renderer</code>](#module_pex-renderer)
<a name="module_pex-renderer.entity"></a>
### pex-renderer.entity([components]) ⇒ [<code>Entity</code>](#Entity)
Create an entity from an object of plain data components
**Kind**: static method of [<code>pex-renderer</code>](#module_pex-renderer)
| Param | Type | Default |
| ------------ | ------------------- | --------------- |
| [components] | <code>object</code> | <code>{}</code> |
<a name="module_pex-renderer.renderEngine"></a>
### pex-renderer.renderEngine() ⇒ [<code>RenderEngine</code>](#RenderEngine)
Create a render engine eg. a collection of systems for default rendering
**Kind**: static method of [<code>pex-renderer</code>](#module_pex-renderer)
<a name="module_pex-renderer.renderGraph"></a>
### pex-renderer.renderGraph(ctx) ⇒ [<code>RenderGraph</code>](#RenderGraph)
Create a render graph for rendering passes
**Kind**: static method of [<code>pex-renderer</code>](#module_pex-renderer)
| Param | Type |
| ----- | ---------------------------------------------- |
| ctx | <code>module:pex-context/types/index.js</code> |
<a name="module_pex-renderer.resourceCache"></a>
### pex-renderer.resourceCache(ctx) ⇒ [<code>ResourceCache</code>](#ResourceCache)
Create a resource cache for pex-context caching.
**Kind**: static method of [<code>pex-renderer</code>](#module_pex-renderer)
| Param | Type |
| ----- | ---------------------------------------------- |
| ctx | <code>module:pex-context/types/index.js</code> |
<a name="module_components"></a>
## components
- [components](#module_components)
- [.ambientLight([options])](#module_components.ambientLight) ⇒ <code>object</code>
- [.animation([options])](#module_components.animation) ⇒ <code>object</code>
- [.areaLight([options])](#module_components.areaLight) ⇒ <code>object</code>
- [.axesHelper([options])](#module_components.axesHelper) ⇒ <code>object</code>
- [.boundingBoxHelper([options])](#module_components.boundingBoxHelper) ⇒ <code>object</code>
- [.cameraHelper([options])](#module_components.cameraHelper) ⇒ <code>object</code>
- [.camera([options])](#module_components.camera) ⇒ <code>object</code>
- [.directionalLight([options])](#module_components.directionalLight) ⇒ <code>object</code>
- [.geometry([options])](#module_components.geometry) ⇒ <code>object</code>
- [.gridHelper([options])](#module_components.gridHelper) ⇒ <code>object</code>
- [.lightHelper([options])](#module_components.lightHelper) ⇒ <code>object</code>
- [.material([options])](#module_components.material) ⇒ <code>object</code>
- [.morph(options)](#module_components.morph) ⇒ <code>object</code>
- [.orbiter(options)](#module_components.orbiter) ⇒ <code>object</code>
- [.pointLight([options])](#module_components.pointLight) ⇒ <code>object</code>
- [.postProcessing([options])](#module_components.postProcessing) ⇒ <code>object</code>
- [.ssao([options])](#module_components.postProcessing.ssao) ⇒ <code>object</code>
- [.dof([options])](#module_components.postProcessing.dof) ⇒ <code>object</code>
- [.msaa([options])](#module_components.postProcessing.msaa) ⇒ <code>object</code>
- [.aa([options])](#module_components.postProcessing.aa) ⇒ <code>object</code>
- [.fog([options])](#module_components.postProcessing.fog) ⇒ <code>object</code>
- [.bloom([options])](#module_components.postProcessing.bloom) ⇒ <code>object</code>
- [.lut([options])](#module_components.postProcessing.lut) ⇒ <code>object</code>
- [.colorCorrection([options])](#module_components.postProcessing.colorCorrection) ⇒ <code>object</code>
- [.vignette([options])](#module_components.postProcessing.vignette) ⇒ <code>object</code>
- [.filmGrain([options])](#module_components.postProcessing.filmGrain) ⇒ <code>object</code>
- [.reflectionProbe([options])](#module_components.reflectionProbe) ⇒ <code>object</code>
- [.skin([options])](#module_components.skin) ⇒ <code>object</code>
- [.skybox([options])](#module_components.skybox) ⇒ <code>object</code>
- [.spotLight([options])](#module_components.spotLight) ⇒ <code>object</code>
- [.transform([options])](#module_components.transform) ⇒ <code>object</code>
- [.vertexHelper([options])](#module_components.vertexHelper) ⇒ <code>object</code>
<a name="module_components.ambientLight"></a>
### components.ambientLight([options]) ⇒ <code>object</code>
Ambient light component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------------- |
| [options] | [<code>AmbientLightComponentOptions</code>](#AmbientLightComponentOptions) |
<a name="module_components.animation"></a>
### components.animation([options]) ⇒ <code>object</code>
Animation component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------- |
| [options] | [<code>AnimationComponentOptions</code>](#AnimationComponentOptions) |
<a name="module_components.areaLight"></a>
### components.areaLight([options]) ⇒ <code>object</code>
Area light component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------- |
| [options] | [<code>AreaLightComponentOptions</code>](#AreaLightComponentOptions) |
<a name="module_components.axesHelper"></a>
### components.axesHelper([options]) ⇒ <code>object</code>
Axes helper component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ---------------------------------------------------------------------- |
| [options] | [<code>AxesHelperComponentOptions</code>](#AxesHelperComponentOptions) |
<a name="module_components.boundingBoxHelper"></a>
### components.boundingBoxHelper([options]) ⇒ <code>object</code>
Bounding box helper component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ------------------------------------------------------------------------------------ |
| [options] | [<code>BoundingBoxHelperComponentOptions</code>](#BoundingBoxHelperComponentOptions) |
<a name="module_components.cameraHelper"></a>
### components.cameraHelper([options]) ⇒ <code>object</code>
Camera helper component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------------- |
| [options] | [<code>CameraHelperComponentOptions</code>](#CameraHelperComponentOptions) |
<a name="module_components.camera"></a>
### components.camera([options]) ⇒ <code>object</code>
Camera component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------- |
| [options] | [<code>CameraComponentOptions</code>](#CameraComponentOptions) |
<a name="module_components.directionalLight"></a>
### components.directionalLight([options]) ⇒ <code>object</code>
Directional light component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ---------------------------------------------------------------------------------- |
| [options] | [<code>DirectionalLightComponentOptions</code>](#DirectionalLightComponentOptions) |
<a name="module_components.geometry"></a>
### components.geometry([options]) ⇒ <code>object</code>
Geometry component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ------------------------------------------------------------------ |
| [options] | [<code>GeometryComponentOptions</code>](#GeometryComponentOptions) |
<a name="module_components.gridHelper"></a>
### components.gridHelper([options]) ⇒ <code>object</code>
Grid helper component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ---------------------------------------------------------------------- |
| [options] | [<code>GridHelperComponentOptions</code>](#GridHelperComponentOptions) |
<a name="module_components.lightHelper"></a>
### components.lightHelper([options]) ⇒ <code>object</code>
Light helper component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ------------------------------------------------------------------------ |
| [options] | [<code>LightHelperComponentOptions</code>](#LightHelperComponentOptions) |
<a name="module_components.material"></a>
### components.material([options]) ⇒ <code>object</code>
Material component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| [options] | [<code>MaterialComponentOptions</code>](#MaterialComponentOptions) \| [<code>LineMaterialComponentOptions</code>](#LineMaterialComponentOptions) |
<a name="module_components.morph"></a>
### components.morph(options) ⇒ <code>object</code>
Morph component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| ------- | ------------------------------------------------------------ |
| options | [<code>MorphComponentOptions</code>](#MorphComponentOptions) |
<a name="module_components.orbiter"></a>
### components.orbiter(options) ⇒ <code>object</code>
Orbiter component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| ------- | ---------------------------------------------------------------- |
| options | [<code>OrbiterComponentOptions</code>](#OrbiterComponentOptions) |
<a name="module_components.pointLight"></a>
### components.pointLight([options]) ⇒ <code>object</code>
Point light component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ---------------------------------------------------------------------- |
| [options] | [<code>PointLightComponentOptions</code>](#PointLightComponentOptions) |
<a name="module_components.postProcessing"></a>
### components.postProcessing([options]) ⇒ <code>object</code>
Post Processing component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ------------------------------------------------------------------------------ |
| [options] | [<code>PostProcessingComponentOptions</code>](#PostProcessingComponentOptions) |
- [.postProcessing([options])](#module_components.postProcessing) ⇒ <code>object</code>
- [.ssao([options])](#module_components.postProcessing.ssao) ⇒ <code>object</code>
- [.dof([options])](#module_components.postProcessing.dof) ⇒ <code>object</code>
- [.msaa([options])](#module_components.postProcessing.msaa) ⇒ <code>object</code>
- [.aa([options])](#module_components.postProcessing.aa) ⇒ <code>object</code>
- [.fog([options])](#module_components.postProcessing.fog) ⇒ <code>object</code>
- [.bloom([options])](#module_components.postProcessing.bloom) ⇒ <code>object</code>
- [.lut([options])](#module_components.postProcessing.lut) ⇒ <code>object</code>
- [.colorCorrection([options])](#module_components.postProcessing.colorCorrection) ⇒ <code>object</code>
- [.vignette([options])](#module_components.postProcessing.vignette) ⇒ <code>object</code>
- [.filmGrain([options])](#module_components.postProcessing.filmGrain) ⇒ <code>object</code>
<a name="module_components.postProcessing.ssao"></a>
#### postProcessing.ssao([options]) ⇒ <code>object</code>
Post Processing SSAO subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | ---------------------------------------------------------- |
| [options] | [<code>SSAOComponentOptions</code>](#SSAOComponentOptions) |
<a name="module_components.postProcessing.dof"></a>
#### postProcessing.dof([options]) ⇒ <code>object</code>
Post Processing DoF subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | -------------------------------------------------------- |
| [options] | [<code>DoFComponentOptions</code>](#DoFComponentOptions) |
<a name="module_components.postProcessing.msaa"></a>
#### postProcessing.msaa([options]) ⇒ <code>object</code>
Post Processing MSAA subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | ---------------------------------------------------------- |
| [options] | [<code>MSAAComponentOptions</code>](#MSAAComponentOptions) |
<a name="module_components.postProcessing.aa"></a>
#### postProcessing.aa([options]) ⇒ <code>object</code>
Post Processing AA subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | ------------------------------------------------------ |
| [options] | [<code>AAComponentOptions</code>](#AAComponentOptions) |
<a name="module_components.postProcessing.fog"></a>
#### postProcessing.fog([options]) ⇒ <code>object</code>
Post Processing Fog subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | -------------------------------------------------------- |
| [options] | [<code>FogComponentOptions</code>](#FogComponentOptions) |
<a name="module_components.postProcessing.bloom"></a>
#### postProcessing.bloom([options]) ⇒ <code>object</code>
Post Processing Bloom subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | ------------------------------------------------------------ |
| [options] | [<code>BloomComponentOptions</code>](#BloomComponentOptions) |
<a name="module_components.postProcessing.lut"></a>
#### postProcessing.lut([options]) ⇒ <code>object</code>
Post Processing LUT subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | -------------------------------------------------------- |
| [options] | [<code>LutComponentOptions</code>](#LutComponentOptions) |
<a name="module_components.postProcessing.colorCorrection"></a>
#### postProcessing.colorCorrection([options]) ⇒ <code>object</code>
Post Processing Color Correction subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | -------------------------------------------------------------------------------- |
| [options] | [<code>ColorCorrectionComponentOptions</code>](#ColorCorrectionComponentOptions) |
<a name="module_components.postProcessing.vignette"></a>
#### postProcessing.vignette([options]) ⇒ <code>object</code>
Post Processing Vignette subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | ------------------------------------------------------------------ |
| [options] | [<code>VignetteComponentOptions</code>](#VignetteComponentOptions) |
<a name="module_components.postProcessing.filmGrain"></a>
#### postProcessing.filmGrain([options]) ⇒ <code>object</code>
Post Processing Film Grain subcomponent
**Kind**: static method of [<code>postProcessing</code>](#module_components.postProcessing)
| Param | Type |
| --------- | -------------------------------------------------------------------- |
| [options] | [<code>FilmGrainComponentOptions</code>](#FilmGrainComponentOptions) |
<a name="module_components.reflectionProbe"></a>
### components.reflectionProbe([options]) ⇒ <code>object</code>
Reflection probe component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------------------- |
| [options] | [<code>ReflectionProbeComponentOptions</code>](#ReflectionProbeComponentOptions) |
<a name="module_components.skin"></a>
### components.skin([options]) ⇒ <code>object</code>
Skin component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | ---------------------------------------------------------- |
| [options] | [<code>SkinComponentOptions</code>](#SkinComponentOptions) |
<a name="module_components.skybox"></a>
### components.skybox([options]) ⇒ <code>object</code>
Skybox component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------- |
| [options] | [<code>SkyboxComponentOptions</code>](#SkyboxComponentOptions) |
<a name="module_components.spotLight"></a>
### components.spotLight([options]) ⇒ <code>object</code>
Spot light component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------- |
| [options] | [<code>SpotLightComponentOptions</code>](#SpotLightComponentOptions) |
<a name="module_components.transform"></a>
### components.transform([options]) ⇒ <code>object</code>
Transform component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------- |
| [options] | [<code>TransformComponentOptions</code>](#TransformComponentOptions) |
<a name="module_components.vertexHelper"></a>
### components.vertexHelper([options]) ⇒ <code>object</code>
Vertex helper component
**Kind**: static method of [<code>components</code>](#module_components)
| Param | Type |
| --------- | -------------------------------------------------------------------------- |
| [options] | [<code>VertexHelperComponentOptions</code>](#VertexHelperComponentOptions) |
<a name="module_systems"></a>
## systems
- [systems](#module_systems)
- [.renderer](#module_systems.renderer) : [<code>renderer</code>](#module_renderer)
- [.animation()](#module_systems.animation) ⇒ [<code>System</code>](#System)
- [.camera()](#module_systems.camera) ⇒ [<code>System</code>](#System)
- [.geometry(options)](#module_systems.geometry) ⇒ [<code>System</code>](#System)
- [.layer()](#module_systems.layer) ⇒ [<code>System</code>](#System)
- [.light()](#module_systems.light) ⇒ [<code>System</code>](#System)
- [.morph()](#module_systems.morph) ⇒ [<code>System</code>](#System)
- [.reflectionProbe(options)](#module_systems.reflectionProbe) ⇒ [<code>System</code>](#System)
- [.skin()](#module_systems.skin) ⇒ [<code>System</code>](#System)
- [.skybox(options)](#module_systems.skybox) ⇒ [<code>System</code>](#System)
- [.transform()](#module_systems.transform) ⇒ [<code>System</code>](#System)
- [.renderPipeline(options)](#module_systems.renderPipeline) ⇒ [<code>System</code>](#System)
<a name="module_systems.renderer"></a>
### systems.renderer : [<code>renderer</code>](#module_renderer)
All renderer systems
**Kind**: static property of [<code>systems</code>](#module_systems)
<a name="module_systems.animation"></a>
### systems.animation() ⇒ [<code>System</code>](#System)
Animation system
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.camera"></a>
### systems.camera() ⇒ [<code>System</code>](#System)
Camera system
Adds:
- "\_orbiter" to orbiter components
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.geometry"></a>
### systems.geometry(options) ⇒ [<code>System</code>](#System)
Geometry system
Adds:
- "bounds" to geometry components
- "dirty" to geometry components properties
- "\_geometry" to entities as reference to internal cache
**Kind**: static method of [<code>systems</code>](#module_systems)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_systems.layer"></a>
### systems.layer() ⇒ [<code>System</code>](#System)
Layer system
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.light"></a>
### systems.light() ⇒ [<code>System</code>](#System)
Light system
Adds:
- "\_projectionMatrix" and "\_viewMatrix" to light components
- "\_direction" to directional and spot light components
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.morph"></a>
### systems.morph() ⇒ [<code>System</code>](#System)
Morph system
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.reflectionProbe"></a>
### systems.reflectionProbe(options) ⇒ [<code>System</code>](#System)
Reflection Probe system
Adds:
- "\_reflectionProbe" to reflectionProbe components
**Kind**: static method of [<code>systems</code>](#module_systems)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_systems.skin"></a>
### systems.skin() ⇒ [<code>System</code>](#System)
Skin system
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.skybox"></a>
### systems.skybox(options) ⇒ [<code>System</code>](#System)
Skybox system
Adds:
- "\_skyTexture" to skybox components with no envMap for skybox-renderer to render
- "\_skyTextureChanged" to skybox components for reflection-probe system
**Kind**: static method of [<code>systems</code>](#module_systems)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_systems.transform"></a>
### systems.transform() ⇒ [<code>System</code>](#System)
Transform system
Adds:
- "worldBounds", "dirty" and "aabbDirty" to transform components
- "\_transform" to entities as reference to internal cache
**Kind**: static method of [<code>systems</code>](#module_systems)
<a name="module_systems.renderPipeline"></a>
### systems.renderPipeline(options) ⇒ [<code>System</code>](#System)
Render pipeline system
Adds:
- "\_near", "\_far", "\_radiusUV" and "\_sceneBboxInLightSpace" to light components that cast shadows
- "\_shadowCubemap" to pointLight components and "\_shadowMap" to other light components
- "\_targets" to postProcessing components
**Kind**: static method of [<code>systems</code>](#module_systems)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_renderer"></a>
## renderer
- [renderer](#module_renderer)
- [.base()](#module_renderer.base) ⇒ [<code>RendererSystem</code>](#RendererSystem)
- [.basic(options)](#module_renderer.basic) ⇒ [<code>RendererSystem</code>](#RendererSystem)
- [.helper(options)](#module_renderer.helper) ⇒ [<code>RendererSystem</code>](#RendererSystem)
- [.line(options)](#module_renderer.line) ⇒ [<code>RendererSystem</code>](#RendererSystem)
- [.skybox(options)](#module_renderer.skybox) ⇒ [<code>RendererSystem</code>](#RendererSystem)
- [.standard(options)](#module_renderer.standard) ⇒ [<code>RendererSystem</code>](#RendererSystem)
<a name="module_renderer.base"></a>
### renderer.base() ⇒ [<code>RendererSystem</code>](#RendererSystem)
Base renderer
All renderers are composed with it.
**Kind**: static method of [<code>renderer</code>](#module_renderer)
<a name="module_renderer.basic"></a>
### renderer.basic(options) ⇒ [<code>RendererSystem</code>](#RendererSystem)
Basic renderer
**Kind**: static method of [<code>renderer</code>](#module_renderer)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_renderer.helper"></a>
### renderer.helper(options) ⇒ [<code>RendererSystem</code>](#RendererSystem)
Helper renderer
**Kind**: static method of [<code>renderer</code>](#module_renderer)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_renderer.line"></a>
### renderer.line(options) ⇒ [<code>RendererSystem</code>](#RendererSystem)
Line renderer
**Kind**: static method of [<code>renderer</code>](#module_renderer)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_renderer.skybox"></a>
### renderer.skybox(options) ⇒ [<code>RendererSystem</code>](#RendererSystem)
Skybox renderer
Renders a skybox (envMap or \_skyTexture) to screen or to reflection probes.
**Kind**: static method of [<code>renderer</code>](#module_renderer)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="module_renderer.standard"></a>
### renderer.standard(options) ⇒ [<code>RendererSystem</code>](#RendererSystem)
Standard renderer
**Kind**: static method of [<code>renderer</code>](#module_renderer)
| Param | Type |
| ------- | -------------------------------------------- |
| options | [<code>SystemOptions</code>](#SystemOptions) |
<a name="Entity"></a>
## Entity : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | <code>number</code> |
| [ambientLight] | [<code>AmbientLightComponentOptions</code>](#AmbientLightComponentOptions) |
| [animation] | [<code>AnimationComponentOptions</code>](#AnimationComponentOptions) \| [<code>Array.<AnimationComponentOptions></code>](#AnimationComponentOptions) |
| [areaLight] | [<code>AreaLightComponentOptions</code>](#AreaLightComponentOptions) |
| [axesHelper] | [<code>AxesHelperComponentOptions</code>](#AxesHelperComponentOptions) |
| [boundingBoxHelper] | [<code>BoundingBoxHelperComponentOptions</code>](#BoundingBoxHelperComponentOptions) |
| [cameraHelper] | [<code>CameraHelperComponentOptions</code>](#CameraHelperComponentOptions) |
| [camera] | [<code>CameraComponentOptions</code>](#CameraComponentOptions) |
| [directionalLight] | [<code>DirectionalLightComponentOptions</code>](#DirectionalLightComponentOptions) |
| [geometry] | [<code>GeometryComponentOptions</code>](#GeometryComponentOptions) |
| [gridHelper] | [<code>GridHelperComponentOptions</code>](#GridHelperComponentOptions) |
| [lightHelper] | [<code>LightHelperComponentOptions</code>](#LightHelperComponentOptions) |
| [material] | [<code>MaterialComponentOptions</code>](#MaterialComponentOptions) |
| [morph] | [<code>MorphComponentOptions</code>](#MorphComponentOptions) |
| [orbiter] | [<code>OrbiterComponentOptions</code>](#OrbiterComponentOptions) |
| [pointLight] | [<code>PointLightComponentOptions</code>](#PointLightComponentOptions) |
| [postProcessing] | [<code>PostProcessingComponentOptions</code>](#PostProcessingComponentOptions) |
| [reflectionProbe] | [<code>ReflectionProbeComponentOptions</code>](#ReflectionProbeComponentOptions) |
| [skin] | [<code>SkinComponentOptions</code>](#SkinComponentOptions) |
| [skybox] | [<code>SkyboxComponentOptions</code>](#SkyboxComponentOptions) |
| [spotLight] | [<code>SpotLightComponentOptions</code>](#SpotLightComponentOptions) |
| [transform] | [<code>TransformComponentOptions</code>](#TransformComponentOptions) |
| [vertexHelper] | [<code>VertexHelperComponentOptions</code>](#VertexHelperComponentOptions) |
<a name="AmbientLightComponentOptions"></a>
## AmbientLightComponentOptions : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ----------- | --------------------------------- | ------------------------- |
| [color] | <code>Array.<number></code> | <code>[1, 1, 1, 1]</code> |
| [intensity] | <code>number</code> | <code>1</code> |
<a name="AnimationComponentOptions"></a>
## AnimationComponentOptions : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ---------- | -------------------- | ------------------ |
| [playing] | <code>boolean</code> | <code>false</code> |
| [loop] | <code>boolean</code> | <code>false</code> |
| [time] | <code>number</code> | <code>0</code> |
| [channels] | <code>Array</code> | <code>[]</code> |
<a name="AreaLightComponentOptions"></a>
## AreaLightComponentOptions : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| --------------- | --------------------------------- | ------------------------- |
| [color] | <code>Array.<number></code> | <code>[1, 1, 1, 1]</code> |
| [intensity] | <code>number</code> | <code>1</code> |
| [disk] | <code>boolean</code> | <code>false</code> |
| [doubleSided] | <code>boolean</code> | <code>false</code> |
| [bias] | <code>number</code> | <code>0.1</code> |
| [bulbRadius] | <code>number</code> | <code>1</code> |
| [castShadows] | <code>boolean</code> | <code>true</code> |
| [shadowMapSize] | <code>number</code> | <code>2048</code> |
<a name="AxesHelperComponentOptions"></a>
## AxesHelperComponentOptions : <code>object</code>
**Kind**: global typedef
<a name="BoundingBoxHelperComponentOptions"></a>
## BoundingBoxHelperComponentOptions : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ------- | --------------------------------- | ------------------------- |
| [color] | <code>Array.<number></code> | <code>[1, 0, 0, 1]</code> |
<a name="CameraHelperComponentOptions"></a>
## CameraHelperComponentOptions : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type | Default |
| ------- | --------------------------------- | ------------------------- |
| [color] | <code>Array.<number></code> | <code>[1, 1, 1, 1]</code> |
<a name="CameraView"></a>
## CameraView : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type |
| ----------- | --------------------------------- |
| [totalSize] | <code>Array.<number></code> |
| [size] | <code>Array.<number></code> |
| [offset] | <code>Array.<number></code> |
<a name="CameraComponentOptions"></a>
## CameraComponentOptions : <code>object</code>
**Kind**: global typedef
**Properties**
| Name | Type | Default | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------- |
| [projection] | <code>"perspective"</code> \| <code>"orthographic"</code> | <code>"perspective"</code> | |
| [near] | <code>number</code> | <code>0.5</code> | |
| [far] | <code>number</code> | <code>1000</code> | |
| [aspect] | <code>number</code> | <code>1</code> | |
| [clearColor] | <code>module:pex-color~color</code> | | |
| [viewMatrix] | <code>mat4</code>