diff --git a/packages/dev/serializers/src/glTF/2.0/glTFExporter.ts b/packages/dev/serializers/src/glTF/2.0/glTFExporter.ts index c704b198b910..82a45cabe062 100644 --- a/packages/dev/serializers/src/glTF/2.0/glTFExporter.ts +++ b/packages/dev/serializers/src/glTF/2.0/glTFExporter.ts @@ -191,6 +191,7 @@ export class _Exporter { private static _ExtensionNames = new Array(); private static _ExtensionFactories: { [name: string]: (exporter: _Exporter) => IGLTFExporterExtensionV2 } = {}; + private _exportMimeType: ImageMimeType; private _applyExtension( node: Nullable, @@ -358,6 +359,7 @@ export class _Exporter { this._orderedImageData = []; this._options = options || {}; this._animationSampleRate = options && options.animationSampleRate ? options.animationSampleRate : 1 / 60; + this._exportMimeType = options && options.mimetype ? options.mimetype : ImageMimeType.PNG; this._includeCoordinateSystemConversionNodes = options && options.includeCoordinateSystemConversionNodes ? true : false; this._glTFMaterialExporter = new _GLTFMaterialExporter(this); @@ -1973,7 +1975,7 @@ export class _Exporter { }); const [exportNodes, exportMaterials] = this._getExportNodes(nodes); - return this._glTFMaterialExporter._convertMaterialsToGLTFAsync(exportMaterials, ImageMimeType.PNG, true).then(() => { + return this._glTFMaterialExporter._convertMaterialsToGLTFAsync(exportMaterials, this._exportMimeType, true).then(() => { return this._createNodeMapAndAnimationsAsync(babylonScene, exportNodes, binaryWriter).then((nodeMap) => { return this._createSkinsAsync(babylonScene, nodeMap, binaryWriter).then((skinMap) => { this._nodeMap = nodeMap; diff --git a/packages/dev/serializers/src/glTF/2.0/glTFMaterialExporter.ts b/packages/dev/serializers/src/glTF/2.0/glTFMaterialExporter.ts index fcfb15c4f720..0120730d7fb5 100644 --- a/packages/dev/serializers/src/glTF/2.0/glTFMaterialExporter.ts +++ b/packages/dev/serializers/src/glTF/2.0/glTFMaterialExporter.ts @@ -1209,7 +1209,7 @@ export class _GLTFMaterialExporter { } imageData[textureName] = imageValues; - if (mimeType === ImageMimeType.JPEG || mimeType === ImageMimeType.PNG) { + if (mimeType === ImageMimeType.JPEG || mimeType === ImageMimeType.PNG || mimeType === ImageMimeType.WEBP) { const glTFImage: IImage = { name: baseTextureName, uri: textureName, diff --git a/packages/dev/serializers/src/glTF/2.0/glTFSerializer.ts b/packages/dev/serializers/src/glTF/2.0/glTFSerializer.ts index 839dd9aa736e..5189f4749390 100644 --- a/packages/dev/serializers/src/glTF/2.0/glTFSerializer.ts +++ b/packages/dev/serializers/src/glTF/2.0/glTFSerializer.ts @@ -1,3 +1,4 @@ +import type { ImageMimeType } from "babylonjs-gltf2interface"; import type { Node } from "core/node"; import type { Scene } from "core/scene"; import type { GLTFData } from "./glTFData"; @@ -40,6 +41,11 @@ export interface IExportOptions { * Indicates if coordinate system swapping root nodes should be included in export */ includeCoordinateSystemConversionNodes?: boolean; + + /** + * Indicates the desired export mimetype. Default is png. + */ + mimetype?: ImageMimeType; } /** diff --git a/packages/public/glTF2Interface/babylon.glTF2Interface.d.ts b/packages/public/glTF2Interface/babylon.glTF2Interface.d.ts index d00a1305a796..180032ea13f8 100644 --- a/packages/public/glTF2Interface/babylon.glTF2Interface.d.ts +++ b/packages/public/glTF2Interface/babylon.glTF2Interface.d.ts @@ -144,6 +144,10 @@ declare module BABYLON.GLTF2 { * PNG Mime-type */ PNG = "image/png", + /** + * WEBP Mime-type + */ + WEBP = "image/webp", } /**