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.

npm install pex-renderer

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

• 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

pex-renderer

components

systems

renderer

Entity : object

AmbientLightComponentOptions : object

AnimationComponentOptions : object

AreaLightComponentOptions : object

AxesHelperComponentOptions : object

BoundingBoxHelperComponentOptions : object

CameraHelperComponentOptions : object

CameraView : object

CameraComponentOptions : object

DirectionalLightComponentOptions : object

GeometryComponentOptions : object

GridHelperComponentOptions : object

LightHelperComponentOptions : object

TextureTransform : object

MaterialComponentOptions : object

LineMaterialComponentOptions : object

MorphComponentOptions : object

OrbiterComponentOptions : object

PointLightComponentOptions : object

SSAOComponentOptions : object

DoFComponentOptions : object

MSAAComponentOptions : object

AAComponentOptions : object

FogComponentOptions : object

BloomComponentOptions : object

LutComponentOptions : object

ColorCorrectionComponentOptions : object

VignetteComponentOptions : object

FilmGrainComponentOptions : object

PostProcessingComponentOptions : object

ReflectionProbeComponentOptions : object

SkinComponentOptions : object

SkyboxComponentOptions : object

SpotLightComponentOptions : object

TransformComponentOptions : object

VertexHelperComponentOptions : object

SystemOptions : object

SystemUpdate : function

SystemDispose : function

System : object

RenderEngineOptions

RenderEngineRender : function

RenderEngineDebug : function

RenderEngine : System

RendererSystemRender : function

RendererSystemStageOptions : object

RendererSystemStage : function

RendererSystem : object

WorldAdd : function

WorldAddSystem : function

WorldUpdate : function

World : object

RenderGraph : object

ResourceCacheUsage : "Transient" | "Retained"

ResourceCache : object

RenderView : object

• pex-renderer
  • .components : components
  • .systems : systems
  • .world() ⇒ World
  • .entity([components]) ⇒ Entity
  • .renderEngine() ⇒ RenderEngine
  • .renderGraph(ctx) ⇒ RenderGraph
  • .resourceCache(ctx) ⇒ ResourceCache

All components as a function returning a component with default values.

Kind: static property of pex-renderer

All systems as a function returning a system with a type property and an update function.

Kind: static property of pex-renderer

Create a world object to store entities and systems

Kind: static method of pex-renderer

Create an entity from an object of plain data components

Kind: static method of pex-renderer

Create a render engine eg. a collection of systems for default rendering

Kind: static method of pex-renderer

Create a render graph for rendering passes

Kind: static method of pex-renderer

Create a resource cache for pex-context caching.

Kind: static method of pex-renderer

• components
  • .ambientLight([options]) ⇒ object
  • .animation([options]) ⇒ object
  • .areaLight([options]) ⇒ object
  • .axesHelper([options]) ⇒ object
  • .boundingBoxHelper([options]) ⇒ object
  • .cameraHelper([options]) ⇒ object
  • .camera([options]) ⇒ object
  • .directionalLight([options]) ⇒ object
  • .geometry([options]) ⇒ object
  • .gridHelper([options]) ⇒ object
  • .lightHelper([options]) ⇒ object
  • .material([options]) ⇒ object
  • .morph(options) ⇒ object
  • .orbiter(options) ⇒ object
  • .pointLight([options]) ⇒ object
  • .postProcessing([options]) ⇒ object
    • .ssao([options]) ⇒ object
    • .dof([options]) ⇒ object
    • .msaa([options]) ⇒ object
    • .aa([options]) ⇒ object
    • .fog([options]) ⇒ object
    • .bloom([options]) ⇒ object
    • .lut([options]) ⇒ object
    • .colorCorrection([options]) ⇒ object
    • .vignette([options]) ⇒ object
    • .filmGrain([options]) ⇒ object
  • .reflectionProbe([options]) ⇒ object
  • .skin([options]) ⇒ object
  • .skybox([options]) ⇒ object
  • .spotLight([options]) ⇒ object
  • .transform([options]) ⇒ object
  • .vertexHelper([options]) ⇒ object

Ambient light component

Kind: static method of components

Animation component

Kind: static method of components

Area light component

Kind: static method of components

Axes helper component

Kind: static method of components

Bounding box helper component

Kind: static method of components

Camera helper component

Kind: static method of components

Camera component

Kind: static method of components

Directional light component

Kind: static method of components

Geometry component

Kind: static method of components

Grid helper component

Kind: static method of components

Light helper component

Kind: static method of components

Material component

Kind: static method of components

Morph component

Kind: static method of components

Orbiter component

Kind: static method of components

Point light component

Kind: static method of components

Post Processing component

Kind: static method of components

• .postProcessing([options]) ⇒ object
  • .ssao([options]) ⇒ object
  • .dof([options]) ⇒ object
  • .msaa([options]) ⇒ object
  • .aa([options]) ⇒ object
  • .fog([options]) ⇒ object
  • .bloom([options]) ⇒ object
  • .lut([options]) ⇒ object
  • .colorCorrection([options]) ⇒ object
  • .vignette([options]) ⇒ object
  • .filmGrain([options]) ⇒ object

Post Processing SSAO subcomponent

Kind: static method of postProcessing

Post Processing DoF subcomponent

Kind: static method of postProcessing

Post Processing MSAA subcomponent

Kind: static method of postProcessing

Post Processing AA subcomponent

Kind: static method of postProcessing

Post Processing Fog subcomponent

Kind: static method of postProcessing

Post Processing Bloom subcomponent

Kind: static method of postProcessing

Post Processing LUT subcomponent

Kind: static method of postProcessing

Post Processing Color Correction subcomponent

Kind: static method of postProcessing

Post Processing Vignette subcomponent

Kind: static method of postProcessing

Post Processing Film Grain subcomponent

Kind: static method of postProcessing

Reflection probe component

Kind: static method of components

Skin component

Kind: static method of components

Skybox component

Kind: static method of components

Spot light component

Kind: static method of components

Transform component

Kind: static method of components

Vertex helper component

Kind: static method of components

• systems
  • .renderer : renderer
  • .animation() ⇒ System
  • .camera() ⇒ System
  • .geometry(options) ⇒ System
  • .layer() ⇒ System
  • .light() ⇒ System
  • .morph() ⇒ System
  • .reflectionProbe(options) ⇒ System
  • .skin() ⇒ System
  • .skybox(options) ⇒ System
  • .transform() ⇒ System
  • .renderPipeline(options) ⇒ System

All renderer systems

Kind: static property of systems

Animation system

Kind: static method of systems

Camera system

Adds:

• "_orbiter" to orbiter components

Kind: static method of systems

Geometry system

Adds:

• "bounds" to geometry components
• "dirty" to geometry components properties
• "_geometry" to entities as reference to internal cache

Kind: static method of systems

Layer system

Kind: static method of systems

Light system

Adds:

• "_projectionMatrix" and "_viewMatrix" to light components
• "_direction" to directional and spot light components

Kind: static method of systems

Morph system

Kind: static method of systems

Reflection Probe system

Adds:

• "_reflectionProbe" to reflectionProbe components

Kind: static method of systems

Skin system

Kind: static method of systems

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 systems

Transform system

Adds:

• "worldBounds", "dirty" and "aabbDirty" to transform components
• "_transform" to entities as reference to internal cache

Kind: static method of systems

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 systems

• renderer
  • .base() ⇒ RendererSystem
  • .basic(options) ⇒ RendererSystem
  • .helper(options) ⇒ RendererSystem
  • .line(options) ⇒ RendererSystem
  • .skybox(options) ⇒ RendererSystem
  • .standard(options) ⇒ RendererSystem

Base renderer

All renderers are composed with it.

Kind: static method of renderer

Basic renderer

Kind: static method of renderer

Helper renderer

Kind: static method of renderer

Line renderer

Kind: static method of renderer

Skybox renderer

Renders a skybox (envMap or _skyTexture) to screen or to reflection probes.

Kind: static method of renderer

Standard renderer

Kind: static method of renderer

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef Properties

Kind: global typedef

Kind: global typedef Properties

Kind: global typedef Properties

MIT. See license file.