UNPKG

modern-canvas

Version:

A JavaScript WebGL rendering engine.

1,410 lines (1,340 loc) 131 kB
import { Font } from 'modern-font'; import { EventListenerOptions as EventListenerOptions$1, EventListenerValue, EventEmitter, PropertyDeclaration, ReactiveObject, ReactiveObjectPropertyAccessorContext, Color as Color$1, RawWeakMap as RawWeakMap$1, LinearGradient, RadialGradient, NormalizedFill, Fill, NormalizedBackground, Background, NormalizedForeground, Foreground, NormalizedOutline, Outline, NormalizedShadow, Shadow, NormalizedShape, Shape, FullStyle, Text as Text$1, TextContent, Style, ImageFillCropRect } from 'modern-idoc'; export { Color as ColorValue } from 'modern-idoc'; import { AnimationItem } from 'lottie-web'; import { Colord, RgbaColor, HslaColor, HsvaColor } from 'colord'; import { Path2D, LineCap, LineJoin, LineStyle, Path2DSet } from 'modern-path2d'; import { Text, MeasureResult } from 'modern-text'; import { Node as Node$1, Direction } from 'yoga-layout/load'; declare abstract class Loader { abstract install(assets: Assets): this; } declare class FontLoader extends Loader { load: (url: string) => Promise<Font>; install(assets: Assets): this; } declare const customNodes: Map<string, any>; declare function customNode<T = Record<string, any>>(name: string, defaultProperties?: Partial<T>): ClassDecorator; declare function createNode<T = any>(tag?: string, options?: Record<string, any>): T; declare function nextTick(cb?: () => void): Promise<void>; type Callback = () => void; interface QueueItem { cb: Callback; once: boolean; } interface Options { sort?: number; once?: boolean; } declare class Ticker { protected static _queue: QueueItem[][]; protected static _currentTime: number; protected static _elapsed: number; protected static _requestId?: number; static get currentTime(): number; static get elapsed(): number; static on(cb: Callback, options?: Options): void; static off(cb: Callback, options?: Options): void; static start(): void; static stop(): void; protected static _update(time: number): void; protected static _performUpdate(): void; } type Cursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ns-resize' | 'ew-resize' | 'nesw-resize' | 'col-resize' | 'nwse-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing' | string; declare class InputEvent<N extends UIEvent = UIEvent> implements UIEvent { nativeEvent: N; cursor?: Cursor; bubbles: boolean; cancelBubble: boolean; cancelable: boolean; composed: boolean; currentTarget: any; defaultPrevented: boolean; eventPhase: number; isTrusted: boolean; returnValue: boolean; srcElement: EventTarget | null; target: any; timeStamp: number; type: string; path: any[]; composedPath(): any[]; initEvent(..._args: any[]): void; preventDefault(): void; propagationImmediatelyStopped: boolean; stopImmediatePropagation(): void; propagationStopped: boolean; stopPropagation(): void; readonly NONE = 0; readonly CAPTURING_PHASE = 1; readonly AT_TARGET = 2; readonly BUBBLING_PHASE = 3; detail: number; view: WindowProxy; which: number; initUIEvent(..._args: any[]): void; } declare class MouseInputEvent extends InputEvent implements MouseEvent { altKey: boolean; button: number; buttons: number; client: { x: number; y: number; }; get clientX(): number; get clientY(): number; ctrlKey: boolean; layer: { x: number; y: number; }; get layerX(): number; get layerY(): number; metaKey: boolean; movement: { x: number; y: number; }; get movementX(): number; get movementY(): number; offset: { x: number; y: number; }; get offsetX(): number; get offsetY(): number; page: { x: number; y: number; }; get pageX(): number; get pageY(): number; relatedTarget: EventTarget | null; screen: { x: number; y: number; }; get screenX(): number; get screenY(): number; shiftKey: boolean; get x(): number; get y(): number; getModifierState(key: string): boolean; initMouseEvent(..._args: any[]): void; global: { x: number; y: number; }; get globalX(): number; get globalY(): number; } declare class KeyboardInputEvent extends InputEvent implements KeyboardEvent { altKey: boolean; charCode: number; code: string; ctrlKey: boolean; isComposing: boolean; key: string; keyCode: number; location: number; metaKey: boolean; repeat: boolean; shiftKey: boolean; getModifierState(..._args: any[]): boolean; initKeyboardEvent(..._args: any[]): void; DOM_KEY_LOCATION_STANDARD: 0x00; DOM_KEY_LOCATION_LEFT: 0x01; DOM_KEY_LOCATION_RIGHT: 0x02; DOM_KEY_LOCATION_NUMPAD: 0x03; } declare class PointerInputEvent extends MouseInputEvent implements PointerEvent { altitudeAngle: number; azimuthAngle: number; pointerId: number; width: number; height: number; isPrimary: boolean; pointerType: string; pressure: number; tangentialPressure: number; tiltX: number; tiltY: number; twist: number; detail: number; getCoalescedEvents(): PointerEvent[]; getPredictedEvents(): PointerEvent[]; } declare class WheelInputEvent extends MouseInputEvent implements WheelEvent { deltaMode: number; deltaX: number; deltaY: number; deltaZ: number; static readonly DOM_DELTA_PIXEL = 0; readonly DOM_DELTA_PIXEL = 0; static readonly DOM_DELTA_LINE = 1; readonly DOM_DELTA_LINE = 1; static readonly DOM_DELTA_PAGE = 2; readonly DOM_DELTA_PAGE = 2; } interface InputEventMap { pointerdown: (ev: PointerInputEvent) => void; pointerover: (ev: PointerInputEvent) => void; pointermove: (ev: PointerInputEvent) => void; pointerup: (ev: PointerInputEvent) => void; wheel: (ev: WheelInputEvent) => void; keydown: (ev: KeyboardInputEvent) => void; keypress: (ev: KeyboardInputEvent) => void; keyup: (ev: KeyboardInputEvent) => void; } type InputEventKey = keyof InputEventMap; interface Input { on: (<K extends keyof InputEventMap>(type: K, listener: InputEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); once: (<K extends keyof InputEventMap>(type: K, listener: InputEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); off: (<K extends keyof InputEventMap>(type: K, listener?: InputEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); emit: (<K extends keyof InputEventMap>(type: K, ...args: Parameters<InputEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean); } declare class Input extends EventEmitter { /** * Current event */ event?: PointerInputEvent | WheelInputEvent | KeyboardInputEvent; target?: HTMLElement; cursor: Cursor; cursorStyles: Record<string, any>; setuped: boolean; enableMoveEvent: boolean; enableWheelEvent: boolean; enableClickEvent: boolean; setTarget(target: HTMLElement): void; removeEventListeners(): void; addEventListeners(): void; protected normalize(event: KeyboardEvent): KeyboardEvent[]; protected normalize(event: WheelEvent): WheelEvent[]; protected normalize(event: TouchEvent | PointerEvent | MouseEvent): PointerEvent[]; protected _clonePointerEvent(nativeEvent: PointerEvent): PointerInputEvent; protected _copyInputEvent(event: InputEvent, nativeEvent: UIEvent): void; protected _copyMouseEvent(event: MouseInputEvent, nativeEvent: MouseEvent): void; protected _cloneWheelEvent(nativeEvent: WheelEvent): WheelInputEvent; protected _cloneKeyboardEvent(nativeEvent: KeyboardEvent): KeyboardInputEvent; setCursor(mode?: Cursor): void; mapPositionToPoint(point: { x: number; y: number; }, x: number, y: number): void; protected _onKeyDown: (nativeEvent: KeyboardEvent) => void; protected _onKeyPress: (nativeEvent: KeyboardEvent) => void; protected _onKeyUp: (nativeEvent: KeyboardEvent) => void; protected _onPointerDown: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void; protected _onPointerOver: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void; protected _onPointerMove: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void; protected _onPointerUp: (nativeEvent: PointerEvent | TouchEvent | MouseEvent) => void; protected _onWheel: (nativeEvent: WheelEvent) => void; } interface CoreObjectEventMap { updateProperty: (key: string, newValue: any, oldValue: any, declaration?: PropertyDeclaration) => void; } interface CustomPropertyAccessor { get: (key: string, fallback: () => any) => any; set: (key: string, value: any) => void; } interface CoreObject { on: (<K extends keyof CoreObjectEventMap>(type: K, listener: CoreObjectEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); once: (<K extends keyof CoreObjectEventMap>(type: K, listener: CoreObjectEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); off: (<K extends keyof CoreObjectEventMap>(type: K, listener?: CoreObjectEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); emit: (<K extends keyof CoreObjectEventMap>(type: K, ...args: Parameters<CoreObjectEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean); } declare class CoreObject extends EventEmitter implements Required<ReactiveObject> { readonly instanceId: number; protected _customPropertyAccessor?: CustomPropertyAccessor; protected _properties: Map<string, unknown>; protected _updatedProperties: Map<string, unknown>; protected _changedProperties: Set<string>; protected _updatingPromise: Promise<void>; protected _updating: boolean; useCustomPropertyAccessor(accessor: CustomPropertyAccessor): this; getter(key: string, context?: ReactiveObjectPropertyAccessorContext): any; setter(key: string, value: any, context?: ReactiveObjectPropertyAccessorContext): void; equal(target: CoreObject | undefined | null): boolean; protected _enqueueUpdate(): Promise<void>; update(): void; protected _update(changed: Map<string, any>): void; protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; isDirty(key: string): boolean; getPropertyDeclarations(): Map<string, PropertyDeclaration>; getPropertyDeclaration(key: string): PropertyDeclaration | undefined; getProperty(key: string): any | undefined; setProperty(key: string, value: any): this; getProperties(keys?: string[]): Record<string, any>; setProperties(properties?: any): this; resetProperties(): this; onUpdateProperty(key: string, newValue: unknown, oldValue: unknown, declaration: PropertyDeclaration): void; requestUpdate(key?: string, newValue?: unknown, oldValue?: unknown, declaration?: PropertyDeclaration): void; toJSON(): Record<string, any>; clone(): this; free(): void; } interface RefCountedEventMap extends CoreObjectEventMap { } interface RefCounted { on: (<K extends keyof RefCountedEventMap>(type: K, listener: RefCountedEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); once: (<K extends keyof RefCountedEventMap>(type: K, listener: RefCountedEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); off: (<K extends keyof RefCountedEventMap>(type: K, listener?: RefCountedEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); emit: (<K extends keyof RefCountedEventMap>(type: K, ...args: Parameters<RefCountedEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean); } declare class RefCounted extends CoreObject { } interface ResourceEventMap extends RefCountedEventMap { } interface Resource { on: (<K extends keyof ResourceEventMap>(type: K, listener: ResourceEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); once: (<K extends keyof ResourceEventMap>(type: K, listener: ResourceEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); off: (<K extends keyof ResourceEventMap>(type: K, listener?: ResourceEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); emit: (<K extends keyof ResourceEventMap>(type: K, ...args: Parameters<ResourceEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean); } declare class Resource extends RefCounted { } declare class Color { protected _colord: Colord; protected _value: Color$1; get value(): Color$1; set value(value: Color$1 | undefined); get r8(): number; get g8(): number; get b8(): number; get a8(): number; get r(): number; get g(): number; get b(): number; get a(): number; get rgb(): number; get bgr(): number; get abgr(): number; constructor(value?: Color$1); toHex(): string; toRgb(): RgbaColor; toRgbString(): string; toHsl(): HslaColor; toHslString(): string; toHsv(): HsvaColor; toArgb(alpha?: number, applyToRGB?: boolean): number; toArray(): [number, number, number, number]; } type VectorLike = number | number[] | Matrix | Vector; type VectorOperateOutput = number[] | Vector; declare abstract class Vector extends EventEmitter { readonly dim: number; protected _array: number[]; get length(): number; constructor(dim: number); operate(operator: '+' | '-' | '*' | '/' | 'rot' | '==' | '=', target: VectorLike, output?: VectorOperateOutput): any; add(value: VectorLike, ...args: number[]): this; sub(value: VectorLike, ...args: number[]): this; multiply(value: VectorLike, ...args: number[]): this; divide(value: VectorLike, ...args: number[]): this; rotate(angle: number): this; set(value: VectorLike, ...args: number[]): this; equals(value: VectorLike): boolean; copy(value: VectorLike): this; clone(): this; protected _onUpdate(_array: number[]): void; toName(): string; toArray(): number[]; toJSON(): number[]; } type MatrixLike = number | number[] | Matrix; type MatrixOperateOutput = number[] | Matrix | Vector; declare abstract class Matrix extends EventEmitter { readonly rows: number; readonly cols: number; protected _array: number[]; dirtyId: number; get length(): number; constructor(rows: number, cols: number, array?: number[]); operate(operator: string, target: MatrixLike | Vector, output?: MatrixOperateOutput): any; identity(): this; set(value: MatrixLike): this; copy(value: MatrixLike): this; clone(): this; multiply<T extends Vector>(value: T): T; multiply(value: MatrixLike): this; multiply<T extends MatrixOperateOutput>(value: MatrixLike, output: T): T; protected _onUpdate(_array: number[]): void; toArray(transpose?: boolean): number[]; toName(): string; toJSON(): number[]; } /** * Matrix4 * * | x0 | y0 | z0 | m0 | * | x1 | y1 | z1 | m1 | * | x2 | y2 | z2 | m2 | */ declare class Matrix4 extends Matrix { constructor(array?: number[]); } /** * Vector4 */ declare class Vector4 extends Vector { constructor(x?: number, y?: number, z?: number, m?: number); } /** * Matrix4(4x5) * * | r0 | g0 | b0 | a0 | tr | * | r1 | g1 | b1 | a1 | tg | * | r2 | g2 | b2 | a2 | tb | * | r3 | g3 | b3 | a3 | ta | */ declare class ColorMatrix extends Matrix { constructor(array?: number[]); hueRotate(angle?: number): this; saturate(amount?: number): this; brightness(amount?: number): this; contrast(amount?: number): this; invert(amount?: number): this; sepia(amount?: number): this; opacity(amount?: number): this; grayscale(amount?: number): this; multiply(target: number[]): this; toMatrix4(): Matrix4; toVector4(): Vector4; } /** * Matrix2 * * | x0 | y0 | * | x1 | y1 | */ declare class Matrix2 extends Matrix { constructor(array?: number[]); } /** * Matrix3 * * | x0 | y0 | z0 | * | x1 | y1 | z1 | * | x2 | y2 | z2 | */ declare class Matrix3 extends Matrix { constructor(array?: number[]); invert(): this; } declare class Projection2D extends Matrix3 { protected _x: number; protected _y: number; protected _width: number; protected _height: number; protected _flipY: boolean; constructor(_x?: number, _y?: number, _width?: number, _height?: number, _flipY?: boolean); flipY(flipY: boolean): this; translate(x: number, y: number): this; resize(width: number, height: number): this; protected _performUpdateArray(): void; } /** * Vector2 */ declare class Vector2 extends Vector { get x(): number; set x(val: number); get y(): number; set y(val: number); get width(): number; set width(val: number); get height(): number; set height(val: number); get left(): number; set left(val: number); get top(): number; set top(val: number); constructor(x?: VectorLike, y?: number); update(x: number, y: number): this; getLength(): number; getAngle(): number; distanceTo(point: Vector2): number; normalize(): this; static lerp(a: VectorLike, b: VectorLike, t: number): Vector2; } declare class Rect2 { get x(): number; get y(): number; get left(): number; get top(): number; get right(): number; get bottom(): number; get width(): number; get height(): number; readonly end: Vector2; readonly position: Vector2; readonly size: Vector2; constructor(from: Rect2); constructor(position: Vector2, size: Vector2); constructor(x: number, y: number, width: number, height: number); update(): this; toArray(): number[]; toJSON(): { x: number; y: number; width: number; height: number; }; } interface Transform2DObject { a: number; c: number; tx: number; b: number; d: number; ty: number; tz: number; } /** * Transform * * | a | c | tx| * | b | d | ty| * | 0 | 0 | 1 | */ declare class Transform2D extends Matrix3 { private static _t2d; premultiply(t2d: Transform2D): this; skewX(x: number): this; skewY(y: number): this; skew(x: number, y: number): this; makeSkew(x: number, y: number): this; translateX(x: number): this; translateY(y: number): this; translateZ(z: number): this; translate3d(x: number, y: number, z: number): this; translate(x: number, y: number, z?: number): this; makeTranslation(x: number, y: number, _z?: number): this; scaleX(x: number): this; scaleY(y: number): this; scale3d(x: number, y: number, z?: number): this; scale(x: number, y: number, z?: number): this; makeScale(x: number, y: number, _z?: number): this; rotateX(x: number): this; rotateY(y: number): this; rotateZ(z: number): this; rotate(rad: number): this; rotate3d(x: number, y: number, z: number, rad: number): this; protected _rotateToScale(rad: number): number; protected _rotate3d(x: number, y: number, z: number, rad: number): number[]; makeRotation(theta: number): this; applyToPoint(x: number, y: number): number[]; inverse(): this; isIdentity(): boolean; toObject(): Transform2DObject; } declare const DEG_TO_RAD: number; declare const RAD_TO_DEG: number; declare function clamp(val: number, min: number, max: number): number; declare function lerp(a: number, b: number, weight: number): number; declare const curves: { adaptive: boolean; maxLength: number; minSegments: number; maxSegments: number; epsilon: number; _segmentsCount(length: number, defaultSegments?: number): number; }; /** * Vector3 */ declare class Vector3 extends Vector { constructor(); } interface MainLoopEventMap extends CoreObjectEventMap { process: (delta: number) => void; } interface MainLoop { on: (<K extends keyof MainLoopEventMap>(type: K, listener: MainLoopEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); once: (<K extends keyof MainLoopEventMap>(type: K, listener: MainLoopEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); off: (<K extends keyof MainLoopEventMap>(type: K, listener?: MainLoopEventMap[K], options?: EventListenerOptions$1) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions$1) => this); emit: (<K extends keyof EventListenerOptions$1>(type: K, ...args: Parameters<EventListenerOptions$1[K]>) => boolean) & ((type: string, ...args: any[]) => boolean); } declare class MainLoop extends CoreObject { fps: number; speed: number; protected _starting: boolean; protected _nextDeltaTime: number; get starting(): boolean; get spf(): number; constructor(); start(process: (delta: number) => void): void; stop(): void; protected _onNextTick(): void; free(): void; } interface CssFunctionArg { unit: string | null; value: string; intValue: number; normalizedIntValue: number; normalizedDefaultIntValue: number; } interface CssFunction { name: string; args: CssFunctionArg[]; } interface ParseArgumentContext { index?: number; fontSize?: number; width?: number; height?: number; } declare function getDefaultCssPropertyValue<T extends CssFunctionArg | CssFunction[]>(value: T): T; declare function parseCssProperty(name: string, propertyValue: string, context?: ParseArgumentContext): CssFunctionArg | CssFunction[]; declare function parseCssFunctions(propertyValue: string, context?: ParseArgumentContext): CssFunction[]; declare const SUPPORTS_WEBGL2: boolean; declare const SUPPORTS_IMAGE_BITMAP: boolean; declare const SUPPORTS_RESIZE_OBSERVER: boolean; declare const SUPPORTS_POINTER_EVENTS: boolean; declare const SUPPORTS_WHEEL_EVENTS: boolean; declare const SUPPORTS_MOUSE_EVENTS: boolean; declare const SUPPORTS_TOUCH_EVENTS: boolean; declare const SUPPORTS_CLICK_EVENTS: boolean; declare const SUPPORTS_CREATE_IMAGE_BITMAP: boolean; declare const SUPPORTS_AUDIO_CONTEXT: boolean; declare const SUPPORTS_WEBKIT_AUDIO_CONTEXT: boolean; declare const SUPPORTS_OFFLINE_AUDIO_CONTEXT: boolean; declare const SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT: boolean; declare const SUPPORTS_WEB_AUDIO: boolean; declare const IN_BROWSER: boolean; declare const DEVICE_PIXEL_RATIO: number; declare const isElementNode: (node: unknown) => node is Element; declare const isVideoElement: (node: unknown) => node is HTMLVideoElement; declare const isImageElement: (node: unknown) => node is HTMLImageElement; declare function isCanvasElement(node: unknown): node is HTMLCanvasElement; declare function isWebgl2(gl: unknown): gl is WebGL2RenderingContext; declare function createHTMLCanvas(): HTMLCanvasElement | undefined; declare function determineCrossOrigin(url: string, loc?: Location): string; declare function crossOrigin(element: HTMLImageElement | HTMLVideoElement, url: string, crossorigin: boolean | string | null): void; declare class RawWeakMap<K extends WeakKey = WeakKey, V = any> { protected _map: WeakMap<K, V>; protected _toRaw(value: any): any; /** * Removes the specified element from the WeakMap. * @returns true if the element was successfully removed, or false if it was not present. */ delete(key: K): boolean; /** * @returns a specified element. */ get(key: K): V | undefined; /** * @returns a boolean indicating whether an element with the specified key exists or not. */ has(key: K): boolean; /** * Adds a new element with a specified key and value. * @param key Must be an object or symbol. */ set(key: K, value: V): this; } declare const PI: number; declare const PI_2: number; declare function uid(object?: Record<string, any>): number; declare function isPow2(v: number): boolean; declare abstract class Renderer { view?: HTMLCanvasElement; pixelRatio: number; readonly screen: { x: number; y: number; width: number; height: number; }; readonly related: RawWeakMap<object, any>; getRelated<T>(source: object, createFn?: () => T): T; resize(width: number, height: number, updateStyle?: boolean): void; } type WebGLBufferTarget = 'array_buffer' | 'element_array_buffer'; interface WebGLBufferOptions { target?: WebGLBufferTarget; usage?: WebGLBufferUsage; data: BufferSource | number[] | null; } type WebGLBufferUsage = 'static_draw' | 'dynamic_draw'; interface WebGLBufferMeta { id: number; target?: WebGLBufferTarget; usage?: WebGLBufferUsage; length: number; byteLength: number; bytesPerElement: number; } type WebGLDrawMode = 'points' | 'line_strip' | 'line_loop' | 'lines' | 'triangle_strip' | 'triangle_fan' | 'triangles'; interface WebGLDrawOptions { mode?: WebGLDrawMode; count?: number; first?: number; bytesPerElement?: number; instanceCount?: number; } interface WebGLExtensions { loseContext?: WEBGL_lose_context | null; anisotropicFiltering?: EXT_texture_filter_anisotropic | null; floatTextureLinear?: OES_texture_float_linear | null; s3tc?: WEBGL_compressed_texture_s3tc | null; s3tcSRGB?: WEBGL_compressed_texture_s3tc_srgb | null; etc?: WEBGL_compressed_texture_etc | null; etc1?: WEBGL_compressed_texture_etc1 | null; pvrtc?: any | null; atc?: any | null; astc?: WEBGL_compressed_texture_astc | null; instancedArrays?: ANGLE_instanced_arrays | null; drawBuffers?: WEBGL_draw_buffers | null; depthTexture?: WEBGL_depth_texture | null; vertexArrayObject?: OES_vertex_array_object | null; uint32ElementIndex?: OES_element_index_uint | null; floatTexture?: OES_texture_float | null; textureHalfFloat?: OES_texture_half_float | null; textureHalfFloatLinear?: OES_texture_half_float_linear | null; colorBufferFloat?: EXT_color_buffer_float | null; } interface WebGLFramebufferOptions { width: number; height: number; mipLevel?: number; stencil?: boolean; depth?: boolean; depthTexture?: WebGLTexture | null; colorTextures?: WebGLTexture[]; } interface WebGLFramebufferMeta extends Required<WebGLFramebufferOptions> { multisample: number; stencilBuffer?: WebGLBuffer | null; msaaBuffer?: WebGLBuffer | null; } type Pick<T> = T extends string ? T extends Uppercase<T> ? Lowercase<T> : never : never; type WebGLTarget = Pick<keyof WebGL2RenderingContext>; interface WebGLProgramMeta { attributes: Map<string, { type: WebGLTarget; size: number; name: string; location: number; }>; uniforms: Map<string, { index: number; type: WebGLTarget; size: number; isArray: boolean; name: string; location: WebGLUniformLocation | null; }>; boundUniforms: RawWeakMap$1<object, any>; } interface WebGLProgramOptions { vert: string; frag: string; } type WebGLTextureFilterMode = 'linear' | 'nearest' | 'nearest_mipmap_nearest' | 'linear_mipmap_nearest' | 'nearest_mipmap_linear' | 'linear_mipmap_linear'; type WebGLTextureLocation = number; interface WebGLTextureMeta extends Omit<WebGLTextureOptions, 'value'> { } interface WebGLTextureOptions { value: WebGLTextureSource; target?: WebGLTextureTarget; location?: WebGLTextureLocation; filterMode?: WebGLTextureFilterMode; wrapMode?: WebGLTextureWrapMode; anisoLevel?: number; } type WebGLTextureSource = TexImageSource | null | { width: number; height: number; pixels: ArrayBufferView | null; }; type WebGLTextureTarget = 'texture_2d' | 'texture_cube_map'; type WebGLTextureWrapMode = 'repeat' | 'clamp_to_edge' | 'mirrored_repeat'; interface WebGLVertexArrayObjectMeta { attributes: Record<string, WebGLVertexAttrib>; elementArrayBuffer: WebGLBuffer | null; } interface WebGLVertexArrayObjectOptions { attributes?: Record<string, WebGLBuffer | WebGLVertexAttrib>; elementArrayBuffer?: WebGLBuffer | null; } type WebGLVertexAttribType = 'float' | 'unsigned_byte' | 'unsigned_short'; interface WebGLVertexAttrib { buffer: WebGLBuffer; enable?: boolean; size?: number; type?: WebGLVertexAttribType; normalized?: boolean; stride?: number; offset?: number; divisor?: number; } interface WebGLViewport { x: number; y: number; width: number; height: number; } interface WebGLRenderer { texture: WebGLTextureModule; buffer: WebGLBufferModule; framebuffer: WebGLFramebufferModule; program: WebGLProgramModule; vertexArray: WebGLVertexArrayModule; viewport: WebGLViewportModule; state: WebGLStateModule; mask: WebGLMaskModule; scissor: WebGLScissorModule; stencil: WebGLStencilModule; batch2D: WebGLBatch2DModule; } declare class WebGLRenderer extends Renderer { gl: WebGLRenderingContext | WebGL2RenderingContext; version: 1 | 2; extensions: WebGLExtensions; protected _modules: (WebGLTextureModule | WebGLBufferModule | WebGLFramebufferModule | WebGLProgramModule | WebGLVertexArrayModule | WebGLViewportModule | WebGLStateModule | WebGLMaskModule | WebGLScissorModule | WebGLStencilModule | WebGLBatch2DModule)[]; readonly bindPoints: Map<number, WebGLTarget>; constructor(view?: HTMLCanvasElement | WebGLRenderingContext | WebGL2RenderingContext, options?: WebGLContextAttributes); protected _setupContext(view: HTMLCanvasElement, options?: WebGLContextAttributes): this; /** * Setup extensions * * @protected */ protected _setupExtensions(): this; /** * Setup bind points * * @protected */ protected _setupBindPoints(): this; /** * Setup polyfill * * @protected */ protected _setupPolyfill(): this; protected _onContextLost(event: WebGLContextEvent): void; protected _onContextRestored(): void; getBindPoint(target: WebGLTarget): number; clear(mask?: number): void; draw(options?: WebGLDrawOptions): void; reset(): void; flush(): void; free(): void; toPixels(x?: number, y?: number, width?: number, height?: number): Uint8ClampedArray; } interface Renderable { render: (renderer: WebGLRenderer) => void; } declare enum WebGLBlendMode { NORMAL = "normal", ADD = "add", MULTIPLY = "multiply", SCREEN = "screen", NONE = "none", NORMAL_NPM = "normal_npm", ADD_NPM = "add_npm", SCREEN_NPM = "screen_npm", SRC_IN = "src_in", SRC_OUT = "src_out", SRC_ATOP = "src_atop", DST_OVER = "dst_over", DST_IN = "dst_in", DST_OUT = "dst_out", DST_ATOP = "dst_atop", XOR = "xor", SUBTRACT = "subtract" } declare function mapWebGLBlendModes(gl: WebGLRenderingContext): Record<WebGLBlendMode, any>; declare abstract class WebGLModule { protected _renderer: WebGLRenderer; get gl(): WebGLRenderingContext | WebGL2RenderingContext; install(renderer: WebGLRenderer): void; onUpdateContext(): void; flush(): void; reset(): void; free(): void; } interface WebGLState { blend: boolean; offsets: boolean; culling: boolean; depthTest: boolean; clockwiseFrontFace: boolean; depthMask: boolean; } declare class WebGLState { static readonly _properties: string[]; static _init(): void; static for2D(): WebGLState; protected _blendMode: WebGLBlendMode; protected _polygonOffset: number; bitmap: number; get blendMode(): WebGLBlendMode; set blendMode(value: WebGLBlendMode); get polygonOffset(): number; set polygonOffset(value: number); constructor(options?: Partial<WebGLState>); } declare class WebGLStateModule extends WebGLModule { install(renderer: WebGLRenderer): void; protected _blendEq: boolean; protected _setters: any[]; boundStateBitmap: number; boundBlendMode?: string; blendModes: Record<WebGLBlendMode, any>; defaultState: WebGLState; onUpdateContext(): void; toggle(boundPoint: number, enable: boolean): void; setBlend(value: boolean): void; setOffsets(value: boolean): void; setCulling(value: boolean): void; setDepthTest(value: boolean): void; setDepthMask(value: boolean): void; setClockwiseFrontFace(value: boolean): void; setBlendMode(value: WebGLBlendMode): void; setPolygonOffset(value: number, scale: number): void; bind(state: WebGLState): void; reset(): void; } interface Batchable2D { vertices: Float32Array; indices: Float32Array; uvs?: Float32Array; texture?: WebGLTexture; backgroundColor?: number; modulate?: number; blendMode?: WebGLBlendMode; disableWrapMode?: boolean; } interface Shader { update: (attributeBuffer: ArrayBuffer, indexBuffer: Uint16Array) => void; draw: (options?: WebGLDrawOptions) => void; } declare class WebGLBatch2DModule extends WebGLModule { install(renderer: WebGLRenderer): void; protected _state: WebGLState; protected _batchSize: number; protected _drawCallUid: number; protected _defaultModulate: number; protected _defaultBackgroundColor: number; protected _batchables: Batchable2D[]; protected _vertexCount: number; protected _indexCount: number; protected _attributeBuffer: ArrayBuffer[]; protected _indexBuffers: Uint16Array[]; protected _shaders: Map<number, Shader>; protected _attributes: Record<string, Partial<WebGLVertexAttrib>>; protected _vertexSize: number; protected _getShader(maxTextureUnits: number): Shader; protected _createShader(maxTextureUnits: number): Shader; render(batchable: Batchable2D): void; flush(): void; /** * Fetches an attribute buffer from `this._attributeBuffer` that can hold atleast `size` floats. * @param size - minimum capacity required * @returns - buffer than can hold atleast `size` floats */ protected _getAttributeBuffer(size: number): ArrayBuffer; /** * Fetches an index buffer from `this._indexBuffers` that can * have at least `size` capacity. * @param size - minimum required capacity * @returns - buffer that can fit `size` indices. */ protected _getIndexBuffer(size: number): Uint16Array; } /** * Rounds to next power of two. * @param {number} v - input value * @returns {number} - next rounded power of two */ declare function nextPow2(v: number): number; /** * Computes ceil of log base 2 * @param {number} v - input value * @returns {number} logarithm base 2 */ declare function log2(v: number): number; declare class WebGLBufferModule extends WebGLModule { install(renderer: WebGLRenderer): void; boundArrayBuffer: WebGLBuffer | null; boundTarget: WebGLBufferTarget; create(options?: WebGLBufferOptions): WebGLBuffer; getMeta(buffer: WebGLBuffer): WebGLBufferMeta; update(options: WebGLBufferOptions): void; update(buffer: WebGLBuffer, options: WebGLBufferOptions): void; bind(options: { target?: WebGLBufferTarget; value: WebGLBuffer | null; }): void; unbind(target: WebGLBufferTarget): void; reset(): void; } declare class WebGLFramebufferModule extends WebGLModule { install(renderer: WebGLRenderer): void; boundFramebuffer: WebGLFramebuffer | null; protected _msaaSamples: number[]; protected _hasMRT: boolean; protected _writeDepthTexture: boolean; onUpdateContext(): void; create(options?: WebGLFramebufferOptions): WebGLFramebuffer; getMeta(framebuffer: WebGLFramebuffer): WebGLFramebufferMeta; update(options: WebGLFramebufferOptions): void; update(framebuffer: WebGLFramebuffer, options: WebGLFramebufferOptions): void; protected _getAttachmentAndFormat(meta: WebGLFramebufferMeta): { attachment: number; format: number; }; resize(framebuffer: WebGLFramebuffer, width: number, height: number): void; bind(framebuffer: WebGLFramebuffer | null): void; forceStencil(): void; reset(): void; } type MaskColor = number; interface MaskRect { x: number; y: number; width: number; height: number; } type MaskObject = Renderable; type Maskable = MaskColor | MaskRect | MaskObject; interface MaskData { source: Renderable; mask: Maskable; color?: number; preComputedColor?: number; scissorCounter?: number; stencilCounter?: number; } declare class WebGLMaskModule extends WebGLModule { install(renderer: WebGLRenderer): void; stack: MaskData[]; get length(): number; get last(): MaskData; push(source: Renderable, mask: Maskable): void; pop(source: Renderable): void; pushColorMask(data: MaskData): void; popColorMask(data: MaskData): void; useColorMask(value: number): void; } declare class WebGLProgramModule extends WebGLModule { install(renderer: WebGLRenderer): void; boundProgram: WebGLProgram | null; uniforms: { projectionMatrix: number[]; worldTransformMatrix: number[]; }; create(options?: WebGLProgramOptions): WebGLProgram; getMeta(program: WebGLProgram): WebGLProgramMeta; update(options: WebGLProgramOptions): void; update(program: WebGLProgram, options: WebGLProgramOptions): void; bind(program: WebGLProgram | null): void; createShader(source: string, type: 'vertex_shader' | 'fragment_shader'): WebGLShader; updateUniforms(program: WebGLProgram, uniforms: Record<string, any>): void; updateUniforms(uniforms: Record<string, any>): void; reset(): void; free(): void; } declare class WebGLScissorModule extends WebGLModule { install(renderer: WebGLRenderer): void; get length(): number; push(data: MaskData): void; pop(_data: MaskData): void; use(): void; } declare class WebGLStencilModule extends WebGLModule { install(renderer: WebGLRenderer): void; get length(): number; push(data: MaskData): void; pop(data: MaskData): void; use(): void; } declare class WebGLTextureModule extends WebGLModule { install(renderer: WebGLRenderer): void; maxUnits: number; boundLocation: WebGLTextureLocation; boundTarget: WebGLTextureTarget; boundTextures: Record<WebGLTextureTarget, WebGLTexture | null>[]; emptyTextures: Record<WebGLTextureTarget, WebGLTexture | null>; onUpdateContext(): void; create(options?: WebGLTextureOptions): WebGLTexture; getMeta(texture: WebGLTexture): WebGLTextureMeta; update(options: WebGLTextureOptions): void; update(texture: WebGLTexture, options: WebGLTextureOptions): void; bind(texture: { location?: WebGLTextureLocation; forceUpdateLocation?: boolean; target?: WebGLTextureTarget; value: WebGLTexture | null; } | null): void; unbind(location: number, target?: WebGLTextureTarget): void; unbind(texture: WebGLTexture): void; reset(): void; } declare class WebGLVertexArrayModule extends WebGLModule { install(renderer: WebGLRenderer): void; boundVertexArrayNull: WebGLVertexArrayObjectMeta; boundVertexArrayObject: WebGLVertexArrayObject | null; boundVertexArray: WebGLVertexArrayObjectMeta; enableVertexAttrib(key: string, location: number, attrib: WebGLVertexAttrib, dimension?: number): void; create(options?: WebGLVertexArrayObjectOptions): WebGLVertexArrayObject | null; create(program?: WebGLProgram, options?: WebGLVertexArrayObjectOptions): WebGLVertexArrayObject | null; getVertexArrayMeta(vertexArray: WebGLVertexArrayObject): WebGLVertexArrayObjectMeta; update(options: WebGLVertexArrayObjectOptions): void; update(vertexArray: WebGLVertexArrayObject, options: WebGLVertexArrayObjectOptions): void; update(program: WebGLProgram, vertexArray: WebGLVertexArrayObject, options: WebGLVertexArrayObjectOptions): void; bind(vertexArrayObject: WebGLVertexArrayObject | null | WebGLVertexArrayObjectOptions): void; unbind(): void; reset(): void; } declare class WebGLViewportModule extends WebGLModule { install(renderer: WebGLRenderer): void; boundViewport: WebGLViewport; bind(viewport: WebGLViewport): void; reset(): void; } interface MaterialOptions { vert?: string; frag?: string; uniforms?: Record<string, any>; } declare class Material extends Resource { static instance: Material; vert: string; frag: string; readonly uniforms: Map<string, any>; constructor(options?: MaterialOptions); /** @internal */ _glProgram(renderer: WebGLRenderer): WebGLProgram; activate(renderer: WebGLRenderer, uniforms?: Record<string, any>): void; } interface IndexBufferOptions { data?: Uint16Array | null; dynamic?: boolean; } declare class IndexBuffer extends Resource { data: Uint16Array | null; dynamic: boolean; needsUpload: boolean; constructor(options?: IndexBufferOptions); /** @internal */ _glBufferOptions(): WebGLBufferOptions; /** @internal */ _glBuffer(renderer: WebGLRenderer): WebGLBuffer; protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; upload(renderer: WebGLRenderer): boolean; } interface VertexBufferOptions { data?: BufferSource | null; dynamic?: boolean; } declare class VertexBuffer extends Resource { data: BufferSource | null; dynamic: boolean; needsUpload: boolean; constructor(options?: VertexBufferOptions); /** @internal */ _glBufferOptions(): WebGLBufferOptions; /** @internal */ _glBuffer(renderer: WebGLRenderer): WebGLBuffer; protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; upload(renderer: WebGLRenderer): boolean; } interface VertexAttributeOptions { buffer?: VertexBuffer; size?: number; normalized?: boolean; type?: 'float' | 'unsigned_byte' | 'unsigned_short'; stride?: number; offset?: number; divisor?: number; } declare class VertexAttribute extends Resource { buffer: VertexBuffer; size: number; normalized: boolean; type: 'float' | 'unsigned_byte' | 'unsigned_short'; stride: number | undefined; offset: number | undefined; divisor: number | undefined; needsUpload: boolean; constructor(options?: VertexAttributeOptions); protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; upload(): boolean; } interface GeometryOptions { vertexAttributes?: Record<string, VertexAttribute>; indexBuffer?: IndexBuffer; instanceCount?: number; mode?: WebGLDrawMode; } declare class Geometry extends Resource { vertexAttributes: Map<string, VertexAttribute>; indexBuffer?: IndexBuffer; instanceCount?: number; mode: WebGLDrawMode; protected _materialWeakMap: RawWeakMap<Material, Record<string, any>>; constructor(options?: GeometryOptions); /** @internal */ _glVertexArray(renderer: WebGLRenderer): WebGLVertexArrayObjectOptions; /** @internal */ _glVertexArrayObject(renderer: WebGLRenderer, material: Material): WebGLVertexArrayObject | null; draw(renderer: WebGLRenderer, material: Material, uniforms?: Record<string, any>): void; } declare class QuadGeometry extends Geometry { constructor(); } declare class EffectMaterial extends Material { vert: string; readonly uniforms: Map<string, any>; static RE: { getColor: RegExp; getFromColor: RegExp; getToColor: RegExp; transform: RegExp; transition: RegExp; }; has: { getColor: boolean; getFromColor: boolean; getToColor: boolean; transform: boolean; transition: boolean; }; constructor(glsl: string); } declare class UvMaterial extends Material { protected static _instance: UvMaterial; static get instance(): UvMaterial; constructor(); } declare class QuadUvGeometry extends Geometry { protected static _instance: QuadUvGeometry; static get instance(): QuadUvGeometry; static draw(renderer: WebGLRenderer, material?: Material, uniforms?: Record<string, any>): void; constructor(); } declare class UvGeometry extends Geometry { positionBuffer: VertexBuffer; uvBuffer: VertexBuffer; constructor(); } type Texture2DFilterMode = WebGLTextureFilterMode; type Texture2DWrapMode = WebGLTextureWrapMode; interface Texture2DPixelsSource { width: number; height: number; pixels: Uint8Array | null; } type Texture2DSource = TexImageSource | Texture2DPixelsSource; declare class Texture2D<T extends Texture2DSource = Texture2DSource> extends Resource { static get EMPTY(): Texture2D; static get WHITE(): Texture2D; static get BLACK(): Texture2D; static get RED(): Texture2D; static get GREEN(): Texture2D; static get BLUE(): Texture2D; source: T; width: number; height: number; filterMode: Texture2DFilterMode; wrapMode: Texture2DWrapMode; pixelRatio: number; protected _isPowerOfTwo: boolean; protected _needsUpload: boolean; get valid(): boolean; get realWidth(): number; get realHeight(): number; constructor(source: T); /** @internal */ _glTextureOptions(renderer: WebGLRenderer, options?: Partial<WebGLTextureOptions>): WebGLTextureOptions; /** @internal */ _glTexture(renderer: WebGLRenderer, options?: Partial<WebGLTextureOptions>): WebGLTexture; protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; protected _updatePOT(): void; protected _updateSize(): void; requestUpload(): void; upload(renderer: WebGLRenderer, options?: Partial<WebGLTextureOptions>): boolean; activate(renderer: WebGLRenderer, location?: number): boolean; inactivate(renderer: WebGLRenderer): void; free(): void; } interface ImageFrame { texture: Texture2D; duration: number; } declare class AnimatedTexture extends Resource { frames: ImageFrame[]; duration: number; constructor(source: Texture2D | ImageFrame[]); updateDuration(): this; free(): void; } declare class CanvasTexture extends Texture2D<HTMLCanvasElement> { pixelRatio: number; constructor(source?: HTMLCanvasElement); protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; } declare class ColorTexture extends Texture2D { protected static _cached: Map<string, ColorTexture>; static get(value: Color$1): Texture2D; constructor(value: Color$1); } declare class GradientTexture extends Texture2D { static test(value: string): boolean; static linearGradient(linearGradient: LinearGradient, width: number, height: number): Texture2DPixelsSource; constructor(gradient: LinearGradient | RadialGradient, width: number, height: number); } interface ImageTextureOptions { autoLoad?: boolean; useBitmap?: boolean; crossorigin?: boolean | string | null; } declare class ImageTexture extends Texture2D<HTMLImageElement> { bitmap?: ImageBitmap; useBitmap: boolean; preserveBitmap: boolean; protected _loadSource?: Promise<this>; protected _loadBitmap?: Promise<this>; constructor(source: HTMLImageElement, options?: ImageTextureOptions); load(): Promise<this>; genBitmap(): Promise<this>; /** @internal */ _glTextureOptions(renderer: WebGLRenderer): WebGLTextureOptions; upload(renderer: WebGLRenderer): boolean; } declare class PixelsTexture extends Texture2D<Texture2DPixelsSource> { constructor(pixels?: number[] | ArrayBufferLike | ArrayBufferView | null, width?: number, height?: number); protected _updateProperty(key: string, value: any, oldValue: any, declaration?: PropertyDeclaration): void; } interface VideoTextureOptions { autoLoad?: boolean; autoPlay?: boolean; fps?: number; crossorigin?: boolean | string | null; loop?: boolean; muted?: boolean; playsinline?: boolean; } interface VideoTextureSource { src: string; mime: string; } declare class VideoTexture extends Texture2D<HTMLVideoElement> { autoUpdate: boolean; fps: number; static readonly mimeTypes: Map<string, string>; get isReady(): boolean; get isPlaying(): boolean; get duration(): number; get seeking(): boolean; get currentTime(): number; set currentTime(val: number); protected _spf: number; protected _autoPlay: boolean; p