// luma.gl // SPDX-License-Identifier: MIT // Copyright (c) vis.gl contributors import {type TypedArray} from '@math.gl/types'; import {type Device} from '../device'; import { type TextureFormat, type TextureMemoryLayout, type TextureFormatInfo } from '../../shadertypes/texture-types/texture-formats'; import {type ExternalImage} from '../../shadertypes/image-types/image-types'; import {type TextureView, type TextureViewProps} from './texture-view'; import {Resource, type ResourceProps} from './resource'; import {Sampler, type SamplerProps} from './sampler'; import {Buffer} from './buffer'; import {log} from '../../utils/log'; import {textureFormatDecoder} from '../../shadertypes/texture-types/texture-format-decoder'; /** Options for Texture.copyExternalImage */ export type CopyExternalImageOptions = { /** Image */ image: ExternalImage; /** Copy from image x offset (default 0) */ sourceX?: number; /** Copy from image y offset (default 0) */ sourceY?: number; /** Copy area width (default 1) */ width?: number; /** Copy area height (default 1) */ height?: number; /** Copy depth, number of layers/depth slices(default 1) */ depth?: number; /** Start copying into offset x (default 0) */ x?: number; /** Start copying into offset y (default 0) */ y?: number; /** Start copying into layer / depth slice z (default 0) */ z?: number; /** Which mip-level to copy into (default 0) */ mipLevel?: number; /** When copying into depth stencil textures (default 'all') */ aspect?: 'all' | 'stencil-only' | 'depth-only'; /** Specific color space of image data */ colorSpace?: 'srgb'; /** load as premultiplied alpha */ premultipliedAlpha?: boolean; /** Whether to flip the image vertically */ flipY?: boolean; }; /** Options for copyImageData */ export type CopyImageDataOptions = { /** Data to copy (array of bytes) */ data: ArrayBuffer | SharedArrayBuffer | ArrayBufferView; /** Offset into the data (in addition to any offset built-in to the ArrayBufferView) */ byteOffset?: number; /** The stride, in bytes, between successive texel rows in the CPU source data. Tightly packed uploads can omit this. */ bytesPerRow?: number; /** Number of rows that make up one image when uploading multiple layers or depth slices from CPU memory. */ rowsPerImage?: number; /** Width to copy */ width?: number; /** Height to copy */ height?: number; /** Copy depth or number of layers */ depthOrArrayLayers?: number; /** @deprecated Use `depthOrArrayLayers` */ depth?: number; /** Start copying into offset x (default 0) */ x?: number; /** Start copying into offset y (default 0) */ y?: number; /** Start copying from depth layer z (default 0) */ z?: number; /** Which mip-level to copy into (default 0) */ mipLevel?: number; /** When copying into depth stencil textures (default 'all') */ aspect?: 'all' | 'stencil-only' | 'depth-only'; }; export type TextureReadOptions = { /** Start reading from offset x (default 0) */ x?: number; /** Start reading from offset y (default 0) */ y?: number; /** Start reading from layer / depth slice z (default 0) */ z?: number; /** Width of the region to read. Defaults to the mip width. */ width?: number; /** Height of the region to read. Defaults to the mip height. */ height?: number; /** Number of array layers or depth slices to read. Defaults to 1. */ depthOrArrayLayers?: number; /** Which mip-level to read from (default 0) */ mipLevel?: number; /** When reading from depth stencil textures (default 'all') */ aspect?: 'all' | 'stencil-only' | 'depth-only'; }; export type TextureWriteOptions = { /** Offset into the source data or buffer, in bytes. */ byteOffset?: number; /** The stride, in bytes, between successive texel rows in the source data or buffer. */ bytesPerRow?: number; /** The number of rows that make up one image when writing multiple layers or slices. */ rowsPerImage?: number; /** Start writing into offset x (default 0) */ x?: number; /** Start writing into offset y (default 0) */ y?: number; /** Start writing into layer / depth slice z (default 0) */ z?: number; /** Width of the region to write. Defaults to the mip width. */ width?: number; /** Height of the region to write. Defaults to the mip height. */ height?: number; /** Number of array layers or depth slices to write. Defaults to 1, or the full mip depth for 3D textures. */ depthOrArrayLayers?: number; /** Which mip-level to write into (default 0) */ mipLevel?: number; /** When writing into depth stencil textures (default 'all') */ aspect?: 'all' | 'stencil-only' | 'depth-only'; }; const BASE_DIMENSIONS = { '1d': '1d', '2d': '2d', '2d-array': '2d', cube: '2d', 'cube-array': '2d', '3d': '3d' } as const satisfies Record; /** Texture properties */ export type TextureProps = ResourceProps & { /** @deprecated Use DynamicTexture to create textures with data. */ data?: ExternalImage | TypedArray | null; /** Dimension of this texture. Defaults to '2d' */ dimension?: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d'; /** The format (bit layout) of the textures pixel data */ format?: TextureFormat; /** Width in texels */ width: number; /** Width in texels */ height: number; /** Number of depth layers */ depth?: number; /** How this texture will be used. Defaults to TEXTURE | COPY_DST | RENDER_ATTACHMENT */ usage?: number; /** How many mip levels */ mipLevels?: number; /** Multi sampling */ samples?: number; /** Sampler (or SamplerProps) for the default sampler for this texture. Used if no sampler provided. Note that other samplers can still be used. */ sampler?: Sampler | SamplerProps; /** Props for the default TextureView for this texture. Note that other views can still be created and used. */ view?: TextureViewProps; }; /** * Abstract Texture interface * Texture Object * https://gpuweb.github.io/gpuweb/#gputexture */ export abstract class Texture extends Resource { /** The texture can be bound for use as a sampled texture in a shader */ static SAMPLE = 0x04; /** The texture can be bound for use as a storage texture in a shader */ static STORAGE = 0x08; /** The texture can be used as a color or depth/stencil attachment in a render pass */ static RENDER = 0x10; /** The texture can be used as the source of a copy operation */ static COPY_SRC = 0x01; /** he texture can be used as the destination of a copy or write operation */ static COPY_DST = 0x02; /** @deprecated Use Texture.SAMPLE */ static TEXTURE = 0x04; /** @deprecated Use Texture.RENDER */ static RENDER_ATTACHMENT = 0x10; /** dimension of this texture */ readonly dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d'; /** base dimension of this texture */ readonly baseDimension: '1d' | '2d' | '3d'; /** format of this texture */ readonly format: TextureFormat; /** width in pixels of this texture */ readonly width: number; /** height in pixels of this texture */ readonly height: number; /** depth of this texture */ readonly depth: number; /** mip levels in this texture */ readonly mipLevels: number; /** sample count */ readonly samples: number; /** Rows are multiples of this length, padded with extra bytes if needed */ readonly byteAlignment: number; /** Default sampler for this texture */ abstract sampler: Sampler; /** Default view for this texture */ abstract view: TextureView; /** The ready promise is always resolved. It is provided for type compatibility with DynamicTexture. */ readonly ready: Promise = Promise.resolve(this); /** isReady is always true. It is provided for type compatibility with DynamicTexture. */ readonly isReady: boolean = true; /** "Time" of last update. Monotonically increasing timestamp. TODO move to DynamicTexture? */ updateTimestamp: number; override get [Symbol.toStringTag](): string { return 'Texture'; } override toString(): string { return `Texture(${this.id},${this.format},${this.width}x${this.height})`; } /** Do not use directly. Create with device.createTexture() */ constructor(device: Device, props: TextureProps, backendProps?: {byteAlignment?: number}) { props = Texture.normalizeProps(device, props); super(device, props, Texture.defaultProps); this.dimension = this.props.dimension; this.baseDimension = BASE_DIMENSIONS[this.dimension]; this.format = this.props.format; // Size this.width = this.props.width; this.height = this.props.height; this.depth = this.props.depth; this.mipLevels = this.props.mipLevels; this.samples = this.props.samples || 1; if (this.dimension === 'cube') { this.depth = 6; } // Calculate size, if not provided if (this.props.width === undefined || this.props.height === undefined) { if (device.isExternalImage(props.data)) { const size = device.getExternalImageSize(props.data); this.width = size?.width || 1; this.height = size?.height || 1; } else { this.width = 1; this.height = 1; if (this.props.width === undefined || this.props.height === undefined) { log.warn( `${this} created with undefined width or height. This is deprecated. Use DynamicTexture instead.` )(); } } } this.byteAlignment = backendProps?.byteAlignment || 1; // TODO - perhaps this should be set on async write completion? this.updateTimestamp = device.incrementTimestamp(); } /** * Create a new texture with the same parameters and optionally a different size * @note Textures are immutable and cannot be resized after creation, but we can create a similar texture with the same parameters but a new size. * @note Does not copy contents of the texture */ clone(size?: {width: number; height: number}): Texture { return this.device.createTexture({...this.props, ...size}); } /** Set sampler props associated with this texture */ setSampler(sampler: Sampler | SamplerProps): void { this.sampler = sampler instanceof Sampler ? sampler : this.device.createSampler(sampler); } /** Create a texture view for this texture */ abstract createView(props: TextureViewProps): TextureView; /** Copy an image (e.g an ImageBitmap) into the texture */ abstract copyExternalImage(options: CopyExternalImageOptions): {width: number; height: number}; /** * Copy raw image data (bytes) into the texture. * * @note Deprecated compatibility wrapper over {@link writeData}. * @note Uses the same layout defaults and alignment rules as {@link writeData}. * @note Tightly packed CPU uploads can omit `bytesPerRow` and `rowsPerImage`. * @note If the CPU source rows are padded, pass explicit `bytesPerRow` and `rowsPerImage`. * @deprecated Use writeData() */ copyImageData(options: CopyImageDataOptions): void { const {data, depth, ...writeOptions} = options; this.writeData(data, { ...writeOptions, depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth }); } /** * Calculates the memory layout of the texture, required when reading and writing data. * @return the backend-aligned linear layout, in particular bytesPerRow which includes any required padding for buffer copy/read paths */ computeMemoryLayout(options_: TextureReadOptions = {}): TextureMemoryLayout { const options = this._normalizeTextureReadOptions(options_); const {width = this.width, height = this.height, depthOrArrayLayers = this.depth} = options; const {format, byteAlignment} = this; // TODO - does the overriding above make sense? // return textureFormatDecoder.computeMemoryLayout(this); return textureFormatDecoder.computeMemoryLayout({ format, width, height, depth: depthOrArrayLayers, byteAlignment }); } /** * Read the contents of a texture into a GPU Buffer. * @returns A Buffer containing the texture data. * * @note The memory layout of the texture data is determined by the texture format and dimensions. * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout. * @note The application can call Buffer.readAsync() to read the returned buffer on the CPU. * @note The destination buffer must be supplied by the caller and must be large enough for the requested region. * @note On WebGPU this corresponds to a texture-to-buffer copy and uses buffer-copy alignment rules. * @note On WebGL, luma.gl emulates the same logical readback behavior. */ readBuffer(options?: TextureReadOptions, buffer?: Buffer): Buffer { throw new Error('readBuffer not implemented'); } /** * Reads data from a texture into an ArrayBuffer. * @returns An ArrayBuffer containing the texture data. * * @note The memory layout of the texture data is determined by the texture format and dimensions. * @note The application can call Texture.computeMemoryLayout() to compute the layout. * @deprecated Use Texture.readBuffer() with an explicit destination buffer, or DynamicTexture.readAsync() for convenience readback. */ readDataAsync(options?: TextureReadOptions): Promise { throw new Error('readBuffer not implemented'); } /** * Writes a GPU Buffer into a texture. * * @param buffer - Source GPU buffer. * @param options - Destination subresource, extent, and source layout options. * @note The memory layout of the texture data is determined by the texture format and dimensions. * @note The application can call Texture.computeMemoryLayout() to compute the backend-aligned layout. * @note On WebGPU this corresponds to a buffer-to-texture copy and uses buffer-copy alignment rules. * @note On WebGL, luma.gl emulates the same destination and layout semantics. */ writeBuffer(buffer: Buffer, options?: TextureWriteOptions): void { throw new Error('readBuffer not implemented'); } /** * Writes an array buffer into a texture. * * @param data - Source texel data. * @param options - Destination subresource, extent, and source layout options. * @note If `bytesPerRow` and `rowsPerImage` are omitted, luma.gl computes a tightly packed CPU-memory layout for the requested region. * @note On WebGPU this corresponds to `GPUQueue.writeTexture()` and does not implicitly pad rows to 256 bytes. * @note On WebGL, padded CPU data is supported via the same `bytesPerRow` and `rowsPerImage` options. */ writeData( data: ArrayBuffer | SharedArrayBuffer | ArrayBufferView, options?: TextureWriteOptions ): void { throw new Error('readBuffer not implemented'); } // IMPLEMENTATION SPECIFIC /** * WebGL can read data synchronously. * @note While it is convenient, the performance penalty is very significant */ readDataSyncWebGL(options?: TextureReadOptions): ArrayBuffer | ArrayBufferView { throw new Error('readDataSyncWebGL not available'); } /** Generate mipmaps (WebGL only) */ generateMipmapsWebGL(): void { throw new Error('generateMipmapsWebGL not available'); } // HELPERS /** Ensure we have integer coordinates */ protected static normalizeProps(device: Device, props: TextureProps): TextureProps { const newProps = {...props}; // Ensure we have integer coordinates const {width, height} = newProps; if (typeof width === 'number') { newProps.width = Math.max(1, Math.ceil(width)); } if (typeof height === 'number') { newProps.height = Math.max(1, Math.ceil(height)); } return newProps; } /** Initialize texture with supplied props */ // eslint-disable-next-line max-statements _initializeData(data: TextureProps['data']): void { // Store opts for accessors if (this.device.isExternalImage(data)) { this.copyExternalImage({ image: data, width: this.width, height: this.height, depth: this.depth, mipLevel: 0, x: 0, y: 0, z: 0, aspect: 'all', colorSpace: 'srgb', premultipliedAlpha: false, flipY: false }); } else if (data) { this.copyImageData({ data, // width: this.width, // height: this.height, // depth: this.depth, mipLevel: 0, x: 0, y: 0, z: 0, aspect: 'all' }); } } _normalizeCopyImageDataOptions(options_: CopyImageDataOptions): Required { const {data, depth, ...writeOptions} = options_; const options = this._normalizeTextureWriteOptions({ ...writeOptions, depthOrArrayLayers: writeOptions.depthOrArrayLayers ?? depth }); return {data, depth: options.depthOrArrayLayers, ...options}; } _normalizeCopyExternalImageOptions( options_: CopyExternalImageOptions ): Required { const optionsWithoutUndefined = Texture._omitUndefined(options_); const mipLevel = optionsWithoutUndefined.mipLevel ?? 0; const mipLevelSize = this._getMipLevelSize(mipLevel); const size = this.device.getExternalImageSize(options_.image); const options = { ...Texture.defaultCopyExternalImageOptions, ...mipLevelSize, ...size, ...optionsWithoutUndefined }; // WebGL will error if we try to copy outside the bounds of the texture options.width = Math.min(options.width, mipLevelSize.width - options.x); options.height = Math.min(options.height, mipLevelSize.height - options.y); options.depth = Math.min(options.depth, mipLevelSize.depthOrArrayLayers - options.z); return options; } _normalizeTextureReadOptions(options_: TextureReadOptions): Required { const optionsWithoutUndefined = Texture._omitUndefined(options_); const mipLevel = optionsWithoutUndefined.mipLevel ?? 0; const mipLevelSize = this._getMipLevelSize(mipLevel); const options = { ...Texture.defaultTextureReadOptions, ...mipLevelSize, ...optionsWithoutUndefined }; // WebGL will error if we try to copy outside the bounds of the texture options.width = Math.min(options.width, mipLevelSize.width - options.x); options.height = Math.min(options.height, mipLevelSize.height - options.y); options.depthOrArrayLayers = Math.min( options.depthOrArrayLayers, mipLevelSize.depthOrArrayLayers - options.z ); return options; } /** * Normalizes a texture read request and validates the color-only readback contract used by the * current texture read APIs. Supported dimensions are `2d`, `cube`, `cube-array`, * `2d-array`, and `3d`. * * @throws if the texture format, aspect, or dimension is not supported by the first-pass * color-read implementation. */ protected _getSupportedColorReadOptions( options_: TextureReadOptions ): Required { const options = this._normalizeTextureReadOptions(options_); const formatInfo = textureFormatDecoder.getInfo(this.format); this._validateColorReadAspect(options); this._validateColorReadFormat(formatInfo); switch (this.dimension) { case '2d': case 'cube': case 'cube-array': case '2d-array': case '3d': return options; default: throw new Error(`${this} color readback does not support ${this.dimension} textures`); } } /** Validates that a read request targets the full color aspect of the texture. */ protected _validateColorReadAspect(options: Required): void { if (options.aspect !== 'all') { throw new Error(`${this} color readback only supports aspect 'all'`); } } /** Validates that a read request targets an uncompressed color-renderable texture format. */ protected _validateColorReadFormat(formatInfo: TextureFormatInfo): void { if (formatInfo.compressed) { throw new Error( `${this} color readback does not support compressed formats (${this.format})` ); } switch (formatInfo.attachment) { case 'color': return; case 'depth': throw new Error(`${this} color readback does not support depth formats (${this.format})`); case 'stencil': throw new Error(`${this} color readback does not support stencil formats (${this.format})`); case 'depth-stencil': throw new Error( `${this} color readback does not support depth-stencil formats (${this.format})` ); default: throw new Error(`${this} color readback does not support format ${this.format}`); } } _normalizeTextureWriteOptions(options_: TextureWriteOptions): Required { const optionsWithoutUndefined = Texture._omitUndefined(options_); const mipLevel = optionsWithoutUndefined.mipLevel ?? 0; const mipLevelSize = this._getMipLevelSize(mipLevel); const options = { ...Texture.defaultTextureWriteOptions, ...mipLevelSize, ...optionsWithoutUndefined }; options.width = Math.min(options.width, mipLevelSize.width - options.x); options.height = Math.min(options.height, mipLevelSize.height - options.y); options.depthOrArrayLayers = Math.min( options.depthOrArrayLayers, mipLevelSize.depthOrArrayLayers - options.z ); const layout = textureFormatDecoder.computeMemoryLayout({ format: this.format, width: options.width, height: options.height, depth: options.depthOrArrayLayers, byteAlignment: this.byteAlignment }); const minimumBytesPerRow = layout.bytesPerPixel * options.width; options.bytesPerRow = optionsWithoutUndefined.bytesPerRow ?? layout.bytesPerRow; options.rowsPerImage = optionsWithoutUndefined.rowsPerImage ?? options.height; if (options.bytesPerRow < minimumBytesPerRow) { throw new Error( `bytesPerRow (${options.bytesPerRow}) must be at least ${minimumBytesPerRow} for ${this.format}` ); } if (options.rowsPerImage < options.height) { throw new Error( `rowsPerImage (${options.rowsPerImage}) must be at least ${options.height} for ${this.format}` ); } const bytesPerPixel = this.device.getTextureFormatInfo(this.format).bytesPerPixel; if (bytesPerPixel && options.bytesPerRow % bytesPerPixel !== 0) { throw new Error( `bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}` ); } return options; } protected _getMipLevelSize( mipLevel: number ): Required> { const width = Math.max(1, this.width >> mipLevel); const height = this.baseDimension === '1d' ? 1 : Math.max(1, this.height >> mipLevel); const depthOrArrayLayers = this.dimension === '3d' ? Math.max(1, this.depth >> mipLevel) : this.depth; return {width, height, depthOrArrayLayers}; } protected getAllocatedByteLength(): number { let allocatedByteLength = 0; for (let mipLevel = 0; mipLevel < this.mipLevels; mipLevel++) { const {width, height, depthOrArrayLayers} = this._getMipLevelSize(mipLevel); allocatedByteLength += textureFormatDecoder.computeMemoryLayout({ format: this.format, width, height, depth: depthOrArrayLayers, byteAlignment: 1 }).byteLength; } return allocatedByteLength * this.samples; } protected static _omitUndefined(options: T): Partial { return Object.fromEntries( Object.entries(options).filter(([, value]) => value !== undefined) ) as Partial; } static override defaultProps: Required = { ...Resource.defaultProps, data: null, dimension: '2d', format: 'rgba8unorm', usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_DST, width: undefined!, height: undefined!, depth: 1, mipLevels: 1, samples: undefined!, sampler: {}, view: undefined! }; protected static defaultCopyDataOptions: Required = { data: undefined!, byteOffset: 0, bytesPerRow: undefined!, rowsPerImage: undefined!, width: undefined!, height: undefined!, depthOrArrayLayers: undefined!, depth: 1, mipLevel: 0, x: 0, y: 0, z: 0, aspect: 'all' }; /** Default options */ protected static defaultCopyExternalImageOptions: Required = { image: undefined!, sourceX: 0, sourceY: 0, width: undefined!, height: undefined!, depth: 1, mipLevel: 0, x: 0, y: 0, z: 0, aspect: 'all', colorSpace: 'srgb', premultipliedAlpha: false, flipY: false }; protected static defaultTextureReadOptions: Required = { x: 0, y: 0, z: 0, width: undefined!, height: undefined!, depthOrArrayLayers: 1, mipLevel: 0, aspect: 'all' }; protected static defaultTextureWriteOptions: Required = { byteOffset: 0, bytesPerRow: undefined!, rowsPerImage: undefined!, x: 0, y: 0, z: 0, width: undefined!, height: undefined!, depthOrArrayLayers: 1, mipLevel: 0, aspect: 'all' }; }