Merge pull request #8824 from Popov72/fix-gltf-export

Fix glb/gltf export: texture not tiled / invalid format for pictures

serializers/src/glTF/2.0/Extensions/KHR_texture_transform.ts

@@ -45,7 +45,9 @@ export class KHR_texture_transform implements IGLTFExporterExtensionV2 {
     }
 
     public postExportTexture?(context: string, textureInfo: ITextureInfo, babylonTexture: Texture): void {
-        if (babylonTexture && babylonTexture.uRotationCenter === 0 && babylonTexture.vRotationCenter === 0) {
+        const canUseExtension = babylonTexture && ((babylonTexture.uAng === 0 && babylonTexture.wAng === 0 && babylonTexture.vAng === 0) || (babylonTexture.uRotationCenter === 0 && babylonTexture.vRotationCenter === 0));
+
+        if (canUseExtension) {
             let textureTransform: IKHRTextureTransform = {};
             let transformIsRequired = false;
 

serializers/src/glTF/2.0/glTFExporter.ts

@@ -129,6 +129,8 @@ export class _Exporter {
      */
     public _imageData: { [fileName: string]: { data: Uint8Array, mimeType: ImageMimeType } };
 
+    protected _orderedImageData: Array<{ data: Uint8Array, mimeType: ImageMimeType }>;
+
     /**
      * Stores a map of the unique id of a node to its index in the node array
      */
@@ -301,6 +303,7 @@ export class _Exporter {
         this._skins = [];
         this._animations = [];
         this._imageData = {};
+        this._orderedImageData = [];
         this._options = options || {};
         this._animationSampleRate = options && options.animationSampleRate ? options.animationSampleRate : 1 / 60;
         this._includeCoordinateSystemConversionNodes = options && options.includeCoordinateSystemConversionNodes ? true : false;
@@ -950,6 +953,7 @@ export class _Exporter {
                 this._images.forEach((image) => {
                     if (image.uri) {
                         imageData = this._imageData[image.uri];
+                        this._orderedImageData.push(imageData);
                         imageName = image.uri.split('.')[0] + " image";
                         bufferView = _GLTFUtilities._CreateBufferView(0, byteOffset, imageData.data.length, undefined, imageName);
                         byteOffset += imageData.data.buffer.byteLength;
@@ -1052,8 +1056,8 @@ export class _Exporter {
             const jsonLength = jsonText.length;
             let imageByteLength = 0;
 
-            for (let key in this._imageData) {
-                imageByteLength += this._imageData[key].data.byteLength;
+            for (let i = 0; i < this._orderedImageData.length; ++i) {
+                imageByteLength += this._orderedImageData[i].data.byteLength;
             }
             const jsonPadding = this._getPadding(jsonLength);
             const binPadding = this._getPadding(binaryBuffer.byteLength);
@@ -1108,9 +1112,10 @@ export class _Exporter {
             const glbData = [headerBuffer, jsonChunkBuffer, binaryChunkBuffer, binaryBuffer];
 
             // binary data
-            for (let key in this._imageData) {
-                glbData.push(this._imageData[key].data.buffer);
+            for (let i = 0; i < this._orderedImageData.length; ++i) {
+                glbData.push(this._orderedImageData[i].data.buffer);
             }
+
             glbData.push(binPaddingBuffer);
 
             glbData.push(imagePaddingBuffer);

serializers/src/glTF/2.0/glTFMaterialExporter.ts

@@ -515,7 +515,15 @@ export class _GLTFMaterialExporter {
                 tempTexture.dispose();
 
                 // Read data from WebGL
-                const canvas = engine.getRenderingCanvas();
+                const canvas0 = engine.getRenderingCanvas();
+
+                let canvas: Nullable<HTMLCanvasElement> = document.createElement("canvas");
+
+                canvas.width = canvas0?.width ?? 0;
+                canvas.height = canvas0?.height ?? 0;
+
+                var destCtx = canvas.getContext('2d');
+                destCtx!.drawImage(canvas0!, 0, 0);
 
                 if (canvas) {
                     if (!canvas.toBlob) { // fallback for browsers without "canvas.toBlob"
@@ -524,6 +532,7 @@ export class _GLTFMaterialExporter {
                     }
                     else {
                         Tools.ToBlob(canvas, (blob) => {
+                            canvas = null;
                             if (blob) {
                                 let fileReader = new FileReader();
                                 fileReader.onload = (event: any) => {