CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-pixi--core

Core PixiJS WebGL rendering library providing essential 2D graphics infrastructure and hardware-accelerated rendering capabilities.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

@pixi/core

@pixi/core is the foundational WebGL rendering library of PixiJS, providing essential 2D graphics infrastructure and hardware-accelerated rendering capabilities. It offers comprehensive WebGL context management, texture systems, geometry handling, shader management, and renderer abstraction layers with automatic Canvas fallback.

Package Information

  • Package Name: @pixi/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @pixi/core

Core Imports

import { 
  Renderer, 
  AbstractRenderer, 
  autoDetectRenderer,
  Texture,
  BaseTexture,
  Geometry,
  Shader,
  Filter,
  Resource,
  BufferResource,
  ImageResource,
  CanvasResource,
  TextureMatrix,
  RenderTexture,
  Framebuffer
} from "@pixi/core";

For CommonJS:

const { 
  Renderer, 
  AbstractRenderer, 
  autoDetectRenderer,
  Texture,
  BaseTexture,
  Geometry,
  Shader,
  Filter,
  Resource,
  BufferResource,
  ImageResource,
  CanvasResource,
  TextureMatrix,
  RenderTexture,
  Framebuffer
} = require("@pixi/core");

Basic Usage

import { autoDetectRenderer, Texture, Geometry, Shader } from "@pixi/core";

// Create a renderer that auto-detects WebGL support
const renderer = autoDetectRenderer({
  width: 800,
  height: 600,
  backgroundColor: 0x1099bb
});

// Add canvas to DOM
document.body.appendChild(renderer.view);

// Create a texture from an image
const texture = Texture.from('/path/to/image.png');

// Create geometry for a quad
const geometry = new Geometry()
  .addAttribute('aVertexPosition', [-1, -1, 1, -1, 1, 1, -1, 1], 2)
  .addAttribute('aTextureCoord', [0, 0, 1, 0, 1, 1, 0, 1], 2)
  .addIndex([0, 1, 2, 0, 2, 3]);

// Basic shader
const shader = Shader.from(`
  attribute vec2 aVertexPosition;
  attribute vec2 aTextureCoord;
  varying vec2 vTextureCoord;
  
  void main() {
    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
    vTextureCoord = aTextureCoord;
  }
`, `
  precision mediump float;
  varying vec2 vTextureCoord;
  uniform sampler2D uSampler;
  
  void main() {
    gl_FragColor = texture2D(uSampler, vTextureCoord);
  }
`);

// Clear and render
renderer.clear();

Architecture

@pixi/core is built around several key architectural components:

  • Renderer System: AbstractRenderer and Renderer provide the core rendering pipeline with WebGL context management
  • Texture System: Texture, BaseTexture, and texture resources handle all image data and GPU texture management
  • Geometry System: Geometry, Buffer, and Attribute classes manage vertex data and GPU buffers
  • Shader System: Shader, Program, and UniformGroup provide shader compilation and management
  • Rendering Systems: Modular systems handle specific rendering aspects (masks, filters, state, etc.)
  • State Management: WebGL state tracking and optimization through the State system
  • Framebuffer System: Off-screen rendering capabilities with Framebuffer and RenderTexture

Capabilities

Rendering

Core rendering functionality including WebGL context management, render loops, and automatic renderer detection.

abstract class AbstractRenderer extends EventEmitter {
  resolution: number;
  screen: Rectangle;
  view: HTMLCanvasElement;
  plugins: IRendererPlugins;
  clearBeforeRender?: boolean;
  options: IRendererOptions;
  type: RENDERER_TYPE;
  useContextAlpha: boolean | 'notMultiplied';
  autoDensity: boolean;
  preserveDrawingBuffer: boolean;
  
  resize(desiredScreenWidth: number, desiredScreenHeight: number): void;
  render(displayObject: IRenderableObject, options?: IRendererRenderOptions): void;
  generateTexture(displayObject: IRenderableObject, options?: IGenerateTextureOptions): RenderTexture;
  addSystem(ClassRef: ISystemConstructor, name?: string): this;
  destroy(removeView?: boolean): void;
}

class Renderer extends AbstractRenderer {
  gl: IRenderingContext;
  globalUniforms: UniformGroup;
  
  constructor(options?: IRendererOptions);
  reset(): this;
  clear(): void;
}

function autoDetectRenderer(options?: IRendererOptionsAuto): AbstractRenderer;

Rendering

Textures

Comprehensive texture management system supporting multiple resource types, texture atlases, and GPU texture optimization.

class Texture<R = Resource> extends EventEmitter {
  static EMPTY: Texture;
  static WHITE: Texture;
  
  baseTexture: BaseTexture<R>;
  frame: Rectangle;
  orig: Rectangle;
  trim: Rectangle;
  valid: boolean;
  noFrame: boolean;
  defaultAnchor: Point;
  uvMatrix: TextureMatrix;
  rotate: number;
  
  constructor(baseTexture: BaseTexture<R>, frame?: Rectangle, orig?: Rectangle, trim?: Rectangle, rotate?: number, anchor?: IPointData);
  static from<R extends Resource = Resource>(source: TextureSource | TextureSource[], options?: IBaseTextureOptions): Texture<R>;
  static fromURL<R extends Resource = Resource>(url: string, options?: IBaseTextureOptions): Promise<Texture<R>>;
  static fromBuffer(buffer: Float32Array | Uint8Array, width: number, height: number): Texture<BufferResource>;
  static fromLoader<R extends Resource = Resource>(source: HTMLImageElement | HTMLCanvasElement | string, imageUrl: string, name?: string, options?: IBaseTextureOptions): Promise<Texture<R>>;
  static addToCache(texture: Texture, id: string): void;
  static removeFromCache(texture: string | Texture): Texture | null;
  clone(): Texture;
  update(): void;
  destroy(destroyBase?: boolean): void;
}

class BaseTexture<R = Resource> extends EventEmitter {
  width: number;
  height: number;
  resolution: number;
  resource: R;
  
  update(): void;
  setSize(desiredWidth: number, desiredHeight: number, resolution?: number): this;
  destroy(): void;
}

Textures

Geometry

Vertex data management with GPU buffer optimization, attribute handling, and efficient geometry rendering.

class Geometry extends EventEmitter {
  buffers: Buffer[];
  indexBuffer: Buffer;
  attributes: {[key: string]: Attribute};
  
  addAttribute(id: string, buffer: ArrayLike<number> | Buffer | Attribute, size?: number): this;
  addIndex(buffer: ArrayLike<number> | Buffer): this;
  getAttribute(id: string): Attribute;
  getBuffer(id: string): Buffer;
  clone(): Geometry;
  destroy(): void;
}

class Buffer {
  data: IArrayBuffer;
  type: BUFFER_TYPE;
  
  constructor(data?: IArrayBuffer, _static?: boolean, index?: boolean);
  update(data?: IArrayBuffer): void;
  destroy(): void;
}

Geometry

Shaders

Shader compilation, uniform management, and program linking with full WebGL shader support.

class Shader extends EventEmitter {
  program: Program;
  uniforms: Dict<any>;
  
  constructor(program: Program, uniforms?: Dict<any>);
  static from(vertexSrc?: string, fragmentSrc?: string, uniforms?: Dict<any>): Shader;
  destroy(): void;
}

class Program {
  vertexSrc: string;
  fragmentSrc: string;
  
  constructor(vertexSrc?: string, fragmentSrc?: string, name?: string);
  static from(vertexSrc?: string, fragmentSrc?: string, name?: string): Program;
}

class UniformGroup<LAYOUT = Dict<any>> extends EventEmitter {
  uniforms: LAYOUT;
  
  constructor(uniforms: LAYOUT | Buffer, _static?: boolean, _id?: number);
  update(): void;
}

Shaders

Systems

Modular rendering systems that handle specific aspects of the WebGL rendering pipeline.

interface ISystem {
  destroy(): void;
}

// Core systems available on Renderer
interface RendererSystems {
  mask: MaskSystem;
  context: ContextSystem;
  state: StateSystem;
  shader: ShaderSystem;
  texture: TextureSystem;
  buffer: BufferSystem;
  geometry: GeometrySystem;
  framebuffer: FramebufferSystem;
  filter: FilterSystem;
  batch: BatchSystem;
  // ... additional systems
}

Systems

Filters

Post-processing effects and rendering filters for advanced visual effects.

class Filter extends Shader {
  padding: number;
  multisample: MSAA_QUALITY;
  enabled: boolean;
  autoFit: boolean;
  
  constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: Dict<any>);
  apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clearMode?: CLEAR_MODES): void;
}

class FilterState {
  renderTexture: RenderTexture;
  target: IRenderableObject;
  filters: Filter[];
  
  constructor();
  clear(): void;
}

Filters

State Management

WebGL state tracking and optimization to minimize state changes and improve performance.

class State {
  data: number;
  blendMode: BLEND_MODES;
  polygonOffset: number;
  
  constructor();
  clone(): State;
  reset(): void;
}

State Management

Framebuffers

Off-screen rendering capabilities with render textures and framebuffer management.

class Framebuffer {
  width: number;
  height: number;
  multisample: MSAA_QUALITY;
  stencil: boolean;
  depth: boolean;
  
  constructor(width: number, height: number);
  addColorTexture(index?: number, texture?: BaseTexture<Resource>): this;
  resize(width: number, height: number): void;
  destroy(): void;
}

class RenderTexture extends Texture {
  static create(options: IBaseRenderTextureOptions): RenderTexture;
  
  resize(desiredWidth: number, desiredHeight: number, resizeBaseTexture?: boolean): void;
}

Framebuffers

Types

Common types and interfaces used throughout the @pixi/core API:

interface IRenderableObject {
  parent: IRenderableContainer;
  enableTempParent(): IRenderableContainer;
  updateTransform(): void;
  disableTempParent(parent: IRenderableContainer): void;
  render(renderer: Renderer): void;
}

interface IRenderableContainer extends IRenderableObject {
  children: IRenderableObject[];
  addChild(child: IRenderableObject): IRenderableObject;
  removeChild(child: IRenderableObject): IRenderableObject;
}

interface IRenderingContext extends WebGL2RenderingContext {}

interface IRendererRenderOptions {
  renderTexture?: RenderTexture;
  clear?: boolean;
  transform?: Matrix;
  skipUpdateTransform?: boolean;
}

interface IGenerateTextureOptions {
  scaleMode?: SCALE_MODES;
  resolution?: number;
  region?: Rectangle;
  multisample?: MSAA_QUALITY;
}

interface ISystemConstructor {
  new (renderer: Renderer): ISystem;
}

interface ISystem {
  destroy(): void;
}

interface IRendererOptions {
  view?: HTMLCanvasElement;
  resolution?: number;
  autoDensity?: boolean;
  backgroundColor?: number;
  backgroundAlpha?: number;
  clearBeforeRender?: boolean;
  preserveDrawingBuffer?: boolean;
  width?: number;
  height?: number;
  antialias?: boolean;
  useContextAlpha?: boolean | 'notMultiplied';
  powerPreference?: WebGLPowerPreference;
  context?: IRenderingContext;
  transparent?: boolean; // deprecated since 6.0.0
}

interface IRendererOptionsAuto extends IRendererOptions {
  forceCanvas?: boolean;
}

interface IBaseTextureOptions {
  scaleMode?: SCALE_MODES;
  resolution?: number;
  mipmap?: MIPMAP_MODES;
  anisotropicLevel?: number;
  wrapMode?: WRAP_MODES;
  format?: FORMATS;
  type?: TYPES;
  target?: TARGETS;
  alphaMode?: ALPHA_MODES;
}

interface IPointData {
  x: number;
  y: number;
}

abstract class Resource {
  width: number;
  height: number;
  valid: boolean;
  
  bind(baseTexture: BaseTexture): void;
  unbind(baseTexture: BaseTexture): void;
  resize(width: number, height: number): void;
  update(): void;
  destroy(): void;
}

class BufferResource extends Resource {
  constructor(source: Float32Array | Uint8Array, options: { width: number; height: number });
}

class ImageResource extends Resource {
  url: string;
  
  constructor(source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap | string);
}

class CanvasResource extends Resource {
  canvas: HTMLCanvasElement;
  
  constructor(source: HTMLCanvasElement);
}

class TextureMatrix {
  mapCoord: Matrix;
  uClampFrame: Float32Array;
  uClampOffset: Float32Array;
  
  constructor(texture?: Texture, clampMargin?: number);
  update(forceUpdate?: boolean): boolean;
}

type TextureSource = string | BaseTexture | ImageSource;
type ImageSource = HTMLImageElement | HTMLVideoElement | ImageBitmap | HTMLCanvasElement;

// Constants from @pixi/constants package
enum RENDERER_TYPE {
  UNKNOWN = 0,
  WEBGL = 1,
  CANVAS = 2
}

enum BLEND_MODES {
  NORMAL = 0,
  ADD = 1,
  MULTIPLY = 2,
  SCREEN = 3,
  // ... additional blend modes
}

enum SCALE_MODES {
  NEAREST = 0,
  LINEAR = 1
}

enum MSAA_QUALITY {
  NONE = 0,
  LOW = 2,
  MEDIUM = 4,
  HIGH = 8
}

enum MIPMAP_MODES {
  OFF = 0,
  POW2 = 1,
  ON = 2,
  ON_MANUAL = 3
}

enum WRAP_MODES {
  CLAMP = 33071,
  REPEAT = 10497,
  MIRRORED_REPEAT = 33648
}

enum FORMATS {
  RGBA = 6408,
  RGB = 6407,
  ALPHA = 6406,
  LUMINANCE = 6409,
  LUMINANCE_ALPHA = 6410
}

enum TYPES {
  UNSIGNED_BYTE = 5121,
  UNSIGNED_SHORT = 5123,
  UNSIGNED_SHORT_5_6_5 = 33635,
  UNSIGNED_SHORT_4_4_4_4 = 32819,
  UNSIGNED_SHORT_5_5_5_1 = 32820,
  FLOAT = 5126
}

enum TARGETS {
  TEXTURE_2D = 3553,
  TEXTURE_CUBE_MAP = 34067,
  TEXTURE_2D_ARRAY = 35866,
  TEXTURE_CUBE_MAP_POSITIVE_X = 34069
}

enum ALPHA_MODES {
  NPM = 0,
  UNPACK = 1,
  PMA = 2,
  NO_PREMULTIPLIED_ALPHA = 0,
  PREMULTIPLY_ON_UPLOAD = 1,
  PREMULTIPLIED_ALPHA = 2
}

docs

filters.md

framebuffers.md

geometry.md

index.md

rendering.md

shaders.md

state.md

systems.md

textures.md

tile.json