pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 12.6 kB

Source Map (JSON)

View Raw

{"version":3,"file":"GenerateTextureSystem.mjs","sources":["../../../../../src/rendering/renderers/shared/extract/GenerateTextureSystem.ts"],"sourcesContent":["import { Color, type ColorSource } from '../../../../color/Color';\nimport { ExtensionType } from '../../../../extensions/Extensions';\nimport { Matrix } from '../../../../maths/matrix/Matrix';\nimport { Rectangle } from '../../../../maths/shapes/Rectangle';\nimport { Bounds } from '../../../../scene/container/bounds/Bounds';\nimport { getLocalBounds } from '../../../../scene/container/bounds/getLocalBounds';\nimport { Container } from '../../../../scene/container/Container';\nimport { RenderTexture } from '../texture/RenderTexture';\n\nimport type { Renderer } from '../../types';\nimport type { System } from '../system/System';\nimport type { TextureSourceOptions } from '../texture/sources/TextureSource';\n\n/**\n * Options for generating a texture source.\n * @category rendering\n * @advanced\n * @interface\n */\nexport type GenerateTextureSourceOptions = Omit<TextureSourceOptions, 'resource' | 'width' | 'height' | 'resolution'>;\n\n/**\n * Options for generating a texture from a container.\n * Used to create reusable textures from display objects, which can improve performance\n * when the same content needs to be rendered multiple times.\n * @example\n * ```ts\n * // Basic texture generation\n * const sprite = new Sprite(texture);\n * const generatedTexture = renderer.generateTexture({\n * target: sprite\n * });\n *\n * // Generate with custom region and resolution\n * const texture = renderer.generateTexture({\n * target: container,\n * frame: new Rectangle(0, 0, 100, 100),\n * resolution: 2\n * });\n *\n * // Generate with background color and anti-aliasing\n * const highQualityTexture = renderer.generateTexture({\n * target: graphics,\n * clearColor: '#ff0000',\n * antialias: true,\n * textureSourceOptions: {\n * scaleMode: 'linear'\n * }\n * });\n * ```\n * @category rendering\n * @advanced\n */\nexport type GenerateTextureOptions = {\n /**\n * The container to generate the texture from.\n * This can be any display object like Sprite, Container, or Graphics.\n * @example\n * ```ts\n * const graphics = new Graphics()\n * .circle(0, 0, 50)\n * .fill('red');\n *\n * const texture = renderer.generateTexture({\n * target: graphics\n * });\n * ```\n */\n target: Container;\n\n /**\n * The region of the container that should be rendered.\n * If not specified, defaults to the local bounds of the container.\n * @example\n * ```ts\n * // Extract only a portion of the container\n * const texture = renderer.generateTexture({\n * target: container,\n * frame: new Rectangle(10, 10, 100, 100)\n * });\n * ```\n */\n frame?: Rectangle;\n\n /**\n * The resolution of the texture being generated.\n * Higher values create sharper textures at the cost of memory.\n * @default renderer.resolution\n * @example\n * ```ts\n * // Generate a high-resolution texture\n * const hiResTexture = renderer.generateTexture({\n * target: sprite,\n * resolution: 2 // 2x resolution\n * });\n * ```\n */\n resolution?: number;\n\n /**\n * The color used to clear the texture before rendering.\n * Can be a hex number, string, or array of numbers.\n * @example\n * ```ts\n * // Clear with red background\n * const texture = renderer.generateTexture({\n * target: sprite,\n * clearColor: '#ff0000'\n * });\n *\n * // Clear with semi-transparent black\n * const texture = renderer.generateTexture({\n * target: sprite,\n * clearColor: [0, 0, 0, 0.5]\n * });\n * ```\n */\n clearColor?: ColorSource;\n\n /**\n * Whether to enable anti-aliasing. This may affect performance.\n * @default false\n * @example\n * ```ts\n * // Generate a smooth texture\n * const texture = renderer.generateTexture({\n * target: graphics,\n * antialias: true\n * });\n * ```\n */\n antialias?: boolean;\n\n /**\n * Advanced options for configuring the texture source.\n * Controls texture properties like scale mode and filtering.\n * @advanced\n * @example\n * ```ts\n * const texture = renderer.generateTexture({\n * target: sprite,\n * textureSourceOptions: {\n * scaleMode: 'linear',\n * }\n * });\n * ```\n */\n textureSourceOptions?: GenerateTextureSourceOptions;\n};\n\nconst tempRect = new Rectangle();\nconst tempBounds = new Bounds();\nconst noColor: ColorSource = [0, 0, 0, 0];\n\n/**\n * System that manages the generation of textures from display objects in the renderer.\n * This system is responsible for creating reusable textures from containers, sprites, and other display objects.\n * Available through `renderer.textureGenerator`.\n * @example\n * ```ts\n * import { Application, Sprite, Graphics } from 'pixi.js';\n *\n * const app = new Application();\n * await app.init();\n *\n * // Create a complex display object\n * const container = new Container();\n *\n * const graphics = new Graphics()\n * .circle(0, 0, 50)\n * .fill('red');\n *\n * const sprite = new Sprite(texture);\n * sprite.x = 100;\n *\n * container.addChild(graphics, sprite);\n *\n * // Generate a texture from the container\n * const generatedTexture = app.renderer.textureGenerator.generateTexture({\n * target: container,\n * resolution: 2,\n * antialias: true\n * });\n *\n * // Use the generated texture\n * const newSprite = new Sprite(generatedTexture);\n * app.stage.addChild(newSprite);\n *\n * // Clean up when done\n * generatedTexture.destroy(true);\n * ```\n *\n * Features:\n * - Convert any display object to a texture\n * - Support for custom regions and resolutions\n * - Anti-aliasing support\n * - Background color configuration\n * - Texture source options customization\n *\n * Common Use Cases:\n * - Creating texture atlases dynamically\n * - Caching complex container content\n * - Generating thumbnails\n * - Creating reusable textures from rendered content\n *\n * Performance Considerations:\n * - Generating textures is relatively expensive\n * - Cache results when possible\n * - Be mindful of resolution and size\n * - Clean up unused textures\n * @see {@link GenerateTextureOptions} For detailed texture generation options\n * @see {@link AbstractRenderer.generateTexture} For the main renderer method\n * @see {@link RenderTexture} For the resulting texture type\n * @category rendering\n * @standard\n */\nexport class GenerateTextureSystem implements System\n{\n /** @ignore */\n public static extension = {\n type: [\n ExtensionType.WebGLSystem,\n ExtensionType.WebGPUSystem,\n ExtensionType.CanvasSystem,\n ],\n name: 'textureGenerator',\n } as const;\n\n private readonly _renderer: Renderer;\n\n constructor(renderer: Renderer)\n {\n this._renderer = renderer;\n }\n\n /**\n * Creates a texture from a display object that can be used for creating sprites and other textures.\n * This is particularly useful for optimizing performance when a complex container needs to be reused.\n * @param options - Generate texture options or a container to convert to texture\n * @returns A new RenderTexture containing the rendered display object\n * @example\n * ```ts\n * // Basic usage with a container\n * const container = new Container();\n * container.addChild(\n * new Graphics()\n * .circle(0, 0, 50)\n * .fill('red')\n * );\n *\n * const texture = renderer.textureGenerator.generateTexture(container);\n *\n * // Advanced usage with options\n * const texture = renderer.textureGenerator.generateTexture({\n * target: container,\n * frame: new Rectangle(0, 0, 100, 100), // Specific region\n * resolution: 2, // High DPI\n * clearColor: '#ff0000', // Red background\n * antialias: true // Smooth edges\n * });\n *\n * // Create a sprite from the generated texture\n * const sprite = new Sprite(texture);\n *\n * // Clean up when done\n * texture.destroy(true);\n * ```\n * @see {@link GenerateTextureOptions} For detailed texture generation options\n * @see {@link RenderTexture} For the type of texture created\n * @category rendering\n */\n public generateTexture(options: GenerateTextureOptions | Container): RenderTexture\n {\n if (options instanceof Container)\n {\n options = {\n target: options,\n frame: undefined,\n textureSourceOptions: {},\n resolution: undefined,\n };\n }\n\n const resolution = options.resolution || this._renderer.resolution;\n const antialias = options.antialias || this._renderer.view.antialias;\n\n const container = options.target;\n\n let clearColor = options.clearColor;\n\n if (clearColor)\n {\n const isRGBAArray = Array.isArray(clearColor) && clearColor.length === 4;\n\n clearColor = isRGBAArray ? clearColor : Color.shared.setValue(clearColor).toArray();\n }\n else\n {\n clearColor = noColor;\n }\n\n const region = options.frame?.copyTo(tempRect)\n || getLocalBounds(container, tempBounds).rectangle;\n\n region.width = Math.max(region.width, 1 / resolution) | 0;\n region.height = Math.max(region.height, 1 / resolution) | 0;\n\n const target = RenderTexture.create({\n ...options.textureSourceOptions,\n width: region.width,\n height: region.height,\n resolution,\n antialias,\n });\n\n const transform = Matrix.shared.translate(-region.x, -region.y);\n\n this._renderer.render({\n container,\n transform,\n target,\n clearColor,\n });\n\n target.source.updateMipmaps();\n\n return target;\n }\n\n public destroy(): void\n {\n (this._renderer as null) = null;\n }\n}\n"],"names":[],"mappings":"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"}