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

State Management

Name: tessl/npm-pixi--core
Author: tessl

WebGL state tracking and optimization to minimize state changes and improve performance. The state system manages blend modes, depth testing, culling, and other WebGL state parameters.

Capabilities

State

Core state class that manages WebGL rendering state and optimizes state changes.

/**
 * State manages WebGL rendering state for optimization
 * Tracks and minimizes redundant WebGL state changes
 */
class State {
  /** Packed state data as bit flags */
  data: number;
  /** Current blend mode */
  blendMode: BLEND_MODES;
  /** Polygon offset value */
  polygonOffset: number;
  /** Whether state is for 2D rendering */
  _blendEq: boolean;
  /** Blend equation for RGB */
  _blendSrc: number;
  /** Blend equation for alpha */
  _blendDst: number;
  /** Depth test function */
  _depthTest: boolean;

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

  /** Clone the current state */
  clone(): State;

  /** Reset state to default values */
  reset(): void;

  /**
   * Set blend mode and update blend equations
   * @param value - Blend mode to set
   */
  setBlendMode(value: BLEND_MODES): void;

  /**
   * Set depth test state
   * @param value - Enable depth testing
   */
  setDepthTest(value: boolean): void;

  /**
   * Set face culling mode
   * @param value - Enable face culling
   */
  setCullFace(value: boolean): void;

  /**
   * Set depth mask (depth buffer writing)
   * @param value - Enable depth writing
   */
  setDepthMask(value: boolean): void;

  /**
   * Set front face winding order
   * @param value - Front face winding (CW or CCW)
   */
  setFrontFace(value: boolean): void;

  /**
   * Set which faces to cull
   * @param value - Cull back faces
   */
  setCullMode(value: boolean): void;

  /**
   * Create state optimized for 2D rendering
   */
  static for2d(): State;
}

Usage Examples:

import { State, BLEND_MODES } from "@pixi/core";

// Create default state
const defaultState = new State();

// Create 2D optimized state
const state2d = State.for2d();

// Custom state configuration
const customState = new State();
customState.blendMode = BLEND_MODES.ADD;
customState.setDepthTest(false);
customState.setCullFace(false);

// Apply state to renderer
renderer.state.setState(customState);

// Clone state for modifications
const modifiedState = defaultState.clone();
modifiedState.blendMode = BLEND_MODES.MULTIPLY;

// State management in rendering
function renderWithState(sprite, blendMode) {
  const currentState = State.for2d();
  currentState.blendMode = blendMode;
  
  renderer.state.setState(currentState);
  renderer.render(sprite);
}

// Batch state changes
const batchState = new State();
batchState.setBlendMode(BLEND_MODES.SCREEN);
batchState.setDepthTest(true);
batchState.setCullFace(true);
renderer.state.setState(batchState);

Types

enum BLEND_MODES {
  NORMAL = 0,
  ADD = 1,
  MULTIPLY = 2,
  SCREEN = 3,
  OVERLAY = 4,
  DARKEN = 5,
  LIGHTEN = 6,
  COLOR_DODGE = 7,
  COLOR_BURN = 8,
  HARD_LIGHT = 9,
  SOFT_LIGHT = 10,
  DIFFERENCE = 11,
  EXCLUSION = 12,
  HUE = 13,
  SATURATION = 14,
  COLOR = 15,
  LUMINOSITY = 16,
  NORMAL_NPM = 17,
  ADD_NPM = 18,
  SCREEN_NPM = 19,
  NONE = 20,
  SRC_OVER = 0,
  SRC_IN = 21,
  SRC_OUT = 22,
  SRC_ATOP = 23,
  DST_OVER = 24,
  DST_IN = 25,
  DST_OUT = 26,
  DST_ATOP = 27,
  ERASE = 26,
  SUBTRACT = 28,
  XOR = 29
}

Install with Tessl CLI