Skip to content

Latest commit

 

History

History
278 lines (229 loc) · 6.47 KB

README.md

File metadata and controls

278 lines (229 loc) · 6.47 KB

NPM version Dependencies

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