Issue #877: perspective camera mode

src/TmImageRenderer/index.ts

@@ -18,13 +18,16 @@ import jpegjs from 'jpeg-js';
 
 import { HeadlessPluginContext } from '../mol-plugin/headless-plugin-context';
 import { DefaultPluginSpec } from '../mol-plugin/spec';
-import { ExternalModules, STYLIZED_POSTPROCESSING } from '../mol-plugin/util/headless-screenshot';
+import { ExternalModules, defaultCanvas3DParams } from '../mol-plugin/util/headless-screenshot';
 import { setFSModule } from '../mol-util/data-source';
 import { MembraneOrientationPreset, loadWithUNITMPMembraneRepresentation } from '../tmdet-extension/behavior';
 import { TmDetColorThemeProvider } from '../tmdet-extension/tmdet-color-theme';
 import { TmDetLabelProvider } from '../tmdet-extension/labeling';
 
 
+const IMAGE_WIDTH = 800;
+const IMAGE_HEIGHT = 800;
+
 setFSModule(fs);
 
 interface Args {
@@ -42,14 +45,24 @@ function parseArguments(): Args {
 
 async function main() {
     const args = parseArguments();
-    const url = `https://pdbtm.unitmp.org/api/v1/entry/${args.pdbId}.updated.cif`;
+    const structureUrl = `https://pdbtm.unitmp.org/api/v1/entry/${args.pdbId}.updated.cif`;
+    const regionDescriptorUrl = `https://pdbtm.unitmp.org/api/v1/entry/${args.pdbId}.json`;
+    const fileName = `${args.pdbId}.jpg`;
     console.log('PDB ID:', args.pdbId);
-    console.log('Source URL:', url);
+    console.log('Structure URL:', structureUrl);
+    console.log('Region descriptor URL:', regionDescriptorUrl);
     console.log('Outputs:', args.outDirectory);
 
     // Create a headless plugin
     const externalModules: ExternalModules = { gl, pngjs, 'jpeg-js': jpegjs };
-    const plugin = new HeadlessPluginContext(externalModules, DefaultPluginSpec(), { width: 800, height: 800 });
+    const canvasParams = defaultCanvas3DParams();
+    canvasParams.camera!.mode = "perspective";
+    const plugin = new HeadlessPluginContext(
+        externalModules,
+        DefaultPluginSpec(),
+        { width: IMAGE_WIDTH, height: IMAGE_HEIGHT },
+        { canvas: canvasParams }
+    );
     await plugin.init();
 
 
@@ -65,9 +78,9 @@ async function main() {
 
     await plugin.runTask(plugin.state.behaviors.updateTree(tree, { doNotUpdateCurrent: true, doNotLogTiming: true }));
     await loadWithUNITMPMembraneRepresentation(plugin, {
-        structureUrl: "https://pdbtm.unitmp.org/api/v1/entry/1afo.updated.cif",
-        regionDescriptorUrl: "https://pdbtm.unitmp.org/api/v1/entry/1afo.json",
-        side1: "Outside"
+        structureUrl: structureUrl,
+        regionDescriptorUrl: regionDescriptorUrl,
+        side1: "Outside" // TODO
     });
     //
     // End of TMDET extension registration section
@@ -78,12 +91,12 @@ async function main() {
     // Export images
     fs.mkdirSync(args.outDirectory, { recursive: true });
     setTimeout(async () => {
-            plugin.saveImage(path.join(args.outDirectory, 'stylized.jpg'), undefined, STYLIZED_POSTPROCESSING);
+            plugin.saveImage(path.join(args.outDirectory, fileName));
             // Cleanup
             await plugin.clear();
             plugin.dispose();
         },
-        5000
+        1000
     );
 
 }

src/tmdet-extension/behavior.ts

@@ -141,22 +141,15 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginContext
 
     updateSiteColors(params.side1);
 
-    setTimeout(() => { (async () => {
-        const pdbtmDescriptor: PDBTMDescriptor = await downloadRegionDescriptor(plugin, params);
-        pdbtmDescriptor.side1 = params.side1;
-        TmDetDescriptorCache.add(pdbtmDescriptor);
-
-        const membraneOrientation = createMembraneOrientation(pdbtmDescriptor);
-        setMembraneOrientation(membraneOrientation);
-
-        // load structure
-        await loadStructure(plugin, params, pdbtmDescriptor);
-
-        //
-        // It also resets the camera because the membranes render 1st and the structure might not be fully visible
-        //
-        //rotateCamera(plugin);
-    })(); }, 500);
+    const pdbtmDescriptor: PDBTMDescriptor = await downloadRegionDescriptor(plugin, params);
+    pdbtmDescriptor.side1 = params.side1;
+    TmDetDescriptorCache.add(pdbtmDescriptor);
+
+    const membraneOrientation = createMembraneOrientation(pdbtmDescriptor);
+    setMembraneOrientation(membraneOrientation);
+
+    // load structure
+    await loadStructure(plugin, params, pdbtmDescriptor);
 }
 
 async function downloadRegionDescriptor(plugin: PluginContext, params: any): Promise<any> {