Merge pull request #197 from sukolsak/gltf-material

Geometry export: add material to GLB

src/extensions/geo-export/controls.ts

@@ -4,6 +4,7 @@
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
  */
 
+import { getStyle } from '../../mol-gl/renderer';
 import { PluginComponent } from '../../mol-plugin-state/component';
 import { PluginContext } from '../../mol-plugin/context';
 import { Task } from '../../mol-task';
@@ -48,7 +49,8 @@ export class GeometryControls extends PluginComponent {
                         renderObjectExporter = new ObjExporter(filename);
                         break;
                     case 'glb':
-                        renderObjectExporter = new GlbExporter();
+                        const style = getStyle(this.plugin.canvas3d?.props.renderer.style!);
+                        renderObjectExporter = new GlbExporter(style);
                         break;
                     case 'stl':
                         renderObjectExporter = new StlExporter();

src/extensions/geo-export/glb-exporter.ts

@@ -5,6 +5,7 @@
  */
 
 import { BaseValues } from '../../mol-gl/renderable/schema';
+import { Style } from '../../mol-gl/renderer';
 import { asciiWrite } from '../../mol-io/common/ascii';
 import { IsNativeEndianLittle, flipByteOrder } from '../../mol-io/common/binary';
 import { Vec3, Mat4 } from '../../mol-math/linear-algebra';
@@ -278,7 +279,13 @@ export class GlbExporter extends MeshExporter<GlbData> {
             }],
             bufferViews: this.bufferViews,
             accessors: this.accessors,
-            materials: [{}]
+            materials: [{
+                pbrMetallicRoughness: {
+                    baseColorFactor: [1, 1, 1, 1],
+                    metallicFactor: this.style.metalness,
+                    roughnessFactor: this.style.roughness
+                }
+            }]
         };
 
         const createChunk = (chunkType: number, data: ArrayBuffer[], byteLength: number, padChar: number): [ArrayBuffer[], number] => {
@@ -326,4 +333,8 @@ export class GlbExporter extends MeshExporter<GlbData> {
     async getBlob(ctx: RuntimeContext) {
         return new Blob([this.getData().glb], { type: 'model/gltf-binary' });
     }
+
+    constructor(private style: Style) {
+        super();
+    }
 }

src/mol-gl/renderer.ts

@@ -110,10 +110,18 @@ export const RendererParams = {
 };
 export type RendererProps = PD.Values<typeof RendererParams>
 
-function getStyle(props: RendererProps['style']) {
+export type Style = {
+    lightIntensity: number
+    ambientIntensity: number
+    metalness: number
+    roughness: number
+    reflectivity: number
+}
+
+export function getStyle(props: RendererProps['style']): Style {
     switch (props.name) {
         case 'custom':
-            return props.params;
+            return props.params as Style;
         case 'flat':
             return {
                 lightIntensity: 0, ambientIntensity: 1,