Introduction

This is a library targets 2D hardware-acclerated graphic rendering. This is useful in data presentation scenario

#Installation

npm i glovebox -S

#Example Custom Component

class Triangle extends Drawable {
    constructor() {
        super(
            `
                attribute vec2 a_position;
                attribute vec3 a_color;
                varying vec3 v_color;

                void main() {
                    gl_Position = projection(a_position);
                    v_color = a_color;
                }
            `,
            `
                varying vec3 v_color;
                uniform vec3 u_color;
                void main() {
                    gl_FragColor = vec4(v_color, 1.0);
                    //gl_FragColor = vec4(u_color, 1.0);
                }
            `
        );
        this._endIndex = 3;
        const colors = new Attribute(new Float32Array(9), Attribute.FLOAT, 3);
        colors.set(0, 1, 0, 0);
        colors.set(1, 0, 1, 0);
        colors.set(2, 0, 0, 1);

        const vertices = new Attribute(new Float32Array(6), Attribute.FLOAT, 2);
        vertices.set(0, 0, 0);
        vertices.set(1, 0, 100);
        vertices.set(2, 100, 100);

        this.attachAttribute('a_position', vertices);
        this.attachAttribute('a_color', colors);
    }
}

Components

Box

• constructor(width: number, height: number)
• width: number
• height: number
• color: number
• opacity: number

BoxImage

• constructor(texture: Texture, width: number, height: number)
• width: number
• height: number

LineMesh

• constructor(vertices: Vector2[], width: number)
• color: number
• opacity: number
• width: number

Text

• constructor(font: Font, text: string, height: number)
• color: number
• opacity: number
• readonly width: number
• height: number
• font: Font
• text: string

Sprite

• constructor(texture: Texture, tileWidth: number, tileHeight: number, width: number, height: number)
• width: number
• height: number
• tileWidth: number
• tileHeight: number
• xIndex: number
• yIndex: number

Polygon

• constructor(points: Vector2[]);
• color: number;
• opacity: number;
• points: Vector2[];

Core

All components inherited from Drawable

Drawable

• constructor(vertexShaderString: string, fragmentShaderString: string);
• readonly drawMethod: Constants.DrawMethod;
• readonly elementType: Constants.ElementType;
• readonly id: number, unique id, auto assigned.
• rotation: boolean, set component rotation, in radians
• scale: Vector2, set scale
• position: Vector2, et position
• zIndex: number
• protected _drawType: Constants.DrawType, set up draw type
• startIndex: number, draw vertices start at
• endIndx: number, draw vertices end at
• name: string, name of the component

Stage

Stage holds all components.

• constructor(width?: number, height?: number, canvas?: HTMLCanvasElement), use default canvas or your own
• add(child: Drawable), add child to stage
• remove(child: Drawable), remove child from stage
• clear(), clear stage
• camera: Vector2,
• scale: Vector2,
• clickTest(x: number, y: number): number, test if there is a component at given coordinates, 0 is returned if not, id is returned if true
• render(), render stage

Color

constructor(hex: number, opacity?: number)

• value: numebr, hex value of RGB color
• opacity, opacity
• readonly r: number
• readonly g: number
• readonly b: number

all set operations will trigger update/remount of attributes/uniforms

Attribute

• constructor(buffer: TypedArray, type: Constants.AttributeType, dataSize: number)
• set(index: number, ...data: number[]), set data at given index
• get(index: number): number[], get data at given index
• indexBuffer: Uint8Array | Uint16Array, index array for current vertex.
• replaceWith(buffer: TypedArray)

Uniform

• constructor(type: Constants.UniformType, size: number)
• set(...data: number[]), set uniform value
• get(): number[], get uniform value

ArrayUniform

• constructor(type: Constants.UniformType, size: number)
• set(index: number, ...data: number[]), set data at given index

MatrixUniform

• constructor(size: number)
• set(col: number, row: number, value: number), set data
• replace(buffer: Float32Array), replace data with array
• readonly size: number, get size
• get(col: number, row: number): number, get data

TextureUniform

all attributes come with default value (WebGl respected).

• constructor(image: Texture)
• image: Texture
• packAlignment: Constants.TextureAlignment
• unpackAlignment: Constants.TextureAlignment
• unpackFlipY: boolean
• unpackPremultiplyAlpha: boolean
• magFilter: Constants.TextureMagFilter
• minFilter: Constants.TextureMinFilter
• wrapS: Constants.TextureWrap
• wrapT: Constants.TextureWrap
• format: Constants.TextureFormat
• level: number
• texelFormat: Constants.TextureTexelFormat

Texture

• static loadTexture(src: string): Promise
• static fromImage(image: Constants.WebImage): Texture

Font

• static loadFont(src: string, fontSize: number): Promise

Constants

AttributeUsage

• STATIC_DRAW
• DYNAMIC_DRAW
• STREAM_DRAW

AttributeType

• BYTE
• UNSIGNED_BYTE
• SHORT
• UNSIGNED_SHORT
• FLOAT

DrawMethod

• ARRAYS
• ELEMENTS

ElementType

• UNSIGNED_BYTE
• UNSIGNED_SHORT

DrawType

• POINTS
• LINES
• LINE_STRIP
• LINE_LOOP
• TRIANGLES
• TRIANGLE_STRIP
• TRIANGLE_FAN

UniformType

• INT
• FLOAT

TextureMagFilter

• LINEAR
• NEAREST

TextureMinFilter

• LINEAR
• NEAREST_MIPMAP_NEAREST
• LINEAR_MIPMAP_NEAREST
• NEAREST_MIPMAP_LINEAR
• LINEAR_MIPMAP_LINEAR

TextureWrap

• REPEAT
• CLAMP_TO_EDGE
• MIRRORED_REPEAT

TextureFormat

• ALPHA
• RGB
• RGBA
• LUMINANCE
• LUMINANCE_ALPHA

TextureTexelFormat

• UNSIGNED_BYTE
• UNSIGNED_SHORT_5_6_5
• UNSIGNED_SHORT_4_4_4_4
• UNSIGNED_SHORT_5_5_5_1

type WebImage

• ImageData
• HTMLImageElement
• HTMLCanvasElement
• HTMLVideoElement

type TextureAlignment

• 1
• 2
• 4
• 8

type TypedArray

• Int8Array
• Uint8Array
• Int16Array
• Uint16Array
• Uint32Array
• Float32Array

Utils

ImageUtil

• static loadAsScaled(src: string): Promise
• static loadAsPadded(src: string, padColor: Color): Promise