Handle invertY on textures

src/Engines/WebGPU/webgpuTextureHelper.ts

@@ -82,13 +82,17 @@ export class GPUTextureHelper {
         });
     }
 
-    generateTexture(imageBitmap: ImageBitmap): GPUTexture {
+    async generateTexture(imageBitmap: ImageBitmap, invertY = false): Promise<GPUTexture> {
        let textureSize = {
             width: imageBitmap.width,
             height: imageBitmap.height,
             depth: 1,
         };
 
+        if (invertY) {
+            imageBitmap = await createImageBitmap(imageBitmap, { imageOrientation: "flipY" });
+        }
+
         // Populate the top level of the srcTexture with the imageBitmap.
         const srcTexture = this.device.createTexture({
             size: textureSize,
@@ -102,7 +106,7 @@ export class GPUTextureHelper {
         return srcTexture;
     }
 
-    generateMipmappedTexture(imageBitmap: ImageBitmap): GPUTexture {
+    async generateMipmappedTexture(imageBitmap: ImageBitmap, invertY = false): Promise<GPUTexture> {
         let textureSize = {
             width: imageBitmap.width,
             height: imageBitmap.height,
@@ -115,10 +119,14 @@ export class GPUTextureHelper {
         const srcTexture = this.device.createTexture({
             size: textureSize,
             format: WebGPUConstants.TextureFormat.RGBA8Unorm,
-            usage: WebGPUConstants.TextureUsage.CopyDst | WebGPUConstants.TextureUsage.Sampled | WebGPUConstants.TextureUsage.OutputAttachment,
+            usage: WebGPUConstants.TextureUsage.CopySrc | WebGPUConstants.TextureUsage.CopyDst | WebGPUConstants.TextureUsage.Sampled | WebGPUConstants.TextureUsage.OutputAttachment,
             mipLevelCount
         });
 
+        if (invertY) {
+            imageBitmap = await createImageBitmap(imageBitmap, { imageOrientation: "flipY" });
+        }
+
         this.device.defaultQueue.copyImageBitmapToTexture({ imageBitmap }, { texture: srcTexture }, textureSize);
 
         const commandEncoder = this.device.createCommandEncoder({});

src/Engines/thinEngine.ts

@@ -3007,7 +3007,7 @@ export class ThinEngine {
 
         return this._createTextureBase(
             url, noMipmap, invertY, scene, samplingMode, onLoad, onError,
-            this._prepareWebGLTexture,
+            this._prepareWebGLTexture.bind(this),
             (potWidth, potHeight, img, extension, texture, continuationCallback) => {
                 let gl = this._gl;
                 var isPot = (img.width === potWidth && img.height === potHeight);

src/Engines/webgpuEngine.ts

@@ -1080,7 +1080,9 @@ export class WebGPUEngine extends Engine {
                     texture.baseHeight = img.height;
                     texture.width = img.width;
                     texture.height = img.height;
-                    texture.isReady = true;
+                    if (format) {
+                        texture.format = format;
+                    }
 
                     const promise: Promise<Nullable<ImageBitmap>> =
                         img instanceof String ? Promise.resolve(null) :
@@ -1093,20 +1095,27 @@ export class WebGPUEngine extends Engine {
                                 });
                             });
 
-                    promise.then((img) => {
+                    promise.then(async (img) => {
                         if (img) {
+                            let gpuTexture: GPUTexture;
+
+                            // TODO WEBGPU: handle format if <> 0. Note that it seems "rgb" formats don't exist in WebGPU...
                             //let internalFormat = format ? this._getInternalFormat(format) : ((extension === ".jpg") ? gl.RGB : gl.RGBA);
                             if (noMipmap) {
-                                this._gpuTextureHelper.generateTexture(img);
+                                gpuTexture = await this._gpuTextureHelper.generateTexture(img, invertY);
                             } else {
-                                this._gpuTextureHelper.generateMipmappedTexture(img);
+                                gpuTexture = await this._gpuTextureHelper.generateMipmappedTexture(img, invertY);
                             }
+                            texture._webGPUTexture = gpuTexture;
+                            texture._webGPUTextureView = gpuTexture.createView();
                         }
 
                         if (scene) {
                             scene._removePendingData(texture);
                         }
 
+                        texture.isReady = true;
+
                         texture.onLoadedObservable.notifyObservers(texture);
                         texture.onLoadedObservable.clear();
                     });