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

Overview
Eval results
Files

geometry.mddocs/

Geometry

Vertex data management system providing GPU buffer optimization, attribute handling, and efficient geometry rendering. The geometry system manages vertex buffers, index buffers, and vertex attributes for WebGL rendering.

Capabilities

Geometry

Main geometry class that manages vertex data, attributes, and index buffers for efficient GPU rendering.

/**
 * Geometry manages vertex data and attributes for rendering
 * Handles vertex buffers, index buffers, and attribute definitions
 */
class Geometry extends EventEmitter {
  /** Array of vertex buffers */
  buffers: Buffer[];
  /** Index buffer for indexed rendering */
  indexBuffer: Buffer;
  /** Map of attribute definitions */
  attributes: {[key: string]: Attribute};
  /** Whether geometry has been destroyed */
  destroyed: boolean;
  /** Instance count for instanced rendering */
  instanceCount: number;
  /** WebGL Vertex Array Objects cache */
  glVertexArrayObjects: {[key: number]: {[key: string]: WebGLVertexArrayObject}};
  /** Dispose runner for cleanup */
  disposeRunner: Runner;

  /** Create a new Geometry */
  constructor();

  /**
   * Add an attribute to the geometry
   * @param id - Attribute identifier
   * @param buffer - Buffer data, Buffer instance, or Attribute
   * @param size - Number of components per vertex (default: 2)
   * @param normalized - Whether values should be normalized
   * @param type - Data type (FLOAT, etc.)
   * @param stride - Byte stride between vertices
   * @param start - Byte offset of first vertex
   * @param instance - Whether attribute is instanced
   */
  addAttribute(
    id: string,
    buffer: ArrayLike<number> | Buffer | Attribute,
    size?: number,
    normalized?: boolean,
    type?: TYPES,
    stride?: number,
    start?: number,
    instance?: boolean
  ): this;

  /**
   * Get an attribute by ID
   * @param id - Attribute identifier
   */
  getAttribute(id: string): Attribute;

  /**
   * Get a buffer by attribute ID
   * @param id - Attribute identifier  
   */
  getBuffer(id: string): Buffer;

  /**
   * Add index buffer for indexed rendering
   * @param buffer - Index data or Buffer instance
   */
  addIndex(buffer: ArrayLike<number> | Buffer): this;

  /**
   * Get the current index buffer
   */
  getIndex(): Buffer;

  /**
   * Interleave vertex data into a single buffer
   * @param arrays - Array of vertex data arrays
   * @param sizes - Array of component sizes for each attribute
   */
  interleave(): this;

  /** Get size of geometry (number of vertices) */
  getSize(): number;

  /** Clone the geometry */
  clone(): Geometry;

  /** Dispose of WebGL resources */
  dispose(): void;

  /** Destroy geometry and cleanup all resources */  
  destroy(): void;
}

Buffer

Buffer class that manages vertex or index data and handles GPU buffer creation and updates.

/**
 * Buffer manages vertex or index data for GPU rendering
 * Handles buffer creation, updates, and GPU resource management
 */
class Buffer {
  /** The data array (vertices, indices, etc.) */
  data: IArrayBuffer;
  /** Buffer type (ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER) */
  type: BUFFER_TYPE;
  /** Whether buffer is static (infrequently updated) */
  static: boolean;
  /** Unique buffer ID */
  id: number;
  /** Dispose runner for cleanup */
  disposeRunner: Runner;

  /**
   * Create a new Buffer
   * @param data - Vertex or index data
   * @param _static - Whether buffer is static
   * @param index - Whether this is an index buffer
   */
  constructor(data?: IArrayBuffer, _static?: boolean, index?: boolean);

  /**
   * Update buffer data
   * @param data - New buffer data
   */
  update(data?: IArrayBuffer): void;

  /** Dispose of GPU resources */
  dispose(): void;

  /** Destroy buffer and cleanup resources */
  destroy(): void;

  /**
   * Create buffer from array
   * @param array - Source data array
   */
  static from(array: IArrayBuffer | number[]): Buffer;
}

type IArrayBuffer = ArrayBuffer | ArrayBufferView | number[];

enum BUFFER_TYPE {
  ELEMENT_ARRAY_BUFFER = 34963,
  ARRAY_BUFFER = 34962
}

Attribute

Attribute class that defines how vertex data should be interpreted by WebGL vertex shaders.

/**
 * Attribute defines how vertex buffer data is interpreted
 * Specifies data layout for vertex shader attributes
 */
class Attribute {
  /** The buffer containing attribute data */
  buffer: Buffer;
  /** Number of components per vertex (1-4) */
  size: number;
  /** Whether values should be normalized to 0-1 range */
  normalized: boolean;
  /** Data type (FLOAT, UNSIGNED_BYTE, etc.) */
  type: TYPES;
  /** Byte stride between consecutive vertices */
  stride: number;
  /** Byte offset of first vertex in buffer */
  start: number;
  /** Whether attribute is instanced (one value per instance) */
  instance: boolean;
  /** Attribute divisor for instanced rendering */
  divisor: number;

  /**
   * Create a new Attribute
   * @param buffer - Buffer containing attribute data
   * @param size - Components per vertex
   * @param normalized - Normalize values flag
   * @param type - Data type
   * @param stride - Byte stride
   * @param start - Byte offset
   * @param instance - Instanced attribute flag
   */
  constructor(
    buffer: Buffer,
    size?: number,
    normalized?: boolean,
    type?: TYPES,
    stride?: number,
    start?: number,
    instance?: boolean
  );

  /** Destroy attribute */
  destroy(): void;

  /**
   * Create attribute from array data
   * @param array - Source data
   * @param size - Components per vertex
   * @param normalized - Normalize flag
   */
  static from(array: number[], size?: number, normalized?: boolean): Attribute;
}

ViewableBuffer

Advanced buffer that provides typed array views and automatic resizing capabilities.

/**
 * ViewableBuffer provides typed array views of buffer data
 * Automatically manages buffer resizing and provides convenient access
 */
class ViewableBuffer {
  /** Raw buffer data */
  rawBinaryData: ArrayBuffer;
  /** 32-bit unsigned integer view */
  uint32View: Uint32Array;
  /** 32-bit float view */
  float32View: Float32Array;
  /** Buffer size in bytes */
  size: number;

  /**
   * Create a new ViewableBuffer
   * @param sizeOrBuffer - Initial size or existing ArrayBuffer
   */
  constructor(sizeOrBuffer: number | ArrayBuffer);

  /** Get current buffer size in bytes */
  get rawBinaryDataBuffer(): ArrayBuffer;

  /**
   * Ensure buffer has at least the specified size
   * @param sizeRequired - Required size in bytes
   */
  checkDataSize(sizeRequired: number): void;

  /**
   * Resize buffer to new size
   * @param size - New size in bytes
   */
  resize(size: number): void;

  /** Destroy buffer */
  destroy(): void;
}

BatchGeometry

Specialized geometry for batch rendering that handles dynamic vertex data updates.

/**
 * BatchGeometry specialized for batch rendering systems
 * Handles dynamic vertex data and efficient batch updates
 */
class BatchGeometry extends Geometry {
  /** Maximum number of textures per batch */
  static MAX_TEXTURES: number;

  /** Packed vertex data */
  _buffer: Buffer;
  /** Index data */
  _indexBuffer: Buffer;

  /**
   * Create a new BatchGeometry
   * @param _static - Whether geometry is static
   */
  constructor(_static?: boolean);
}

Usage Examples:

import { Geometry, Buffer, Attribute } from "@pixi/core";

// Create basic triangle geometry
const geometry = new Geometry();

// Add vertex positions (3 vertices, 2 components each)
geometry.addAttribute('aVertexPosition', [
  -0.5, -0.5,  // vertex 1
   0.5, -0.5,  // vertex 2  
   0.0,  0.5   // vertex 3
], 2);

// Add texture coordinates
geometry.addAttribute('aTextureCoord', [
  0, 0,  // UV for vertex 1
  1, 0,  // UV for vertex 2
  0.5, 1 // UV for vertex 3
], 2);

// Create quad with indices
const quadGeometry = new Geometry()
  .addAttribute('aVertexPosition', [
    -1, -1,  // bottom-left
     1, -1,  // bottom-right
     1,  1,  // top-right
    -1,  1   // top-left
  ], 2)
  .addIndex([0, 1, 2, 0, 2, 3]); // Two triangles

// Create geometry with explicit buffers
const positionBuffer = new Buffer(new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5
]), false); // dynamic buffer

const positionAttribute = new Attribute(positionBuffer, 2, false, TYPES.FLOAT);
geometry.addAttribute('aVertexPosition', positionAttribute);

// Update buffer data
positionBuffer.update(new Float32Array([
  -0.8, -0.8,
   0.8, -0.8,
   0.0,  0.8
]));

// Interleaved vertex data (position + UV)
const interleavedGeometry = new Geometry();
interleavedGeometry.addAttribute('aVertexPosition', [
  -1, -1, 0, 0,  // vertex 1: pos(-1,-1), uv(0,0)
   1, -1, 1, 0,  // vertex 2: pos(1,-1), uv(1,0)
   1,  1, 1, 1,  // vertex 3: pos(1,1), uv(1,1)
  -1,  1, 0, 1   // vertex 4: pos(-1,1), uv(0,1)
], 2, false, TYPES.FLOAT, 4 * 4, 0); // stride=16 bytes, start=0

interleavedGeometry.addAttribute('aTextureCoord', 
  interleavedGeometry.getBuffer('aVertexPosition'), // same buffer
  2, false, TYPES.FLOAT, 4 * 4, 2 * 4); // stride=16 bytes, start=8 bytes

// Instanced geometry
const instanceGeometry = new Geometry();
instanceGeometry.instanceCount = 100;
instanceGeometry.addAttribute('aVertexPosition', quadVertices, 2);
instanceGeometry.addAttribute('aInstancePosition', instancePositions, 2, false, TYPES.FLOAT, 0, 0, true);

// Get geometry info
console.log('Vertex count:', geometry.getSize());
console.log('Has indices:', !!geometry.indexBuffer);

Types

enum TYPES {
  BYTE = 5120,
  UNSIGNED_BYTE = 5121,
  SHORT = 5122,
  UNSIGNED_SHORT = 5123,
  INT = 5124,
  UNSIGNED_INT = 5125,
  FLOAT = 5126,
  DOUBLE = 5130,
  HALF_FLOAT = 36193
}

interface IAttributeData {
  buffer: Buffer;
  size: number;
  normalized: boolean;
  type: TYPES;
  stride: number;
  start: number;
  instance: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-pixi--core

docs

filters.md

framebuffers.md

geometry.md

index.md

rendering.md

shaders.md

state.md

systems.md

textures.md

tile.json