Norvell's Public Machinations

    webgl-strict-types
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    webgl-strict-types

    Strict types for WebGL and WebGL 2.0.

    The included TypeScript typings for WebGL type all enum parameters as generic GLenum = number, as indeed does the specification. This is too broad in basically all cases, for example, bindRenderbuffer(target: GLenum, buffer: WebGLRenderbuffer | null) accepts any number as target when in fact gl.RENDERBUFFER is the only valid value.

    A number of other cases can also be modelled more accurately, such as literal number types for some parameters, as well as preventing WebGLObject types (such as WebGLBuffer and WebGLRenderbuffer) from being assignable to each other.

    Installation

    npm install -D webgl-strict-types
    

    Usage

    You need to explicitly include the types in your compilation. Use a triple slash statement:

    /// <reference path="node_modules/webgl-strict-types/index.d.ts" />

    Alternatively, include them in your tsconfig:

    // tsconfig.json
    {
        includes: [
            'node_modules/webgl-strict-types/index.d.ts'
        ]
    }

    As TypeScript already comes with (less strict) typings for WebGL/WebGL2, and this can't override the existing typings, you need to cast the context explicitly:

    const gl = canvas.getContext('webgl') as any as WebGLRenderingContextStrict;
    
    // arrayBufferBinding is correctly inferred to be a WebGLBuffer
    const arrayBufferBinding = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
    
    // ERROR: Argument of type 'GLenum<"ARRAY_BUFFER">' is not assignable to parameter of type 'GLenum<"FRAMEBUFFER">'.
    gl.bindFramebuffer(gl.ARRAY_BUFFER, null)
    
    // You can use the defined types as follows:
    import GL = WebGLRenderingContextStrict;
    const WGL = WebGLRenderingContext as any as WebGLRenderingContextStrict.Constants;
    const bufferTarget: GL.BufferTarget = gl.ARRAY_BUFFER;
    const framebufferTarget: GL['FRAMEBUFFER'] = WGL.FRAMEBUFFER;
    
    // Without this lib, not an error:
    const webGLBuffer: WebGLBuffer = gl.createRenderbuffer();

    See the definition files webgl.d.ts and webgl2.d.ts for all available types.

    License

    MIT

    Install

    npm i webgl-strict-types

    DownloadsWeekly Downloads

    120

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    309 kB

    Total Files

    17

    Last publish

    Collaborators

    • narida