mol-canvas3d: refacroring, moved now() to mol-util

src/apps/canvas/app.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import Canvas3D from 'mol-canvas3d/canvas3d';
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
 import { getCifFromUrl, getModelsFromMmcif, getCifFromFile, getCcp4FromUrl, getVolumeFromCcp4, getCcp4FromFile, getVolumeFromVolcif } from './util';
 import { StructureView } from './structure-view';
 import { BehaviorSubject } from 'rxjs';

src/apps/canvas/component/representation.tsx

@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react'
-import Canvas3D from 'mol-canvas3d/canvas3d';
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
 import { App } from '../app';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { Representation } from 'mol-repr';

src/apps/canvas/structure-view.ts

@@ -8,7 +8,7 @@ import { Model, Structure } from 'mol-model/structure';
 import { getStructureFromModel } from './util';
 import { AssemblySymmetry } from 'mol-model-props/rcsb/symmetry';
 import { getAxesShape } from './assembly-symmetry';
-import Canvas3D from 'mol-canvas3d/canvas3d';
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
 // import { MeshBuilder } from 'mol-geo/mesh/mesh-builder';
 // import { addSphere } from 'mol-geo/mesh/builder/sphere';
 // import { Shape } from 'mol-model/shape';
@@ -217,7 +217,7 @@ export async function StructureView(app: App, canvas3d: Canvas3D, models: Readon
                 }
             }
 
-            canvas3d.center(structure.boundary.sphere.center)
+            canvas3d.camera.setState({ target: structure.boundary.sphere.center })
 
             // const mb = MeshBuilder.create()
             // mb.setGroup(0)

src/apps/canvas/volume-view.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import Canvas3D from 'mol-canvas3d/canvas3d';
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
 import { BehaviorSubject } from 'rxjs';
 import { App } from './app';
 import { VolumeData } from 'mol-model/volume';

src/examples/task.ts

@@ -4,7 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Task, Progress, Scheduler, now, MultistepTask, chunkedSubtask } from 'mol-task'
+import { Task, Progress, Scheduler, MultistepTask, chunkedSubtask } from 'mol-task'
+import { now } from 'mol-util/now';
 
 export async function test1() {
     const t = Task.create('test', async () => 1);

src/mol-canvas3d/camera.ts

@@ -5,13 +5,18 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Mat4, Vec3, Vec4 } from 'mol-math/linear-algebra'
+import { Mat4, Vec3, Vec4, EPSILON } from 'mol-math/linear-algebra'
 import { Viewport, cameraLookAt, cameraProject, cameraUnproject } from './camera/util';
 import { Object3D } from 'mol-gl/object3d';
+import { BehaviorSubject } from 'rxjs';
 
 export { Camera }
 
+// TODO: slab controls that modify near/far planes?
+
 class Camera implements Object3D {
+    readonly updatedViewProjection = new BehaviorSubject<Camera>(this);
+
     readonly view: Mat4 = Mat4.identity();
     readonly projection: Mat4 = Mat4.identity();
     readonly projectionView: Mat4 = Mat4.identity();
@@ -32,6 +37,9 @@ class Camera implements Object3D {
     get target() { return this.state.target; }
     set target(v: Vec3) { Vec3.copy(this.state.target, v); }
 
+    private prevProjection = Mat4.identity();
+    private prevView = Mat4.identity();
+
     updateMatrices() {
         const snapshot = this.state as Camera.Snapshot;
         const height = 2 * Math.tan(snapshot.fov / 2) * Vec3.distance(snapshot.position, snapshot.target);
@@ -43,8 +51,22 @@ class Camera implements Object3D {
             default: throw new Error('unknown camera mode');
         }
 
+        const changed = !Mat4.areEqual(this.projection, this.prevProjection, EPSILON.Value) || !Mat4.areEqual(this.view, this.prevView, EPSILON.Value);
+
         Mat4.mul(this.projectionView, this.projection, this.view)
         Mat4.invert(this.inverseProjectionView, this.projectionView)
+
+
+        if (changed) {
+            Mat4.mul(this.projectionView, this.projection, this.view)
+            Mat4.invert(this.inverseProjectionView, this.projectionView)
+
+            Mat4.copy(this.prevView, this.view);
+            Mat4.copy(this.prevProjection, this.projection);
+            this.updatedViewProjection.next(this);
+        }
+
+        return changed;
     }
 
     setState(snapshot?: Partial<Camera.Snapshot>) {
@@ -73,6 +95,10 @@ class Camera implements Object3D {
         return cameraUnproject(out, point, this.viewport, this.inverseProjectionView)
     }
 
+    dispose() {
+        this.updatedViewProjection.complete();
+    }
+
     constructor(state?: Partial<Camera.Snapshot>, viewport = Viewport.create(-1, -1, 1, 1)) {
         this.viewport = viewport;
         Camera.copySnapshot(this.state, state);

src/mol-canvas3d/canvas3d.ts

@@ -5,8 +5,9 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
+import { now } from 'mol-util/now';
 
-import { Vec3, Mat4, EPSILON } from 'mol-math/linear-algebra'
+import { Vec3 } from 'mol-math/linear-algebra'
 import InputObserver from 'mol-util/input/input-observer'
 import * as SetUtils from 'mol-util/set'
 import Renderer, { RendererStats } from 'mol-gl/renderer'
@@ -27,17 +28,19 @@ import { Color } from 'mol-util/color';
 import { Camera } from './camera';
 
 export const DefaultCanvas3DProps = {
+    // TODO: FPS cap?
+    // maxFps: 30,
     cameraPosition: Vec3.create(0, 0, 50),
     cameraMode: 'perspective' as Camera.Mode,
     backgroundColor: Color(0x000000),
 }
 export type Canvas3DProps = typeof DefaultCanvas3DProps
 
+export { Canvas3D }
+
 interface Canvas3D {
     readonly webgl: WebGLContext,
 
-    center: (p: Vec3) => void
-
     hide: (repr: Representation<any>) => void
     show: (repr: Representation<any>) => void
 
@@ -46,7 +49,7 @@ interface Canvas3D {
     update: () => void
     clear: () => void
 
-    draw: (force?: boolean) => void
+    // draw: (force?: boolean) => void
     requestDraw: (force?: boolean) => void
     animate: () => void
     pick: () => void
@@ -54,9 +57,7 @@ interface Canvas3D {
     mark: (loci: Loci, action: MarkerAction) => void
     getLoci: (pickingId: PickingId) => { loci: Loci, repr?: Representation<any> }
 
-    readonly reprCount: BehaviorSubject<number>
-    readonly identified: BehaviorSubject<string>
-    readonly didDraw: BehaviorSubject<number>
+    readonly didDraw: BehaviorSubject<now.Timestamp>
 
     handleResize: () => void
     resetCamera: () => void
@@ -77,11 +78,9 @@ namespace Canvas3D {
         const p = { ...props, ...DefaultCanvas3DProps }
 
         const reprMap = new Map<Representation<any>, Set<RenderObject>>()
-        const reprCount = new BehaviorSubject(0)
-        const identified = new BehaviorSubject('')
 
-        const startTime = performance.now()
-        const didDraw = new BehaviorSubject(0)
+        const startTime = now()
+        const didDraw = new BehaviorSubject<now.Timestamp>(0 as now.Timestamp)
         const input = InputObserver.create(canvas)
 
         const camera = new Camera({
@@ -117,8 +116,6 @@ namespace Canvas3D {
         let isPicking = false
         let drawPending = false
         let lastRenderTime = -1
-        const prevProjectionView = Mat4.zero()
-        const prevSceneView = Mat4.zero()
 
         function getLoci(pickingId: PickingId) {
             let loci: Loci = EmptyLoci
@@ -155,7 +152,7 @@ namespace Canvas3D {
         //     return 0
         // }
 
-        function render(variant: RenderVariant, force?: boolean) {
+        function render(variant: RenderVariant, force: boolean) {
             if (isPicking) return false
             // const p = scene.boundingSphere.center
             // console.log(p[0], p[1], p[2])
@@ -177,51 +174,56 @@ namespace Canvas3D {
 
             // console.log(camera.fogNear, camera.fogFar, targetDistance)
 
-            switch (variant) {
-                case 'pickObject': objectPickTarget.bind(); break;
-                case 'pickInstance': instancePickTarget.bind(); break;
-                case 'pickGroup': groupPickTarget.bind(); break;
-                case 'draw':
-                    webgl.unbindFramebuffer();
-                    renderer.setViewport(0, 0, canvas.width, canvas.height);
-                    break;
-            }
             let didRender = false
             controls.update()
-            camera.updateMatrices();
-            if (force || !Mat4.areEqual(camera.projectionView, prevProjectionView, EPSILON.Value) || !Mat4.areEqual(scene.view, prevSceneView, EPSILON.Value)) {
-                // console.log('foo', force, prevSceneView, scene.view)
-                Mat4.copy(prevProjectionView, camera.projectionView)
-                Mat4.copy(prevSceneView, scene.view)
+            const cameraChanged = camera.updateMatrices();
+
+            if (force || cameraChanged) {
+                switch (variant) {
+                    case 'pickObject': objectPickTarget.bind(); break;
+                    case 'pickInstance': instancePickTarget.bind(); break;
+                    case 'pickGroup': groupPickTarget.bind(); break;
+                    case 'draw':
+                        webgl.unbindFramebuffer();
+                        renderer.setViewport(0, 0, canvas.width, canvas.height);
+                        break;
+                }
+
                 renderer.render(scene, variant)
                 if (variant === 'draw') {
-                    lastRenderTime = performance.now()
+                    lastRenderTime = now()
                     pickDirty = true
                 }
                 didRender = true
             }
-            return didRender
+
+            return didRender && cameraChanged;
         }
 
+        let forceNextDraw = false;
+
         function draw(force?: boolean) {
-            if (render('draw', force)) {
-                didDraw.next(performance.now() - startTime)
+            if (render('draw', !!force || forceNextDraw)) {
+                didDraw.next(now() - startTime as now.Timestamp)
             }
+            forceNextDraw = false;
             drawPending = false
         }
 
         function requestDraw(force?: boolean) {
             if (drawPending) return
             drawPending = true
-            window.requestAnimationFrame(() => draw(force))
+            forceNextDraw = !!force;
+            // The animation frame is being requested by animate already.
+            // window.requestAnimationFrame(() => draw(force))
         }
 
         function animate() {
             draw(false)
-            if (performance.now() - lastRenderTime > 200) {
+            if (now() - lastRenderTime > 200) {
                 if (pickDirty) pick()
             }
-            window.requestAnimationFrame(() => animate())
+            window.requestAnimationFrame(animate)
         }
 
         function pick() {
@@ -273,11 +275,6 @@ namespace Canvas3D {
         return {
             webgl,
 
-            center: (target: Vec3) => {
-                // Vec3.set(controls.target, p[0], p[1], p[2])
-                camera.setState({ target })
-            },
-
             hide: (repr: Representation<any>) => {
                 const renderObjectSet = reprMap.get(repr)
                 if (renderObjectSet) renderObjectSet.forEach(o => o.state.visible = false)
@@ -299,7 +296,6 @@ namespace Canvas3D {
                     repr.renderObjects.forEach(o => scene.add(o))
                 }
                 reprMap.set(repr, newRO)
-                reprCount.next(reprMap.size)
                 scene.update()
             },
             remove: (repr: Representation<any>) => {
@@ -307,7 +303,6 @@ namespace Canvas3D {
                 if (renderObjectSet) {
                     renderObjectSet.forEach(o => scene.remove(o))
                     reprMap.delete(repr)
-                    reprCount.next(reprMap.size)
                     scene.update()
                 }
             },
@@ -317,7 +312,7 @@ namespace Canvas3D {
                 scene.clear()
             },
 
-            draw,
+            // draw,
             requestDraw,
             animate,
             pick,
@@ -341,8 +336,6 @@ namespace Canvas3D {
                     case 'pickGroup': return groupPickTarget.getImageData()
                 }
             },
-            reprCount,
-            identified,
             didDraw,
             setProps: (props: Partial<Canvas3DProps>) => {
                 if (props.cameraMode !== undefined && props.cameraMode !== camera.state.mode) {
@@ -372,6 +365,7 @@ namespace Canvas3D {
                 input.dispose()
                 controls.dispose()
                 renderer.dispose()
+                camera.dispose()
             }
         }
 
@@ -388,6 +382,4 @@ namespace Canvas3D {
             groupPickTarget.setSize(pickWidth, pickHeight)
         }
     }
-}
-
-export default Canvas3D
+}

src/mol-canvas3d/controls/trackball.ts

@@ -25,7 +25,7 @@ export const DefaultTrackballControlsProps = {
     staticMoving: true,
     dynamicDampingFactor: 0.2,
 
-    minDistance: 0,
+    minDistance: 0.01,
     maxDistance: Infinity
 }
 export type TrackballControlsProps = Partial<typeof DefaultTrackballControlsProps>
@@ -293,7 +293,6 @@ namespace TrackballControls {
 
         return {
             viewport,
-            // target,
 
             get dynamicDampingFactor() { return dynamicDampingFactor },
             set dynamicDampingFactor(value: number ) { dynamicDampingFactor = value },

src/mol-model/structure/query/context.ts

@@ -5,7 +5,7 @@
  */
 
 import { Structure, StructureElement, Unit } from '../structure';
-import { now } from 'mol-task';
+import { now } from 'mol-util/now';
 import { ElementIndex } from '../model';
 import { Link } from '../structure/unit/links';
 

src/mol-plugin/context.ts

@@ -5,7 +5,7 @@
  */
 
 import { StateTree, StateSelection, Transformer, Transform } from 'mol-state';
-import Canvas3D from 'mol-canvas3d/canvas3d';
+import { Canvas3D } from 'mol-canvas3d/canvas3d';
 import { StateTransforms } from './state/transforms';
 import { PluginStateObjects as SO } from './state/objects';
 import { RxEventHelper } from 'mol-util/rx-event-helper';
@@ -141,8 +141,7 @@ export class PluginContext {
         if (!sel.length) return;
 
         const center = (sel[0].obj! as SO.Structure).data.boundary.sphere.center;
-        console.log({ sel, center, rc: this.canvas3d.reprCount });
-        this.canvas3d.center(center);
+        this.canvas3d.camera.setState({ target: center });
         this.canvas3d.requestDraw(true);
     }
 

src/mol-task/execution/observable.ts

@@ -7,7 +7,7 @@
 import { Task } from '../task'
 import { RuntimeContext } from './runtime-context'
 import { Progress } from './progress'
-import { now } from '../util/now'
+import { now } from 'mol-util/now';
 import { Scheduler } from '../util/scheduler'
 import { UserTiming } from '../util/user-timing'
 

src/mol-task/index.ts

@@ -7,9 +7,8 @@
 import { Task } from './task'
 import { RuntimeContext } from './execution/runtime-context'
 import { Progress } from './execution/progress'
-import { now } from './util/now'
 import { Scheduler } from './util/scheduler'
 import { MultistepTask } from './util/multistep'
 import { chunkedSubtask } from './util/chunked'
 
-export { Task, RuntimeContext, Progress, now, Scheduler, MultistepTask, chunkedSubtask }
+export { Task, RuntimeContext, Progress, Scheduler, MultistepTask, chunkedSubtask }

src/mol-task/util/chunked.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { now } from './now'
+import { now } from 'mol-util/now';
 import { RuntimeContext } from '../execution/runtime-context'
 
 type UniformlyChunkedFn<S> = (chunkSize: number, state: S) => number

src/mol-task/util/now.ts → src/mol-util/now.ts

@@ -7,7 +7,7 @@
 declare var process: any;
 declare var window: any;
 
-const now: () => number = (function () {
+const now: () => now.Timestamp = (function () {
     if (typeof window !== 'undefined' && window.performance) {
         const perf = window.performance;
         return () => perf.now();
@@ -23,4 +23,8 @@ const now: () => number = (function () {
     }
 }());
 
+namespace now {
+    export type Timestamp = number & { '@type': 'now-timestamp' }
+}
+
 export { now }

src/mol-util/performance-monitor.ts

@@ -5,7 +5,7 @@
  * Copyright (c) 2016 - now David Sehnal, licensed under Apache 2.0, See LICENSE file for more info.
  */
 
-import { now } from 'mol-task/util/now'
+import { now } from 'mol-util/now';
 
 export class PerformanceMonitor {
     private starts = new Map<string, number>();

src/mol-util/uuid.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { now } from 'mol-task'
+import { now } from 'mol-util/now';
 
 type UUID = string & { '@type': 'uuid' }
 

src/perf-tests/tasks.ts

@@ -1,5 +1,5 @@
 import * as B from 'benchmark'
-import { now } from 'mol-task/util/now'
+import { now } from 'mol-util/now';
 import { Scheduler } from 'mol-task/util/scheduler'
 
 export namespace Tasks {

src/servers/model/preprocess/parallel.ts

@@ -6,7 +6,7 @@
 
 import * as path from 'path'
 import * as cluster from 'cluster'
-import { now } from 'mol-task';
+import { now } from 'mol-util/now';
 import { PerformanceMonitor } from 'mol-util/performance-monitor';
 import { preprocessFile } from './preprocess';
 import { createModelPropertiesProvider } from '../property-provider';

src/servers/model/server/api-local.ts

@@ -10,7 +10,7 @@ import { JobManager, Job } from './jobs';
 import { ConsoleLogger } from 'mol-util/console-logger';
 import { resolveJob } from './query';
 import { StructureCache } from './structure-wrapper';
-import { now } from 'mol-task';
+import { now } from 'mol-util/now';
 import { PerformanceMonitor } from 'mol-util/performance-monitor';
 import { QueryName } from './api';
 

src/servers/model/server/query.ts

@@ -8,7 +8,8 @@ import { Column } from 'mol-data/db';
 import { CifWriter } from 'mol-io/writer/cif';
 import { StructureQuery, StructureSelection, Structure } from 'mol-model/structure';
 import { encode_mmCIF_categories } from 'mol-model/structure/export/mmcif';
-import { now, Progress } from 'mol-task';
+import { Progress } from 'mol-task';
+import { now } from 'mol-util/now';
 import { ConsoleLogger } from 'mol-util/console-logger';
 import { PerformanceMonitor } from 'mol-util/performance-monitor';
 import Config from '../config';

src/servers/model/utils/fetch-props-pdbe.ts

@@ -9,7 +9,7 @@ import * as fs from 'fs'
 import * as path from 'path'
 import * as argparse from 'argparse'
 import { makeDir } from 'mol-util/make-dir';
-import { now } from 'mol-task';
+import { now } from 'mol-util/now';
 import { PerformanceMonitor } from 'mol-util/performance-monitor';
 
 const cmdParser = new argparse.ArgumentParser({