webgl-benchmark
Version:
Benchmark WebGL performance using different JavaScript rendering/game engines, such as Pixi and Phaser.
1,324 lines (1,180 loc) • 137 kB
TypeScript
// Type definitions for Pixi.js 4.8.3
// Project: https://github.com/pixijs/pixi.js/tree/dev
// Definitions by: clark-stevenson <https://github.com/pixijs/pixi-typescript>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
declare namespace PIXI {
// from CONST
export const VERSION: typeof CONST.VERSION;
export const PI_2: typeof CONST.PI_2;
export const RAD_TO_DEG: typeof CONST.RAD_TO_DEG;
export const DEG_TO_RAD: typeof CONST.DEG_TO_RAD;
export const RENDERER_TYPE: typeof CONST.RENDERER_TYPE;
export const BLEND_MODES: typeof CONST.BLEND_MODES;
export const DRAW_MODES: typeof CONST.DRAW_MODES;
export const SCALE_MODES: typeof CONST.SCALE_MODES;
export const WRAP_MODES: typeof CONST.WRAP_MODES;
export const TRANSFORM_MODE: typeof CONST.TRANSFORM_MODE;
export const PRECISION: typeof CONST.PRECISION;
export const GC_MODES: typeof CONST.GC_MODES;
export const SHAPES: typeof CONST.SHAPES;
export const TEXT_GRADIENT: typeof CONST.TEXT_GRADIENT;
export const UPDATE_PRIORITY: typeof CONST.UPDATE_PRIORITY;
export function autoDetectRenderer(
width: number,
height: number,
options?: PIXI.RendererOptions,
forceCanvas?: boolean
): PIXI.WebGLRenderer | PIXI.CanvasRenderer;
export function autoDetectRenderer(options?: PIXI.RendererOptions): PIXI.WebGLRenderer | PIXI.CanvasRenderer;
export const loader: PIXI.loaders.Loader;
//////////////////////////////////////////////////////////////////////////////
///////////////////////////////SETTINGS///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
export namespace settings {
export let TARGET_FPMS: number;
export let MIPMAP_TEXTURES: boolean;
export let RESOLUTION: number;
export let FILTER_RESOLUTION: number;
export let SPRITE_MAX_TEXTURES: number;
export let SPRITE_BATCH_SIZE: number;
export let RETINA_PREFIX: RegExp;
export const RENDER_OPTIONS: {
view: HTMLCanvasElement | null;
antialias: boolean;
forceFXAA: boolean;
autoResize: boolean;
transparent: boolean;
backgroundColor: number;
clearBeforeRender: boolean;
preserveDrawingBuffer: boolean;
roundPixels: boolean;
width: number;
height: number;
legacy: boolean;
};
export let TRANSFORM_MODE: number;
export let GC_MODE: number;
export let GC_MAX_IDLE: number;
export let GC_MAX_CHECK_COUNT: number;
export let WRAP_MODE: number;
export let SCALE_MODE: number;
export let PRECISION_VERTEX: string;
export let PRECISION_FRAGMENT: string;
export let PRECISION: string;
export let UPLOADS_PER_FRAME: number;
export let CAN_UPLOAD_SAME_BUFFER: boolean;
export let MESH_CANVAS_PADDING: number;
}
//////////////////////////////////////////////////////////////////////////////
/////////////////////////////ACCESSIBILITY////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
export namespace accessibility {
// accessibility
export class AccessibilityManager {
constructor(renderer: CanvasRenderer | WebGLRenderer);
public activate(): void;
public deactivate(): void;
protected div: HTMLElement;
protected pool: HTMLElement[];
protected renderId: number;
debug: boolean;
renderer: SystemRenderer;
protected children: AccessibleTarget[];
protected isActive: boolean;
protected updateAccessibleObjects(displayObject: DisplayObject): void;
protected update(): void;
protected capHitArea(hitArea: HitArea): void;
protected addChild(displayObject: DisplayObject): void;
protected _onClick(e: interaction.InteractionEvent): void;
protected _onFocus(e: interaction.InteractionEvent): void;
protected _onFocusOut(e: interaction.InteractionEvent): void;
protected _onKeyDown(e: interaction.InteractionEvent): void;
protected _onMouseMove(e: MouseEvent): void;
destroy(): void;
}
export interface AccessibleTarget {
accessible: boolean;
accessibleTitle: string | null;
accessibleHint: string | null;
tabIndex: number;
}
}
//////////////////////////////////////////////////////////////////////////////
////////////////////////////////CORE//////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
// const
export namespace CONST {
export const VERSION: string;
export const PI_2: number;
export const RAD_TO_DEG: number;
export const DEG_TO_RAD: number;
export const TARGET_FPMS: number;
export const RENDERER_TYPE: {
UNKNOWN: number;
WEBGL: number;
CANVAS: number;
};
export const BLEND_MODES: {
NORMAL: number;
ADD: number;
MULTIPLY: number;
SCREEN: number;
OVERLAY: number;
DARKEN: number;
LIGHTEN: number;
COLOR_DODGE: number;
COLOR_BURN: number;
HARD_LIGHT: number;
SOFT_LIGHT: number;
DIFFERENCE: number;
EXCLUSION: number;
HUE: number;
SATURATION: number;
COLOR: number;
LUMINOSITY: number;
NORMAL_NPM: number;
ADD_NPM: number;
SCREEN_NPM: number;
};
export const DRAW_MODES: {
POINTS: number;
LINES: number;
LINE_LOOP: number;
LINE_STRIP: number;
TRIANGLES: number;
TRIANGLE_STRIP: number;
TRIANGLE_FAN: number;
};
export const SCALE_MODES: {
LINEAR: number;
NEAREST: number;
};
export const GC_MODES: {
AUTO: number;
MANUAL: number;
};
export const WRAP_MODES: {
CLAMP: number;
MIRRORED_REPEAT: number;
REPEAT: number;
};
export const TRANSFORM_MODE: {
DEFAULT: number;
DYNAMIC: number;
STATIC: number;
};
export const URL_FILE_EXTENSION: RegExp | string;
export const DATA_URI: RegExp | string;
export const SVG_SIZE: RegExp | string;
export const SHAPES: {
POLY: number;
RECT: number;
CIRC: number;
ELIP: number;
RREC: number;
};
export const PRECISION: {
LOW: string;
MEDIUM: string;
HIGH: string;
};
export const TEXT_GRADIENT: {
LINEAR_VERTICAL: number;
LINEAR_HORIZONTAL: number;
};
export const UPDATE_PRIORITY: {
INTERACTION: number;
HIGH: number;
NORMAL: number;
LOW: number;
UTILITY: number;
};
}
// display
export interface StageOptions {
children?: boolean;
texture?: boolean;
baseTexture?: boolean;
}
export class Application {
constructor(options?: ApplicationOptions);
constructor(
width?: number,
height?: number,
options?: ApplicationOptions,
noWebGL?: boolean,
sharedTicker?: boolean,
sharedLoader?: boolean
);
private _ticker: ticker.Ticker;
renderer: PIXI.WebGLRenderer | PIXI.CanvasRenderer;
stage: Container;
ticker: ticker.Ticker;
loader: loaders.Loader;
readonly screen: Rectangle;
stop(): void;
start(): void;
render(): void;
destroy(removeView?: boolean, stageOptions?: StageOptions | boolean): void;
readonly view: HTMLCanvasElement;
}
export interface DestroyOptions {
children?: boolean;
texture?: boolean;
baseTexture?: boolean;
}
export class Bounds {
minX: number;
minY: number;
maxX: number;
maxY: number;
rect: Rectangle;
isEmpty(): boolean;
clear(): void;
getRectangle(rect?: Rectangle): Rectangle;
addPoint(point: Point): void;
addQuad(vertices: ArrayLike<number>): Bounds | undefined;
addFrame(transform: Transform, x0: number, y0: number, x1: number, y1: number): void;
addVertices(transform: Transform, vertices: ArrayLike<number>, beginOffset: number, endOffset: number): void;
addBounds(bounds: Bounds): void;
addBoundsMask(bounds: Bounds, mask: Bounds): void;
addBoundsArea(bounds: Bounds, area: Rectangle): void;
}
export class Container extends DisplayObject {
// begin extras.getChildByName
getChildByName<T extends DisplayObject = Container>(name: string): T;
// end extras.getChildByName
children: DisplayObject[];
width: number;
height: number;
protected onChildrenChange: (...args: any[]) => void;
addChild<T extends DisplayObject>(child: T, ...additionalChildren: DisplayObject[]): T;
addChildAt<T extends DisplayObject>(child: T, index: number): T;
swapChildren(child: DisplayObject, child2: DisplayObject): void;
getChildIndex(child: DisplayObject): number;
setChildIndex(child: DisplayObject, index: number): void;
getChildAt<T extends DisplayObject = Container>(index: number): T;
removeChild<T extends DisplayObject = Container>(child: DisplayObject): T;
removeChildAt<T extends DisplayObject = Container>(index: number): T;
removeChildren<T extends DisplayObject = Container>(beginIndex?: number, endIndex?: number): T[];
updateTransform(): void;
calculateBounds(): void;
protected _calculateBounds(): void;
protected containerUpdateTransform(): void;
renderWebGL(renderer: WebGLRenderer): void;
renderAdvancedWebGL(renderer: WebGLRenderer): void;
protected _renderWebGL(renderer: WebGLRenderer): void;
protected _renderCanvas(renderer: CanvasRenderer): void;
renderCanvas(renderer: CanvasRenderer): void;
destroy(options?: DestroyOptions | boolean): void;
once(event: interaction.InteractionEventTypes | 'added' | 'removed', fn: (displayObject: DisplayObject) => void, context?: any): this;
//tslint:disable-next-line:ban-types forbidden-types
once(event: string, fn: Function, context?: any): this;
on(event: interaction.InteractionEventTypes | 'added' | 'removed', fn: (displayObject: DisplayObject) => void, context?: any): this;
//tslint:disable-next-line:ban-types forbidden-types
on(event: string, fn: Function, context?: any): this;
//tslint:disable-next-line:ban-types forbidden-types
off(event: 'added' | 'removed' | string, fn?: Function, context?: any): this;
}
export class DisplayObject extends utils.EventEmitter implements interaction.InteractiveTarget, accessibility.AccessibleTarget {
// begin extras.cacheAsBitmap
protected _cacheAsBitmap: boolean;
protected _cacheData: boolean;
cacheAsBitmap: boolean;
protected _renderCachedWebGL(renderer: WebGLRenderer): void;
protected _initCachedDisplayObject(renderer: WebGLRenderer): void;
protected _renderCachedCanvas(renderer: CanvasRenderer): void;
protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void;
protected _calculateCachedBounds(): Rectangle;
protected _getCachedLocalBounds(): Rectangle;
protected _destroyCachedDisplayObject(): void;
protected _cacheAsBitmapDestroy(options: boolean | any): void;
// end extras.cacheAsBitmap
// begin extras.getChildByName
name: string | null;
// end extras.getChildByName
// begin extras.getGlobalPosition
getGlobalPosition(point?: Point, skipUpdate?: boolean): Point;
// end extras.getGlobalPosition
// begin accessible target
accessible: boolean;
accessibleTitle: string | null;
accessibleHint: string | null;
tabIndex: number;
// end accessible target
// begin interactive target
interactive: boolean;
interactiveChildren: boolean;
hitArea: PIXI.Rectangle | PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.RoundedRectangle | PIXI.HitArea;
buttonMode: boolean;
cursor: string;
trackedPointers: { [key: number]: interaction.InteractionTrackingData };
// depricated
defaultCursor: string;
// end interactive target
transform: TransformBase;
alpha: number;
visible: boolean;
renderable: boolean;
parent: Container;
worldAlpha: number;
filterArea: Rectangle | null;
protected _filters: Filter<any>[] | null;
protected _enabledFilters: Filter<any>[] | null;
protected _bounds: Bounds;
protected _boundsID: number;
protected _lastBoundsID: number;
protected _boundsRect: Rectangle;
protected _localBoundsRect: Rectangle;
protected _mask: PIXI.Graphics | PIXI.Sprite | null;
protected readonly _destroyed: boolean;
x: number;
y: number;
worldTransform: Matrix;
localTransform: Matrix;
position: Point | ObservablePoint;
scale: Point | ObservablePoint;
pivot: Point | ObservablePoint;
skew: ObservablePoint;
rotation: number;
worldVisible: boolean;
mask: PIXI.Graphics | PIXI.Sprite | null;
filters: Filter<any>[] | null;
updateTransform(): void;
protected displayObjectUpdateTransform(): void;
protected _recursivePostUpdateTransform(): void;
getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle;
getLocalBounds(rect?: Rectangle): Rectangle;
//creates and returns a new point
toGlobal(position: PointLike): Point;
//modifies the x and y of the passed point and returns it
toGlobal<T extends PointLike>(position: PointLike, point?: T, skipUpdate?: boolean): T;
//creates and returns a new point
toLocal(position: PointLike, from?: DisplayObject): Point;
//modifies the x and y of the passed point and returns it
toLocal<T extends PointLike>(position: PointLike, from?: DisplayObject, point?: T, skipUpdate?: boolean): T;
renderWebGL(renderer: WebGLRenderer): void;
renderCanvas(renderer: CanvasRenderer): void;
setParent(container: Container): Container;
setTransform(
x?: number,
y?: number,
scaleX?: number,
scaleY?: number,
rotation?: number,
skewX?: number,
skewY?: number,
pivotX?: number,
pivotY?: number
): DisplayObject;
destroy(): void;
on(event: interaction.InteractionEventTypes, fn: (event: interaction.InteractionEvent) => void, context?: any): this;
once(event: interaction.InteractionEventTypes, fn: (event: interaction.InteractionEvent) => void, context?: any): this;
removeListener(event: interaction.InteractionEventTypes, fn?: (event: interaction.InteractionEvent) => void, context?: any): this;
removeAllListeners(event?: interaction.InteractionEventTypes): this;
off(event: interaction.InteractionEventTypes, fn?: (event: interaction.InteractionEvent) => void, context?: any): this;
addListener(event: interaction.InteractionEventTypes, fn: (event: interaction.InteractionEvent) => void, context?: any): this;
}
export class TransformBase {
static IDENTITY: TransformBase;
worldTransform: Matrix;
localTransform: Matrix;
protected _worldID: number;
protected _parentID: number;
updateLocalTransform(): void;
updateTransform(parentTransform: TransformBase): void;
updateWorldTransform(parentTransform: TransformBase): void;
}
export class TransformStatic extends TransformBase {
position: ObservablePoint;
scale: ObservablePoint;
pivot: ObservablePoint;
skew: ObservablePoint;
protected _rotation: number;
protected _sr?: number;
protected _cr?: number;
protected _cy?: number;
protected _sy?: number;
protected _sx?: number;
protected _cx?: number;
protected _localID: number;
protected _currentLocalID: number;
protected onChange(): void;
updateSkew(): void;
setFromMatrix(matrix: Matrix): void;
rotation: number;
}
export class Transform extends TransformBase {
constructor();
position: Point;
scale: Point;
skew: ObservablePoint;
pivot: Point;
protected _rotation: number;
protected _sr?: number;
protected _cr?: number;
protected _cy?: number;
protected _sy?: number;
protected _sx?: number;
protected _cx?: number;
updateSkew(): void;
setFromMatrix(matrix: Matrix): void;
rotation: number;
}
// graphics
export class GraphicsData {
constructor(
lineWidth: number,
lineColor: number,
lineAlpha: number,
fillColor: number,
fillAlpha: number,
fill: boolean,
nativeLines: boolean,
shape: Circle | Rectangle | Ellipse | Polygon | RoundedRectangle | any,
lineAlignment?: number
);
lineWidth: number;
lineAlignment: number;
nativeLines: boolean;
lineColor: number;
lineAlpha: number;
protected _lineTint: number;
fillColor: number;
fillAlpha: number;
protected _fillTint: number;
fill: boolean;
protected holes: Circle[] | Rectangle[] | Ellipse[] | Polygon[] | RoundedRectangle[] | any[];
shape: Circle | Rectangle | Ellipse | Polygon | RoundedRectangle | any;
type?: number;
clone(): GraphicsData;
addHole(shape: Circle | Rectangle | Ellipse | Polygon | RoundedRectangle | any): void;
destroy(options?: DestroyOptions | boolean): void;
}
export class Graphics extends Container {
static CURVES: {
adaptive: boolean;
maxLength: number;
minSegments: number;
maxSegments: number;
};
constructor(nativeLines?: boolean);
fillAlpha: number;
lineWidth: number;
nativeLines: boolean;
lineColor: number;
lineAlignment: number;
protected graphicsData: GraphicsData[];
tint: number;
protected _prevTint: number;
blendMode: number;
currentPath: GraphicsData;
protected _webGL: any;
isMask: boolean;
boundsPadding: number;
protected _localBounds: Bounds;
dirty: number;
canvasTintDirty: number;
fastRectDirty: number;
clearDirty: number;
boundsDirty: number;
protected cachedSpriteDirty: boolean;
protected _spriteRect: Rectangle;
protected _fastRect: boolean;
static _SPRITE_TEXTURE: Texture;
clone(): Graphics;
protected _quadraticCurveLength(fromX: number, fromY: number, cpX: number, cpY: number, toX: number, toY: number): number;
protected _bezierCurveLength(
fromX: number,
fromY: number,
cpX: number,
cpY: number,
cpX2: number,
cpY2: number,
toX: number,
toY: number
): number;
protected _segmentsCount(length: number): number;
lineStyle(lineWidth?: number, color?: number, alpha?: number, alignment?: number): Graphics;
moveTo(x: number, y: number): Graphics;
lineTo(x: number, y: number): Graphics;
quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics;
bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics;
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics;
arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics;
beginFill(color: number, alpha?: number): Graphics;
endFill(): Graphics;
drawRect(x: number, y: number, width: number, height: number): Graphics;
drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics;
drawCircle(x: number, y: number, radius: number): Graphics;
drawEllipse(x: number, y: number, width: number, height: number): Graphics;
drawPolygon(path: number[] | Point[] | Polygon): Graphics;
drawStar(x: number, y: number, points: number, radius: number, innerRadius: number, rotation?: number): Graphics;
clear(): Graphics;
isFastRect(): boolean;
protected _renderCanvas(renderer: CanvasRenderer): void;
protected _calculateBounds(): Rectangle;
protected _renderSpriteRect(renderer: PIXI.SystemRenderer): void;
containsPoint(point: Point): boolean;
updateLocalBounds(): void;
drawShape(shape: Circle | Rectangle | Ellipse | Polygon | RoundedRectangle | any): GraphicsData;
generateCanvasTexture(scaleMode?: number, resolution?: number): Texture;
closePath(): Graphics;
addHole(): Graphics;
destroy(options?: DestroyOptions | boolean): void;
}
export class CanvasGraphicsRenderer {
constructor(renderer: SystemRenderer);
render(graphics: Graphics): void;
protected updateGraphicsTint(graphics: Graphics): void;
protected renderPolygon(points: Point[], close: boolean, context: CanvasRenderingContext2D): void;
destroy(): void;
}
export class GraphicsRenderer extends ObjectRenderer {
constructor(renderer: PIXI.CanvasRenderer);
protected graphicsDataPool: GraphicsData[];
protected primitiveShader: PrimitiveShader;
gl: WebGLRenderingContext;
CONTEXT_UID: number;
destroy(): void;
render(graphics: Graphics): void;
protected updateGraphics(graphics: PIXI.Graphics): void;
getWebGLData(webGL: WebGLRenderingContext, type: number, nativeLines: number): WebGLGraphicsData;
}
export class WebGLGraphicsData {
constructor(gl: WebGLRenderingContext, shader: glCore.GLShader, attribsState: glCore.AttribState);
gl: WebGLRenderingContext;
color: number[];
points: Point[];
indices: number[];
buffer: WebGLBuffer;
indexBuffer: WebGLBuffer;
dirty: boolean;
glPoints: number[];
glIndices: number[];
shader: glCore.GLShader;
vao: glCore.VertexArrayObject;
nativeLines: boolean;
reset(): void;
upload(): void;
destroy(): void;
}
export class PrimitiveShader extends glCore.GLShader {}
// math
export namespace GroupD8 {
export const E: number;
export const SE: number;
export const S: number;
export const SW: number;
export const W: number;
export const NW: number;
export const N: number;
export const NE: number;
export const MIRROR_HORIZONTAL: number;
export const MIRROR_VERTICAL: number;
export function uX(ind: number): number;
export function uY(ind: number): number;
export function vX(ind: number): number;
export function vY(ind: number): number;
export function inv(rotation: number): number;
export function add(rotationSecond: number, rotationFirst: number): number;
export function sub(rotationSecond: number, rotationFirst: number): number;
export function rotate180(rotation: number): number;
export function isVertical(rotation: number): boolean;
export function byDirection(dx: number, dy: number): number;
export function matrixAppendRotationInv(matrix: Matrix, rotation: number, tx: number, ty: number): void;
}
export class Matrix {
constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
a: number;
b: number;
c: number;
d: number;
tx: number;
ty: number;
fromArray(array: number[]): void;
set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix;
toArray(transpose?: boolean, out?: number[]): number[];
apply(pos: Point, newPos?: Point): Point;
applyInverse(pos: Point, newPos?: Point): Point;
translate(x: number, y: number): Matrix;
scale(x: number, y: number): Matrix;
rotate(angle: number): Matrix;
append(matrix: Matrix): Matrix;
setTransform(
x: number,
y: number,
pivotX: number,
pivotY: number,
scaleX: number,
scaleY: number,
rotation: number,
skewX: number,
skewY: number
): PIXI.Matrix;
prepend(matrix: Matrix): Matrix;
invert(): Matrix;
identity(): Matrix;
decompose(transform: TransformBase): TransformBase;
clone(): Matrix;
copy(matrix: Matrix): Matrix;
static IDENTITY: Matrix;
static TEMP_MATRIX: Matrix;
}
class PointLike {
x: number;
y: number;
set(x?: number, y?: number): void;
copy(point: PointLike): void;
}
export class ObservablePoint extends PointLike {
constructor(cb: () => any, scope?: any, x?: number, y?: number);
clone(cb?: Function, scope?: any): ObservablePoint;
equals(p: Point | ObservablePoint | PointLike): boolean;
cb: () => any;
scope: any;
}
export class Point extends PointLike {
constructor(x?: number, y?: number);
clone(): Point;
equals(p: PointLike): boolean;
}
export interface HitArea {
contains(x: number, y: number): boolean;
}
export class Circle implements HitArea {
constructor(x?: number, y?: number, radius?: number);
x: number;
y: number;
radius: number;
type: number;
clone(): Circle;
contains(x: number, y: number): boolean;
getBounds(): Rectangle;
}
export class Ellipse implements HitArea {
constructor(x?: number, y?: number, halfWidth?: number, halfHeight?: number);
x: number;
y: number;
width: number;
height: number;
type: number;
clone(): Ellipse;
contains(x: number, y: number): boolean;
getBounds(): Rectangle;
}
export class Polygon implements HitArea {
constructor(points: Point[] | number[]);
// Note - Rest Params cannot be combined with |
//tslint:disable-next-line:unified-signatures
constructor(...points: Point[]);
//tslint:disable-next-line:unified-signatures
constructor(...points: number[]);
closed: boolean;
points: number[];
type: number;
clone(): Polygon;
contains(x: number, y: number): boolean;
close(): void;
}
export class Rectangle implements HitArea {
constructor(x?: number, y?: number, width?: number, height?: number);
x: number;
y: number;
width: number;
height: number;
type: number;
left: number;
right: number;
top: number;
bottom: number;
static EMPTY: Rectangle;
clone(): Rectangle;
copy(rectangle: Rectangle): Rectangle;
contains(x: number, y: number): boolean;
pad(paddingX: number, paddingY: number): void;
fit(rectangle: Rectangle): void;
enlarge(rectangle: Rectangle): void;
}
export class RoundedRectangle implements HitArea {
constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
x: number;
y: number;
width: number;
height: number;
radius: number;
type: number;
clone(): RoundedRectangle;
contains(x: number, y: number): boolean;
}
// renderers
export interface RendererOptions {
/**
* the width of the renderers view [default=800]
*/
width?: number;
/**
* the height of the renderers view [default=600]
*/
height?: number;
/**
* the canvas to use as a view, optional
*/
view?: HTMLCanvasElement;
/**
* If the render view is transparent, [default=false]
*/
transparent?: boolean;
/**
* sets antialias (only applicable in chrome at the moment) [default=false]
*/
antialias?: boolean;
/**
* enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context [default=false]
*/
preserveDrawingBuffer?: boolean;
/**
* The resolution / device pixel ratio of the renderer, retina would be 2 [default=1]
*/
resolution?: number;
/**
* prevents selection of WebGL renderer, even if such is present [default=false]
*/
forceCanvas?: boolean;
/**
* The background color of the rendered area (shown if not transparent) [default=0x000000]
*/
backgroundColor?: number;
/**
* This sets if the renderer will clear the canvas or not before the new render pass. [default=true]
*/
clearBeforeRender?: boolean;
/**
* If true Pixi will Math.floor() x/ y values when rendering, stopping pixel interpolation. [default=false]
*/
roundPixels?: boolean;
/**
* forces FXAA antialiasing to be used over native FXAA is faster, but may not always look as great ** webgl only** [default=false]
*/
forceFXAA?: boolean;
/**
* `true` to ensure compatibility with older / less advanced devices. If you experience unexplained flickering try setting this to true. **webgl only** [default=false]
*/
legacy?: boolean;
/**
* Deprecated
*/
context?: WebGLRenderingContext;
/**
* Deprecated
*/
autoResize?: boolean;
/**
* Parameter passed to webgl context, set to "high-performance" for devices with dual graphics card
*/
powerPreference?: string;
}
export interface ApplicationOptions extends RendererOptions {
/**
* `true` to use PIXI.ticker.shared, `false` to create new ticker. [default=false]
*/
sharedTicker?: boolean;
/**
* `true` to use PIXI.loaders.shared, `false` to create new Loader.
*/
sharedLoader?: boolean;
/**
* automatically starts the rendering after the construction.
* Note that setting this parameter to false does NOT stop the shared ticker even if you set
* options.sharedTicker to true in case that it is already started. Stop it by your own.
*/
autoStart?: boolean;
}
interface DefaultRendererPlugins {
accessibility: accessibility.AccessibilityManager;
interaction: interaction.InteractionManager;
}
export interface RendererPlugins extends DefaultRendererPlugins {}
export class SystemRenderer extends utils.EventEmitter {
constructor(system: string, options?: RendererOptions);
constructor(system: string, screenWidth?: number, screenHeight?: number, options?: RendererOptions);
type: number;
options: RendererOptions;
screen: Rectangle;
readonly width: number;
readonly height: number;
view: HTMLCanvasElement;
resolution: number;
transparent: boolean;
autoResize: boolean;
blendModes: any; // todo?
preserveDrawingBuffer: boolean;
clearBeforeRender: boolean;
roundPixels: boolean;
backgroundColor: number;
protected _backgroundColor: number;
protected _backgroundColorRgba: number[];
protected _backgroundColorString: string;
protected _tempDisplayObjectParent: Container;
protected _lastObjectRendered: DisplayObject;
resize(screenWidth: number, screenHeight: number): void;
generateTexture(displayObject: DisplayObject, scaleMode?: number, resolution?: number, region?: Rectangle): RenderTexture;
render(...args: any[]): void;
destroy(removeView?: boolean): void;
}
interface DefaultCanvasRendererPlugins {
extract: extract.CanvasExtract;
prepare: prepare.CanvasPrepare;
}
export interface CanvasRendererPlugins extends DefaultCanvasRendererPlugins, RendererPlugins {}
export class CanvasRenderer extends SystemRenderer {
// plugintarget mixin start
static __plugins: { [pluginName: string]: { new (renderer: CanvasRenderer): any } };
static registerPlugin(pluginName: string, ctor: { new (renderer: CanvasRenderer): any }): void;
plugins: CanvasRendererPlugins;
initPlugins(): void;
destroyPlugins(): void;
// plugintarget mixin end
constructor(options?: RendererOptions);
constructor(screenWidth?: number, screenHeight?: number, options?: RendererOptions);
protected _activeBlendMode: number;
rootContext: CanvasRenderingContext2D;
rootResolution?: number;
refresh: boolean;
maskManager: CanvasMaskManager;
smoothProperty: string;
extract: extract.CanvasExtract;
context: CanvasRenderingContext2D | null;
render(
displayObject: PIXI.DisplayObject,
renderTexture?: PIXI.RenderTexture,
clear?: boolean,
transform?: PIXI.Matrix,
skipUpdateTransform?: boolean
): void;
setBlendMode(blendMode: number): void;
destroy(removeView?: boolean): void;
clear(clearColor?: string): void;
invalidateBlendMode(): void;
on(event: 'prerender' | 'postrender', fn: () => void, context?: any): this;
once(event: 'prerender' | 'postrender', fn: () => void, context?: any): this;
removeListener(event: 'prerender' | 'postrender', fn?: () => void, context?: any): this;
removeAllListeners(event?: 'prerender' | 'postrender'): this;
off(event: 'prerender' | 'postrender', fn?: () => void, context?: any): this;
addListener(event: 'prerender' | 'postrender', fn: () => void, context?: any): this;
}
export class CanvasMaskManager {
constructor(renderer: CanvasRenderer);
pushMask(maskData: any): void;
protected renderGraphicsShape(graphics: Graphics): void;
popMask(renderer: WebGLRenderer | CanvasRenderer): void;
destroy(): void;
}
export class CanvasRenderTarget {
constructor(width: number, height: number, resolution: number);
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
resolution: number;
width: number;
height: number;
clear(): void;
resize(width: number, height: number): void;
destroy(): void;
}
export interface WebGLRendererOptions extends RendererOptions {}
interface DefaultWebGLRendererPlugins {
extract: extract.WebGLExtract;
prepare: prepare.WebGLPrepare;
}
export interface WebGLRendererPlugins extends DefaultWebGLRendererPlugins, RendererPlugins {}
export class WebGLRenderer extends SystemRenderer {
// plugintarget mixin start
static __plugins: { [pluginName: string]: { new (renderer: WebGLRenderer): any } };
static registerPlugin(pluginName: string, ctor: { new (renderer: WebGLRenderer): any }): void;
plugins: WebGLRendererPlugins;
initPlugins(): void;
destroyPlugins(): void;
// plugintarget mixin end
constructor(options?: WebGLRendererOptions);
constructor(screenWidth?: number, screenHeight?: number, options?: WebGLRendererOptions);
protected _contextOptions: {
alpha: boolean;
antiAlias?: boolean;
premultipliedAlpha: boolean;
stencil: boolean;
preseveDrawingBuffer?: boolean;
};
protected _backgroundColorRgba: number[];
maskManager: MaskManager;
stencilManager?: StencilManager;
emptyRenderer: ObjectRenderer;
currentRenderer: ObjectRenderer;
gl: WebGLRenderingContext;
CONTEXT_UID: number;
state?: WebGLState;
renderingToScreen: boolean;
boundTextures: BaseTexture[];
filterManager: FilterManager;
textureManager?: TextureManager;
textureGC?: TextureGarbageCollector;
extract: extract.WebGLExtract;
protected drawModes: any;
protected _activeShader: Shader;
_activeRenderTarget: RenderTarget;
protected _initContext(): void;
render(
displayObject: PIXI.DisplayObject,
renderTexture?: PIXI.RenderTexture,
clear?: boolean,
transform?: PIXI.Matrix,
skipUpdateTransform?: boolean
): void;
setObjectRenderer(objectRenderer: ObjectRenderer): void;
flush(): void;
setBlendMode(blendMode: number): void;
clear(clearColor?: number): void;
setTransform(matrix: Matrix): void;
clearRenderTexture(renderTexture: RenderTexture, clearColor?: number): WebGLRenderer;
bindRenderTexture(renderTexture: RenderTexture, transform: Matrix): WebGLRenderer;
bindRenderTarget(renderTarget: RenderTarget): WebGLRenderer;
bindShader(shader: Shader, autoProject?: boolean): WebGLRenderer;
bindTexture(texture: Texture | BaseTexture, location?: number, forceLocation?: boolean): number;
unbindTexture(texture: Texture | BaseTexture): WebGLRenderer | undefined;
createVao(): glCore.VertexArrayObject;
bindVao(vao: glCore.VertexArrayObject): WebGLRenderer;
reset(): WebGLRenderer;
handleContextLost: (event: WebGLContextEvent) => void;
handleContextRestored: () => void;
destroy(removeView?: boolean): void;
on(event: 'prerender' | 'postrender', fn: () => void, context?: any): this;
on(event: 'context', fn: (gl: WebGLRenderingContext) => void, context?: any): this;
once(event: 'prerender' | 'postrender', fn: () => void, context?: any): this;
once(event: 'context', fn: (gl: WebGLRenderingContext) => void, context?: any): this;
removeListener(event: 'prerender' | 'postrender', fn?: () => void, context?: any): this;
removeListener(event: 'context', fn?: (gl: WebGLRenderingContext) => void, context?: any): this;
removeAllListeners(event?: 'prerender' | 'postrender' | 'context'): this;
off(event: 'prerender' | 'postrender', fn?: () => void, context?: any): this;
off(event: 'context', fn?: (gl: WebGLRenderingContext) => void, context?: any): this;
addListener(event: 'prerender' | 'postrender', fn: () => void, context?: any): this;
addListener(event: 'context', fn: (gl: WebGLRenderingContext) => void, context?: any): this;
}
export class WebGLState {
constructor(gl: WebGLRenderingContext);
activeState: number[];
defaultState: number[];
stackIndex: number;
stack: number[];
gl: WebGLRenderingContext;
maxAttribs: number;
attribState: glCore.AttribState;
nativeVaoExtension: any;
push(): void;
pop(): void;
setState(state: number[]): void;
setBlend(value: number): void;
setBlendMode(value: number): void;
setDepthTest(value: number): void;
setCullFace(value: number): void;
setFrontFace(value: number): void;
resetAttributes(): void;
resetToDefault(): void;
}
export class TextureManager {
constructor(renderer: WebGLRenderer);
renderer: WebGLRenderer;
gl: WebGLRenderingContext;
protected _managedTextures: Texture[];
bindTexture(): void;
getTexture(): WebGLTexture;
updateTexture(texture: BaseTexture | Texture): WebGLTexture;
destroyTexture(texture: BaseTexture, _skipRemove?: boolean): void;
removeAll(): void;
destroy(): void;
}
export class TextureGarbageCollector {
constructor(renderer: WebGLRenderer);
renderer: WebGLRenderer;
count: number;
checkCount: number;
maxIdle: number;
checkCountMax: number;
mode: number;
update(): void;
run(): void;
unload(displayObject: DisplayObject): void;
}
export abstract class ObjectRenderer extends WebGLManager {
constructor(renderer: WebGLRenderer);
start(): void;
stop(): void;
flush(): void;
render(...args: any[]): void;
}
export class Quad {
constructor(gl: WebGLRenderingContext);
gl: WebGLRenderingContext;
vertices: number[];
uvs: number[];
interleaved: number[];
indices: number[];
vertexBuffer: WebGLBuffer;
vao: glCore.VertexArrayObject;
initVao(shader: glCore.GLShader): void;
map(targetTextureFrame: Rectangle, destinationFrame: Rectangle): Quad;
upload(): Quad;
destroy(): void;
}
interface FilterDataStackItem {
renderTarget: RenderTarget;
filter: any[];
bounds: Rectangle;
}
export class RenderTarget {
protected filterPoolKey: string;
constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root?: boolean);
gl: WebGLRenderingContext;
frameBuffer: glCore.GLFramebuffer;
texture: Texture;
clearColor: number[];
size: Rectangle;
resolution: number;
projectionMatrix: Matrix;
transform: Matrix;
frame: Rectangle;
defaultFrame: Rectangle;
destinationFrame: Rectangle;
sourceFrame?: Rectangle;
stencilBuffer: glCore.GLFramebuffer;
stencilMaskStack: Graphics[];
filterData: {
index: number;
stack: FilterDataStackItem[];
};
scaleMode: number;
root: boolean;
clear(clearColor?: number[]): void;
attachStencilBuffer(): void;
setFrame(destinationFrame: Rectangle, sourceFrame: Rectangle): void;
activate(): void;
calculateProjection(destinationFrame: Rectangle, sourceFrame: Rectangle): void;
resize(width: number, height: number): void;
destroy(): void;
}
export class BlendModeManager extends WebGLManager {
constructor(renderer: WebGLRenderer);
currentBlendMode: number;
setBlendMode(blendMode: number): boolean;
}
interface FilterManagerStackItem {
renderTarget: RenderTarget;
sourceFrame: Rectangle;
destinationFrame: Rectangle;
filters: Filter<any>[];
target: any;
resolution: number;
}
export class FilterManager extends WebGLManager {
constructor(renderer: WebGLRenderer);
protected _screenWidth: number;
protected _screenHeight: number;
gl: WebGLRenderingContext;
quad: Quad;
stack: FilterManagerStackItem[];
stackIndex: number;
shaderCache: any;
filterData: any;
onPrerender(): void;
pushFilter(target: RenderTarget, filters: Filter<any>[]): void;
popFilter(): void;
applyFilter(shader: glCore.GLShader | Filter<any>, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void;
syncUniforms(shader: glCore.GLShader, filter: Filter<any>): void;
getRenderTarget(clear?: boolean, resolution?: number): RenderTarget;
returnRenderTarget(renderTarget: RenderTarget): RenderTarget;
calculateScreenSpaceMatrix(outputMatrix: Matrix): Matrix;
calculateNormalizedScreenSpaceMatrix(outputMatrix: Matrix): Matrix;
calculateSpriteMatrix(outputMatrix: Matrix, sprite: Sprite): Matrix;
destroy(contextLost?: boolean): void;
emptyPool(): void;
getPotRenderTarget(gl: WebGLRenderingContext, minWidth: number, minHeight: number, resolution: number): RenderTarget;
freePotRenderTarget(renderTarget: RenderTarget): void;
}
export class StencilMaskStack {
stencilStack: any[];
reverse: boolean;
count: number;
}
export class MaskManager extends WebGLManager {
scissor: boolean;
scissorData: any;
scissorRenderTarget: RenderTarget;
enableScissor: boolean;
alphaMaskPool: number[];
alphaMaskIndex: number;
pushMask(target: RenderTarget, maskData: Sprite | Graphics): void;
popMask(target: RenderTarget, maskData: Sprite | Graphics): void;
pushSpriteMask(target: RenderTarget, maskData: Sprite | Graphics): void;
popSpriteMask(): void;
pushStencilMask(maskData: Sprite | Graphics): void;
popStencilMask(): void;
pushScissorMask(target: RenderTarget, maskData: Sprite | Graphics): void;
popScissorMask(): void;
}
export class StencilManager extends WebGLManager {
constructor(renderer: WebGLRenderer);
stencilMaskStack: Graphics[];
protected _useCurrent(): void;
protected _getBitwiseMask(): number;
setMaskStack(stencilMasStack: Graphics[]): void;
pushStencil(graphics: Graphics): void;
popStencil(): void;
destroy(): void;
}
export class WebGLManager {
constructor(renderer: WebGLRenderer);
renderer: WebGLRenderer;
onContextChange(): void;
destroy(): void;
}
export interface UniformData<V> {
type: string;
value: V;
// name is set by pixi if uniforms were automatically extracted from shader code, but not used anywhere
name?: string;
}
type UniformDataMap<U> = { [K in keyof U]: UniformData<U[K]> };
export class Filter<U extends object> {
constructor(vertexSrc?: string, fragmentSrc?: string, uniformData?: UniformDataMap<U>);
protected _blendMode: number;
vertexSrc?: string;
fragmentSrc: string;
blendMode: number;
protected uniformData: UniformDataMap<U>;
uniforms: U;
glShaders: any;
glShaderKey?: number;
padding: number;
resolution: number;
enabled: boolean;
autoFit: boolean;
apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget, clear?: boolean, currentState?: any): void;
static defaultVertexSrc: string;
static defaultFragmentSrc: string;
}
type SpriteMaskFilterUniforms = {
mask: Texture;
otherMatrix: Matrix;
alpha: number;
};
export class SpriteMaskFilter extends Filter<SpriteMaskFilterUniforms> {
constructor(sprite: Sprite);
maskSprite: Sprite;
maskMatrix: Matrix;
apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget): void;
}
// sprites
export class Sprite extends Container {
constructor(texture?: Texture);
protected _anchor: ObservablePoint;
anchor: ObservablePoint;
protected _texture: Texture;
protected _transformTrimmed