Framebuffers

/**
 * Framebuffer manages WebGL framebuffer objects for off-screen rendering
 * Handles color and depth attachments for render-to-texture operations
 */
class Framebuffer {
  /** Framebuffer width in pixels */
  width: number;
  /** Framebuffer height in pixels */
  height: number;
  /** Multisampling quality level */
  multisample: MSAA_QUALITY;
  /** Whether stencil buffer is enabled */
  stencil: boolean;
  /** Whether depth buffer is enabled */
  depth: boolean;
  /** Depth texture attachment */
  depthTexture: BaseTexture;
  /** Color texture attachments */
  colorTextures: BaseTexture[];
  /** WebGL framebuffer objects cache */
  glFramebuffers: {[key: number]: GLFramebuffer};
  /** Dispose runner for cleanup */
  disposeRunner: Runner;

  /**
   * Create a new Framebuffer
   * @param width - Framebuffer width
   * @param height - Framebuffer height
   */
  constructor(width: number, height: number);

  /**
   * Add color texture attachment
   * @param index - Attachment index (0-7)
   * @param texture - BaseTexture to attach (auto-created if not provided)
   */
  addColorTexture(index?: number, texture?: BaseTexture<Resource>): this;

  /**
   * Add depth texture attachment
   * @param texture - Depth texture (auto-created if not provided)
   */
  addDepthTexture(texture?: BaseTexture<Resource>): this;

  /** Enable depth and stencil buffer */
  enableDepth(): this;

  /** Enable stencil buffer */
  enableStencil(): this;

  /**
   * Resize framebuffer and all attachments
   * @param width - New width
   * @param height - New height
   */
  resize(width: number, height: number): void;

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

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

  /**
   * Get color texture at index
   * @param index - Attachment index
   */
  getColorTexture(index?: number): BaseTexture;
}

/**
 * GLFramebuffer wraps WebGL framebuffer objects
 * Manages GPU framebuffer state and attachments  
 */
class GLFramebuffer {
  /** WebGL framebuffer object */
  framebuffer: WebGLFramebuffer;
  /** Stencil attachment */
  stencil: WebGLRenderbuffer;
  /** Multisampled framebuffer */
  multisample: MSAA_QUALITY;
  /** MSAA render buffer */
  msaaBuffer: WebGLRenderbuffer;
  /** Blit framebuffer for MSAA resolve */
  blitFramebuffer: WebGLFramebuffer;
  /** Dirty ID for cache invalidation */
  dirtyId: number;
  /** Dirty format ID */
  dirtyFormat: number;
  /** Dirty size ID */
  dirtySize: number;

  /**
   * Create GLFramebuffer from Framebuffer
   * @param framebuffer - Source framebuffer  
   */
  constructor(framebuffer: Framebuffer);
}

/**
 * RenderTexture is a texture that can be rendered to
 * Combines texture and framebuffer for render-to-texture operations
 */
class RenderTexture extends Texture {
  /** Base render texture containing framebuffer */
  baseRenderTexture: BaseRenderTexture;
  /** Filter pool key for texture reuse */
  filterPoolKey: string | number | null;

  /**
   * Create a new RenderTexture
   * @param baseRenderTexture - Base render texture
   * @param frame - Texture frame
   */
  constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle);

  /**
   * Resize render texture
   * @param desiredWidth - Target width
   * @param desiredHeight - Target height  
   * @param resizeBaseTexture - Also resize base texture
   */
  resize(desiredWidth: number, desiredHeight: number, resizeBaseTexture?: boolean): void;

  /**
   * Set the frame for this render texture
   * @param frame - New frame rectangle
   */
  setFrame(frame: Rectangle): void;

  /**
   * Create render texture with options
   * @param options - Creation options
   */
  static create(options: IBaseRenderTextureOptions): RenderTexture;
}

/**
 * BaseRenderTexture manages framebuffer for render-to-texture
 * Extends BaseTexture with framebuffer rendering capabilities
 */
class BaseRenderTexture extends BaseTexture {
  /** Framebuffer for rendering */
  framebuffer: Framebuffer;
  /** Filter pool key */
  filterPoolKey: string | number | null;

  /**
   * Create a new BaseRenderTexture
   * @param options - Creation options
   */
  constructor(options?: IBaseRenderTextureOptions);

  /**
   * Resize render texture and framebuffer
   * @param desiredWidth - Target width
   * @param desiredHeight - Target height
   */
  resize(desiredWidth: number, desiredHeight: number): void;

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

  /** Destroy render texture */
  destroy(): void;
}

interface IBaseRenderTextureOptions extends IBaseTextureOptions {
  /** Framebuffer width */
  width?: number;
  /** Framebuffer height */  
  height?: number;
  /** Multisampling level */
  multisample?: MSAA_QUALITY;
}

/**
 * RenderTexturePool manages render texture reuse
 * Minimizes allocation overhead for temporary render textures
 */
class RenderTexturePool {
  /** Texture pool organized by key */
  texturePool: {[key: string | number]: RenderTexture[]};
  /** Options for pooled textures */
  textureOptions: IBaseRenderTextureOptions;
  /** Enable/disable the pool */
  enableFullScreen: boolean;

  /**
   * Create a new RenderTexturePool
   * @param textureOptions - Default options for pooled textures
   */
  constructor(textureOptions?: IBaseRenderTextureOptions);

  /**
   * Create key for texture pool lookup
   * @param pixelWidth - Width in pixels
   * @param pixelHeight - Height in pixels
   * @param multisample - MSAA level
   */
  createKey(pixelWidth: number, pixelHeight: number, multisample: MSAA_QUALITY): string;

  /**
   * Get render texture from pool
   * @param resolution - Texture resolution
   * @param width - Texture width
   * @param height - Texture height
   * @param multisample - MSAA level
   */
  getOptimalTexture(resolution: number, width: number, height: number, multisample?: MSAA_QUALITY): RenderTexture;

  /**
   * Get filter texture from pool
   * @param resolution - Texture resolution
   * @param multisample - MSAA level
   */
  getFilterTexture(resolution: number, multisample?: MSAA_QUALITY): RenderTexture;

  /**
   * Return texture to pool
   * @param renderTexture - Texture to return
   */
  returnTexture(renderTexture: RenderTexture): void;

  /**
   * Return filter texture to pool
   * @param renderTexture - Filter texture to return
   */
  returnFilterTexture(renderTexture: RenderTexture): void;

  /** Clear the texture pool */
  clear(destroyTextures?: boolean): void;

  /**
   * Set screen size for full-screen textures
   * @param size - Screen dimensions
   */
  setScreenSize(size: ISize): void;
}

import { Framebuffer, RenderTexture, BaseRenderTexture } from "@pixi/core";

// Create basic framebuffer
const framebuffer = new Framebuffer(256, 256);
framebuffer.addColorTexture(); // Auto-creates color attachment
framebuffer.enableDepth();     // Add depth buffer

// Create render texture
const renderTexture = RenderTexture.create({
  width: 512,
  height: 512,
  scaleMode: SCALE_MODES.LINEAR,
  resolution: 1
});

// Render to texture
renderer.render(mySprite, {
  renderTexture: renderTexture,
  clear: true
});

// Use rendered texture
const sprite = new Sprite(renderTexture);

// Multi-target rendering (MRT)
const multiTargetFramebuffer = new Framebuffer(256, 256);
multiTargetFramebuffer.addColorTexture(0); // Color attachment 0
multiTargetFramebuffer.addColorTexture(1); // Color attachment 1
multiTargetFramebuffer.addDepthTexture();  // Depth attachment

// High-quality render texture with MSAA
const hqRenderTexture = RenderTexture.create({
  width: 1024,
  height: 1024,
  multisample: MSAA_QUALITY.HIGH,
  resolution: 2
});

// Render texture pool usage
const pool = new RenderTexturePool();
const pooledTexture = pool.getOptimalTexture(1, 256, 256, MSAA_QUALITY.MEDIUM);

// Use pooled texture
renderer.render(scene, {
  renderTexture: pooledTexture,
  clear: true
});

// Return to pool when done
pool.returnTexture(pooledTexture);

// Filter texture from pool
const filterTexture = pool.getFilterTexture(1, MSAA_QUALITY.LOW);
// ... use for filtering ...
pool.returnFilterTexture(filterTexture);

// Render-to-texture pipeline
function createMipmappedTexture(sprite) {
  const baseSize = 512;
  const levels = [];
  
  for (let i = 0; i < 4; i++) {
    const size = baseSize >> i;
    const mipTexture = RenderTexture.create({
      width: size,
      height: size,
      scaleMode: SCALE_MODES.LINEAR
    });
    
    // Render previous level or original sprite
    const source = i === 0 ? sprite : levels[i - 1];
    renderer.render(source, {
      renderTexture: mipTexture,
      clear: true
    });
    
    levels.push(mipTexture);
  }
  
  return levels;
}

// Off-screen composition
const compositeTexture = RenderTexture.create({ width: 800, height: 600 });

// Render background
renderer.render(background, {
  renderTexture: compositeTexture,
  clear: true
});

// Render foreground with blend mode
foreground.blendMode = BLEND_MODES.ADD;
renderer.render(foreground, {
  renderTexture: compositeTexture,
  clear: false
});

// Use composite result
const finalSprite = new Sprite(compositeTexture);

// Resize render texture
renderTexture.resize(1024, 768);

// Custom framebuffer setup
const customFramebuffer = new Framebuffer(256, 256);
const colorTexture = new BaseTexture(null, {
  format: FORMATS.RGBA,
  type: TYPES.UNSIGNED_BYTE,
  width: 256,
  height: 256
});
customFramebuffer.addColorTexture(0, colorTexture);

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

interface IBaseRenderTextureOptions extends IBaseTextureOptions {
  width?: number;
  height?: number;
  multisample?: MSAA_QUALITY;
}

interface ISize {
  width: number;
  height: number;
}