pex-renderer/types/types.d.ts

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.

export type Entity = {
    id: number;
    ambientLight?: AmbientLightComponentOptions;
    animation?: (AnimationComponentOptions | AnimationComponentOptions[]);
    areaLight?: AreaLightComponentOptions;
    axesHelper?: AxesHelperComponentOptions;
    boundingBoxHelper?: BoundingBoxHelperComponentOptions;
    cameraHelper?: CameraHelperComponentOptions;
    camera?: CameraComponentOptions;
    directionalLight?: DirectionalLightComponentOptions;
    geometry?: GeometryComponentOptions;
    gridHelper?: GridHelperComponentOptions;
    lightHelper?: LightHelperComponentOptions;
    material?: MaterialComponentOptions;
    morph?: MorphComponentOptions;
    orbiter?: OrbiterComponentOptions;
    pointLight?: PointLightComponentOptions;
    postProcessing?: PostProcessingComponentOptions;
    reflectionProbe?: ReflectionProbeComponentOptions;
    skin?: SkinComponentOptions;
    skybox?: SkyboxComponentOptions;
    spotLight?: SpotLightComponentOptions;
    transform?: TransformComponentOptions;
    vertexHelper?: VertexHelperComponentOptions;
};
export type AmbientLightComponentOptions = {
    color?: number[];
    intensity?: number;
};
export type AnimationComponentOptions = {
    playing?: boolean;
    loop?: boolean;
    time?: number;
    channels?: any[];
};
export type AreaLightComponentOptions = {
    color?: number[];
    intensity?: number;
    disk?: boolean;
    doubleSided?: boolean;
    bias?: number;
    bulbRadius?: number;
    castShadows?: boolean;
    shadowMapSize?: number;
};
export type AxesHelperComponentOptions = object;
export type BoundingBoxHelperComponentOptions = {
    color?: number[];
};
export type CameraHelperComponentOptions = {
    color?: number[];
};
export type CameraView = {
    totalSize?: number[];
    size?: number[];
    offset?: number[];
};
export type CameraComponentOptions = {
    projection?: "perspective" | "orthographic";
    near?: number;
    far?: number;
    aspect?: number;
    clearColor?: any;
    viewMatrix?: mat4;
    invViewMatrix?: mat4;
    culling?: boolean;
    exposure?: number;
    toneMap?: "aces" | "agx" | "filmic" | "lottes" | "neutral" | "reinhard" | "reinhard2" | "uchimura" | "uncharted2" | "unreal";
    outputEncoding?: number;
    /**
     * Focal length of the camera lens [10mm - 200mm] in mm
     */
    focalLength?: number;
    /**
     * Ratio of camera lens opening, f-number, f/N, aperture [1.2 - 32] in mm
     */
    fStop?: number;
    /**
     * Physical camera sensor or film size [sensorWidth, sensorHeight] in mm
     */
    sensorSize?: number;
    /**
     * Matching of camera frame to sensor frame
     */
    sensorFit: "vertical" | "horizontal" | "fit" | "overscan" | "vertical";
    view?: CameraView;
    fov?: number;
    left?: number;
    right?: number;
    bottom?: number;
    top?: number;
    zoom?: number;
};
export type DirectionalLightComponentOptions = {
    color?: number[];
    intensity?: number;
    bias?: number;
    bulbRadius?: number;
    castShadows?: boolean;
    shadowMapSize?: number;
};
export type GeometryComponentOptions = {
    positions?: Float32Array;
    normals?: Float32Array;
    /**
     * Alias: texCoords/texCoords0
     */
    uvs?: Float32Array;
    /**
     * Alias: texCoords1
     */
    uvs1?: Float32Array;
    vertexColors?: Float32Array;
    cells?: (Uint16Array | Uint32Array);
    weights?: Float32Array;
    joints?: Float32Array;
    /**
     * Instanced
     */
    offsets?: Float32Array;
    /**
     * Instanced
     */
    rotations?: Float32Array;
    /**
     * Instanced
     */
    scales?: Float32Array;
    /**
     * Instanced
     */
    colors?: Float32Array;
    count?: number;
    multiDraw?: object;
    culled?: boolean;
    primitive?: ctx.Primitive;
};
export type GridHelperComponentOptions = {
    color?: number[];
    size?: number[];
};
export type LightHelperComponentOptions = object;
export type TextureTransform = {
    /**
     * [x, y]
     */
    offset?: number[];
    /**
     * angle in radians
     */
    rotation?: number;
    /**
     * [x, y]
     */
    scales?: number[];
};
export type MaterialComponentOptions = {
    unlit?: boolean;
    type?: undefined | "line";
    baseColor?: number[];
    emissiveColor?: number[];
    emissiveIntensity?: number;
    metallic?: number;
    roughness?: number;
    ior?: number;
    specular?: number;
    specularTexture?: ctx.texture2D | TextureTransform;
    specularColor?: number[];
    specularColorTexture?: ctx.texture2D | TextureTransform;
    baseColorTexture?: ctx.texture2D | TextureTransform;
    emissiveColorTexture?: ctx.texture2D | TextureTransform;
    normalTexture?: ctx.texture2D | TextureTransform;
    normalTextureScale?: number;
    roughnessTexture?: ctx.texture2D | TextureTransform;
    metallicTexture?: ctx.texture2D | TextureTransform;
    metallicRoughnessTexture?: ctx.texture2D | TextureTransform;
    occlusionTexture?: ctx.texture2D | TextureTransform;
    clearCoat?: number;
    clearCoatRoughness?: number;
    clearCoatTexture?: ctx.texture2D | TextureTransform;
    clearCoatRoughnessTexture?: ctx.texture2D | TextureTransform;
    clearCoatNormalTexture?: ctx.texture2D | TextureTransform;
    clearCoatNormalTextureScale?: number;
    sheenColor?: number[];
    sheenRoughness?: number;
    transmission?: number;
    transmissionTexture?: ctx.texture2D | TextureTransform;
    dispersion?: number;
    diffuseTransmission?: number;
    diffuseTransmissionTexture?: ctx.texture2D | TextureTransform;
    diffuseTransmissionColor?: number;
    diffuseTransmissionColorTexture?: ctx.texture2D | TextureTransform;
    thickness?: number;
    thicknessTexture?: ctx.texture2D | TextureTransform;
    attenuationDistance?: number;
    attenuationColor?: number[];
    alphaTest?: number;
    alphaTexture?: ctx.texture2D | TextureTransform;
    depthTest?: boolean;
    depthWrite?: boolean;
    depthFunc?: ctx.DepthFunc;
    blend?: boolean;
    blendSrcRGBFactor?: ctx.BlendFactor;
    blendSrcAlphaFactor?: ctx.BlendFactor;
    blendDstRGBFactor?: ctx.BlendFactor;
    blendDstAlphaFactor?: ctx.BlendFactor;
    cullFace?: boolean;
    cullFaceMode?: ctx.Face;
    pointSize?: number;
    castShadows?: boolean;
    receiveShadows?: boolean;
};
export type LineMaterialComponentOptions = {
    type?: "line";
    baseColor?: number[];
    lineWidth?: number;
    lineResolution?: number;
};
export type MorphComponentOptions = {
    sources: object;
    targets: object;
    current?: object;
    weights?: any[];
};
export type OrbiterComponentOptions = {
    element?: HTMLElement;
    target?: number[];
    lat?: number;
    lon?: number;
    distance?: number;
};
export type PointLightComponentOptions = {
    color?: number[];
    intensity?: number;
    range?: number;
    bulbRadius?: number;
    castShadows?: boolean;
    shadowMapSize?: number;
};
export type SSAOComponentOptions = {
    type?: "sao" | "gtao";
    noiseTexture?: boolean;
    mix?: number;
    samples?: number;
    intensity?: number;
    /**
     * meters
     */
    radius?: number;
    blurRadius?: number;
    blurSharpness?: number;
    brightness?: number;
    /**
     * // SSAO
     */
    contrast?: number;
    /**
     * centimeters
     */
    bias?: number;
    /**
     * // GTAO
     */
    spiralTurns?: number;
    slices?: number;
    colorBounce?: number;
    colorBounceIntensity?: number;
};
export type DoFComponentOptions = {
    /**
     * Gustafsson uses a spiral pattern while Upitis uses a circular one.
     */
    type?: "gustafsson" | "upitis";
    /**
     * Use camera f-stop and focal length
     */
    physical?: boolean;
    /**
     * The point to focus on in meters.
     */
    focusDistance?: number;
    /**
     * Non physically based value for artistic control when physical is false, otherwise act as an fStop divider. Larger aperture (ie, smaller f-stop) or larger focal length (smaller fov) = smaller depth of field = more blur.
     */
    focusScale?: number;
    /**
     * Read the depth buffer to find the first intersecting object to focus on instead of a fixed focus distance.
     */
    focusOnScreenPoint?: boolean;
    /**
     * The normalized screen point to focus on when "focusOnScreenPoint" is true.
     */
    screenPoint?: number[];
    /**
     * Amount of RGB separation
     */
    chromaticAberration?: number;
    /**
     * Threshold for out of focus hightlights
     */
    luminanceThreshold?: number;
    /**
     * Gain for out of focus hightlights
     */
    luminanceGain?: number;
    /**
     * Iteration steps. More steps means better blur but also degraded performances.
     */
    samples?: number;
    /**
     * The bokeh shape for type "upitis".
     */
    shape?: "disk" | "pentagon";
    debug?: boolean;
};
export type MSAAComponentOptions = {
    /**
     * Multisample anti-aliasing samples: 1 or 4.
     */
    sampleCount?: number;
};
export type AAComponentOptions = {
    /**
     * Higher = softer. Helps mitigate fireflies but will blur small details.
     */
    subPixelQuality?: number;
    /**
     * For edge luma threshold: 0 to 4.
     */
    quality?: number;
};
export type FogComponentOptions = {
    color?: number[];
    start?: number;
    density?: number;
    sunPosition?: number[];
    sunDispertion?: number;
    sunIntensity?: number;
    sunColor?: number[];
    inscatteringCoeffs?: number[];
};
export type BloomComponentOptions = {
    /**
     * The bloom quality: 0 or 1 (0 is faster but flickers)
     */
    quality?: number;
    /**
     * The function used to determine the brightness of a pixel for the threshold.
     */
    colorFunction?: "luma" | "luminance" | "average";
    /**
     * The brightness value at which pixels are filtered out for the threshold.
     */
    threshold?: number;
    /**
     * The source texture for the threshold.
     */
    source?: "color" | "emissive";
    /**
     * The strength of the bloom effect.
     */
    intensity?: number;
    /**
     * The downsampling radius which controls how much glare gets blended in.
     */
    radius?: number;
};
export type LutComponentOptions = {
    texture: ctx.texture2D;
};
export type ColorCorrectionComponentOptions = {
    brightness?: number;
    contrast?: number;
    saturation?: number;
    hue?: number;
};
export type VignetteComponentOptions = {
    radius?: number;
    intensity?: number;
};
export type FilmGrainComponentOptions = {
    quality?: number;
    size?: number;
    intensity?: number;
    colorIntensity?: number;
    luminanceIntensity?: number;
    speed?: number;
};
export type PostProcessingComponentOptions = {
    ssao?: SSAOComponentOptions;
    dof?: DoFComponentOptions;
    aa?: AAComponentOptions;
    fog?: FogComponentOptions;
    bloom?: BloomComponentOptions;
    lut?: LutComponentOptions;
    colorCorrection?: ColorCorrectionComponentOptions;
    vignette?: VignetteComponentOptions;
    filmGrain?: FilmGrainComponentOptions;
    opacity: number;
};
export type ReflectionProbeComponentOptions = {
    size?: number;
};
export type SkinComponentOptions = object;
export type SkyboxComponentOptions = {
    sunPosition?: number[];
    envMap?: ctx.texture2D;
    backgroundBlur?: boolean;
    exposure?: number;
    turbidity?: number;
    rayleigh?: number;
    mieCoefficient?: number;
    mieDirectionalG?: number;
};
export type SpotLightComponentOptions = {
    color?: number[];
    intensity?: number;
    angle?: number;
    innerAngle?: number;
    range?: number;
    bias?: number;
    bulbRadius?: number;
    castShadows?: boolean;
    shadowMapSize?: number;
};
export type TransformComponentOptions = {
    position?: number[];
    rotation?: number[];
    scale?: number[];
};
export type VertexHelperComponentOptions = {
    color?: number[];
    size?: number[];
    attribute?: string;
};
export type SystemOptions = {
    ctx: typeof import("pex-context/types/index.js");
    resourceCache?: ResourceCache;
    renderGraph?: RenderGraph;
};
export type SystemUpdate = (entities: Entity[], deltaTime?: number) => any;
export type SystemDispose = (entities: Entity[]) => any;
export type System = {
    type: string;
    cache: object;
    debug: boolean;
    update: SystemUpdate;
    dispose: SystemDispose;
};
export type RenderEngineOptions = {
    width: number;
    height: number;
    renderers: System[];
    drawToScreen: boolean;
};
export type RenderEngineRender = (entities: Entity[], cameraEntities: Entity[], options?: RenderEngineOptions) => any;
export type RenderEngineDebug = (enable: boolean) => any;
export type RenderEngine = System;
export type RendererSystemRender = (renderView: RenderView, entities: Entity | Entity[], options?: object) => any;
export type RendererSystemStageOptions = {
    attachmentsLocations?: object;
    shadowMappingLight?: object;
    backgroundColorTexture?: ctx.texture2D;
    renderingToReflectionProbe?: boolean;
};
export type RendererSystemStage = (renderView: RenderView[], entities: Entity[], options: RendererSystemStageOptions) => any;
export type RendererSystem = {
    type: string;
    cache: object;
    debug: boolean;
    flagDefinitions: any[][];
    update: SystemUpdate;
    dispose: SystemDispose;
    render: RendererSystemRender;
    renderBackground?: RendererSystemStage;
    renderShadow?: RendererSystemStage;
    renderOpaque?: RendererSystemStage;
    renderTransparent?: RendererSystemStage;
    renderPost?: RendererSystemStage;
};
export type WorldAdd = (entity: Entity) => any;
export type WorldAddSystem = (system: System) => any;
export type WorldUpdate = (deltaTime?: number) => any;
export type World = {
    entities: object[];
    systems: object[];
    add: WorldAdd;
    addSystem: WorldAddSystem;
    update: WorldUpdate;
};
export type RenderGraph = {
    renderPasses: object[];
    beginFrame: Function;
    renderPass: Function;
    endFrame: Function;
};
export type ResourceCacheUsage = "Transient" | "Retained";
export type ResourceCache = {
    beginFrame: Function;
    endFrame: Function;
    dispose: Function;
    Usage: ResourceCacheUsage;
};
export type RenderView = {
    camera: object;
    cameraEntity: Entity;
    viewport: import("pex-context/types/types").Viewport;
    exposure?: object;
    outputEncoding?: object;
};