Class Context

The main rendering context. This is the effectively main entry point for the library. Typically you will create a single instance of this class using init() and use it to render your scene.

Properties

blendMode: "NORMAL" | "ADDITIVE" = 'NORMAL'

Blend mode for non-opaque instances 'NORMAL' is the default, 'ADDITIVE' is useful for particles and glowing effects

debug: boolean

Show extra debug details on the canvas

disableCulling: boolean = false

Backface culling

gamma: number

Gamma correction value, default 1.0

globalLight: LightDirectional

Global directional light

hud?: HUD

A HUD you can use to render HTML elements over the canvas

lights: LightPoint[]

All the dynamic point lights in the scene

physicsTimeStep: number

Set the fixed time step for physics stepping, only used when physicsWorld is set

physicsWorld?: World

Integration with cannon-es for physics, set the CANNON.World you are using here. When set, world stepping will be called for you in the core rendering loop

update: (delta: number, now?: number) => void = ...

The pre-render update function, called every frame. Hook in your custom logic and processing here

version: string = '0.0.0'

Accessors

  • get cameraName(): string
  • Get the name of the active camera

    Returns string

Methods

  • Add or replace a named camera to the scene

    Parameters

    • name: string

      Name of the camera

    • camera: Camera

      Camera instance

    Returns void

  • Create and build a custom model from a ModelBuilder and cache it for use

    Parameters

    • builder: ModelBuilder

      Builder with geometry and materials added

    • name: string

      Name of the model

    Returns void

  • Create an instance of a primitive cube

    Parameters

    • material: Material
    • size: number = 5
    • OptionaltilingFactor: number

    Returns Instance

  • Create an instance of a primitive cylinder

    Parameters

    • material: Material
    • r: number = 2
    • h: number = 5
    • subdivisionsR: number = 16
    • subdivisionsH: number = 1
    • caps: boolean = true

    Returns Instance

  • Create a new model instance, which should have been previously loaded into the cache

    Parameters

    • modelName: string

      Name of the model previously loaded into the cache, don't include the file extension

    • transparent: boolean = false

    Returns Instance

  • Create a new particle system in the scene

    Parameters

    • maxParticles: number = 1000

      Maximum number of particles to allow in the system

    • baseSize: number = 2

      Base size of the particles, default 2

    Returns { instance: Instance; particleSystem: ParticleSystem }

    Both the instance and the particle system

  • Create an instance of a primitive plane

    Parameters

    • material: Material

      Material to apply to the plane

    • width: number = 5

      Width of the plane

    • height: number = 5

      Height of the plane

    • subdivisionsW: number = 1

      Number of subdivisions along the width

    • subdivisionsH: number = 1

      Number of subdivisions along the height

    • tiling: number = 1

      Number of times to tile the texture over the plane

    Returns Instance

  • Create a new point light in the scene

    Parameters

    • position: XYZ

      Position of the light

    • colour: RGB = ...

      Colour of the light, defaults to white

    • intensity: number = 1

      Intensity of the light

    Returns LightPoint

    The new light object

  • Create an instance of a primitive sphere

    Parameters

    • material: Material

      Material to apply to the sphere

    • radius: number = 5

      Radius of the sphere

    • subdivisionsH: number = 16

      Number of subdivisions along the horizontal

    • subdivisionsV: number = 8

      Number of subdivisions along the vertical

    Returns Instance

  • Get a camera by name

    Parameters

    • name: string

      Name of the camera

    Returns undefined | Camera

  • Model loader, loads an OBJ model from a file via URL or path and adds it to the cache This is preferred over calling Model.parse() directly

    Parameters

    • path: string

      Base path to the model file, e.g. './renderable/'

    • fileName: string

      Name of the model file, e.g 'teapot.obj'

    • filterTextures: boolean = true

      Apply texture filtering as materials are loaded

    • flipY: boolean = false
    • flipUV: boolean = true

    Returns Promise<void>

  • Remove all instances from the scene

    Returns void

  • Remove any current EnvironmentMap from the scene

    Returns void

  • Remove instance from the scene, it will no longer be rendered

    Parameters

    Returns void

  • Render the scene from the given camera, used internally for rendering both the main view, but also shadow maps and dynamic env maps

    Parameters

    • camera: Camera
    • OptionalprogramOverride: ProgramInfo

    Returns void

  • Resize the canvas & viewport to match the size of the HTML element that contains it

    Parameters

    • viewportOnly: boolean = false

      Only resize the GL viewport, not the canvas, default false

    Returns void

  • Set the active camera, rendering will switch to this camera's view

    Parameters

    • name: string

      Name of the camera to set as active

    Returns void

  • Set and create a dynamic environment map which will enable dynamic/realtime reflections

    Parameters

    • position: XYZ

      Position to render reflections from

    • size: number = 256

      Size of the map to render, note higher sizes will come with a big performance hit

    • renderDistance: number = 500

    Returns void

  • Use bulit-in contrast post effect shader, which reduces the image to two solid colours

    Parameters

    • threshold: number = 0.2
    • darkColour: RGB = ...
    • lightColour: RGB = ...

    Returns void

  • Use a custom shader for post effects, user must provide their own shader

    Parameters

    • shaderCode: string

      GLSL shader code for the post effect

    Returns void

  • Use bulit-in duotone post effect shader for monotone images

    Parameters

    • colour1: RGB = ...

      First colour, default [0.15, 0.09, 0.309]

    • colour2: RGB = ...

      Second colour, default [0.96, 0.39, 0.407]

    • contrast: number = 1.5

      Contrast, default 1.5

    Returns void

  • Use bulit-in glitch post effect shader

    Parameters

    • amount: number = 0.01

      Amount of glitch, default 0.01

    Returns void

  • Use bulit-in noise post effect shader

    Parameters

    • amount: number = 0.2

      Amount of noise, default 0.1

    • speed: number = 5.0

      Speed of noise pattern, default 5.0

    Returns void

  • Use bulit-in scanlines post effect shader

    Parameters

    • density: number = 1.5

      Density of the scanlines, default 1.5

    • opacity: number = 0.5

      Opacity of the scanlines, default 0.5

    • noise: number = 0.2

      Noise level, default 0.2

    • flicker: number = 0.015

      Flicker ammount, default 0.015

    Returns void

  • Set the EnvironmentMap for the scene, will overwrite any existing envmap. This will enable static reflections and create a 'skybox' around the scene

    Parameters

    • renderAsBackground: boolean = false
    • ...textureURLs: string[]

      Array of 6 texture URLs to use for the map, in the order: +X, -X, +Y, -Y, +Z, -Z

    Returns void

  • Set the log level for the library

    Parameters

    • level: LogLevelNames

      Log level to set, default is 'info'

    Returns void

  • Start the rendering loop, without calling this nothing will render

    Returns void

  • Create & initialize a new Context which will render into provided canvas. This is where you start when using the library.

    Parameters

    • canvasSelector: string = 'canvas'

      CSS selector for canvas element, default is 'canvas'

    • antiAlias: boolean = true

      Enable anti-aliasing in the renderer, default is true

    • noHud: boolean = false

    Returns Promise<Context>