Skip to main content

publicRenderingEngine

A RenderingEngine takes care of the full pipeline of creating viewports and rendering them on a large offscreen canvas and transmitting this data back to the screen. This allows us to leverage the power of vtk.js whilst only using one WebGL context for the processing, and allowing us to share texture memory across on-screen viewports that show the same data.

Instantiating a rendering engine:

const renderingEngine = new RenderingEngine('pet-ct-rendering-engine');

There are various ways you can trigger a render on viewports. The simplest is to call render() on the rendering engine; however, it will trigger a render on all viewports. A more efficient way to do this is to call renderViewports([viewportId]) on the rendering engine to trigger a render on a specific viewport(s). Each viewport also has a .render method which can be used to trigger a render on that viewport.

Rendering engine uses detect-gpu external library to detect if GPU is available and it has minimum requirement to be able to render a volume with vtk.js. If GPU is not available RenderingEngine will throw an error if you try to render a volume; however, for StackViewports it is capable of falling back to CPU rendering for Stack images.

By default RenderingEngine will use vtk.js enabled pipeline for rendering viewports, however, if a custom rendering pipeline is specified by a custom viewport, it will be used instead. We use this custom pipeline to render a StackViewport on CPU using Cornerstone-legacy cpu rendering pipeline.

Implements

Index

Constructors

constructor

Properties

publichasBeenDestroyed

hasBeenDestroyed: boolean

A flag which tells if the renderingEngine has been destroyed

readonlyid

id: string

Unique identifier for renderingEngine

readonlyoffScreenCanvasContainer

offScreenCanvasContainer: any

publicoffscreenMultiRenderWindow

offscreenMultiRenderWindow: any

Methods

_debugRender

  • _debugRender(): void
  • Returns void

_downloadOffScreenCanvas

  • _downloadOffScreenCanvas(): void
  • Returns void

publicdestroy

  • destroy(): void
  • destroy the rendering engine. It will remove all the viewports and, if the rendering engine is using the GPU, it will also destroy the GPU resources.


    Returns void

publicdisableElement

  • disableElement(viewportId: string): void
  • Disables the requested viewportId from the rendering engine:

    1. It removes the viewport from the the list of viewports
    2. remove the renderer from the offScreen render window if using vtk.js driven rendering pipeline
    3. resetting the viewport to remove the canvas attributes and canvas data
    4. resize the offScreen appropriately (if using vtk.js driven rendering pipeline)

    Parameters

    • viewportId: string

      viewport Id

    Returns void

publicenableElement

  • Enables the requested viewport and add it to the viewports. It will properly create the Stack viewport or Volume viewport:

    1. Checks if the viewport is defined already, if yes, remove it first
    2. Checks if the viewport is using a custom rendering pipeline, if no, it calculates a new offscreen canvas with the new requested viewport
    3. Adds the viewport
    renderingEngine.enableElement({
    viewportId: viewportId,
    type: ViewportType.ORTHOGRAPHIC,
    element,
    defaultOptions: {
    orientation: Enums.OrientationAxis.AXIAL,
    background: [1, 0, 1],
    },
    })

    Parameters

    Returns void

publicfillCanvasWithBackgroundColor

  • fillCanvasWithBackgroundColor(canvas: HTMLCanvasElement, backgroundColor: [number, number, number]): void
  • Fill the canvas with the background color


    Parameters

    • canvas: HTMLCanvasElement

      The canvas element to draw on.

    • backgroundColor: [number, number, number]

      An array of three numbers between 0 and 1 that specify the red, green, and blue values of the background color.

    Returns void

publicgetStackViewports

  • Filters all the available viewports and return the stack viewports


    Returns default[]

    stack viewports registered on the rendering Engine

publicgetViewport

  • Returns the viewport by Id


    Parameters

    • viewportId: string

    Returns default | default

    viewport

publicgetViewports

  • getViewports Returns an array of all Viewports on the RenderingEngine instance.


    Returns (default | default)[]

    Array of viewports

publicgetVolumeViewports

  • Return all the viewports that are volume viewports


    Returns default[]

    An array of VolumeViewport objects.

publicrender

  • render(): void
  • Renders all viewports on the next animation frame.


    Returns void

publicrenderFrameOfReference

  • renderFrameOfReference(FrameOfReferenceUID: string): void
  • Renders any viewports viewing the given Frame Of Reference.


    Parameters

    • FrameOfReferenceUID: string

      The unique identifier of the Frame Of Reference.

    Returns void

publicrenderViewport

  • renderViewport(viewportId: string): void
  • Renders only a specific Viewport on the next animation frame.


    Parameters

    • viewportId: string

      The Id of the viewport.

    Returns void

publicrenderViewports

  • renderViewports(viewportIds: string[]): void
  • Renders the provided Viewport IDs.


    Parameters

    • viewportIds: string[]

    Returns void

publicresize

  • resize(immediate?: boolean, keepCamera?: boolean): void
  • Resizes the offscreen viewport and recalculates translations to on screen canvases. It is up to the parent app to call the resize of the on-screen canvas changes. This is left as an app level concern as one might want to debounce the changes, or the like.


    Parameters

    • immediate: boolean = true

      Whether all of the viewports should be rendered immediately.

    • keepCamera: boolean = true

      Whether to keep the camera for other viewports while resizing the offscreen canvas

    Returns void

publicsetViewports

  • It takes an array of viewport input objects including element, viewportId, type and defaultOptions. It will add the viewport to the rendering engine and enables them.

    renderingEngine.setViewports([
    {
    viewportId: axialViewportId,
    type: ViewportType.ORTHOGRAPHIC,
    element: document.getElementById('axialDiv'),
    defaultOptions: {
    orientation: Enums.OrientationAxis.AXIAL,
    },
    },
    {
    viewportId: sagittalViewportId,
    type: ViewportType.ORTHOGRAPHIC,
    element: document.getElementById('sagittalDiv'),
    defaultOptions: {
    orientation: Enums.OrientationAxis.SAGITTAL,
    },
    },
    {
    viewportId: customOrientationViewportId,
    type: ViewportType.ORTHOGRAPHIC,
    element: document.getElementById('customOrientationDiv'),
    defaultOptions: {
    orientation: { viewPlaneNormal: [0, 0, 1], viewUp: [0, 1, 0] },
    },
    },
    ])

    Parameters

    Returns void