wip, regl camera

src/mol-gl/camera.ts

+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+/*
+ * This code has been modified from https://github.com/regl-project/regl-camera,
+ * copyright (c) 2016 Mikola Lysenko. MIT License
+ */
+
+const isBrowser = typeof window !== 'undefined'
+
+import REGL = require('regl');
+
+import mouseChange, { MouseModifiers } from 'mol-util/mouse-change'
+import mouseWheel from 'mol-util/mouse-wheel'
+import { Mat4, Vec3 } from 'mol-math/linear-algebra/3d'
+import { clamp, damp } from 'mol-math/interpolate'
+
+export interface CameraUniforms {
+    projection: Mat4,
+}
+
+export interface CameraState {
+    center: Vec3,
+    theta: number,
+    phi: number,
+    distance: number,
+    eye: Vec3,
+    up: Vec3,
+    fovy: number,
+    near: number,
+    far: number,
+    noScroll: boolean,
+    flipY: boolean,
+    dtheta: number,
+    dphi: number,
+    rotationSpeed: number,
+    zoomSpeed: number,
+    renderOnDirty: boolean,
+    damping: number,
+    minDistance: number,
+    maxDistance: number,
+}
+
+export interface Camera {
+    update: (props: any, block: any) => void,
+    setState: (newState: CameraState) => void,
+    isDirty: () => boolean
+}
+
+export namespace Camera {
+    export function create (regl: REGL.Regl, element: HTMLElement, props: Partial<CameraState> = {}): Camera {
+        const state: CameraState = {
+            center: props.center || Vec3.zero(),
+            theta: props.theta || 0,
+            phi: props.phi || 0,
+            distance: Math.log(props.distance || 10.0),
+            eye: Vec3.zero(),
+            up: props.up || Vec3.create(0, 1, 0),
+            fovy: props.fovy || Math.PI / 4.0,
+            near: typeof props.near !== 'undefined' ? props.near : 0.01,
+            far: typeof props.far !== 'undefined' ? props.far : 1000.0,
+            noScroll: typeof props.noScroll !== 'undefined' ? props.noScroll : false,
+            flipY: !!props.flipY,
+            dtheta: 0,
+            dphi: 0,
+            rotationSpeed: typeof props.rotationSpeed !== 'undefined' ? props.rotationSpeed : 1,
+            zoomSpeed: typeof props.zoomSpeed !== 'undefined' ? props.zoomSpeed : 1,
+            renderOnDirty: typeof props.renderOnDirty !== undefined ? !!props.renderOnDirty : false,
+            damping: typeof props.damping !== 'undefined' ? props.damping : 0.9,
+            minDistance: Math.log(typeof props.minDistance !== 'undefined' ? props.minDistance : 0.1),
+            maxDistance: Math.log(typeof props.maxDistance !== 'undefined' ? props.maxDistance : 1000)
+        }
+
+        const view = Mat4.identity()
+        const projection = Mat4.identity()
+
+        const right = Vec3.create(1, 0, 0)
+        const front = Vec3.create(0, 0, 1)
+
+        let dirty = false
+        let ddistance = 0
+
+        let prevX = 0
+        let prevY = 0
+
+        if (isBrowser) {
+            const source = element || regl._gl.canvas
+
+            const getWidth = function () {
+                return element ? element.offsetWidth : window.innerWidth
+            }
+
+            const getHeight = function () {
+                return element ? element.offsetHeight : window.innerHeight
+            }
+
+            mouseChange(source, function (buttons: number, x: number, y: number, mods: MouseModifiers) {
+                if (buttons & 1) {
+                    const dx = (x - prevX) / getWidth()
+                    const dy = (y - prevY) / getHeight()
+
+                    state.dtheta += state.rotationSpeed * 4.0 * dx
+                    state.dphi += state.rotationSpeed * 4.0 * dy
+                    dirty = true;
+                }
+                prevX = x
+                prevY = y
+            })
+
+            mouseWheel(source, function (dx: number, dy: number) {
+                ddistance += dy / getHeight() * state.zoomSpeed
+                dirty = true;
+            }, state.noScroll)
+        }
+
+        function dampAndMarkDirty (x: number) {
+            const xd = damp(x, state.damping)
+            if (Math.abs(xd) < 0.1) return 0
+            dirty = true;
+            return xd
+        }
+
+        function setState (newState: Partial<CameraState> = {}) {
+            Object.assign(state, newState)
+
+            const { center, eye, up, dtheta, dphi } = state
+
+            state.theta += dtheta
+            state.phi = clamp(state.phi + dphi, -Math.PI / 2.0, Math.PI / 2.0)
+            state.distance = clamp(state.distance + ddistance, state.minDistance, state.maxDistance)
+
+            state.dtheta = dampAndMarkDirty(dtheta)
+            state.dphi = dampAndMarkDirty(dphi)
+            ddistance = dampAndMarkDirty(ddistance)
+
+            const theta = state.theta
+            const phi = state.phi
+            const r = Math.exp(state.distance)
+
+            const vf = r * Math.sin(theta) * Math.cos(phi)
+            const vr = r * Math.cos(theta) * Math.cos(phi)
+            const vu = r * Math.sin(phi)
+
+            for (let i = 0; i < 3; ++i) {
+                eye[i] = center[i] + vf * front[i] + vr * right[i] + vu * up[i]
+            }
+
+            Mat4.lookAt(view, eye, center, up)
+        }
+
+        const injectContext = regl({
+            context: {
+                view: () => view,
+                dirty: () => dirty,
+                projection: (context: REGL.DefaultContext) => {
+                    Mat4.perspective(
+                        projection,
+                        state.fovy,
+                        context.viewportWidth / context.viewportHeight,
+                        state.near,
+                        state.far
+                    )
+                    if (state.flipY) { projection[5] *= -1 }
+                    return projection
+                }
+            },
+            uniforms: {  // TODO
+                view: regl.context('view' as any),
+                projection: regl.context('projection' as any)
+            }
+        })
+
+        function update (props: any, block: any) {
+            setState()
+            injectContext(props, block)
+            if (dirty) {
+                console.log(view)
+            }
+            dirty = false
+        }
+
+        return {
+            update,
+            setState,
+            isDirty: () => dirty
+        }
+    }
+}