Rename slices to layers to better match WebGPU naming but also gl.framebufferTextureLayer

Author: heretique

examples/src/examples/graphics/texture-array.example.mjs

@@ -108,7 +108,7 @@ assetListLoader.load(() => {
         dimension: pc.TEXTUREDIMENSION_2D_ARRAY,
         width: 1024,
         height: 1024,
-        slices: 4, // array texture with 4 textures
+        layers: 4, // array texture with 4 textures
         magFilter: pc.FILTER_NEAREST,
         minFilter: pc.FILTER_NEAREST_MIPMAP_NEAREST,
         mipmaps: true,
@@ -131,7 +131,7 @@ assetListLoader.load(() => {
     const mipmaps = generateMipmaps(textureArrayOptions.width, textureArrayOptions.height);
     const levels = mipmaps.map((data) => {
         const textures = [];
-        for (let i = 0; i < textureArrayOptions.slices; i++) {
+        for (let i = 0; i < textureArrayOptions.layers; i++) {
             textures.push(data);
         }
         return textures;

src/framework/handlers/texture.js

@@ -101,16 +101,16 @@ const _completePartialMipmapChain = function (texture) {
         const height = Math.max(1, texture._height >> (level - 1));
         if (texture.cubemap || texture.array) {
             const mips = [];
-            for (let slice = 0; slice < texture.slices; ++slice) {
-                mips.push(downsample(width, height, texture._levels[level - 1][slice]));
+            for (let layer = 0; layer < texture.layers; ++layer) {
+                mips.push(downsample(width, height, texture._levels[level - 1][layer]));
             }
             texture._levels.push(mips);
         } else {
             texture._levels.push(downsample(width, height, texture._levels[level - 1]));
         }
     }
 
-    texture._levelsUpdated = (texture.cubemap || texture.array) ? [Array(texture.slices).fill(true)] : [true];
+    texture._levelsUpdated = (texture.cubemap || texture.array) ? [Array(texture.layers).fill(true)] : [true];
 };
 
 /**

src/framework/xr/xr-view.js

@@ -173,7 +173,7 @@ class XrView extends EventHandler {
             this._textureDepth = new Texture(device, {
                 format: this._manager.views.depthPixelFormat,
                 array: viewsCount > 1,
-                slices: viewsCount,
+                layers: viewsCount,
                 mipmaps: false,
                 addressU: ADDRESS_CLAMP_TO_EDGE,
                 addressV: ADDRESS_CLAMP_TO_EDGE,

src/platform/graphics/texture-utils.js

@@ -26,7 +26,7 @@ class TextureUtils {
      *
      * @param {number} width - Texture's width.
      * @param {number} height - Texture's height.
-     * @param {number} [depth] - Texture's depth slices. Defaults to 1.
+     * @param {number} [depth] - Texture's depth layers. Defaults to 1.
      * @returns {number} The number of mip levels required for the texture.
      */
     static calcMipLevelsCount(width, height, depth = 1) {
@@ -38,7 +38,7 @@ class TextureUtils {
      *
      * @param {number} width - Texture's width.
      * @param {number} height - Texture's height.
-     * @param {number} depth - Texture's depth slices.
+     * @param {number} depth - Texture's depth layers.
      * @param {number} format - Texture's pixel format PIXELFORMAT_***.
      * @returns {number} The number of bytes of GPU memory required for the texture.
      */
@@ -70,15 +70,15 @@ class TextureUtils {
      *
      * @param {number} width - Texture's width.
      * @param {number} height - Texture's height.
-     * @param {number} slices - Texture's slices.
+     * @param {number} layers - Texture's layers.
      * @param {number} format - Texture's pixel format PIXELFORMAT_***.
      * @param {boolean} isVolume - True if the texture is a volume texture, false otherwise.
      * @param {boolean} mipmaps - True if the texture includes mipmaps, false otherwise.
      * @returns {number} The number of bytes of GPU memory required for the texture.
      */
-    static calcGpuSize(width, height, slices, format, isVolume, mipmaps) {
+    static calcGpuSize(width, height, layers, format, isVolume, mipmaps) {
         let result = 0;
-        let depth = isVolume ? slices : 1;
+        let depth = isVolume ? layers : 1;
 
         while (1) {
             result += TextureUtils.calcLevelGpuSize(width, height, depth, format);
@@ -92,7 +92,7 @@ class TextureUtils {
             depth = Math.max(depth >> 1, 1);
         }
 
-        return result * (isVolume ? 1 : slices);
+        return result * (isVolume ? 1 : layers);
     }
 }
 

src/platform/graphics/texture.js

@@ -93,7 +93,7 @@ class Texture {
      * @param {string} [options.name] - The name of the texture. Defaults to null.
      * @param {number} [options.width] - The width of the texture in pixels. Defaults to 4.
      * @param {number} [options.height] - The height of the texture in pixels. Defaults to 4.
-     * @param {number} [options.slices] - The number of depth slices in a 3D texture, the number of textures
+     * @param {number} [options.layers] - The number of depth layers in a 3D texture, the number of textures
      * in a texture array or the number of faces for a cubemap.
      * @param {string} [options.dimension] - The texture dimension type. Can be:
      * - {@link TEXTUREDIMENSION_2D}
@@ -220,7 +220,7 @@ class Texture {
         Debug.assert(this.device, "Texture constructor requires a graphicsDevice to be valid");
         Debug.assert(!options.width || Number.isInteger(options.width), "Texture width must be an integer number, got", options);
         Debug.assert(!options.height || Number.isInteger(options.height), "Texture height must be an integer number, got", options);
-        Debug.assert(!options.slices || Number.isInteger(options.slices), "Texture slices must be an integer number, got", options);
+        Debug.assert(!options.layers || Number.isInteger(options.layers), "Texture layers must be an integer number, got", options);
 
         this.name = options.name ?? '';
 
@@ -232,9 +232,9 @@ class Texture {
         this._width = Math.floor(options.width ?? 4);
         this._height = Math.floor(options.height ?? 4);
 
-        this._slices = Math.floor(options.slices ?? (this._dimension === TEXTUREDIMENSION_CUBE ? 6 : 1));
+        this._layers = Math.floor(options.layers ?? (this._dimension === TEXTUREDIMENSION_CUBE ? 6 : 1));
 
-        Debug.assert((this._dimension === TEXTUREDIMENSION_CUBE ? this._slices === 6 : true), "Texture cube map must have 6 slices");
+        Debug.assert((this._dimension === TEXTUREDIMENSION_CUBE ? this._layers === 6 : true), "Texture cube map must have 6 layers");
 
         this._format = options.format ?? PIXELFORMAT_RGBA8;
         this._compressed = isCompressedPixelFormat(this._format);
@@ -283,7 +283,7 @@ class Texture {
         if (this._levels) {
             this.upload(options.immediate ?? false);
         } else {
-            this._levels = (this.cubemap || this.array) ? [Array(this._slices).fill(null)] : [null];
+            this._levels = (this.cubemap || this.array) ? [Array(this._layers).fill(null)] : [null];
         }
 
         // track the texture
@@ -331,10 +331,10 @@ class Texture {
      *
      * @param {number} width - The new width of the texture.
      * @param {number} height - The new height of the texture.
-     * @param {number} [slices] - The new number of slices for the texture. Defaults to 1.
+     * @param {number} [layers] - The new number of layers for the texture. Defaults to 1.
      * @ignore
      */
-    resize(width, height, slices = 1) {
+    resize(width, height, layers = 1) {
 
         // destroy texture impl
         const device = this.device;
@@ -343,7 +343,7 @@ class Texture {
 
         this._width = Math.floor(width);
         this._height = Math.floor(height);
-        this._slices = Math.floor(slices);
+        this._layers = Math.floor(layers);
 
         // re-create the implementation
         this.impl = device.createTextureImpl(this);
@@ -680,21 +680,21 @@ class Texture {
     }
 
     /**
-     * The number of depth slices in a 3D texture.
+     * The number of depth layers in a 3D texture.
      *
      * @type {number}
      */
     get depth() {
-        return this._dimension === TEXTUREDIMENSION_3D ? this._slices : 1;
+        return this._dimension === TEXTUREDIMENSION_3D ? this._layers : 1;
     }
 
     /**
      * The number of textures in a texture array or the number of faces for a cubemap.
      *
      * @type {number}
      */
-    get slices() {
-        return this._slices;
+    get layers() {
+        return this._layers;
     }
 
     /**
@@ -741,7 +741,7 @@ class Texture {
 
     get gpuSize() {
         const mips = this.pot && this._mipmaps && !(this._compressed && this._levels.length === 1);
-        return TextureUtils.calcGpuSize(this._width, this._height, this._slices, this._format, this.volume, mips);
+        return TextureUtils.calcGpuSize(this._width, this._height, this._layers, this._format, this.volume, mips);
     }
 
     /**
@@ -822,7 +822,7 @@ class Texture {
 
     // Force a full resubmission of the texture to the GPU (used on a context restore event)
     dirtyAll() {
-        this._levelsUpdated = (this.cubemap || this.array) ? [Array(this._slices).fill(true)] : [true];
+        this._levelsUpdated = (this.cubemap || this.array) ? [Array(this._layers).fill(true)] : [true];
 
         this._needsUpload = true;
         this._needsMipmapsUpload = this._mipmaps;
@@ -839,8 +839,8 @@ class Texture {
      * to 0.
      * @param {number} [options.face] - If the texture is a cubemap, this is the index of the face
      * to lock.
-     * @param {number} [options.slice] - If the texture is a texture array, this is the index of the
-     * slice to lock.
+     * @param {number} [options.layer] - If the texture is a texture array, this is the index of the
+     * layer to lock.
      * @param {number} [options.mode] - The lock mode. Can be:
      * - {@link TEXTURELOCK_READ}
      * - {@link TEXTURELOCK_WRITE}
@@ -852,7 +852,7 @@ class Texture {
         // Initialize options to some sensible defaults
         options.level ??= 0;
         options.face ??= 0;
-        options.slice ??= 0;
+        options.layer ??= 0;
         options.mode ??= TEXTURELOCK_WRITE;
 
         Debug.assert(
@@ -881,7 +881,7 @@ class Texture {
 
         this._lockedMode = options.mode;
 
-        const levels = this.cubemap ? this._levels[options.face] : this.array ? this._levels[options.slice] : this._levels;
+        const levels = this.cubemap ? this._levels[options.face] : this.array ? this._levels[options.layer] : this._levels;
         if (levels[options.level] === null) {
             // allocate storage for this mip level
             const width = Math.max(1, this._width >> options.level);
@@ -893,7 +893,7 @@ class Texture {
 
         if (this._lockedMode === TEXTURELOCK_WRITE) {
             if (this.cubemap || this.array) {
-                this._levelsUpdated[0][options.face ?? options.slice] = true;
+                this._levelsUpdated[0][options.face ?? options.layer] = true;
             } else {
                 this._levelsUpdated[0] = true;
             }
@@ -922,7 +922,7 @@ class Texture {
                 width = source[0].width || 0;
                 height = source[0].height || 0;
 
-                for (let i = 0; i < this._slices; i++) {
+                for (let i = 0; i < this._layers; i++) {
                     const face = source[i];
                     // cubemap becomes invalid if any condition is not satisfied
                     if (!face ||                  // face is missing
@@ -940,7 +940,7 @@ class Texture {
 
             if (!invalid) {
                 // mark levels as updated
-                for (let i = 0; i < this._slices; i++) {
+                for (let i = 0; i < this._layers; i++) {
                     if (this._levels[0][i] !== source[i])
                         this._levelsUpdated[0][i] = true;
                 }
@@ -970,7 +970,7 @@ class Texture {
 
             // remove levels
             if (this.cubemap || this.array) {
-                for (let i = 0; i < this._slices; i++) {
+                for (let i = 0; i < this._layers; i++) {
                     this._levels[0][i] = null;
                     this._levelsUpdated[0][i] = true;
                 }

src/platform/graphics/webgl/webgl-texture.js

@@ -465,11 +465,11 @@ class WebglTexture {
         if (texture.array && !this._glCreated) {
             // for texture arrays we reserve the space in advance
             gl.texStorage3D(gl.TEXTURE_2D_ARRAY,
-                            requiredMipLevels,
-                            this._glInternalFormat,
-                            texture._width,
-                            texture._height,
-                            texture._slices);
+                requiredMipLevels,
+                this._glInternalFormat,
+                texture._width,
+                texture._height,
+                texture._layers);
         }
 
         // Upload all existing mip levels. Initialize 0 mip anyway.
@@ -499,9 +499,9 @@ class WebglTexture {
 
                 if (device._isBrowserInterface(mipObject[0])) {
                     // Upload the image, canvas or video
-                    for (face = 0; face < texture.slices; face++) {
+                    for (face = 0; face < texture.layers; face++) {
                         let src = mipObject[face];
-                        if (!texture._levelsUpdated[0][face] || !src)
+                        if (!texture._levelsUpdated[0][face] || !src) {
                             continue;
                         }
 
@@ -542,9 +542,9 @@ class WebglTexture {
                 } else {
                     // Upload the byte array
                     resMult = 1 / Math.pow(2, mipLevel);
-                    for (face = 0; face < texture.slices; face++) {
+                    for (face = 0; face < texture.layers; face++) {
                         const texData = mipObject[face];
-                        if (!texture._levelsUpdated[0][face])
+                        if (!texture._levelsUpdated[0][face]) {
                             continue;
                         }
 
@@ -605,30 +605,30 @@ class WebglTexture {
                 // Upload the byte array
                 if (texture._compressed) {
                     gl.compressedTexImage3D(gl.TEXTURE_3D,
-                                            mipLevel,
-                                            this._glInternalFormat,
-                                            Math.max(texture._width * resMult, 1),
-                                            Math.max(texture._height * resMult, 1),
-                                            Math.max(texture._slices * resMult, 1),
-                                            0,
-                                            mipObject);
+                        mipLevel,
+                        this._glInternalFormat,
+                        Math.max(texture._width * resMult, 1),
+                        Math.max(texture._height * resMult, 1),
+                        Math.max(texture._layers * resMult, 1),
+                        0,
+                        mipObject);
                 } else {
                     device.setUnpackFlipY(false);
                     device.setUnpackPremultiplyAlpha(texture._premultiplyAlpha);
                     gl.texImage3D(gl.TEXTURE_3D,
-                                  mipLevel,
-                                  this._glInternalFormat,
-                                  Math.max(texture._width * resMult, 1),
-                                  Math.max(texture._height * resMult, 1),
-                                  Math.max(texture._slices * resMult, 1),
-                                  0,
-                                  this._glFormat,
-                                  this._glPixelType,
-                                  mipObject);
+                        mipLevel,
+                        this._glInternalFormat,
+                        Math.max(texture._width * resMult, 1),
+                        Math.max(texture._height * resMult, 1),
+                        Math.max(texture._layers * resMult, 1),
+                        0,
+                        this._glFormat,
+                        this._glPixelType,
+                        mipObject);
                 }
             } else if (texture.array && typeof mipObject === "object") {
                 if (texture._compressed) {
-                    for (let index = 0; index < texture._slices; index++) {
+                    for (let index = 0; index < texture._layers; index++) {
                         if (!texture._levelsUpdated[0][index] || !mipObject[index])
                             continue;
                         gl.compressedTexSubImage3D(
@@ -645,7 +645,7 @@ class WebglTexture {
                         );
                     }
                 } else {
-                    for (let index = 0; index < texture.slices; index++) {
+                    for (let index = 0; index < texture.layers; index++) {
                         if (!texture._levelsUpdated[0][index] || !mipObject[index])
                             continue;
                         gl.texSubImage3D(
@@ -776,7 +776,7 @@ class WebglTexture {
 
         if (texture._needsUpload) {
             if (texture.cubemap || texture.array) {
-                for (let i = 0; i < texture.slices; i++)
+                for (let i = 0; i < texture.layers; i++) {
                     texture._levelsUpdated[0][i] = false;
                 }
             } else {

src/platform/graphics/webgpu/webgpu-mipmap-renderer.js

@@ -110,7 +110,7 @@ class WebgpuMipmapRenderer {
         DebugHelper.setLabel(pipeline, 'RenderPipeline-MipmapRenderer');
 
         const texture = webgpuTexture.texture;
-        const numFaces = texture.slices;
+        const numFaces = texture.layers;
 
         const srcViews = [];
         for (let face = 0; face < numFaces; face++) {

src/platform/graphics/webgpu/webgpu-texture.js

@@ -100,7 +100,7 @@ class WebgpuTexture {
             size: {
                 width: texture.width,
                 height: texture.height,
-                depthOrArrayLayers: texture.slices
+                depthOrArrayLayers: texture.layers
             },
             format: this.format,
             mipLevelCount: mipLevelCount,
@@ -337,9 +337,9 @@ class WebgpuTexture {
 
                     } else if (texture.array) { // texture array
 
-                        if (texture.slices === mipObject.length) {
+                        if (texture.layers === mipObject.length) {
 
-                            for (let index = 0; index < texture.slices; index++) {
+                            for (let index = 0; index < texture.layers; index++) {
                                 const arraySource = mipObject[index];
 
                                 if (this.isExternalImage(arraySource)) {