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
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