fix: change ColorTexture to use Uint8Array instead of ImageData (#449)

Fixes running on Chrome 38
Fixes #389

Before:

![image](https://github.com/user-attachments/assets/d9dc8ae5-d7b6-45c1-9b23-e909a29158ce)

After:

![image](https://github.com/user-attachments/assets/421936ad-788c-4a17-9a5e-e09db2d7da55)

Author: wouterlucas

src/core/lib/WebGlContextWrapper.ts

@@ -299,7 +299,7 @@ export class WebGlContextWrapper {
     internalformat: GLint,
     format: GLenum,
     type: GLenum,
-    source: TexImageSource,
+    source: TexImageSource | Uint8Array,
   ): void;
   texImage2D(
     level: any,

src/core/renderers/webgl/WebGlCoreCtxSubTexture.ts

@@ -34,6 +34,12 @@ export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
 
   override async onLoadRequest(): Promise<Dimensions> {
     const props = await (this.textureSource as SubTexture).getTextureData();
+
+    if (props.data instanceof Uint8Array) {
+      // its a 1x1 Color Texture
+      return { width: 1, height: 1 };
+    }
+
     return {
       width: props.data?.width || 0,
       height: props.data?.height || 0,

src/core/renderers/webgl/WebGlCoreCtxTexture.ts

@@ -204,6 +204,29 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
       this.setTextureMemUse(view.byteLength);
+    } else if (textureData.data && textureData.data instanceof Uint8Array) {
+      // Color Texture
+      width = 1;
+      height = 1;
+
+      glw.bindTexture(this._nativeCtxTexture);
+      glw.pixelStorei(
+        glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+        !!textureData.premultiplyAlpha,
+      );
+
+      glw.texImage2D(
+        0,
+        glw.RGBA,
+        width,
+        height,
+        0,
+        glw.RGBA,
+        glw.UNSIGNED_BYTE,
+        textureData.data,
+      );
+
+      this.setTextureMemUse(width * height * 4);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,

src/core/textures/ColorTexture.ts

@@ -63,10 +63,22 @@ export class ColorTexture extends Texture {
   }
 
   override async getTextureData(): Promise<TextureData> {
-    const pixelData32 = new Uint32Array([this.color]);
-    const pixelData8 = new Uint8ClampedArray(pixelData32.buffer);
+    const pixelData = new Uint8Array(4);
+
+    if (this.color === 0xffffffff) {
+      pixelData[0] = 255;
+      pixelData[1] = 255;
+      pixelData[2] = 255;
+      pixelData[3] = 255;
+    } else {
+      pixelData[0] = (this.color >> 16) & 0xff; // Red
+      pixelData[1] = (this.color >> 8) & 0xff; // Green
+      pixelData[2] = this.color & 0xff; // Blue
+      pixelData[3] = (this.color >>> 24) & 0xff; // Alpha
+    }
+
     return {
-      data: new ImageData(pixelData8, 1, 1),
+      data: pixelData,
       premultiplyAlpha: true,
     };
   }

src/core/textures/Texture.ts

@@ -91,6 +91,7 @@ export interface TextureData {
     | SubTextureProps
     | CompressedData
     | HTMLImageElement
+    | Uint8Array
     | null;
   /**
    * Premultiply alpha when uploading texture data to the GPU