pixi.js
Version:
<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">
108 lines (105 loc) • 3.76 kB
JavaScript
import { Color } from '../../../../color/Color.mjs';
import { ExtensionType } from '../../../../extensions/Extensions.mjs';
import { Matrix } from '../../../../maths/matrix/Matrix.mjs';
import { Rectangle } from '../../../../maths/shapes/Rectangle.mjs';
import { Bounds } from '../../../../scene/container/bounds/Bounds.mjs';
import { getLocalBounds } from '../../../../scene/container/bounds/getLocalBounds.mjs';
import { Container } from '../../../../scene/container/Container.mjs';
import { RenderTexture } from '../texture/RenderTexture.mjs';
;
const tempRect = new Rectangle();
const tempBounds = new Bounds();
const noColor = [0, 0, 0, 0];
class GenerateTextureSystem {
constructor(renderer) {
this._renderer = renderer;
}
/**
* Creates a texture from a display object that can be used for creating sprites and other textures.
* This is particularly useful for optimizing performance when a complex container needs to be reused.
* @param options - Generate texture options or a container to convert to texture
* @returns A new RenderTexture containing the rendered display object
* @example
* ```ts
* // Basic usage with a container
* const container = new Container();
* container.addChild(
* new Graphics()
* .circle(0, 0, 50)
* .fill('red')
* );
*
* const texture = renderer.textureGenerator.generateTexture(container);
*
* // Advanced usage with options
* const texture = renderer.textureGenerator.generateTexture({
* target: container,
* frame: new Rectangle(0, 0, 100, 100), // Specific region
* resolution: 2, // High DPI
* clearColor: '#ff0000', // Red background
* antialias: true // Smooth edges
* });
*
* // Create a sprite from the generated texture
* const sprite = new Sprite(texture);
*
* // Clean up when done
* texture.destroy(true);
* ```
* @see {@link GenerateTextureOptions} For detailed texture generation options
* @see {@link RenderTexture} For the type of texture created
* @category rendering
*/
generateTexture(options) {
if (options instanceof Container) {
options = {
target: options,
frame: void 0,
textureSourceOptions: {},
resolution: void 0
};
}
const resolution = options.resolution || this._renderer.resolution;
const antialias = options.antialias || this._renderer.view.antialias;
const container = options.target;
let clearColor = options.clearColor;
if (clearColor) {
const isRGBAArray = Array.isArray(clearColor) && clearColor.length === 4;
clearColor = isRGBAArray ? clearColor : Color.shared.setValue(clearColor).toArray();
} else {
clearColor = noColor;
}
const region = options.frame?.copyTo(tempRect) || getLocalBounds(container, tempBounds).rectangle;
region.width = Math.max(region.width, 1 / resolution) | 0;
region.height = Math.max(region.height, 1 / resolution) | 0;
const target = RenderTexture.create({
...options.textureSourceOptions,
width: region.width,
height: region.height,
resolution,
antialias
});
const transform = Matrix.shared.translate(-region.x, -region.y);
this._renderer.render({
container,
transform,
target,
clearColor
});
target.source.updateMipmaps();
return target;
}
destroy() {
this._renderer = null;
}
}
/** @ignore */
GenerateTextureSystem.extension = {
type: [
ExtensionType.WebGLSystem,
ExtensionType.WebGPUSystem
],
name: "textureGenerator"
};
export { GenerateTextureSystem };
//# sourceMappingURL=GenerateTextureSystem.mjs.map