A cube texture class that represents a cubemap texture for 3D rendering. Cube textures are commonly used for environment mapping, skyboxes, and reflection mapping. This class extends AbstractTexture and provides functionality to load cube textures from various sources including files, Basis compressed textures, and typed arrays.

// Load cube texture from files
const cubeTexture = await CubeTexture.loadFromUrl({
baseUrl: 'path/to/cubemap',
mipmapLevelNumber: 1,
isNamePosNeg: true,
hdriFormat: HdriFormat.LDR_SRGB
});

// Create a simple 1x1 cube texture
const simpleCube = new CubeTexture();
simpleCube.load1x1Texture('rgba(255,0,0,1)');

Hierarchy (view full)

Implements

  • Disposable

Constructors

Properties

__canvasContext?: CanvasRenderingContext2D
__format: EnumIO = PixelFormat.RGBA
__hasTransparentPixels: boolean = false
__height: number = 0
__htmlCanvasElement?: HTMLCanvasElement
__htmlImageElement?: HTMLImageElement
__img?: HTMLImageElement
__internalFormat: TextureFormatEnum = TextureFormat.RGBA8
__isTextureReady: boolean = false
__level: number = 0
__mipLevelCount: number = 1
__name: string = 'untitled'
__startedToLoad: boolean = false
__type: ComponentTypeEnum = ComponentType.UnsignedByte
__uri?: string
__width: number = 0
_recommendedTextureSampler?: Sampler
_samplerResourceUid: number = -1
_tags: RnTags = {}

Collection of tags associated with this object

_textureResourceUid: number = -1
_textureViewAsRenderTargetResourceUid: number = -1
_textureViewResourceUid: number = -1
hdriFormat: EnumIO = HdriFormat.LDR_SRGB

The HDRI format used for this cube texture

mipmapLevelNumber: number = 1

The number of mipmap levels for this cube texture

InvalidObjectUID: -1 = -1

Invalid object UID constant

currentMaxObjectCount: number = 0

Current maximum object count for UID generation

Accessors

  • get htmlCanvasElement(): HTMLCanvasElement
  • Gets or creates an HTML canvas element with the texture content. If an image element exists, it will be drawn onto the canvas.

    Returns HTMLCanvasElement

    The HTML canvas element containing the texture data

  • get htmlImageElement(): undefined | HTMLImageElement
  • Gets the HTML image element associated with this texture.

    Returns undefined | HTMLImageElement

    The HTML image element or undefined if not available

  • get isTextureReady(): boolean
  • Checks if the texture is ready for use.

    Returns boolean

    True if the texture is ready, false otherwise

  • get isTransparent(): boolean
  • Checks if the texture contains transparent pixels.

    Returns boolean

    True if the texture has transparency, false otherwise

  • get objectUID(): number
  • Gets the unique object identifier

    Returns number

    The object's UID

  • get startedToLoad(): boolean
  • Checks if the texture has started loading.

    Returns boolean

    True if loading has started, false otherwise

  • get uniqueName(): string
  • Gets the unique name of this object

    Returns string

    The unique name string

  • get uri(): undefined | string
  • Gets the URI/URL of the texture source.

    Returns undefined | string

    The texture URI or undefined if not set

Methods

  • Implements the Disposable interface for automatic resource cleanup. This method is called when using the 'using' statement in TypeScript.

    Returns void

    using cubeTexture = new CubeTexture();
    // Texture will be automatically disposed when going out of scope
  • Completely destroys this cube texture and releases all associated resources. This method should be called when the texture is no longer needed to prevent memory leaks. After calling destroy(), this texture instance should not be used.

    Returns void

  • Destroys the 3D API resources associated with this cube texture. This method releases the texture from GPU memory and resets the texture state. After calling this method, the texture cannot be used for rendering until reloaded.

    Returns void

  • Generates a cube texture from typed arrays containing raw image data. This method allows creating cube textures from pre-processed image data with multiple mipmap levels.

    Parameters

    • typedArrayImages: {
          negX: TypedArray;
          negY: TypedArray;
          negZ: TypedArray;
          posX: TypedArray;
          posY: TypedArray;
          posZ: TypedArray;
      }[]

      Array of typed array objects for cubemap textures. Each element represents a mipmap level (index 0 is the base level). Each object contains six faces: posX, negX, posY, negY, posZ, negZ.

    • baseLevelWidth: number

      Width of the base level texture (mipmap level 0)

    • baseLevelHeight: number

      Height of the base level texture (mipmap level 0)

    Returns void

    const cubeTexture = new CubeTexture();
    const imageData = [{
    posX: new Uint8Array(imageDataPosX),
    negX: new Uint8Array(imageDataNegX),
    posY: new Uint8Array(imageDataPosY),
    negY: new Uint8Array(imageDataNegY),
    posZ: new Uint8Array(imageDataPosZ),
    negZ: new Uint8Array(imageDataNegZ)
    }];
    cubeTexture.generateTextureFromTypedArrays(imageData, 512, 512);
  • Retrieves image data from a rectangular region of the texture. Creates an internal canvas context if one doesn't exist.

    Parameters

    • x: number

      The x-coordinate of the top-left corner

    • y: number

      The y-coordinate of the top-left corner

    • width: number

      The width of the region

    • height: number

      The height of the region

    Returns ImageData

    ImageData object containing the pixel data

  • Gets a single pixel value at the specified coordinates as a specific type. Supports various color and vector types for different use cases.

    Parameters

    • x: number

      The x-coordinate of the pixel

    • y: number

      The y-coordinate of the pixel

    • typeClass:
          | typeof Vector3
          | typeof Vector4
          | typeof MutableVector3
          | typeof MutableVector4
          | typeof ColorRgb
          | typeof ColorRgba

      The class type to return the pixel as (ColorRgb, ColorRgba, Vector3, etc.)

    Returns any

    An instance of the specified type containing the pixel data

  • Gets the pixel data at the specified coordinates as a raw Uint8ClampedArray. This provides direct access to the RGBA values as 8-bit integers.

    Parameters

    • x: number

      The x-coordinate of the pixel

    • y: number

      The y-coordinate of the pixel

    Returns Uint8ClampedArray

    A Uint8ClampedArray containing the RGBA pixel data

  • Retrieves the value associated with a specific tag name

    Parameters

    • tagName: string

      The name of the tag whose value to retrieve

    Returns any

    The tag value, or undefined if the tag doesn't exist

  • Checks whether this object has a tag with the specified name

    Parameters

    • tagName: string

      The name of the tag to check for

    Returns boolean

    True if the tag exists (value is not null/undefined), false otherwise

  • Imports an existing WebGL texture directly into this CubeTexture instance. This method allows wrapping existing WebGL textures without creating new ones.

    Parameters

    • webGLTexture: WebGLTexture

      The existing WebGL texture object to import

    • width: number = 0

      Optional width of the texture (default: 0)

    • height: number = 0

      Optional height of the texture (default: 0)

    Returns void

    const cubeTexture = new CubeTexture();
    const existingTexture = gl.createTexture(); // Assume this is configured
    cubeTexture.importWebGLTextureDirectly(existingTexture, 512, 512);
  • Creates a simple 1x1 pixel cube texture with a solid color. This is useful for creating placeholder textures or solid color cube maps.

    Parameters

    • rgbaStr: string = 'rgba(0,0,0,1)'

      CSS color string in rgba format (default: 'rgba(0,0,0,1)' for black)

    Returns void

    const cubeTexture = new CubeTexture();
    cubeTexture.load1x1Texture('rgba(255,255,255,1)'); // White cube texture
    cubeTexture.load1x1Texture('rgba(0,128,255,1)'); // Blue cube texture
  • Loads cube texture images from files asynchronously. This method loads six cube faces from image files and creates a cube texture.

    Parameters

    • options: {
          baseUrl: string;
          hdriFormat: EnumIO;
          isNamePosNeg: boolean;
          mipmapLevelNumber: number;
      }

      Configuration options for loading the cube texture

      • baseUrl: string

        Base URL path to the cube texture files

      • hdriFormat: EnumIO

        The HDRI format to use for the texture

      • isNamePosNeg: boolean

        Whether to use positive/negative naming convention (posX, negX, etc.)

      • mipmapLevelNumber: number

        Number of mipmap levels to generate

    Returns Promise<void>

    const cubeTexture = new CubeTexture();
    await cubeTexture.loadTextureImages({
    baseUrl: 'textures/skybox',
    mipmapLevelNumber: 1,
    isNamePosNeg: true,
    hdriFormat: HdriFormat.LDR_SRGB
    });
  • Loads cube texture from Basis compressed texture data. Basis is a universal texture compression format that can be transcoded to various GPU formats.

    Parameters

    Returns void

    Will log an error if BASIS transcoder is not available

    const cubeTexture = new CubeTexture();
    const basisData = new Uint8Array(basisFileBuffer);
    cubeTexture.loadTextureImagesFromBasis(basisData, {
    magFilter: TextureParameter.Linear,
    minFilter: TextureParameter.LinearMipmapLinear
    });
  • Checks if this object has a tag with the specified name and value

    Parameters

    • tagName: string

      The tag name to match

    • tagValue: string

      The tag value to match

    Returns boolean

    True if the object has a matching tag, false otherwise

  • Checks if this object has all the specified tags with exactly matching values

    Parameters

    • tags: RnTags

      Object containing tag names as keys and expected values

    Returns boolean

    True if all specified tags exist with matching values, false otherwise

  • Checks if the object's combined tag string contains all the provided search strings. This allows for flexible searching within tag names and values.

    Parameters

    • stringArray: string[]

      Array of strings that must all be present in the combined tag string

    Returns boolean

    True if all strings are found in the combined tag string, false otherwise

  • Sets a specific channel value for a pixel at the given coordinates. Useful for modifying individual color channels (R, G, B, A).

    Parameters

    • x: number

      The x-coordinate of the pixel

    • y: number

      The y-coordinate of the pixel

    • channelIdx: number

      The channel index (0=R, 1=G, 2=B, 3=A)

    • value: number

      The new value for the channel (0-255)

    Returns void

  • Attempts to set a tag on this object. If the tag already exists, it will be replaced.

    Parameters

    • tag: Tag

      The tag object containing the name and value to set

    Returns boolean

    True if the tag was successfully set, false if the tag name contains invalid characters

  • Attempts to set a unique name for this object

    Parameters

    • name: string

      The desired unique name

    • toAddNameIfConflict: boolean

      If true, appends UID to make name unique when conflicts occur; if false, fails on conflict

    Returns boolean

    True if the name was successfully set, false if there was a conflict and toAddNameIfConflict was false

  • Validates that a tag string contains only allowed characters (alphanumeric and underscore)

    Parameters

    • val: string

      The string to validate

    Returns boolean

    True if the string contains only valid characters, false if it contains invalid characters

  • Static factory method to create and load a cube texture from URL in one step. This is a convenience method that combines instantiation and loading.

    Parameters

    • options: {
          baseUrl: string;
          hdriFormat: EnumIO;
          isNamePosNeg: boolean;
          mipmapLevelNumber: number;
      }

      Configuration options for loading the cube texture

      • baseUrl: string

        Base URL path to the cube texture files

      • hdriFormat: EnumIO

        The HDRI format to use for the texture

      • isNamePosNeg: boolean

        Whether to use positive/negative naming convention

      • mipmapLevelNumber: number

        Number of mipmap levels to generate

    Returns Promise<CubeTexture>

    Promise that resolves to a loaded CubeTexture instance

    const cubeTexture = await CubeTexture.loadFromUrl({
    baseUrl: 'assets/skybox/sunset',
    mipmapLevelNumber: 1,
    isNamePosNeg: true,
    hdriFormat: HdriFormat.RGBE_PNG
    });
  • Searches for the first object that has a specific tag with the given value

    Parameters

    • tag: string

      The tag name to search for

    • value: string

      The tag value to match

    Returns undefined | WeakRef<RnObject>

    WeakRef to the first matching object, or undefined if not found