Export JPGs in GLB (#2670)

* export uploaded jpgs as jpgs

* select uploaded texture

* updated  tests and moved logic to MV

* updated comment

* added test

* added event type

Author: elalish

packages/model-viewer/src/features/scene-graph.ts

@@ -14,7 +14,7 @@
  */
 
 import {property} from 'lit-element';
-import {Euler, MeshStandardMaterial, RepeatWrapping, sRGBEncoding, Texture, TextureLoader} from 'three';
+import {Euler, MeshStandardMaterial, RepeatWrapping, RGBFormat, sRGBEncoding, Texture, TextureLoader} from 'three';
 import {GLTFExporter, GLTFExporterOptions} from 'three/examples/jsm/exporters/GLTFExporter';
 
 import ModelViewerElementBase, {$needsRender, $onModelLoad, $renderer, $scene} from '../model-viewer-base.js';
@@ -53,7 +53,7 @@ export interface SceneGraphInterface {
   scale: string;
   readonly originalGltfJson: GLTF|null;
   exportScene(options?: SceneExportOptions): Promise<Blob>;
-  createTexture(uri: string): Promise<ModelViewerTexture|null>;
+  createTexture(uri: string, type?: string): Promise<ModelViewerTexture|null>;
 }
 
 /**
@@ -113,7 +113,8 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
       };
     }
 
-    async createTexture(uri: string): Promise<ModelViewerTexture|null> {
+    async createTexture(uri: string, type: string = 'image/png'):
+        Promise<ModelViewerTexture|null> {
       const currentGLTF = this[$currentGLTF];
       const texture: Texture = await new Promise<Texture>(
           (resolve) => this[$textureLoader].load(uri, resolve));
@@ -125,6 +126,14 @@ export const SceneGraphMixin = <T extends Constructor<ModelViewerElementBase>>(
       texture.wrapS = RepeatWrapping;
       texture.wrapT = RepeatWrapping;
       texture.flipY = false;
+      // This hack is because GLTFExporter checks if format is RGB vs RGBA to
+      // decide if it should save as JPEG vs PNG. However, TextureLoader sets
+      // format based on if the url ends in .jpg, which does not work for an
+      // ObjectURL like we're passing here. So, to keep from inflating all JPEGs
+      // to PNGs, we allow the user of the API to specify the type.
+      if (type === 'image/jpeg') {
+        texture.format = RGBFormat;
+      }
 
       return new ModelViewerTexture(this[$getOnUpdateMethod](), texture);
     }

packages/model-viewer/src/test/features/scene-graph-spec.ts

@@ -25,7 +25,8 @@ const expect = chai.expect;
 
 const ASTRONAUT_GLB_PATH = assetPath('models/Astronaut.glb');
 const HORSE_GLB_PATH = assetPath('models/Horse.glb');
-const CUBES_GLB_PATH = assetPath('models/cubes.gltf');
+const CUBES_GLB_PATH = assetPath('models/cubes.gltf');  // has variants
+const CUBE_GLB_PATH = assetPath('models/cube.gltf');    // has UV coords
 const SUNRISE_IMG_PATH = assetPath('environments/spruit_sunrise_1k_LDR.jpg');
 
 suite('ModelViewerElementBase with SceneGraphMixin', () => {
@@ -101,6 +102,30 @@ suite('ModelViewerElementBase with SceneGraphMixin', () => {
         expect(glTFroot.children[1].userData.variantMaterials.size).to.be.eq(3);
       });
     });
+
+    test(
+        'When loading a new JPEG texture from an ObjectURL, the GLB does not export PNG',
+        async () => {
+          element.src = CUBE_GLB_PATH;
+          await waitForEvent(element, 'load');
+          await rafPasses();
+
+          const url = assetPath(
+              'models/glTF-Sample-Models/2.0/DamagedHelmet/glTF/Default_albedo.jpg');
+          const blob = await fetch(url).then(r => r.blob());
+          const objectUrl = URL.createObjectURL(blob);
+          const texture = await element.createTexture(objectUrl, 'image/jpeg');
+
+          element.model!.materials[0]
+              .pbrMetallicRoughness.baseColorTexture.setTexture(texture);
+
+          const exported = await element.exportScene({binary: true});
+          expect(exported).to.be.not.undefined;
+          // The JPEG is ~1 Mb and the equivalent PNG is about ~6 Mb, so this
+          // just checks we saved an image and it wasn't too big.
+          expect(exported.size).to.be.greaterThan(0.5e6);
+          expect(exported.size).to.be.lessThan(1.5e6);
+        });
   });
 
   suite('with a loaded scene graph', () => {

packages/space-opera/src/components/materials_panel/materials_panel.ts

@@ -43,7 +43,7 @@ import {CheckboxElement} from '../shared/checkbox/checkbox.js';
 import {ColorPicker} from '../shared/color_picker/color_picker.js';
 import {Dropdown} from '../shared/dropdown/dropdown.js';
 import {SliderWithInputElement} from '../shared/slider_with_input/slider_with_input.js';
-import {TexturePicker} from '../shared/texture_picker/texture_picker.js';
+import {FileDetails, TexturePicker} from '../shared/texture_picker/texture_picker.js';
 import {ALPHA_BLEND_MODES} from '../utils/gltf_constants.js';
 import {checkFinite} from '../utils/reducer_utils.js';
 
@@ -393,15 +393,19 @@ export class MaterialPanel extends ConnectedLitElement {
     }
   }
 
-  async onTextureUpload(uri: string, textureInfo: TextureInfo) {
-    if (this.thumbnailsById.has(uri)) {
+  async onTextureUpload(
+      detail: FileDetails, texturePicker: TexturePicker,
+      textureInfo: TextureInfo) {
+    const {url, type} = detail;
+    if (this.thumbnailsById.has(url)) {
       console.log('URL collision! Texture not updated.');
       return;
     }
-    const texture = await getModelViewer()?.createTexture(uri);
+    const texture = await getModelViewer()?.createTexture(url, type);
     if (texture == null) {
       return;
     }
+
     textureInfo.setTexture(texture);
     const id = await pushThumbnail(this.thumbnailsById, textureInfo);
     // Trigger async panel update / render
@@ -411,6 +415,7 @@ export class MaterialPanel extends ConnectedLitElement {
       // Trigger async texture_picker update / render
       this.thumbnailUrls = [...this.thumbnailUrls];
       this.thumbnailUrls.push(this.thumbnailsById.get(id)!.objectUrl);
+      texturePicker.selectedIndex = this.thumbnailIds.indexOf(id);
     }
     reduxStore.dispatch(dispatchModelDirty());
     this.dispatchEvent(new CustomEvent('texture-upload-complete'));
@@ -422,9 +427,11 @@ export class MaterialPanel extends ConnectedLitElement {
         this.getMaterial().pbrMetallicRoughness.baseColorTexture);
   }
 
-  onBaseColorTextureUpload(event: CustomEvent) {
+  onBaseColorTextureUpload(event: CustomEvent<FileDetails>) {
     this.onTextureUpload(
-        event.detail, this.getMaterial().pbrMetallicRoughness.baseColorTexture);
+        event.detail,
+        this.baseColorTexturePicker,
+        this.getMaterial().pbrMetallicRoughness.baseColorTexture);
   }
 
   onMetallicRoughnessTextureChange() {
@@ -433,9 +440,10 @@ export class MaterialPanel extends ConnectedLitElement {
         this.getMaterial().pbrMetallicRoughness.metallicRoughnessTexture);
   }
 
-  onMetallicRoughnessTextureUpload(event: CustomEvent) {
+  onMetallicRoughnessTextureUpload(event: CustomEvent<FileDetails>) {
     this.onTextureUpload(
         event.detail,
+        this.metallicRoughnessTexturePicker,
         this.getMaterial().pbrMetallicRoughness.metallicRoughnessTexture);
   }
 
@@ -444,17 +452,23 @@ export class MaterialPanel extends ConnectedLitElement {
         this.selectedNormalTextureId, this.getMaterial().normalTexture);
   }
 
-  onNormalTextureUpload(event: CustomEvent) {
-    this.onTextureUpload(event.detail, this.getMaterial().normalTexture);
+  onNormalTextureUpload(event: CustomEvent<FileDetails>) {
+    this.onTextureUpload(
+        event.detail,
+        this.normalTexturePicker,
+        this.getMaterial().normalTexture);
   }
 
   onEmissiveTextureChange() {
     this.onTextureChange(
         this.selectedEmissiveTextureId, this.getMaterial().emissiveTexture);
   }
 
-  onEmissiveTextureUpload(event: CustomEvent) {
-    this.onTextureUpload(event.detail, this.getMaterial().emissiveTexture);
+  onEmissiveTextureUpload(event: CustomEvent<FileDetails>) {
+    this.onTextureUpload(
+        event.detail,
+        this.emissiveTexturePicker,
+        this.getMaterial().emissiveTexture);
   }
 
   onEmissiveFactorChanged() {
@@ -467,8 +481,11 @@ export class MaterialPanel extends ConnectedLitElement {
         this.selectedOcclusionTextureId, this.getMaterial().occlusionTexture);
   }
 
-  onOcclusionTextureUpload(event: CustomEvent) {
-    this.onTextureUpload(event.detail, this.getMaterial().occlusionTexture);
+  onOcclusionTextureUpload(event: CustomEvent<FileDetails>) {
+    this.onTextureUpload(
+        event.detail,
+        this.occlusionTexturePicker,
+        this.getMaterial().occlusionTexture);
   }
 
   onAlphaModeSelect() {

packages/space-opera/src/components/shared/texture_picker/texture_picker.ts

@@ -30,6 +30,11 @@ import {styles} from './texture_picker.css.js';
 
 const ACCEPT_IMAGE_TYPE = IMAGE_MIME_TYPES.join(',');
 
+export interface FileDetails {
+  url: string;
+  type: string;
+}
+
 /**
  * LitElement for a texture picker which allows user to select one of the
  * texture images presented
@@ -130,7 +135,8 @@ export class TexturePicker extends LitElement {
     }
 
     const url = createSafeObjectURL(files[0]).unsafeUrl;
-    this.dispatchEvent(new CustomEvent('texture-uploaded', {detail: url}));
+    this.dispatchEvent(new CustomEvent<FileDetails>(
+        'texture-uploaded', {detail: {url, type: files[0].type}}));
   }
 }
 

packages/space-opera/src/test/materials_panel/materials_panel_test.ts

@@ -36,8 +36,8 @@ async function checkUpload(
 
   expect(imageList.children.length).toEqual(listLength + 1);
 
-  texturePicker.dispatchEvent(
-      new CustomEvent('texture-uploaded', {detail: TEXTURE_PATH}));
+  texturePicker.dispatchEvent(new CustomEvent(
+      'texture-uploaded', {detail: {url: TEXTURE_PATH, type: 'image/png'}}));
   await waitForEvent(panel, 'texture-upload-complete');
   await panel.updateComplete;
 

packages/space-opera/src/test/shared/texture_picker/texture_picker_test.ts

@@ -21,7 +21,7 @@ import '../../../components/shared/texture_picker/texture_picker.js';
 import {IconButton} from '@material/mwc-icon-button';
 
 import {FileModalElement} from '../../../components/file_modal/file_modal.js';
-import {TexturePicker} from '../../../components/shared/texture_picker/texture_picker.js';
+import {FileDetails, TexturePicker} from '../../../components/shared/texture_picker/texture_picker.js';
 import {createSafeObjectURL} from '../../../components/utils/create_object_url.js';
 import {generatePngBlob} from '../../utils/test_utils.js';
 
@@ -81,7 +81,9 @@ describe('texture picker test', () => {
     expect(eventListenerSpy).toHaveBeenCalledTimes(1);
     const eventListenerArguments = eventListenerSpy.calls.first().args;
     expect(eventListenerArguments.length).toBe(1);
-    expect(eventListenerArguments[0].detail).toBeInstanceOf(String);
+    const {url, type} = eventListenerArguments[0].detail as FileDetails;
+    expect(url).toBeInstanceOf(String);
+    expect(type).toEqual('image/jpeg');
   });
 
   it('dispatches an event with undefined selectedIndex on null texture click',