@lightningjs/renderer 0.0.1

package/dist/src/core/text-rendering/renderers/TextRenderer.d.ts

@@ -0,0 +1,254 @@
+import type { EventEmitter } from '../../../common/EventEmitter.js';
+import type { Stage } from '../../Stage.js';
+import type { TrFontFace, TrFontFaceDescriptors } from '../font-face-types/TrFontFace.js';
+/**
+ * Augmentable map of text renderer type IDs to text renderer types.
+ *
+ * @example
+ * ```ts
+ * declare module './TextRenderer' {
+ *   interface TextRendererMap {
+ *     canvas: CanvasTextRenderer;
+ *   }
+ * }
+ * ```
+ */
+export interface TextRendererMap {
+}
+export interface TextRendererState {
+    props: TrProps;
+    status: 'initialState' | 'loading' | 'loaded' | 'failed';
+    /**
+     * Event emitter for the text renderer
+     */
+    emitter: EventEmitter;
+    /**
+     * Force a full layout pass for the calculation of the
+     * total dimensions of the text
+     */
+    forceFullLayoutCalc: boolean;
+    textW: number | undefined;
+    textH: number | undefined;
+    debugData: {
+        updateCount: number;
+        layoutCount: number;
+        drawCount: number;
+        lastLayoutNumCharacters: number;
+        layoutSum: number;
+        drawSum: number;
+        bufferSize: number;
+    };
+}
+export interface TextRendererDebugProps {
+    showRenderWindow: boolean;
+    showVisibleRect: boolean;
+    showElementRect: boolean;
+    disableScissor: boolean;
+    printLayoutTime: boolean;
+}
+/**
+ * Text renderer properties that are used in resolving appropriate font faces
+ *
+ * @remarks
+ * Extended by {@link TrProps}
+ */
+export interface TrFontProps {
+    /**
+     * Font Family
+     *
+     * @internalRemarks
+     * `fontFamily` is defined currently as single string, but in the future we may want to
+     * support multiple font family fallbacks, as this is supported by CSS / Canvas2d. We can
+     * do this in a backwards compatible way by unioning an array of strings to the
+     * `fontFamily` property.
+     */
+    fontFamily: string;
+    /**
+     * Font Weight
+     *
+     * @remarks
+     * The font weight to use when looking up the font face. This can be a numeric
+     * value between 1 and 1000, or one of the following strings:
+     * - `'normal'` - same as 400
+     * - `'bold'` - same as 700
+     * - `'bolder'` - (Not yet properly supported)
+     */
+    fontWeight: TrFontFaceDescriptors['weight'] | 'bolder' | 'lighter';
+    /**
+     * Font Style
+     *
+     * @remarks
+     * The font style to use when looking up the font face. This can be one of the
+     * following strings:
+     * - `'normal'`
+     * - `'italic'`
+     * - `'oblique'`
+     */
+    fontStyle: TrFontFaceDescriptors['style'];
+    /**
+     * Font Stretch
+     *
+     * @remarks
+     * The font stretch to use when looking up the font face. This can be one of the
+     * following strings:
+     * - `'normal'`
+     * - `'ultra-condensed'`
+     * - `'extra-condensed'`
+     * - `'condensed'`
+     * - `'semi-condensed'`
+     * - `'semi-expanded'`
+     * - `'expanded'`
+     * - `'extra-expanded'`
+     * - `'ultra-expanded'`
+     *
+     * @default 'normal'
+     */
+    fontStretch: TrFontFaceDescriptors['stretch'];
+    /**
+     * Font Size
+     *
+     * @remarks
+     * The font size to use when looking up the font face.
+     *
+     * The font size is specified in pixels and is the height of the font's
+     * em-square. The em-square is essentially the height of the capital letters
+     * for the font. The actual height of the text can be larger than the
+     * specified font size, as the font may have ascenders and descenders that
+     * extend beyond the em-square.
+     *
+     * @default 16
+     */
+    fontSize: number;
+}
+export interface TrProps extends TrFontProps {
+    /**
+     * Text to display
+     *
+     * @default ''
+     */
+    text: string;
+    /**
+     * Text alignment
+     *
+     * @remarks
+     * Alignment of the text relative to it's contained bounds. For best results,
+     * use {@link contain} mode `'width'` or `'both'` and a set an explicit
+     * {@link width} for the text to be aligned within.
+     *
+     * @default 'left'
+     */
+    textAlign: 'left' | 'center' | 'right';
+    /**
+     * Color of text
+     *
+     * @remarks
+     * The color value is a number in the format 0xRRGGBBAA, where RR is the red
+     * component, GG is the green component, BB is the blue component, and AA is
+     * the alpha component.
+     *
+     * @default 0xffffffff (opaque white)
+     */
+    color: number;
+    alpha: number;
+    x: number;
+    y: number;
+    /**
+     * Contain mode for text
+     *
+     * @remarks
+     * The contain mode determines how the text is contained within the bounds
+     * of the Text Node. The default value is `'none'`, which means that the
+     * Text Renderer will not constrain the text in any way. `'width'` mode will
+     * constrain the text to the set width wrapping lines as necessary, and
+     * `'both'` mode will constrain the text to both the set width and height
+     * wrapping lines and truncating text as necessary.
+     *
+     * @default 'none'
+     */
+    contain: 'none' | 'width' | 'both';
+    width: number;
+    height: number;
+    /**
+     * Whether or not the text is scrollable
+     *
+     * @remarks
+     * If `scrollable` is `true`, the text can be scrolled vertically within the
+     * bounds of the Text Node. You can set the scroll position using the
+     * {@link scrollY} property.
+     *
+     * @default false
+     */
+    scrollable: boolean;
+    /**
+     * Vertical scroll position for text
+     *
+     * @remarks
+     * The vertical scroll position of the text. This property is only used if
+     * {@link scrollable} is `true`.
+     *
+     * @default 0
+     */
+    scrollY: number;
+    /**
+     * Vertical offset for text
+     *
+     * @remarks
+     * The vertical offset of the text. This property is only used if
+     * {@link scrollable} is `true`.
+     *
+     * @default 0
+     */
+    offsetY: number;
+    /**
+     * Letter spacing for text (in pixels)
+     *
+     * @remarks
+     * This property sets additional (or reduced, if value is negative) spacing
+     * between characters in the text.
+     *
+     * @default 0
+     */
+    letterSpacing: number;
+    zIndex: number;
+    debug: Partial<TextRendererDebugProps>;
+}
+export type TrPropSetters<StateT = TextRendererState> = {
+    [key in keyof TrProps]: (state: StateT, value: TrProps[key]) => void;
+};
+export declare abstract class TextRenderer<StateT extends TextRendererState = TextRendererState> {
+    protected stage: Stage;
+    readonly set: Readonly<TrPropSetters<StateT>>;
+    constructor(stage: Stage);
+    setStatus(state: StateT, status: StateT['status'], error?: Error): void;
+    /**
+     * Called by constructor to get a map of property setter functions for this renderer.
+     */
+    abstract getPropertySetters(): Partial<TrPropSetters<StateT>>;
+    /**
+     * Given text renderer properties (particularly the specific properties related to font selection)
+     * returns whether or not the renderer can render it.
+     *
+     * @param props
+     */
+    abstract canRenderFont(props: TrFontProps): boolean;
+    /**
+     * Called by the TrFontManager to find out if a newly added font face is supported
+     * by this renderer.
+     *
+     * @param fontFace
+     */
+    abstract isFontFaceSupported(fontFace: TrFontFace): boolean;
+    /**
+     * Called by the TrFontManager to add a font face to the renderer's font registry.
+     *
+     * @remarks
+     * This method MUST ONLY be called for a fontFace that previously passed the
+     * {@link isFontFaceSupported} check.
+     *
+     * @param fontFace
+     */
+    abstract addFontFace(fontFace: TrFontFace): void;
+    abstract createState(props: TrProps): StateT;
+    abstract updateState(state: StateT): void;
+    abstract renderQuads(state: StateT): void;
+}

package/dist/src/core/text-rendering/renderers/TextRenderer.js

@@ -0,0 +1,100 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const trPropSetterDefaults = {
+    x: (state, value) => {
+        state.props.x = value;
+    },
+    y: (state, value) => {
+        state.props.y = value;
+    },
+    width: (state, value) => {
+        state.props.width = value;
+    },
+    height: (state, value) => {
+        state.props.height = value;
+    },
+    color: (state, value) => {
+        state.props.color = value;
+    },
+    alpha: (state, value) => {
+        state.props.alpha = value;
+    },
+    zIndex: (state, value) => {
+        state.props.zIndex = value;
+    },
+    fontFamily: (state, value) => {
+        state.props.fontFamily = value;
+    },
+    fontWeight: (state, value) => {
+        state.props.fontWeight = value;
+    },
+    fontStyle: (state, value) => {
+        state.props.fontStyle = value;
+    },
+    fontStretch: (state, value) => {
+        state.props.fontStretch = value;
+    },
+    fontSize: (state, value) => {
+        state.props.fontSize = value;
+    },
+    text: (state, value) => {
+        state.props.text = value;
+    },
+    textAlign: (state, value) => {
+        state.props.textAlign = value;
+    },
+    contain: (state, value) => {
+        state.props.contain = value;
+    },
+    offsetY: (state, value) => {
+        state.props.offsetY = value;
+    },
+    scrollable: (state, value) => {
+        state.props.scrollable = value;
+    },
+    scrollY: (state, value) => {
+        state.props.scrollY = value;
+    },
+    letterSpacing: (state, value) => {
+        state.props.letterSpacing = value;
+    },
+    debug: (state, value) => {
+        state.props.debug = value;
+    },
+};
+export class TextRenderer {
+    stage;
+    set;
+    constructor(stage) {
+        this.stage = stage;
+        this.set = Object.freeze({
+            ...trPropSetterDefaults,
+            ...this.getPropertySetters(),
+        });
+    }
+    setStatus(state, status, error) {
+        // Don't emit the same status twice
+        if (state.status === status) {
+            return;
+        }
+        state.status = status;
+        state.emitter.emit(status, error);
+    }
+}
+//# sourceMappingURL=TextRenderer.js.map

package/dist/src/core/text-rendering/renderers/TextRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextRenderer.js","sourceRoot":"","sources":["../../../../../src/core/text-rendering/renderers/TextRenderer.ts"],"names":[],"mappings":"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"}

package/dist/src/core/textures/ColorTexture.d.ts

@@ -0,0 +1,35 @@
+import type { CoreTextureManager } from '../CoreTextureManager.js';
+import { Texture } from './Texture.js';
+/**
+ * Properties of the {@link ColorTexture}
+ */
+export interface ColorTextureProps {
+    /**
+     * Color to use to generate the texture
+     *
+     * @default 0xffffffff (opaque white)
+     */
+    color?: number;
+}
+/**
+ * Texture consisting of only a 1x1 color pixel
+ *
+ * @remarks
+ * The pixel color is set with the {@link ColorTextureProps.color} prop.
+ *
+ * This is the default texture used for a Node if it's
+ * {@link INodeWritableProps.texture} prop is set to `null` (the default)
+ *
+ * Generally the 1x1 color pixel is stretched to whatever the set dimensions of
+ * a Node are.
+ */
+export declare class ColorTexture extends Texture {
+    props: Required<ColorTextureProps>;
+    constructor(txManager: CoreTextureManager, props?: ColorTextureProps);
+    get color(): number;
+    set color(color: number);
+    getTextureData(): Promise<ImageBitmap>;
+    static makeCacheKey(props: ColorTextureProps): string;
+    static resolveDefaults(props: ColorTextureProps): Required<ColorTextureProps>;
+    static z$__type__Props: ColorTextureProps;
+}

package/dist/src/core/textures/ColorTexture.js

@@ -0,0 +1,62 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Texture } from './Texture.js';
+/**
+ * Texture consisting of only a 1x1 color pixel
+ *
+ * @remarks
+ * The pixel color is set with the {@link ColorTextureProps.color} prop.
+ *
+ * This is the default texture used for a Node if it's
+ * {@link INodeWritableProps.texture} prop is set to `null` (the default)
+ *
+ * Generally the 1x1 color pixel is stretched to whatever the set dimensions of
+ * a Node are.
+ */
+export class ColorTexture extends Texture {
+    props;
+    constructor(txManager, props) {
+        super(txManager);
+        this.props = ColorTexture.resolveDefaults(props || {});
+    }
+    get color() {
+        return this.props.color;
+    }
+    set color(color) {
+        this.props.color = color;
+    }
+    async getTextureData() {
+        const pixelData32 = new Uint32Array([this.color]);
+        const pixelData8 = new Uint8ClampedArray(pixelData32.buffer);
+        return await createImageBitmap(new ImageData(pixelData8, 1, 1), {
+            premultiplyAlpha: 'none',
+        });
+    }
+    static makeCacheKey(props) {
+        const resolvedProps = ColorTexture.resolveDefaults(props);
+        return `ColorTexture,${resolvedProps.color}`;
+    }
+    static resolveDefaults(props) {
+        return {
+            color: props.color || 0xffffffff,
+        };
+    }
+    static z$__type__Props;
+}
+//# sourceMappingURL=ColorTexture.js.map

package/dist/src/core/textures/ColorTexture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorTexture.js","sourceRoot":"","sources":["../../../../src/core/textures/ColorTexture.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAcvC;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAO;IACvC,KAAK,CAA8B;IAEnC,YAAY,SAA6B,EAAE,KAAyB;QAClE,KAAK,CAAC,SAAS,CAAC,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,eAAe,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEQ,KAAK,CAAC,cAAc;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAClD,MAAM,UAAU,GAAG,IAAI,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC7D,OAAO,MAAM,iBAAiB,CAAC,IAAI,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;YAC9D,gBAAgB,EAAE,MAAM;SACzB,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAU,YAAY,CAAC,KAAwB;QACnD,MAAM,aAAa,GAAG,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC1D,OAAO,gBAAgB,aAAa,CAAC,KAAK,EAAE,CAAC;IAC/C,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAAwB;QAExB,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,eAAe,CAAoB;CAC3C"}

package/dist/src/core/textures/ImageTexture.d.ts

@@ -0,0 +1,51 @@
+import type { CoreTextureManager } from '../CoreTextureManager.js';
+import { Texture, type TextureData } from './Texture.js';
+/**
+ * Properties of the {@link ImageTexture}
+ */
+export interface ImageTextureProps {
+    /**
+     * Source URL or ImageData for the image to be used as a texture.
+     *
+     * @remarks
+     * The ImageData type is currently only supported internally. End users should
+     * only set this property to a URL string.
+     *
+     * @default ''
+     */
+    src?: string | ImageData;
+    /**
+     * Whether to premultiply the alpha channel into the color channels of the
+     * image.
+     *
+     * @remarks
+     * Generally this should be set to `true` (the default). However, if the
+     * texture's associated Shader expects straight (non-premultiplied) colors,
+     * this should be set to `false`.
+     *
+     * @default true
+     */
+    premultiplyAlpha?: boolean;
+}
+/**
+ * Texture consisting of an image loaded from a URL
+ *
+ * @remarks
+ * The ImageTexture's {@link ImageTextureProps.src} prop defines the image URL
+ * to be downloaded.
+ *
+ * By default, the texture's alpha values will be premultiplied into its color
+ * values which is generally the desired setting before they are sent to the
+ * texture's associated {@link Shader}. However, in special cases you may want
+ * the Shader to receive straight (non-premultiplied) values. In that case you
+ * can disable the default behavior by setting the
+ * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
+ */
+export declare class ImageTexture extends Texture {
+    props: Required<ImageTextureProps>;
+    constructor(txManager: CoreTextureManager, props: ImageTextureProps);
+    getTextureData(): Promise<TextureData>;
+    static makeCacheKey(props: ImageTextureProps): string | false;
+    static resolveDefaults(props: ImageTextureProps): Required<ImageTextureProps>;
+    static z$__type__Props: ImageTextureProps;
+}

package/dist/src/core/textures/ImageTexture.js

@@ -0,0 +1,76 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Texture } from './Texture.js';
+/**
+ * Texture consisting of an image loaded from a URL
+ *
+ * @remarks
+ * The ImageTexture's {@link ImageTextureProps.src} prop defines the image URL
+ * to be downloaded.
+ *
+ * By default, the texture's alpha values will be premultiplied into its color
+ * values which is generally the desired setting before they are sent to the
+ * texture's associated {@link Shader}. However, in special cases you may want
+ * the Shader to receive straight (non-premultiplied) values. In that case you
+ * can disable the default behavior by setting the
+ * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
+ */
+export class ImageTexture extends Texture {
+    props;
+    constructor(txManager, props) {
+        super(txManager);
+        this.props = ImageTexture.resolveDefaults(props);
+    }
+    async getTextureData() {
+        const { src, premultiplyAlpha } = this.props;
+        if (!src) {
+            return null;
+        }
+        if (src instanceof ImageData) {
+            return await createImageBitmap(src, {
+                premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+                colorSpaceConversion: 'none',
+                imageOrientation: 'none',
+            });
+        }
+        const response = await fetch(src);
+        const blob = await response.blob();
+        return await createImageBitmap(blob, {
+            premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+        });
+    }
+    static makeCacheKey(props) {
+        const resolvedProps = ImageTexture.resolveDefaults(props);
+        // ImageTextures sourced by ImageData are non-cacheable
+        if (resolvedProps.src instanceof ImageData) {
+            return false;
+        }
+        return `ImageTexture,${resolvedProps.src},${resolvedProps.premultiplyAlpha}`;
+    }
+    static resolveDefaults(props) {
+        return {
+            src: props.src ?? '',
+            premultiplyAlpha: props.premultiplyAlpha ?? true,
+        };
+    }
+    static z$__type__Props;
+}
+//# sourceMappingURL=ImageTexture.js.map

package/dist/src/core/textures/ImageTexture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTexture.js","sourceRoot":"","sources":["../../../../src/core/textures/ImageTexture.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,OAAO,EAAoB,MAAM,cAAc,CAAC;AA8BzD;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAO;IACvC,KAAK,CAA8B;IAEnC,YAAY,SAA6B,EAAE,KAAwB;QACjE,KAAK,CAAC,SAAS,CAAC,CAAC;QACjB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;IAEQ,KAAK,CAAC,cAAc;QAC3B,MAAM,EAAE,GAAG,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7C,IAAI,CAAC,GAAG,EAAE;YACR,OAAO,IAAI,CAAC;SACb;QACD,IAAI,GAAG,YAAY,SAAS,EAAE;YAC5B,OAAO,MAAM,iBAAiB,CAAC,GAAG,EAAE;gBAClC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;gBAC3D,oBAAoB,EAAE,MAAM;gBAC5B,gBAAgB,EAAE,MAAM;aACzB,CAAC,CAAC;SACJ;QACD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;QAClC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnC,OAAO,MAAM,iBAAiB,CAAC,IAAI,EAAE;YACnC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;YAC3D,oBAAoB,EAAE,MAAM;YAC5B,gBAAgB,EAAE,MAAM;SACzB,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAU,YAAY,CAAC,KAAwB;QACnD,MAAM,aAAa,GAAG,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC1D,uDAAuD;QACvD,IAAI,aAAa,CAAC,GAAG,YAAY,SAAS,EAAE;YAC1C,OAAO,KAAK,CAAC;SACd;QACD,OAAO,gBAAgB,aAAa,CAAC,GAAG,IAAI,aAAa,CAAC,gBAAgB,EAAE,CAAC;IAC/E,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAAwB;QAExB,OAAO;YACL,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,EAAE;YACpB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,IAAI,IAAI;SACjD,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,eAAe,CAAoB;CAC3C"}

package/dist/src/core/textures/NoiseTexture.d.ts

@@ -0,0 +1,42 @@
+import type { CoreTextureManager } from '../CoreTextureManager.js';
+import { Texture, type TextureData } from './Texture.js';
+/**
+ * Properties of the {@link NoiseTexture}
+ */
+export interface NoiseTextureProps {
+    /**
+     * Width of texture
+     *
+     * @default 128
+     */
+    width?: number;
+    /**
+     * Height of texture
+     *
+     * @default 128
+     */
+    height?: number;
+    /**
+     * A number value that can be varied to force new textures to be generated
+     *
+     * @default 0
+     */
+    cacheId?: number;
+}
+/**
+ * Texture consisting of a random grid of greyscale pixels
+ *
+ * @remarks
+ * The width and height of the NoiseTexture are defined by it's
+ * {@link NoiseTextureProps.width} and {@link NoiseTextureProps.height}
+ * properties. The {@link NoiseTextureProps.cacheId} prop can be varied in order
+ * to bypass cache and get newly randomized texture data.
+ */
+export declare class NoiseTexture extends Texture {
+    props: Required<NoiseTextureProps>;
+    constructor(txManager: CoreTextureManager, props: NoiseTextureProps);
+    getTextureData(): Promise<TextureData>;
+    static makeCacheKey(props: NoiseTextureProps): string;
+    static resolveDefaults(props: NoiseTextureProps): Required<NoiseTextureProps>;
+    static z$__type__Props: NoiseTextureProps;
+}