molstar 2.3.9 → 3.0.0-dev.2

package/lib/commonjs/extensions/geo-export/glb-exporter.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GlbExporter = void 0;
@@ -24,14 +25,20 @@ var UNSIGNED_INT = 5125;
 var FLOAT = 5126;
 var ARRAY_BUFFER = 34962;
 var ELEMENT_ARRAY_BUFFER = 34963;
+var GLTF_MAGIC_BYTE = 0x46546C67;
+var JSON_CHUNK_TYPE = 0x4E4F534A;
+var BIN_CHUNK_TYPE = 0x004E4942;
+var JSON_PAD_CHAR = 0x20;
+var BIN_PAD_CHAR = 0x00;
 var GlbExporter = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(GlbExporter, _super);
-    function GlbExporter(style, boundingBox) {
+    function GlbExporter(boundingBox) {
         var _this = _super.call(this) || this;
-        _this.style = style;
         _this.fileExtension = 'glb';
         _this.nodes = [];
         _this.meshes = [];
+        _this.materials = [];
+        _this.materialMap = new Map();
         _this.accessors = [];
         _this.bufferViews = [];
         _this.binaryBuffer = [];
@@ -113,20 +120,14 @@ var GlbExporter = /** @class */ (function (_super) {
             indexAccessorIndex: isGeoTexture ? undefined : this.addBuffer(indexBuffer, UNSIGNED_INT, 'SCALAR', drawCount, ELEMENT_ARRAY_BUFFER)
         };
     };
-    GlbExporter.prototype.addColorBuffer = function (values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors) {
-        var groupCount = values.uGroupCount.ref.value;
+    GlbExporter.prototype.addColorBuffer = function (geoData, interpolatedColors, interpolatedOverpaint, interpolatedTransparency) {
+        var values = geoData.values, vertexCount = geoData.vertexCount;
         var uAlpha = values.uAlpha.ref.value;
-        var dTransparency = values.dTransparency.ref.value;
-        var tTransparency = values.tTransparency.ref.value;
         var colorArray = new Uint8Array(vertexCount * 4);
         for (var i = 0; i < vertexCount; ++i) {
-            var color = GlbExporter.getColor(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors, i);
-            var alpha = uAlpha;
-            if (dTransparency) {
-                var group = isGeoTexture ? GlbExporter.getGroup(groups, i) : groups[i];
-                var transparency = tTransparency.array[instanceIndex * groupCount + group] / 255;
-                alpha *= 1 - transparency;
-            }
+            var color = GlbExporter.getColor(i, geoData, interpolatedColors, interpolatedOverpaint);
+            var transparency = GlbExporter.getTransparency(i, geoData, interpolatedTransparency);
+            var alpha = uAlpha * (1 - transparency);
             color = color_1.Color.sRGBToLinear(color);
             color_1.Color.toArray(color, colorArray, i * 4);
             colorArray[i * 4 + 3] = Math.round(alpha * 255);
@@ -137,21 +138,48 @@ var GlbExporter = /** @class */ (function (_super) {
         }
         return this.addBuffer(colorBuffer, UNSIGNED_BYTE, 'VEC4', vertexCount, ARRAY_BUFFER, undefined, undefined, true);
     };
+    GlbExporter.prototype.addMaterial = function (metalness, roughness) {
+        var hash = "".concat(metalness, "|").concat(roughness);
+        if (!this.materialMap.has(hash)) {
+            this.materialMap.set(hash, this.materials.length);
+            this.materials.push({
+                pbrMetallicRoughness: {
+                    baseColorFactor: [1, 1, 1, 1],
+                    metallicFactor: metalness,
+                    roughnessFactor: roughness
+                }
+            });
+        }
+        return this.materialMap.get(hash);
+    };
     GlbExporter.prototype.addMeshWithColors = function (input) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var mesh, values, isGeoTexture, webgl, ctx, t, colorType, dTransparency, aTransform, instanceCount, interpolatedColors, stride, sameGeometryBuffers, sameColorBuffer, vertexAccessorIndex, normalAccessorIndex, indexAccessorIndex, colorAccessorIndex, meshIndex, instanceIndex, _a, vertices, normals, indices, groups, vertexCount, drawCount, accessorIndices, node;
+            var mesh, values, isGeoTexture, webgl, ctx, t, colorType, overpaintType, transparencyType, dTransparency, aTransform, instanceCount, metalness, roughness, material, interpolatedColors, stride, interpolatedOverpaint, stride, interpolatedTransparency, stride, sameGeometryBuffers, sameColorBuffer, vertexAccessorIndex, normalAccessorIndex, indexAccessorIndex, colorAccessorIndex, meshIndex, instanceIndex, _a, vertices, normals, indices, groups, vertexCount, drawCount, accessorIndices, node;
             return (0, tslib_1.__generator)(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         mesh = input.mesh, values = input.values, isGeoTexture = input.isGeoTexture, webgl = input.webgl, ctx = input.ctx;
                         t = (0, linear_algebra_1.Mat4)();
                         colorType = values.dColorType.ref.value;
+                        overpaintType = values.dOverpaintType.ref.value;
+                        transparencyType = values.dTransparencyType.ref.value;
                         dTransparency = values.dTransparency.ref.value;
                         aTransform = values.aTransform.ref.value;
                         instanceCount = values.uInstanceCount.ref.value;
+                        metalness = values.uMetalness.ref.value;
+                        roughness = values.uRoughness.ref.value;
+                        material = this.addMaterial(metalness, roughness);
                         if (colorType === 'volume' || colorType === 'volumeInstance') {
                             stride = isGeoTexture ? 4 : 3;
-                            interpolatedColors = GlbExporter.getInterpolatedColors(mesh.vertices, mesh.vertexCount, values, stride, colorType, webgl);
+                            interpolatedColors = GlbExporter.getInterpolatedColors(webgl, { vertices: mesh.vertices, vertexCount: mesh.vertexCount, values: values, stride: stride, colorType: colorType });
+                        }
+                        if (overpaintType === 'volumeInstance') {
+                            stride = isGeoTexture ? 4 : 3;
+                            interpolatedOverpaint = GlbExporter.getInterpolatedOverpaint(webgl, { vertices: mesh.vertices, vertexCount: mesh.vertexCount, values: values, stride: stride, colorType: overpaintType });
+                        }
+                        if (transparencyType === 'volumeInstance') {
+                            stride = isGeoTexture ? 4 : 3;
+                            interpolatedTransparency = GlbExporter.getInterpolatedTransparency(webgl, { vertices: mesh.vertices, vertexCount: mesh.vertexCount, values: values, stride: stride, colorType: transparencyType });
                         }
                         sameGeometryBuffers = mesh !== undefined;
                         sameColorBuffer = sameGeometryBuffers && colorType !== 'instance' && !colorType.endsWith('Instance') && !dTransparency;
@@ -180,7 +208,7 @@ var GlbExporter = /** @class */ (function (_super) {
                             }
                             // create a color buffer if needed
                             if (instanceIndex === 0 || !sameColorBuffer) {
-                                colorAccessorIndex = this.addColorBuffer(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors);
+                                colorAccessorIndex = this.addColorBuffer({ values: values, groups: groups, vertexCount: vertexCount, instanceIndex: instanceIndex, isGeoTexture: isGeoTexture }, interpolatedColors, interpolatedOverpaint, interpolatedTransparency);
                             }
                             // glTF mesh
                             meshIndex = this.meshes.length;
@@ -192,7 +220,7 @@ var GlbExporter = /** @class */ (function (_super) {
                                             COLOR_0: colorAccessorIndex
                                         },
                                         indices: indexAccessorIndex,
-                                        material: 0
+                                        material: material
                                     }]
                             });
                         }
@@ -233,13 +261,7 @@ var GlbExporter = /** @class */ (function (_super) {
                         }],
                     bufferViews: this.bufferViews,
                     accessors: this.accessors,
-                    materials: [{
-                            pbrMetallicRoughness: {
-                                baseColorFactor: [1, 1, 1, 1],
-                                metallicFactor: this.style.metalness,
-                                roughnessFactor: this.style.roughness
-                            }
-                        }]
+                    materials: this.materials
                 };
                 createChunk = function (chunkType, data, byteLength, padChar) {
                     var padding = null;
@@ -262,12 +284,12 @@ var GlbExporter = /** @class */ (function (_super) {
                 jsonString = JSON.stringify(gltf);
                 jsonBuffer = new Uint8Array(jsonString.length);
                 (0, ascii_1.asciiWrite)(jsonBuffer, jsonString);
-                _a = createChunk(0x4E4F534A, [jsonBuffer.buffer], jsonBuffer.length, 0x20), jsonChunk = _a[0], jsonChunkLength = _a[1];
-                _b = createChunk(0x004E4942, this.binaryBuffer, binaryBufferLength, 0x00), binaryChunk = _b[0], binaryChunkLength = _b[1];
+                _a = createChunk(JSON_CHUNK_TYPE, [jsonBuffer.buffer], jsonBuffer.length, JSON_PAD_CHAR), jsonChunk = _a[0], jsonChunkLength = _a[1];
+                _b = createChunk(BIN_CHUNK_TYPE, this.binaryBuffer, binaryBufferLength, BIN_PAD_CHAR), binaryChunk = _b[0], binaryChunkLength = _b[1];
                 glbBufferLength = 12 + jsonChunkLength + binaryChunkLength;
                 header = new ArrayBuffer(12);
                 headerDataView = new DataView(header);
-                headerDataView.setUint32(0, 0x46546C67, true); // magic number "glTF"
+                headerDataView.setUint32(0, GLTF_MAGIC_BYTE, true); // magic number "glTF"
                 headerDataView.setUint32(4, 2, true); // version
                 headerDataView.setUint32(8, glbBufferLength, true); // length
                 glbBuffer = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([header], jsonChunk, true), binaryChunk, true);

package/lib/commonjs/extensions/geo-export/mesh-exporter.d.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 import { GraphicsRenderObject } from '../../mol-gl/render-object';
 import { BaseValues } from '../../mol-gl/renderable/schema';
@@ -25,12 +26,39 @@ export interface AddMeshInput {
     webgl: WebGLContext | undefined;
     ctx: RuntimeContext;
 }
+export declare type MeshGeoData = {
+    values: BaseValues;
+    groups: Float32Array | Uint8Array;
+    vertexCount: number;
+    instanceIndex: number;
+    isGeoTexture: boolean;
+};
 export declare abstract class MeshExporter<D extends RenderObjectExportData> implements RenderObjectExporter<D> {
     abstract readonly fileExtension: string;
     private static getSizeFromTexture;
     private static getSize;
     protected static getGroup(groups: Float32Array | Uint8Array, i: number): number;
-    protected static getInterpolatedColors(vertices: Float32Array, vertexCount: number, values: BaseValues, stride: number, colorType: 'volume' | 'volumeInstance', webgl: WebGLContext): Uint8Array;
+    protected static getInterpolatedColors(webgl: WebGLContext, input: {
+        vertices: Float32Array;
+        vertexCount: number;
+        values: BaseValues;
+        stride: 3 | 4;
+        colorType: 'volume' | 'volumeInstance';
+    }): Uint8Array;
+    protected static getInterpolatedOverpaint(webgl: WebGLContext, input: {
+        vertices: Float32Array;
+        vertexCount: number;
+        values: BaseValues;
+        stride: 3 | 4;
+        colorType: 'volumeInstance';
+    }): Uint8Array;
+    protected static getInterpolatedTransparency(webgl: WebGLContext, input: {
+        vertices: Float32Array;
+        vertexCount: number;
+        values: BaseValues;
+        stride: 3 | 4;
+        colorType: 'volumeInstance';
+    }): Uint8Array;
     protected static quantizeColors(colorArray: Uint8Array, vertexCount: number): void;
     protected static getInstance(input: AddMeshInput, instanceIndex: number): {
         vertices: Float32Array;
@@ -40,7 +68,8 @@ export declare abstract class MeshExporter<D extends RenderObjectExportData> imp
         vertexCount: number;
         drawCount: number;
     };
-    protected static getColor(values: BaseValues, groups: Float32Array | Uint8Array, vertexCount: number, instanceIndex: number, isGeoTexture: boolean, interpolatedColors: Uint8Array | undefined, vertexIndex: number): Color;
+    protected static getColor(vertexIndex: number, geoData: MeshGeoData, interpolatedColors?: Uint8Array, interpolatedOverpaint?: Uint8Array): Color;
+    protected static getTransparency(vertexIndex: number, geoData: MeshGeoData, interpolatedTransparency?: Uint8Array): number;
     protected abstract addMeshWithColors(input: AddMeshInput): void;
     private addMesh;
     private addLines;

package/lib/commonjs/extensions/geo-export/mesh-exporter.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MeshExporter = void 0;
@@ -17,6 +18,7 @@ var size_data_1 = require("../../mol-geo/geometry/size-data");
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
 var color_1 = require("../../mol-util/color/color");
 var float_packing_1 = require("../../mol-util/float-packing");
+var util_2 = require("../../mol-gl/compute/util");
 var GeoExportName = 'geo-export';
 // avoiding namespace lookup improved performance in Chrome (Aug 2020)
 var v3fromArray = linear_algebra_1.Vec3.fromArray;
@@ -59,22 +61,37 @@ var MeshExporter = /** @class */ (function () {
         }
         return (0, float_packing_1.decodeFloatRGB)(r, g, b);
     };
-    MeshExporter.getInterpolatedColors = function (vertices, vertexCount, values, stride, colorType, webgl) {
+    MeshExporter.getInterpolatedColors = function (webgl, input) {
+        var values = input.values, vertexCount = input.vertexCount, vertices = input.vertices, colorType = input.colorType, stride = input.stride;
         var colorGridTransform = values.uColorGridTransform.ref.value;
         var colorGridDim = values.uColorGridDim.ref.value;
         var colorTexDim = values.uColorTexDim.ref.value;
         var aTransform = values.aTransform.ref.value;
         var instanceCount = values.uInstanceCount.ref.value;
-        if (!webgl.namedFramebuffers[GeoExportName]) {
-            webgl.namedFramebuffers[GeoExportName] = webgl.resources.framebuffer();
-        }
-        var framebuffer = webgl.namedFramebuffers[GeoExportName];
-        var width = colorTexDim[0], height = colorTexDim[1];
-        var colorGrid = new Uint8Array(width * height * 4);
-        framebuffer.bind();
-        values.tColorGrid.ref.value.attachFramebuffer(framebuffer, 0);
-        webgl.readPixels(0, 0, width, height, colorGrid);
-        var interpolated = (0, color_smoothing_1.getTrilinearlyInterpolated)({ vertexCount: vertexCount, instanceCount: instanceCount, transformBuffer: aTransform, positionBuffer: vertices, colorType: colorType, grid: colorGrid, gridDim: colorGridDim, gridTexDim: colorTexDim, gridTransform: colorGridTransform, vertexStride: stride, colorStride: 4 });
+        var colorGrid = (0, util_2.readTexture)(webgl, values.tColorGrid.ref.value).array;
+        var interpolated = (0, color_smoothing_1.getTrilinearlyInterpolated)({ vertexCount: vertexCount, instanceCount: instanceCount, transformBuffer: aTransform, positionBuffer: vertices, colorType: colorType, grid: colorGrid, gridDim: colorGridDim, gridTexDim: colorTexDim, gridTransform: colorGridTransform, vertexStride: stride, colorStride: 4, outputStride: 3 });
+        return interpolated.array;
+    };
+    MeshExporter.getInterpolatedOverpaint = function (webgl, input) {
+        var values = input.values, vertexCount = input.vertexCount, vertices = input.vertices, colorType = input.colorType, stride = input.stride;
+        var overpaintGridTransform = values.uOverpaintGridTransform.ref.value;
+        var overpaintGridDim = values.uOverpaintGridDim.ref.value;
+        var overpaintTexDim = values.uOverpaintTexDim.ref.value;
+        var aTransform = values.aTransform.ref.value;
+        var instanceCount = values.uInstanceCount.ref.value;
+        var overpaintGrid = (0, util_2.readTexture)(webgl, values.tOverpaintGrid.ref.value).array;
+        var interpolated = (0, color_smoothing_1.getTrilinearlyInterpolated)({ vertexCount: vertexCount, instanceCount: instanceCount, transformBuffer: aTransform, positionBuffer: vertices, colorType: colorType, grid: overpaintGrid, gridDim: overpaintGridDim, gridTexDim: overpaintTexDim, gridTransform: overpaintGridTransform, vertexStride: stride, colorStride: 4, outputStride: 4 });
+        return interpolated.array;
+    };
+    MeshExporter.getInterpolatedTransparency = function (webgl, input) {
+        var values = input.values, vertexCount = input.vertexCount, vertices = input.vertices, colorType = input.colorType, stride = input.stride;
+        var transparencyGridTransform = values.uTransparencyGridTransform.ref.value;
+        var transparencyGridDim = values.uTransparencyGridDim.ref.value;
+        var transparencyTexDim = values.uTransparencyTexDim.ref.value;
+        var aTransform = values.aTransform.ref.value;
+        var instanceCount = values.uInstanceCount.ref.value;
+        var transparencyGrid = (0, util_2.readAlphaTexture)(webgl, values.tTransparencyGrid.ref.value).array;
+        var interpolated = (0, color_smoothing_1.getTrilinearlyInterpolated)({ vertexCount: vertexCount, instanceCount: instanceCount, transformBuffer: aTransform, positionBuffer: vertices, colorType: colorType, grid: transparencyGrid, gridDim: transparencyGridDim, gridTexDim: transparencyTexDim, gridTransform: transparencyGridTransform, vertexStride: stride, colorStride: 4, outputStride: 1, itemOffset: 3 });
         return interpolated.array;
     };
     MeshExporter.quantizeColors = function (colorArray, vertexCount) {
@@ -156,11 +173,13 @@ var MeshExporter = /** @class */ (function () {
             };
         }
     };
-    MeshExporter.getColor = function (values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors, vertexIndex) {
+    MeshExporter.getColor = function (vertexIndex, geoData, interpolatedColors, interpolatedOverpaint) {
+        var values = geoData.values, instanceIndex = geoData.instanceIndex, isGeoTexture = geoData.isGeoTexture, groups = geoData.groups, vertexCount = geoData.vertexCount;
         var groupCount = values.uGroupCount.ref.value;
         var colorType = values.dColorType.ref.value;
         var uColor = values.uColor.ref.value;
         var tColor = values.tColor.ref.value.array;
+        var overpaintType = values.dOverpaintType.ref.value;
         var dOverpaint = values.dOverpaint.ref.value;
         var tOverpaint = values.tOverpaint.ref.value.array;
         var color;
@@ -196,13 +215,66 @@ var MeshExporter = /** @class */ (function () {
             default: throw new Error('Unsupported color type.');
         }
         if (dOverpaint) {
-            var group = isGeoTexture ? MeshExporter.getGroup(groups, vertexIndex) : groups[vertexIndex];
-            var overpaintColor = color_1.Color.fromArray(tOverpaint, (instanceIndex * groupCount + group) * 4);
-            var overpaintAlpha = tOverpaint[(instanceIndex * groupCount + group) * 4 + 3] / 255;
+            var overpaintColor = void 0;
+            var overpaintAlpha = void 0;
+            switch (overpaintType) {
+                case 'groupInstance': {
+                    var group = isGeoTexture ? MeshExporter.getGroup(groups, vertexIndex) : groups[vertexIndex];
+                    var idx = (instanceIndex * groupCount + group) * 4;
+                    overpaintColor = color_1.Color.fromArray(tOverpaint, idx);
+                    overpaintAlpha = tOverpaint[idx + 3] / 255;
+                    break;
+                }
+                case 'vertexInstance': {
+                    var idx = (instanceIndex * vertexCount + vertexIndex) * 4;
+                    overpaintColor = color_1.Color.fromArray(tOverpaint, idx);
+                    overpaintAlpha = tOverpaint[idx + 3] / 255;
+                    break;
+                }
+                case 'volumeInstance': {
+                    var idx = (instanceIndex * vertexCount + vertexIndex) * 4;
+                    overpaintColor = color_1.Color.fromArray(interpolatedOverpaint, idx);
+                    overpaintAlpha = interpolatedOverpaint[idx + 3] / 255;
+                    break;
+                }
+                default: throw new Error('Unsupported overpaint type.');
+            }
+            // interpolate twice to avoid darkening due to empty overpaint
+            overpaintColor = color_1.Color.interpolate(color, overpaintColor, overpaintAlpha);
             color = color_1.Color.interpolate(color, overpaintColor, overpaintAlpha);
         }
         return color;
     };
+    MeshExporter.getTransparency = function (vertexIndex, geoData, interpolatedTransparency) {
+        var values = geoData.values, instanceIndex = geoData.instanceIndex, isGeoTexture = geoData.isGeoTexture, groups = geoData.groups, vertexCount = geoData.vertexCount;
+        var groupCount = values.uGroupCount.ref.value;
+        var dTransparency = values.dTransparency.ref.value;
+        var tTransparency = values.tTransparency.ref.value.array;
+        var transparencyType = values.dTransparencyType.ref.value;
+        var transparency = 0;
+        if (dTransparency) {
+            switch (transparencyType) {
+                case 'groupInstance': {
+                    var group = isGeoTexture ? MeshExporter.getGroup(groups, vertexIndex) : groups[vertexIndex];
+                    var idx = (instanceIndex * groupCount + group);
+                    transparency = tTransparency[idx] / 255;
+                    break;
+                }
+                case 'vertexInstance': {
+                    var idx = (instanceIndex * vertexCount + vertexIndex);
+                    transparency = tTransparency[idx] / 255;
+                    break;
+                }
+                case 'volumeInstance': {
+                    var idx = (instanceIndex * vertexCount + vertexIndex);
+                    transparency = interpolatedTransparency[idx] / 255;
+                    break;
+                }
+                default: throw new Error('Unsupported transparency type.');
+            }
+        }
+        return transparency;
+    };
     MeshExporter.prototype.addMesh = function (values, webgl, ctx) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
             var aPosition, aNormal, aGroup, originalData, indices, vertexCount, drawCount;

package/lib/commonjs/extensions/geo-export/obj-exporter.d.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 import { Box3D } from '../../mol-math/geometry';
 import { RuntimeContext } from '../../mol-task';

package/lib/commonjs/extensions/geo-export/obj-exporter.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjExporter = void 0;
@@ -45,7 +46,7 @@ var ObjExporter = /** @class */ (function (_super) {
         mol_util_1.StringBuilder.newline(this.obj);
         if (!this.materialSet.has(material)) {
             this.materialSet.add(material);
-            var _a = color_1.Color.toRgbNormalized(color), r = _a[0], g = _a[1], b = _a[2];
+            var _a = color_1.Color.toRgbNormalized(color).map(function (v) { return Math.round(v * 1000) / 1000; }), r = _a[0], g = _a[1], b = _a[2];
             var mtl = this.mtl;
             mol_util_1.StringBuilder.writeSafe(mtl, "newmtl ".concat(material, "\n"));
             mol_util_1.StringBuilder.writeSafe(mtl, 'illum 2\n'); // illumination model
@@ -67,7 +68,7 @@ var ObjExporter = /** @class */ (function (_super) {
     };
     ObjExporter.prototype.addMeshWithColors = function (input) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var mesh, values, isGeoTexture, webgl, ctx, obj, t, n, tmpV, stride, groupCount, colorType, uAlpha, dTransparency, tTransparency, aTransform, instanceCount, interpolatedColors, instanceIndex, _a, vertices, normals, indices, groups, vertexCount, drawCount, i, i, i, v, color, alpha, group, transparency, v1, v2, v3;
+            var mesh, values, isGeoTexture, webgl, ctx, obj, t, n, tmpV, stride, colorType, overpaintType, transparencyType, uAlpha, aTransform, instanceCount, interpolatedColors, interpolatedOverpaint, interpolatedTransparency, stride_1, instanceIndex, _a, vertices, normals, indices, groups, vertexCount, drawCount, i, i, geoData, quantizedColors, i, v, color, i, color, transparency, alpha, v1, v2, v3;
             return (0, tslib_1.__generator)(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -77,16 +78,21 @@ var ObjExporter = /** @class */ (function (_super) {
                         n = (0, linear_algebra_1.Mat3)();
                         tmpV = (0, linear_algebra_1.Vec3)();
                         stride = isGeoTexture ? 4 : 3;
-                        groupCount = values.uGroupCount.ref.value;
                         colorType = values.dColorType.ref.value;
+                        overpaintType = values.dOverpaintType.ref.value;
+                        transparencyType = values.dTransparencyType.ref.value;
                         uAlpha = values.uAlpha.ref.value;
-                        dTransparency = values.dTransparency.ref.value;
-                        tTransparency = values.tTransparency.ref.value;
                         aTransform = values.aTransform.ref.value;
                         instanceCount = values.uInstanceCount.ref.value;
                         if (colorType === 'volume' || colorType === 'volumeInstance') {
-                            interpolatedColors = ObjExporter.getInterpolatedColors(mesh.vertices, mesh.vertexCount, values, stride, colorType, webgl);
-                            ObjExporter.quantizeColors(interpolatedColors, mesh.vertexCount);
+                            interpolatedColors = ObjExporter.getInterpolatedColors(webgl, { vertices: mesh.vertices, vertexCount: mesh.vertexCount, values: values, stride: stride, colorType: colorType });
+                        }
+                        if (overpaintType === 'volumeInstance') {
+                            interpolatedOverpaint = ObjExporter.getInterpolatedOverpaint(webgl, { vertices: mesh.vertices, vertexCount: mesh.vertexCount, values: values, stride: stride, colorType: overpaintType });
+                        }
+                        if (transparencyType === 'volumeInstance') {
+                            stride_1 = isGeoTexture ? 4 : 3;
+                            interpolatedTransparency = ObjExporter.getInterpolatedTransparency(webgl, { vertices: mesh.vertices, vertexCount: mesh.vertexCount, values: values, stride: stride_1, colorType: transparencyType });
                         }
                         return [4 /*yield*/, ctx.update({ isIndeterminate: false, current: 0, max: instanceCount })];
                     case 1:
@@ -127,16 +133,19 @@ var ObjExporter = /** @class */ (function (_super) {
                             mol_util_1.StringBuilder.writeFloat(obj, tmpV[2], 100);
                             mol_util_1.StringBuilder.newline(obj);
                         }
-                        // face
+                        geoData = { values: values, groups: groups, vertexCount: vertexCount, instanceIndex: instanceIndex, isGeoTexture: isGeoTexture };
+                        quantizedColors = new Uint8Array(drawCount * 3);
                         for (i = 0; i < drawCount; i += 3) {
                             v = isGeoTexture ? i : indices[i];
-                            color = ObjExporter.getColor(values, groups, vertexCount, instanceIndex, isGeoTexture, interpolatedColors, v);
-                            alpha = uAlpha;
-                            if (dTransparency) {
-                                group = isGeoTexture ? ObjExporter.getGroup(groups, i) : groups[indices[i]];
-                                transparency = tTransparency.array[instanceIndex * groupCount + group] / 255;
-                                alpha *= 1 - transparency;
-                            }
+                            color = ObjExporter.getColor(v, geoData, interpolatedColors, interpolatedOverpaint);
+                            color_1.Color.toArray(color, quantizedColors, i);
+                        }
+                        ObjExporter.quantizeColors(quantizedColors, mesh.vertexCount);
+                        // face
+                        for (i = 0; i < drawCount; i += 3) {
+                            color = color_1.Color.fromArray(quantizedColors, i);
+                            transparency = ObjExporter.getTransparency(i, geoData, interpolatedTransparency);
+                            alpha = Math.round(uAlpha * (1 - transparency) * 10) / 10;
                             this.updateMaterial(color, alpha);
                             v1 = this.vertexOffset + (isGeoTexture ? i : indices[i]) + 1;
                             v2 = this.vertexOffset + (isGeoTexture ? i + 1 : indices[i + 1]) + 1;

package/lib/commonjs/extensions/geo-export/ui.js

@@ -20,37 +20,38 @@ var GeometryExporterUI = /** @class */ (function (_super) {
     function GeometryExporterUI() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.save = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-            var data, _a;
-            return (0, tslib_1.__generator)(this, function (_b) {
-                switch (_b.label) {
+            var data, e_1;
+            return (0, tslib_1.__generator)(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        _b.trys.push([0, 2, , 3]);
+                        _a.trys.push([0, 2, 3, 4]);
                         this.setState({ busy: true });
                         return [4 /*yield*/, this.controls.exportGeometry()];
                     case 1:
-                        data = _b.sent();
-                        this.setState({ busy: false });
+                        data = _a.sent();
                         (0, download_1.download)(data.blob, data.filename);
-                        return [3 /*break*/, 3];
+                        return [3 /*break*/, 4];
                     case 2:
-                        _a = _b.sent();
+                        e_1 = _a.sent();
+                        console.error(e_1);
+                        return [3 /*break*/, 4];
+                    case 3:
                         this.setState({ busy: false });
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
                 }
             });
         }); };
         _this.viewInAR = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
-            var data, a_1, _a;
-            return (0, tslib_1.__generator)(this, function (_b) {
-                switch (_b.label) {
+            var data, a_1, e_2;
+            return (0, tslib_1.__generator)(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        _b.trys.push([0, 2, , 3]);
+                        _a.trys.push([0, 2, 3, 4]);
                         this.setState({ busy: true });
                         return [4 /*yield*/, this.controls.exportGeometry()];
                     case 1:
-                        data = _b.sent();
-                        this.setState({ busy: false });
+                        data = _a.sent();
                         a_1 = document.createElement('a');
                         a_1.rel = 'ar';
                         a_1.href = URL.createObjectURL(data.blob);
@@ -59,12 +60,15 @@ var GeometryExporterUI = /** @class */ (function (_super) {
                         a_1.appendChild(document.createElement('img'));
                         setTimeout(function () { return URL.revokeObjectURL(a_1.href); }, 4E4); // 40s
                         setTimeout(function () { return a_1.dispatchEvent(new MouseEvent('click')); });
-                        return [3 /*break*/, 3];
+                        return [3 /*break*/, 4];
                     case 2:
-                        _a = _b.sent();
+                        e_2 = _a.sent();
+                        console.error(e_2);
+                        return [3 /*break*/, 4];
+                    case 3:
                         this.setState({ busy: false });
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
                 }
             });
         }); };

package/lib/commonjs/extensions/geo-export/usdz-exporter.d.ts

@@ -2,8 +2,8 @@
  * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Sukolsak Sakshuwong <sukolsak@stanford.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-import { Style } from '../../mol-gl/renderer';
 import { Box3D } from '../../mol-math/geometry';
 import { RuntimeContext } from '../../mol-task';
 import { MeshExporter, AddMeshInput } from './mesh-exporter';
@@ -11,18 +11,16 @@ export declare type UsdzData = {
     usdz: ArrayBuffer;
 };
 export declare class UsdzExporter extends MeshExporter<UsdzData> {
-    private style;
     readonly fileExtension = "usdz";
     private meshes;
     private materials;
-    private materialSet;
+    private materialMap;
     private centerTransform;
-    private static getMaterialKey;
     private addMaterial;
     protected addMeshWithColors(input: AddMeshInput): Promise<void>;
     getData(ctx: RuntimeContext): Promise<{
         usdz: ArrayBufferLike;
     }>;
     getBlob(ctx: RuntimeContext): Promise<Blob>;
-    constructor(style: Style, boundingBox: Box3D, radius: number);
+    constructor(boundingBox: Box3D, radius: number);
 }