Skip to content
Engeenee
Blog

BabylonRenderer

Generic babylon.js renderer

Extends @geenee/armature!SceneRenderer for the babylon.js rendering engine. BabylonRenderer does basic initialization of engine, scene, and camera. It’s a generic class that should be parameterized by type of processing results to build an app using particular implementation of @geenee/armature!Processor.

Extends

Type Parameters

• ResultT extends object = object

Type of processing results

Constructors

new BabylonRenderer()

new BabylonRenderer<ResultT>(container, mode?, mirror?): BabylonRenderer<ResultT>

Constructor

Parameters

• container: HTMLElement

Container of @geenee/armature!ResponsiveCanvas

• mode?: CanvasMode

Fitting mode

• mirror?: boolean

Mirror the output

Returns

BabylonRenderer<ResultT>

Overrides

SceneRenderer.constructor

Properties

camera

protected camera: UniversalCamera

Camera instance

cameraAngle

protected cameraAngle: number

Camera vertical angle in radians

Inherited from

SceneRenderer.cameraAngle

cameraRatio

protected cameraRatio: number

Camera aspect ratio

Inherited from

SceneRenderer.cameraRatio

canvas

canvas: ResponsiveCanvas

Responsive canvas

Inherited from

SceneRenderer.canvas

current

current: null | WebGLTexture

Current image texture

Inherited from

SceneRenderer.current

input?

optional input: ImageTexture

Input image texture

Inherited from

SceneRenderer.input

loaded

protected loaded: boolean

Loaded state

Inherited from

SceneRenderer.loaded

padCtx

protected padCtx: [null | CanvasRenderingContext2D, null | CanvasRenderingContext2D]

Drawing context of padding canvases

Inherited from

SceneRenderer.padCtx

plugins

protected plugins: Plugin<ResultT>[]

Attached plugins

Inherited from

SceneRenderer.plugins

renderer

protected renderer: Engine

Rendering engine

scene?

optional scene: Scene

Renderer scene

Inherited from

SceneRenderer.scene

setupPadding()

protected setupPadding: () => void

Setup padding canvases

Callback sets up size of padding canvases.

Returns

void

Inherited from

SceneRenderer.setupPadding

shader?

protected optional shader: ShaderProgram

Rendering shader

Inherited from

SceneRenderer.shader

shaderCtx

shaderCtx: null | WebGL2RenderingContext

Context of the video canvas layer

Inherited from

SceneRenderer.shaderCtx

videoRatio

protected videoRatio: number

Aspect ratio of input video

Inherited from

SceneRenderer.videoRatio

videoSize

protected videoSize: Size

Resolution of input video

Inherited from

SceneRenderer.videoSize

Methods

addListener()

addListener<E>(event, listener): this

Adds the listener function to the end of the listeners array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

SceneRenderer.addListener

addPlugin()

addPlugin(plugin): Promise<void>

Add render plugin

Initializes the plugin if it’s not loaded yet but renderer is ready. Renderer takes ownership of the plugin instance meaning it will release it when plugin is detached or renderer is disposed itself.

Parameters

• plugin: Plugin<ResultT>

Returns

Promise<void>

Inherited from

SceneRenderer.addPlugin

dispose()

dispose(): void

Dispose renderer object

Extended to dispose scene and engine.

Returns

void

Overrides

SceneRenderer.dispose

emit()

emit<E>(event, …args): boolean

Synchronously calls each of the listeners registered for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• …args: Args<RendererEvents[E]>

Arguments passed to the listeners

Returns

boolean

True if the event had listeners, False otherwise

Inherited from

SceneRenderer.emit

eventNames()

eventNames(): (string | symbol)[]

List of emitter’s events

Returns

(string | symbol)[]

List of emitter’s events

Inherited from

SceneRenderer.eventNames

getMaxListeners()

getMaxListeners(): number

Maximum number of listeners per event

Returns

number

Maximum number of listeners per event

Inherited from

SceneRenderer.getMaxListeners

listenerCount()

listenerCount<E>(event): number

The number of listeners listening to the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

Returns

number

Number of listeners

Inherited from

SceneRenderer.listenerCount

listeners()

listeners<E>(event): Function[]

Copy of the array of listeners for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

SceneRenderer.listeners

load()

load(): Promise<void>

Initialize renderer

Initializes rendering context, shader program and buffers.

Returns

Promise<void>

Promise resolving when initialization is finished

Inherited from

SceneRenderer.load

off()

off<E>(event, listener): this

Removes the listener from the listener array for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

SceneRenderer.off

on()

on<E>(event, listener): this

Adds the listener function to the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

SceneRenderer.on

once()

once<E>(event, listener): this

Adds a one-time listener function for the event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

SceneRenderer.once

prependListener()

prependListener<E>(event, listener): this

Adds the listener function to the beginning of the listeners array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

SceneRenderer.prependListener

prependOnceListener()

prependOnceListener<E>(event, listener): this

Adds a one-time listener function to the beginning of the listeners array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

Inherited from

SceneRenderer.prependOnceListener

rawListeners()

rawListeners<E>(event): Function[]

Copy of the array of listeners for the event including wrappers

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

Returns

Function[]

Copy of the listeners array

Inherited from

SceneRenderer.rawListeners

removeAllListeners()

removeAllListeners<E>(event?): this

Removes all listeners, or those of the specified event

Type Parameters

• E extends keyof RendererEvents

Parameters

• event?: E

The name of the event

Returns

this

This EventEmitter

Inherited from

SceneRenderer.removeAllListeners

removeAllPlugins()

removeAllPlugins(): void

Remove all render plugins

Renderer will dispose all plugins before detaching them.

Returns

void

Inherited from

SceneRenderer.removeAllPlugins

removeListener()

removeListener<E>(event, listener): this

Removes the specified listener from the listener array

Type Parameters

• E extends keyof RendererEvents

Parameters

• event: E

The name of the event

• listener: RendererEvents[E]

The callback function

Returns

this

This EventEmitter

Inherited from

SceneRenderer.removeListener

removePlugin()

removePlugin(plugin): void

Remove render plugin

Renderer will dispose the plugin before detaching it.

Parameters

• plugin: Plugin<ResultT>

Returns

void

Inherited from

SceneRenderer.removePlugin

setMaxListeners()

setMaxListeners(n): this

Sets maximum number of listeners per event

Parameters

• n: number

Maximum number of listeners

Returns

this

This EventEmitter

Inherited from

SceneRenderer.setMaxListeners

setMirror()

setMirror(mirror): void

Set mirror mode

CanvasRenderer sets mirror mode of ResponsiveCanvas.

Parameters

• mirror: boolean

Mirror the output

Returns

void

Inherited from

SceneRenderer.setMirror

setMode()

setMode(mode): void

Set fitting mode

CanvasRenderer sets fitting mode of ResponsiveCanvas.

Parameters

• mode: CanvasMode

Fitting mode

Returns

void

Inherited from

SceneRenderer.setMode

setupCamera()

setupCamera(ratio, angle): void

Set camera parameters

Setups BabylonRenderer#camera instance according to parameters provided by @geenee/armature!Processor.

Parameters

• ratio: number

Aspect ration of input video

• angle: number

Vertical field of view in radians

Returns

void

Overrides

SceneRenderer.setupCamera

setupVideo()

setupVideo(size, ratio?): void

Set video parameters

Callback sets up size of video canvas layer, resizes texture and allocates new storage.

Parameters

• size: Size

Resolution of input video

• ratio?: number

Aspect ration of input video

Returns

void

Inherited from

SceneRenderer.setupVideo

unload()

unload(): void

Reset renderer

Releases all resources and instances created in load(). Releases rendering context, shader program and buffers.

Returns

void

Inherited from

SceneRenderer.unload

update()

update(result, stream): Promise<void>

Update the scene

Renderers input video frame on corresponding canvas layer.

Parameters

• result: ResultT

Results of video processing

• stream: HTMLCanvasElement

Captured video frame

Returns

Promise<void>

Promise resolving when update is finished

Inherited from

SceneRenderer.update

updatePads()

protected updatePads(stream): void

Update padding canvases

Updates padding canvases using portions of video frame.

Parameters

• stream: HTMLCanvasElement

Captured video frame

Returns

void

Inherited from

SceneRenderer.updatePads

updatePlugins()

protected updatePlugins(result, stream): Promise<void>

Update attached plugins

Calls update() of all attached plugins.

Parameters

• result: ResultT

Results of video processing

• stream: HTMLCanvasElement

Captured video frame

Returns

Promise<void>

Promise resolving when update is finished

Inherited from

SceneRenderer.updatePlugins

updateScene()

protected updateScene(): void

Update and render the scene

Virtual method updating and rendering 3D scene. For babylon.js engine calls this.scene.render().

Returns

void

Overrides

SceneRenderer.updateScene

updateVideo()

protected updateVideo(stream): void

Update the video layer

Calls rendering shaders with current input texture.

Parameters

• stream: HTMLCanvasElement

Captured video frame

Returns

void

Inherited from

SceneRenderer.updateVideo