New texture formats: R8 and RG8 (#6602)

* New texture formats: R8 and RG8

* Apply suggestions from code review

Co-authored-by: Will Eastcott <will@playcanvas.com>

* deprecate the old constants

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
Co-authored-by: Will Eastcott <will@playcanvas.com>

src/platform/graphics/constants.js

@@ -527,28 +527,8 @@ export const INDEXFORMAT_UINT16 = 1;
  */
 export const INDEXFORMAT_UINT32 = 2;
 
-/**
- * 8-bit alpha.
- *
- * @type {number}
- * @category Graphics
- */
 export const PIXELFORMAT_A8 = 0;
-
-/**
- * 8-bit luminance.
- *
- * @type {number}
- * @category Graphics
- */
 export const PIXELFORMAT_L8 = 1;
-
-/**
- * 8-bit luminance with 8-bit alpha.
- *
- * @type {number}
- * @category Graphics
- */
 export const PIXELFORMAT_LA8 = 2;
 
 /**
@@ -950,13 +930,29 @@ export const PIXELFORMAT_R16F = 50;
  */
 export const PIXELFORMAT_RG16F = 51;
 
+/**
+ * 8-bit per-channel unsigned integer (R) format.
+ *
+ * @type {number}
+ * @category Graphics
+ */
+export const PIXELFORMAT_R8 = 52;
+
+/**
+ * 8-bit per-channel unsigned integer (RG) format.
+ *
+ * @type {number}
+ * @category Graphics
+ */
+export const PIXELFORMAT_RG8 = 53;
+
 // map of engine PIXELFORMAT_*** enums to information about the format
 export const pixelFormatInfo = new Map([
 
     // float formats
     [PIXELFORMAT_A8,            { name: 'A8', size: 1 }],
-    [PIXELFORMAT_L8,            { name: 'L8', size: 1 }],
-    [PIXELFORMAT_LA8,           { name: 'LA8', size: 2 }],
+    [PIXELFORMAT_R8,            { name: 'R8', size: 1 }],
+    [PIXELFORMAT_RG8,           { name: 'RG8', size: 2 }],
     [PIXELFORMAT_RGB565,        { name: 'RGB565', size: 2 }],
     [PIXELFORMAT_RGBA5551,      { name: 'RGBA5551', size: 2 }],
     [PIXELFORMAT_RGBA4,         { name: 'RGBA4', size: 2 }],
@@ -1040,6 +1036,7 @@ export const getPixelFormatArrayType = (format) => {
         case PIXELFORMAT_RG16I:
         case PIXELFORMAT_RGBA16I:
             return Int16Array;
+        case PIXELFORMAT_RG8:
         case PIXELFORMAT_R16U:
         case PIXELFORMAT_RG16U:
         case PIXELFORMAT_RGBA16U:

src/platform/graphics/texture.js

@@ -94,9 +94,8 @@ class Texture {
      * @param {number} [options.depth] - The number of depth slices in a 3D texture.
      * @param {number} [options.format] - The pixel format of the texture. Can be:
      *
-     * - {@link PIXELFORMAT_A8}
-     * - {@link PIXELFORMAT_L8}
-     * - {@link PIXELFORMAT_LA8}
+     * - {@link PIXELFORMAT_R8}
+     * - {@link PIXELFORMAT_RG8}
      * - {@link PIXELFORMAT_RGB565}
      * - {@link PIXELFORMAT_RGBA5551}
      * - {@link PIXELFORMAT_RGBA4}
@@ -633,9 +632,8 @@ class Texture {
     /**
      * The pixel format of the texture. Can be:
      *
-     * - {@link PIXELFORMAT_A8}
-     * - {@link PIXELFORMAT_L8}
-     * - {@link PIXELFORMAT_LA8}
+     * - {@link PIXELFORMAT_R8}
+     * - {@link PIXELFORMAT_RG8}
      * - {@link PIXELFORMAT_RGB565}
      * - {@link PIXELFORMAT_RGBA5551}
      * - {@link PIXELFORMAT_RGBA4}

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

@@ -10,7 +10,7 @@ import {
     PIXELFORMAT_ATC_RGBA, PIXELFORMAT_BGRA8, PIXELFORMAT_R8I, PIXELFORMAT_R8U, PIXELFORMAT_R16I, PIXELFORMAT_R16U,
     PIXELFORMAT_R32I, PIXELFORMAT_R32U, PIXELFORMAT_RG16I, PIXELFORMAT_RG16U, PIXELFORMAT_RG32I, PIXELFORMAT_RG32U,
     PIXELFORMAT_RG8I, PIXELFORMAT_RG8U, PIXELFORMAT_RGBA16I, PIXELFORMAT_RGBA16U, PIXELFORMAT_RGBA32I, PIXELFORMAT_RGBA32U,
-    PIXELFORMAT_RGBA8I, PIXELFORMAT_RGBA8U, PIXELFORMAT_R16F, PIXELFORMAT_RG16F
+    PIXELFORMAT_RGBA8I, PIXELFORMAT_RGBA8U, PIXELFORMAT_R16F, PIXELFORMAT_RG16F, PIXELFORMAT_R8, PIXELFORMAT_RG8
 } from '../constants.js';
 
 /**
@@ -124,6 +124,17 @@ class WebglTexture {
                 this._glInternalFormat = gl.LUMINANCE_ALPHA;
                 this._glPixelType = gl.UNSIGNED_BYTE;
                 break;
+            case PIXELFORMAT_R8:
+                this._glFormat = gl.RED;
+                this._glInternalFormat = gl.R8;
+                this._glPixelType = gl.UNSIGNED_BYTE;
+                break;
+
+            case PIXELFORMAT_RG8:
+                this._glFormat = gl.RG;
+                this._glInternalFormat = gl.RG8;
+                this._glPixelType = gl.UNSIGNED_BYTE;
+                break;
             case PIXELFORMAT_RGB565:
                 this._glFormat = gl.RGB;
                 this._glInternalFormat = gl.RGB;

src/platform/graphics/webgpu/constants.js

@@ -8,14 +8,16 @@ import {
     PIXELFORMAT_ATC_RGBA, PIXELFORMAT_BGRA8, PIXELFORMAT_R8I, PIXELFORMAT_R8U, PIXELFORMAT_R16I, PIXELFORMAT_R16U,
     PIXELFORMAT_R32I, PIXELFORMAT_R32U, PIXELFORMAT_RG16I, PIXELFORMAT_RG16U, PIXELFORMAT_RG32I, PIXELFORMAT_RG32U,
     PIXELFORMAT_RG8I, PIXELFORMAT_RG8U, PIXELFORMAT_RGBA16I, PIXELFORMAT_RGBA16U, PIXELFORMAT_RGBA32I, PIXELFORMAT_RGBA32U,
-    PIXELFORMAT_RGBA8I, PIXELFORMAT_RGBA8U, PIXELFORMAT_R16F, PIXELFORMAT_RG16F
+    PIXELFORMAT_RGBA8I, PIXELFORMAT_RGBA8U, PIXELFORMAT_R16F, PIXELFORMAT_RG16F, PIXELFORMAT_R8, PIXELFORMAT_RG8
 } from '../constants.js';
 
 // map of PIXELFORMAT_*** to GPUTextureFormat
 export const gpuTextureFormats = [];
 gpuTextureFormats[PIXELFORMAT_A8] = '';
-gpuTextureFormats[PIXELFORMAT_L8] = 'r8unorm';
-gpuTextureFormats[PIXELFORMAT_LA8] = 'rg8unorm';
+gpuTextureFormats[PIXELFORMAT_L8] = '';
+gpuTextureFormats[PIXELFORMAT_LA8] = '';
+gpuTextureFormats[PIXELFORMAT_R8] = 'r8unorm';
+gpuTextureFormats[PIXELFORMAT_RG8] = 'rg8unorm';
 gpuTextureFormats[PIXELFORMAT_RGB565] = '';
 gpuTextureFormats[PIXELFORMAT_RGBA5551] = '';
 gpuTextureFormats[PIXELFORMAT_RGBA4] = '';

src/scene/lighting/world-clusters.js

@@ -1,7 +1,7 @@
 import { Vec3 } from '../../core/math/vec3.js';
 import { math } from '../../core/math/math.js';
 import { BoundingBox } from '../../core/shape/bounding-box.js';
-import { PIXELFORMAT_L8 } from '../../platform/graphics/constants.js';
+import { PIXELFORMAT_R8 } from '../../platform/graphics/constants.js';
 import { LIGHTTYPE_DIRECTIONAL, LIGHTTYPE_SPOT, MASK_AFFECT_DYNAMIC, MASK_AFFECT_LIGHTMAPPED } from '../constants.js';
 import { LightsBuffer } from './lights-buffer.js';
 import { Debug } from '../../core/debug.js';
@@ -196,7 +196,7 @@ class WorldClusters {
             this._clusterTextureSizeData[2] = 1.0 / height;
 
             this.releaseClusterTexture();
-            this.clusterTexture = this.lightsBuffer.createTexture(this.device, width, height, PIXELFORMAT_L8, 'ClusterTexture');
+            this.clusterTexture = this.lightsBuffer.createTexture(this.device, width, height, PIXELFORMAT_R8, 'ClusterTexture');
         }
     }