Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Context

A controller for either a WebGLRenderingContext or WebGL2RenderingContext. It requests a context, tracks context attributes, extensions as well as multi frame specific rendering information and a (gpu)allocation registry.

An instance of Context can be created only implicitly by requesting a context given a canvas element and its dataset:

const element: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById(canvasID);
this.context = Context.request(element); // element.dataset is used for attributes

The context supports the following data-attributes:

data-backend: 'auto' | 'webgl' | 'webgl2'
data-accumulation-format: 'auto' | 'float' | 'half' | 'byte'

At run-time, cached context features can be queried without a performance impact, e.g., frequent extension-based branching:

if(this.context.supportsVertexArrayObject) {
    this.context.vertexArrayObject.bindVertexArrayOES(...);
    ...
}

For convenience, protected extension names such as EXT_frag_depth are not prefixed by an underscore.

Hierarchy

  • Context

Index

Constructors

Properties

Accessors

Methods

Constructors

Protected constructor

  • Context this is of type 'any' for now, since WebGL2RenderingContext not available but supported. This constructor is protected to enforce context creation using request. It queries extension support and configures context specifics for convenience, e.g., HALF_FLOAT format.

    Parameters

    Returns Context

Properties

Protected ANGLE_instanced_arrays

ANGLE_instanced_arrays: any

Protected ANGLE_instanced_arrays_supported

ANGLE_instanced_arrays_supported: boolean

Protected EXT_blend_minmax

EXT_blend_minmax: any

Protected EXT_blend_minmax_supported

EXT_blend_minmax_supported: boolean

Protected EXT_color_buffer_float

EXT_color_buffer_float: any

Protected EXT_color_buffer_float_supported

EXT_color_buffer_float_supported: boolean

Protected EXT_color_buffer_half_float

EXT_color_buffer_half_float: any

Protected EXT_color_buffer_half_float_supported

EXT_color_buffer_half_float_supported: boolean

Protected EXT_disjoint_timer_query

EXT_disjoint_timer_query: any

Protected EXT_disjoint_timer_query_supported

EXT_disjoint_timer_query_supported: boolean

Protected EXT_disjoint_timer_query_webgl2

EXT_disjoint_timer_query_webgl2: any

Protected EXT_disjoint_timer_query_webgl2_supported

EXT_disjoint_timer_query_webgl2_supported: boolean

Protected EXT_frag_depth

EXT_frag_depth: any

Protected EXT_frag_depth_supported

EXT_frag_depth_supported: boolean

Protected EXT_sRGB

EXT_sRGB: any

Protected EXT_sRGB_supported

EXT_sRGB_supported: boolean

Protected EXT_shader_texture_lod

EXT_shader_texture_lod: any

Protected EXT_shader_texture_lod_supported

EXT_shader_texture_lod_supported: boolean

Protected EXT_texture_filter_anisotropic

EXT_texture_filter_anisotropic: any

Protected EXT_texture_filter_anisotropic_supported

EXT_texture_filter_anisotropic_supported: boolean

Protected OES_element_index_uint

OES_element_index_uint: any

Protected OES_element_index_uint_supported

OES_element_index_uint_supported: boolean

Protected OES_standard_derivatives

OES_standard_derivatives: any

Protected OES_standard_derivatives_supported

OES_standard_derivatives_supported: boolean

Protected OES_texture_float

OES_texture_float: any

Protected OES_texture_float_linear

OES_texture_float_linear: any

Protected OES_texture_float_linear_supported

OES_texture_float_linear_supported: boolean

Protected OES_texture_float_supported

OES_texture_float_supported: boolean

Protected OES_texture_half_float

OES_texture_half_float: any

Protected OES_texture_half_float_linear

OES_texture_half_float_linear: any

Protected OES_texture_half_float_linear_supported

OES_texture_half_float_linear_supported: boolean

Protected OES_texture_half_float_supported

OES_texture_half_float_supported: boolean

Protected OES_vertex_array_object

OES_vertex_array_object: any

Protected OES_vertex_array_object_supported

OES_vertex_array_object_supported: boolean

Protected WEBGL_color_buffer_float

WEBGL_color_buffer_float: any

Protected WEBGL_color_buffer_float_supported

WEBGL_color_buffer_float_supported: boolean

Protected WEBGL_compressed_texture_astc

WEBGL_compressed_texture_astc: any

Protected WEBGL_compressed_texture_astc_supported

WEBGL_compressed_texture_astc_supported: boolean

Protected WEBGL_compressed_texture_atc

WEBGL_compressed_texture_atc: any

Protected WEBGL_compressed_texture_atc_supported

WEBGL_compressed_texture_atc_supported: boolean

Protected WEBGL_compressed_texture_etc

WEBGL_compressed_texture_etc: any

Protected WEBGL_compressed_texture_etc1

WEBGL_compressed_texture_etc1: any

Protected WEBGL_compressed_texture_etc1_supported

WEBGL_compressed_texture_etc1_supported: boolean

Protected WEBGL_compressed_texture_etc_supported

WEBGL_compressed_texture_etc_supported: boolean

Protected WEBGL_compressed_texture_pvrtc

WEBGL_compressed_texture_pvrtc: any

Protected WEBGL_compressed_texture_pvrtc_supported

WEBGL_compressed_texture_pvrtc_supported: boolean

Protected WEBGL_compressed_texture_s3tc

WEBGL_compressed_texture_s3tc: any

Protected WEBGL_compressed_texture_s3tc_srgb

WEBGL_compressed_texture_s3tc_srgb: any

Protected WEBGL_compressed_texture_s3tc_srgb_supported

WEBGL_compressed_texture_s3tc_srgb_supported: boolean

Protected WEBGL_compressed_texture_s3tc_supported

WEBGL_compressed_texture_s3tc_supported: boolean

Protected WEBGL_debug_renderer_info

WEBGL_debug_renderer_info: any

Protected WEBGL_debug_renderer_info_supported

WEBGL_debug_renderer_info_supported: boolean

Protected WEBGL_debug_shaders

WEBGL_debug_shaders: any

Protected WEBGL_debug_shaders_supported

WEBGL_debug_shaders_supported: boolean

Protected WEBGL_depth_texture

WEBGL_depth_texture: any

Protected WEBGL_depth_texture_supported

WEBGL_depth_texture_supported: boolean

Protected WEBGL_draw_buffers

WEBGL_draw_buffers: any

Protected WEBGL_draw_buffers_supported

WEBGL_draw_buffers_supported: boolean

Protected WEBGL_lose_context

WEBGL_lose_context: any

Protected WEBGL_lose_context_supported

WEBGL_lose_context_supported: boolean

Protected _allocationRegister

_allocationRegister: AllocationRegister = ...

Protected _attributes

_attributes: undefined | WebGLContextAttributes = ...

Cached attributes of the context.

Protected _backend

_backend: undefined | BackendType
see

backend

Protected _context

_context: undefined | WebGLRenderingContext | WebGL2RenderingContext

Created context. The actual type depends on the created context.

see

gl

Protected _extensions

_extensions: string[] = ...

Cached extension supported by the context.

Protected _gl2

_gl2: GL2Facade
see

gl2facade

Protected _mask

_mask: undefined | ContextMasquerade
see

mask

Static Protected Readonly DEFAULT_ATTRIBUTES

DEFAULT_ATTRIBUTES: { alpha: boolean; antialias: boolean; depth: boolean; failIfMajorPerformanceCaveat: boolean; premultipliedAlpha: boolean; preserveDrawingBuffer: boolean; stencil: boolean } = ...

Context creation attribute defaults. The defaults are taken directly from the spec.

Type declaration

  • alpha: boolean
  • antialias: boolean
  • depth: boolean
  • failIfMajorPerformanceCaveat: boolean
  • premultipliedAlpha: boolean
  • preserveDrawingBuffer: boolean
  • stencil: boolean

Accessors

allocationRegister

  • get allocationRegister(): AllocationRegister
  • The context's GPU allocation register for use of tracking memory allocations.

    Returns AllocationRegister

alpha

  • get alpha(): boolean

antialias

  • get antialias(): boolean

backend

  • The created rendering backend (webgl context type), either 'webgl' or 'webgl2' based on which one was created successfully. If no context could be created undefined is returned.

    Returns undefined | BackendType

    • Backend that was created on construction.

backendString

  • get backendString(): undefined | string
  • Provides a human-readable string of the backend.

    Returns undefined | string

blendMinmax

  • get blendMinmax(): any

colorBufferFloat

  • get colorBufferFloat(): any

colorBufferHalfFloat

  • get colorBufferHalfFloat(): any

compressedTextureASTC

  • get compressedTextureASTC(): any

compressedTextureATC

  • get compressedTextureATC(): any

compressedTextureETC

  • get compressedTextureETC(): any

compressedTextureETC1

  • get compressedTextureETC1(): any

compressedTexturePVRTC

  • get compressedTexturePVRTC(): any

compressedTextureS3TC

  • get compressedTextureS3TC(): any

compressedTextureS3TCSRGB

  • get compressedTextureS3TCSRGB(): any

debugRendererInfo

  • get debugRendererInfo(): any

debugShaders

  • get debugShaders(): any

depth

  • get depth(): boolean

depthTexture

  • get depthTexture(): any

disjointTimerQuery

  • get disjointTimerQuery(): any

disjointTimerQueryWebGL2

  • get disjointTimerQueryWebGL2(): any

drawBuffers

  • get drawBuffers(): any

elementIndexUint

  • get elementIndexUint(): any

extensions

  • get extensions(): string[]
  • Provides an array of all extensions supported by the used WebGL1/2 context.

    Returns string[]

failIfMajorPerformanceCaveat

  • get failIfMajorPerformanceCaveat(): boolean

fragDepth

  • get fragDepth(): any

gl

  • get gl(): any
  • Access to either the WebGLRenderingContext or WebGL2RenderingContext.

    Returns any

gl2facade

  • get gl2facade(): GL2Facade
  • WebGL2 facade for WebGL2 API like access to features mandatory to this engine.

    Returns GL2Facade

instancedArrays

  • get instancedArrays(): any

isWebGL1

  • get isWebGL1(): boolean
  • True if the context is a WebGL1 context, otherwise false.

    Returns boolean

isWebGL2

  • get isWebGL2(): boolean
  • True if the context is a WebGL2 context, otherwise false.

    Returns boolean

loseContext

  • get loseContext(): any

mask

premultipliedAlpha

  • get premultipliedAlpha(): boolean
  • link

    https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2 If the value is true the page compositor will assume the drawing buffer contains colors with premultiplied alpha. If the value is false the page compositor will assume that colors in the drawing buffer are not premultiplied. This flag is ignored if the alpha flag is false. See Premultiplied Alpha for more information on the effects of the premultipliedAlpha flag.

    Returns boolean

preserveDrawingBuffer

  • get preserveDrawingBuffer(): boolean
  • link

    https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2 If false, once the drawing buffer is presented as described in theDrawing Buffer section, the contents of the drawing buffer are cleared to their default values. All elements of the drawing buffer (color, depth and stencil) are cleared. If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.

    Returns boolean

sRGB

  • get sRGB(): any

shaderTextureLOD

  • get shaderTextureLOD(): any

standardDerivatives

  • get standardDerivatives(): any

stencil

  • get stencil(): boolean

supportsBlendMinmax

  • get supportsBlendMinmax(): boolean

supportsBlitFramebuffer

  • get supportsBlitFramebuffer(): boolean
  • True if WebGL2 blitFramebuffer is supported, false otherwise. This is experimental technology.

    Returns boolean

supportsColorBufferFloat

  • get supportsColorBufferFloat(): undefined | boolean

supportsColorBufferHalfFloat

  • get supportsColorBufferHalfFloat(): boolean

supportsCompressedTextureASTC

  • get supportsCompressedTextureASTC(): boolean

supportsCompressedTextureATC

  • get supportsCompressedTextureATC(): boolean

supportsCompressedTextureETC

  • get supportsCompressedTextureETC(): boolean

supportsCompressedTextureETC1

  • get supportsCompressedTextureETC1(): boolean

supportsCompressedTexturePVRTC

  • get supportsCompressedTexturePVRTC(): boolean

supportsCompressedTextureS3TC

  • get supportsCompressedTextureS3TC(): boolean

supportsCompressedTextureS3TCSRGB

  • get supportsCompressedTextureS3TCSRGB(): boolean

supportsDebugRendererInfo

  • get supportsDebugRendererInfo(): boolean

supportsDebugShaders

  • get supportsDebugShaders(): boolean

supportsDepthTexture

  • get supportsDepthTexture(): boolean

supportsDisjointTimerQuery

  • get supportsDisjointTimerQuery(): boolean

supportsDisjointTimerQueryWebGL2

  • get supportsDisjointTimerQueryWebGL2(): boolean

supportsDrawBuffers

  • get supportsDrawBuffers(): boolean

supportsElementIndexUint

  • get supportsElementIndexUint(): boolean

supportsFragDepth

  • get supportsFragDepth(): boolean

supportsInstancedArrays

  • get supportsInstancedArrays(): boolean

supportsLoseContext

  • get supportsLoseContext(): boolean

supportsReadBuffer

  • get supportsReadBuffer(): boolean
  • True if WebGL2 readBuffer is supported, false otherwise. This is experimental technology.

    Returns boolean

supportsSRGB

  • get supportsSRGB(): boolean

supportsShaderTextureLOD

  • get supportsShaderTextureLOD(): boolean

supportsStandardDerivatives

  • get supportsStandardDerivatives(): boolean

supportsTexImage3D

  • get supportsTexImage3D(): boolean
  • True if WebGL2 texImage3D draft is supported, false otherwise. This is experimental technology.

    Returns boolean

supportsTextureFilterAnisotropic

  • get supportsTextureFilterAnisotropic(): boolean

supportsTextureFloat

  • get supportsTextureFloat(): boolean

supportsTextureFloatLinear

  • get supportsTextureFloatLinear(): boolean

supportsTextureHalfFloat

  • get supportsTextureHalfFloat(): boolean

supportsTextureHalfFloatLinear

  • get supportsTextureHalfFloatLinear(): boolean

supportsVertexArrayObject

  • get supportsVertexArrayObject(): boolean

textureFilterAnisotropic

  • get textureFilterAnisotropic(): any

textureFloat

  • get textureFloat(): any

textureFloatLinear

  • get textureFloatLinear(): any

textureHalfFloat

  • get textureHalfFloat(): any

textureHalfFloatLinear

  • get textureHalfFloatLinear(): any

vertexArrayObject

  • get vertexArrayObject(): any

Methods

about

  • about(): [string, string | number][]
  • Queries various parameters (depending on the type of context and support of extensions) and returns them as formatted string.

    Returns [string, string | number][]

    • Array of 2-tuple containing (1) the queried enum as string and (2) the resulting parameter value.

aboutString

  • aboutString(): string

byteSizeOfFormat

  • byteSizeOfFormat(format: number): number
  • Provides the size in bytes of certain WebGL format enumerator. Please note that some byte sizes might vary based on context attributes or the bound render, thus, DEPTH_COMPONENT and DEPTH_STENCIL are not covered by this function. @see byteSizeOfFormat

    Parameters

    • format: number

    Returns number

enable

  • enable(extensions: string[]): void
  • Enable provided extensions. Each extension is only enabled if it is supported. Alternatively the extension can be queried for support and accessed (thereby enabled) directly. Thus, this function only acts as convenience interface for something like a mandatory extension configuration etc. Also, some extensions only effect GLSL capabilities and must be enabled explicitly without accessing the extension object.

    Parameters

    • extensions: string[]

      Array of extensions identifier that are to be enabled.

    Returns void

Protected extension

  • extension(out: any, extension: string): any
  • Returns the cached extensions object for the given extension identifier. If no extensions is cached, it is queried. Asserts if the extension is provided by default in the current backend, not supported in general, or unknown to the specification. Please not that the availability of an extension might be concealed by the context's mask.

    Parameters

    • out: any

      Member the extension object is cached into.

    • extension: string

      Extension identifier to query.

    Returns any

    • Extension object.

hash

  • hash(): string
  • Provides the context's extension hash. The hash can be used for context masquerade.

    Returns string

logAbout

  • Logs a well formated list of all queried about params (names and associated values).

    Parameters

    • verbosity: LogLevel = ...

      Log verbosity that is to be used for logging.

    Returns void

logAboutIf

  • logAboutIf(statement: boolean, verbosity?: LogLevel): void
  • Invokes logAbout @seelogAbout) iff the given statement has resolved to true.

    Parameters

    • statement: boolean

      Result of an expression expected to be true in order to invoke logPerformanceStop.

    • verbosity: LogLevel = ...

      Log verbosity that is to be used for logging.

    Returns void

param

  • param(pname: number): any

Protected queryAttributes

  • queryAttributes(): void

Protected queryExtensionSupport

  • queryExtensionSupport(): void
  • Queries all extensions for the current context and stores the result (supported or not supported). This is relevant to avoid continuous searches or regexp matching or substring queries in the complete extension string. Instead, the support is queried once and can be explicitly request in the public interface using properties.

    This function should get called only once per Context instance.

    Returns void

supports

  • supports(extension: string): boolean
  • Checks if the given extension is supported. Please note that a 'supports' call asserts whether or not the extension is related to the WebGL version. For example, the following code would lead to an Error:

    this.supports('ANGLE_instanced_arrays'); // asserts in WebGL2 since the extension is incorporated by default
    

    If the context is masked by a ContextMasquerade the support of an extension might be concealed.

    Parameters

    • extension: string

      Extension identifier to query support for.

    Returns boolean

    • True if the extension is supported, false otherwise.

Static Protected createMasqueradeFromGETorDataAttribute

  • createMasqueradeFromGETorDataAttribute(dataset: DOMStringMap): undefined | ContextMasquerade
  • Creates a masquerade object that can be used for debugging. This is intended to be called when requesting a context, i.e., before actually requesting it. For creation of a masquerade object, the following masquerade specifiers are evaluated in the following order:

    1. msqrd_h GET parameter,
    2. msqrd_p GET parameter,
    3. data-msqrd-h attribute of the canvas element, and, finally,
    4. data-msqrd-p attribute of the canvas element. If no specifier can be found, no object is created and undefined is returned.

    Parameters

    • dataset: DOMStringMap

      Dataset of the canvas element that might provide a data-msqrd-{h,p} attribute.

    Returns undefined | ContextMasquerade

    • Masquerade object when a specifier was found. If none was found undefined is returned.

Static request

  • request(element: HTMLCanvasElement, attributes?: WebGLContextAttributes): Context
  • Create a WebGL context. Note: this should only be called once in constructor, because the second and subsequent calls to getContext of an element will return null.

    Parameters

    • element: HTMLCanvasElement

      Canvas element to request context from.

    • attributes: WebGLContextAttributes = ...

      Overrides the internal default attributes @see{Context.DEFAULT_ATTRIBUTES}.

    Returns Context

    • Context providing either a WebGLRenderingContext, WebGL2RenderingContext.

Static Protected requestWebGL1

  • requestWebGL1(element: HTMLCanvasElement, attributes?: WebGLContextAttributes): undefined | WebGLRenderingContext
  • Helper that tries to create a WebGL 1 context (requests to 'webgl' and 'experimental-webgl' are made).

    Parameters

    • element: HTMLCanvasElement

      Canvas element to request context from.

    • attributes: WebGLContextAttributes = ...

      Overrides the internal default attributes @see{Context.CONTEXT_ATTRIBUTES}.

    Returns undefined | WebGLRenderingContext

    • WebGL context object or null.

Static Protected requestWebGL2

  • requestWebGL2(element: HTMLCanvasElement, attributes?: WebGLContextAttributes): undefined | WebGL2RenderingContext
  • Helper that tries to create a WebGL 2 context (requests to 'webgl2' and 'experimental-webgl2' are made).

    Parameters

    • element: HTMLCanvasElement

      Canvas element to request context from.

    • attributes: WebGLContextAttributes = ...

      Overrides the internal default attributes @see{Context.CONTEXT_ATTRIBUTES}.

    Returns undefined | WebGL2RenderingContext

    • WebGL2 context object or undefined.