@aics/vole-core 3.12.4

package/es/ThreeJsPanel.js

@@ -0,0 +1,633 @@
+import { AxesHelper, Vector3, Object3D, Mesh, BoxGeometry, MeshBasicMaterial, OrthographicCamera, PerspectiveCamera, NormalBlending, WebGLRenderer, Scene, DepthTexture, WebGLRenderTarget, NearestFilter, UnsignedByteType, RGBAFormat } from "three";
+import TrackballControls from "./TrackballControls.js";
+import Timing from "./Timing.js";
+import scaleBarSVG from "./constants/scaleBarSVG.js";
+import { isOrthographicCamera, isPerspectiveCamera, isTop, isRight } from "./types.js";
+import { constrainToAxis, formatNumber, getTimestamp } from "./utils/num_utils.js";
+import { Axis } from "./VolumeRenderSettings.js";
+import RenderToBuffer from "./RenderToBuffer.js";
+import { copyImageFragShader } from "./constants/basicShaders.js";
+export const VOLUME_LAYER = 0;
+export const MESH_LAYER = 1;
+const DEFAULT_PERSPECTIVE_CAMERA_DISTANCE = 5.0;
+const DEFAULT_PERSPECTIVE_CAMERA_NEAR = 0.1;
+const DEFAULT_PERSPECTIVE_CAMERA_FAR = 20.0;
+const DEFAULT_ORTHO_SCALE = 0.5;
+export class ThreeJsPanel {
+  constructor(parentElement, _useWebGL2) {
+    this.containerdiv = document.createElement("div");
+    this.containerdiv.style.position = "relative";
+    this.canvas = document.createElement("canvas");
+    this.containerdiv.appendChild(this.canvas);
+    this.canvas.style.backgroundColor = "black";
+    if (parentElement) {
+      this.canvas.height = parentElement.offsetHeight;
+      this.canvas.width = parentElement.offsetWidth;
+      parentElement.appendChild(this.containerdiv);
+    }
+    this.scene = new Scene();
+    this.meshRenderTarget = new WebGLRenderTarget(this.canvas.width, this.canvas.height, {
+      minFilter: NearestFilter,
+      magFilter: NearestFilter,
+      format: RGBAFormat,
+      type: UnsignedByteType,
+      depthBuffer: true
+    });
+    this.meshRenderToBuffer = new RenderToBuffer(copyImageFragShader, {
+      image: {
+        value: this.meshRenderTarget.texture
+      }
+    });
+    this.meshRenderTarget.depthTexture = new DepthTexture(this.canvas.width, this.canvas.height);
+    this.scaleBarContainerElement = document.createElement("div");
+    this.orthoScaleBarElement = document.createElement("div");
+    this.showOrthoScaleBar = true;
+    this.perspectiveScaleBarElement = document.createElement("div");
+    this.showPerspectiveScaleBar = false;
+    this.timestepIndicatorElement = document.createElement("div");
+    this.showTimestepIndicator = false;
+    this.animateFuncs = [];
+
+    // are we in a constant render loop or not?
+    this.inRenderLoop = false;
+    // if we're not in a constant render loop, have we queued any single redraws?
+    this.requestedRender = 0;
+
+    // if webgl 2 is available, let's just use it anyway.
+    // we are ignoring the useWebGL2 flag
+    this.hasWebGL2 = false;
+    const context = this.canvas.getContext("webgl2");
+    if (context) {
+      this.hasWebGL2 = true;
+      this.renderer = new WebGLRenderer({
+        context: context,
+        canvas: this.canvas,
+        preserveDrawingBuffer: true,
+        alpha: true,
+        premultipliedAlpha: false
+      });
+      //this.renderer.autoClear = false;
+      // set pixel ratio to 0.25 or 0.5 to render at lower res.
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      this.renderer.state.setBlending(NormalBlending);
+      //required by WebGL 2.0 for rendering to FLOAT textures
+      this.renderer.getContext().getExtension("EXT_color_buffer_float");
+    } else {
+      // TODO Deprecate this code path.
+      console.warn("WebGL 2.0 not available. Some functionality may be limited. Please use a browser that supports WebGL 2.0.");
+      this.renderer = new WebGLRenderer({
+        canvas: this.canvas,
+        preserveDrawingBuffer: true,
+        alpha: true,
+        premultipliedAlpha: false
+      });
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      this.renderer.state.setBlending(NormalBlending);
+    }
+    this.renderer.localClippingEnabled = true;
+    if (parentElement) {
+      this.renderer.setSize(parentElement.offsetWidth, parentElement.offsetHeight);
+      this.meshRenderTarget.setSize(parentElement.offsetWidth, parentElement.offsetHeight);
+    }
+    this.timer = new Timing();
+    const scale = DEFAULT_ORTHO_SCALE;
+    const aspect = this.getWidth() / this.getHeight();
+    this.fov = 20;
+    this.perspectiveCamera = new PerspectiveCamera(this.fov, aspect, DEFAULT_PERSPECTIVE_CAMERA_NEAR, DEFAULT_PERSPECTIVE_CAMERA_FAR);
+    this.resetPerspectiveCamera();
+    this.perspectiveControls = new TrackballControls(this.perspectiveCamera, this.canvas);
+    this.perspectiveControls.rotateSpeed = 4.0 / window.devicePixelRatio;
+    this.perspectiveControls.autoRotate = false;
+    this.perspectiveControls.staticMoving = true;
+    this.perspectiveControls.length = 10;
+    this.perspectiveControls.enabled = true; //turn off mouse moments by setting to false
+
+    this.orthographicCameraX = new OrthographicCamera(-scale * aspect, scale * aspect, scale, -scale, 0.001, 20);
+    this.resetOrthographicCameraX();
+    this.orthoControlsX = new TrackballControls(this.orthographicCameraX, this.canvas);
+    this.orthoControlsX.noRotate = true;
+    this.orthoControlsX.scale = scale;
+    this.orthoControlsX.scale0 = scale;
+    this.orthoControlsX.aspect = aspect;
+    this.orthoControlsX.staticMoving = true;
+    this.orthoControlsX.enabled = false;
+    this.orthoControlsX.panSpeed = this.canvas.clientWidth * 0.5;
+    this.orthographicCameraY = new OrthographicCamera(-scale * aspect, scale * aspect, scale, -scale, 0.001, 20);
+    this.resetOrthographicCameraY();
+    this.orthoControlsY = new TrackballControls(this.orthographicCameraY, this.canvas);
+    this.orthoControlsY.noRotate = true;
+    this.orthoControlsY.scale = scale;
+    this.orthoControlsY.scale0 = scale;
+    this.orthoControlsY.aspect = aspect;
+    this.orthoControlsY.staticMoving = true;
+    this.orthoControlsY.enabled = false;
+    this.orthoControlsY.panSpeed = this.canvas.clientWidth * 0.5;
+    this.orthographicCameraZ = new OrthographicCamera(-scale * aspect, scale * aspect, scale, -scale, 0.001, 20);
+    this.resetOrthographicCameraZ();
+    this.orthoControlsZ = new TrackballControls(this.orthographicCameraZ, this.canvas);
+    this.orthoControlsZ.noRotate = true;
+    this.orthoControlsZ.scale = scale;
+    this.orthoControlsZ.scale0 = scale;
+    this.orthoControlsZ.aspect = aspect;
+    this.orthoControlsZ.staticMoving = true;
+    this.orthoControlsZ.enabled = false;
+    this.orthoControlsZ.panSpeed = this.canvas.clientWidth * 0.5;
+    this.camera = this.perspectiveCamera;
+    this.controls = this.perspectiveControls;
+    this.viewMode = Axis.NONE;
+    this.axisCamera = new OrthographicCamera();
+    this.axisHelperScene = new Scene();
+    this.axisHelperObject = new Object3D();
+    this.axisHelperObject.name = "axisHelperParentObject";
+    this.showAxis = false;
+    // size of axes in px.
+    this.axisScale = 50.0;
+    // offset from bottom left corner in px.
+    this.axisOffset = [66.0, 66.0];
+    this.setupAxisHelper();
+    this.setupIndicatorElements();
+  }
+  updateCameraFocus(fov, _focalDistance, _apertureSize) {
+    this.perspectiveCamera.fov = fov;
+    this.fov = fov;
+    this.perspectiveCamera.updateProjectionMatrix();
+  }
+  resetPerspectiveCamera() {
+    this.perspectiveCamera.position.x = 0.0;
+    this.perspectiveCamera.position.y = 0.0;
+    this.perspectiveCamera.position.z = DEFAULT_PERSPECTIVE_CAMERA_DISTANCE;
+    this.perspectiveCamera.up.x = 0.0;
+    this.perspectiveCamera.up.y = 1.0;
+    this.perspectiveCamera.up.z = 0.0;
+  }
+  resetOrthographicCameraX() {
+    this.orthographicCameraX.position.x = 2.0;
+    this.orthographicCameraX.position.y = 0.0;
+    this.orthographicCameraX.position.z = 0.0;
+    this.orthographicCameraX.up.x = 0.0;
+    this.orthographicCameraX.up.y = 0.0;
+    this.orthographicCameraX.up.z = 1.0;
+    this.orthographicCameraX.lookAt(new Vector3(0, 0, 0));
+  }
+  resetOrthographicCameraY() {
+    this.orthographicCameraY.position.x = 0.0;
+    this.orthographicCameraY.position.y = 2.0;
+    this.orthographicCameraY.position.z = 0.0;
+    this.orthographicCameraY.up.x = 0.0;
+    this.orthographicCameraY.up.y = 0.0;
+    this.orthographicCameraY.up.z = 1.0;
+    this.orthographicCameraY.lookAt(new Vector3(0, 0, 0));
+  }
+  resetOrthographicCameraZ() {
+    this.orthographicCameraZ.position.x = 0.0;
+    this.orthographicCameraZ.position.y = 0.0;
+    this.orthographicCameraZ.position.z = 2.0;
+    this.orthographicCameraZ.up.x = 0.0;
+    this.orthographicCameraZ.up.y = 1.0;
+    this.orthographicCameraZ.up.z = 0.0;
+    this.orthographicCameraZ.lookAt(new Vector3(0, 0, 0));
+  }
+  requestCapture(dataurlcallback) {
+    this.dataurlcallback = dataurlcallback;
+    this.redraw();
+  }
+  isVR() {
+    return this.renderer.xr.enabled;
+  }
+  resetToPerspectiveCamera() {
+    const aspect = this.getWidth() / this.getHeight();
+    this.perspectiveCamera = new PerspectiveCamera(this.fov, aspect, DEFAULT_PERSPECTIVE_CAMERA_NEAR, DEFAULT_PERSPECTIVE_CAMERA_FAR);
+    this.resetPerspectiveCamera();
+    this.switchViewMode("3D");
+    this.controls.object = this.perspectiveCamera;
+    this.controls.enabled = true;
+    this.controls.reset();
+  }
+  resetCamera() {
+    if (this.camera === this.perspectiveCamera) {
+      this.resetPerspectiveCamera();
+    } else if (this.camera === this.orthographicCameraX) {
+      this.resetOrthographicCameraX();
+    } else if (this.camera === this.orthographicCameraY) {
+      this.resetOrthographicCameraY();
+    } else if (this.camera === this.orthographicCameraZ) {
+      this.resetOrthographicCameraZ();
+    }
+    this.controls.reset();
+  }
+  setupAxisHelper() {
+    // set up axis widget.
+
+    const axisCubeMaterial = new MeshBasicMaterial({
+      color: 0xaeacad
+    });
+    const axisCube = new BoxGeometry(this.axisScale / 5, this.axisScale / 5, this.axisScale / 5);
+    const axisCubeMesh = new Mesh(axisCube, axisCubeMaterial);
+    this.axisHelperObject.add(axisCubeMesh);
+    const axisHelper = new AxesHelper(this.axisScale);
+    this.axisHelperObject.add(axisHelper);
+    this.axisHelperScene.add(this.axisHelperObject);
+    this.axisCamera = new OrthographicCamera(0, this.getWidth(), this.getHeight(), 0, 0.001, this.axisScale * 4.0);
+    this.axisCamera.position.z = 1.0;
+    this.axisCamera.up.x = 0.0;
+    this.axisCamera.up.y = 1.0;
+    this.axisCamera.up.z = 0.0;
+    this.axisCamera.lookAt(new Vector3(0, 0, 0));
+    this.axisCamera.position.set(-this.axisOffset[0], -this.axisOffset[1], this.axisScale * 2.0);
+  }
+  setAxisPosition(marginX, marginY, corner) {
+    // Offset is relative to center of object, not corner of possible extent
+    // at offsets lower than BASE_MARGIN, axes may extend off screen
+    const BASE_MARGIN = 50;
+    this.axisOffset = [marginX + BASE_MARGIN, marginY + BASE_MARGIN];
+    if (isTop(corner)) {
+      this.axisOffset[1] = this.getHeight() - this.axisOffset[1];
+    }
+    if (isRight(corner)) {
+      this.axisOffset[0] = this.getWidth() - this.axisOffset[0];
+    }
+    this.axisCamera.position.set(-this.axisOffset[0], -this.axisOffset[1], this.axisScale * 2.0);
+  }
+  orthoScreenPixelsToPhysicalUnits(pixels, physicalUnitsPerWorldUnit) {
+    const worldUnitsPerPixel = 1 / (this.camera.zoom * this.getHeight());
+    // Multiply by devicePixelRatio to convert from scaled CSS pixels to physical pixels
+    // (to account for high dpi monitors, e.g.). We didn't do this to height above because
+    // that value comes from three, which works in physical pixels.
+    return pixels * window.devicePixelRatio * worldUnitsPerPixel * physicalUnitsPerWorldUnit;
+  }
+  setupIndicatorElements() {
+    const scaleBarContainerStyle = {
+      fontFamily: "-apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+      position: "absolute",
+      right: "169px",
+      bottom: "20px"
+    };
+    Object.assign(this.scaleBarContainerElement.style, scaleBarContainerStyle);
+    this.containerdiv.appendChild(this.scaleBarContainerElement);
+
+    // Orthographic scale bar
+    const orthoScaleBarStyle = {
+      border: "1px solid white",
+      borderTop: "none",
+      height: "10px",
+      display: "none",
+      color: "white",
+      mixBlendMode: "difference",
+      fontSize: "14px",
+      textAlign: "right",
+      lineHeight: "0",
+      boxSizing: "border-box",
+      paddingRight: "10px",
+      // TODO: Adjust based on width of timestamp
+      marginRight: "40px"
+    };
+    Object.assign(this.orthoScaleBarElement.style, orthoScaleBarStyle);
+    this.scaleBarContainerElement.appendChild(this.orthoScaleBarElement);
+
+    // Perspective scale bar
+    const perspectiveScaleBarStyle = {
+      width: "75px",
+      textAlign: "center",
+      display: "none",
+      color: "white"
+    };
+    Object.assign(this.perspectiveScaleBarElement.style, perspectiveScaleBarStyle);
+    this.scaleBarContainerElement.appendChild(this.perspectiveScaleBarElement);
+    const labeldiv = document.createElement("div");
+    const svgdiv = document.createElement("div");
+    svgdiv.style.color = "rgb(255, 255, 0)";
+    svgdiv.innerHTML = scaleBarSVG;
+    this.perspectiveScaleBarElement.appendChild(labeldiv);
+    this.perspectiveScaleBarElement.appendChild(svgdiv);
+
+    // Time step indicator
+    const timestepIndicatorStyle = {
+      fontFamily: "-apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+      position: "absolute",
+      right: "20px",
+      bottom: "20px",
+      color: "white",
+      mixBlendMode: "difference",
+      display: "none",
+      lineHeight: "0.75"
+    };
+    Object.assign(this.timestepIndicatorElement.style, timestepIndicatorStyle);
+    this.containerdiv.appendChild(this.timestepIndicatorElement);
+  }
+  updateOrthoScaleBar(scale, unit) {
+    // We want to find the largest round number of physical units that keeps the scale bar within this width on screen
+    const SCALE_BAR_MAX_WIDTH = 150;
+    // Convert max width to volume physical units
+    const physicalMaxWidth = this.orthoScreenPixelsToPhysicalUnits(SCALE_BAR_MAX_WIDTH, scale);
+    // Round off all but the most significant digit of physicalMaxWidth
+    const digits = Math.floor(Math.log10(physicalMaxWidth));
+    const div10 = 10 ** digits;
+    const scaleValue = Math.floor(physicalMaxWidth / div10) * div10;
+    const scaleStr = formatNumber(scaleValue);
+    this.orthoScaleBarElement.innerHTML = `${scaleStr}${unit || ""}`;
+    this.orthoScaleBarElement.style.width = `${SCALE_BAR_MAX_WIDTH * (scaleValue / physicalMaxWidth)}px`;
+  }
+  updatePerspectiveScaleBar(length, unit) {
+    const labeldiv = this.perspectiveScaleBarElement.firstChild;
+    labeldiv.innerHTML = `${formatNumber(length)}${unit || ""}`;
+  }
+  updateTimestepIndicator(progress, total, unit) {
+    this.timestepIndicatorElement.innerHTML = getTimestamp(progress, total, unit);
+  }
+  setPerspectiveScaleBarColor(color) {
+    // set the font color of the SVG container. only paths with `stroke="currentColor"` will react to this.
+    const svgdiv = this.perspectiveScaleBarElement.lastChild;
+    svgdiv.style.color = `rgb(${color[0] * 255}, ${color[1] * 255}, ${color[2] * 255})`;
+  }
+  updateScaleBarVisibility() {
+    const isOrtho = isOrthographicCamera(this.camera);
+    const orthoVisible = isOrtho && this.showOrthoScaleBar;
+    const perspectiveVisible = !isOrtho && this.showPerspectiveScaleBar;
+    this.orthoScaleBarElement.style.display = orthoVisible ? "" : "none";
+    this.perspectiveScaleBarElement.style.display = perspectiveVisible ? "" : "none";
+  }
+  setShowOrthoScaleBar(visible) {
+    this.showOrthoScaleBar = visible;
+    this.updateScaleBarVisibility();
+  }
+  setShowPerspectiveScaleBar(visible) {
+    this.showPerspectiveScaleBar = visible;
+    this.updateScaleBarVisibility();
+  }
+  setShowTimestepIndicator(visible) {
+    this.showTimestepIndicator = visible;
+    this.timestepIndicatorElement.style.display = visible ? "" : "none";
+  }
+  setIndicatorPosition(timestep, marginX, marginY, corner) {
+    const {
+      style
+    } = timestep ? this.timestepIndicatorElement : this.scaleBarContainerElement;
+    style.removeProperty("top");
+    style.removeProperty("bottom");
+    style.removeProperty("left");
+    style.removeProperty("right");
+    const xProp = isRight(corner) ? "right" : "left";
+    const yProp = isTop(corner) ? "top" : "bottom";
+    Object.assign(style, {
+      [xProp]: marginX + "px",
+      [yProp]: marginY + "px"
+    });
+  }
+  setAutoRotate(rotate) {
+    this.controls.autoRotate = rotate;
+  }
+  getAutoRotate() {
+    return this.controls.autoRotate;
+  }
+  replaceCamera(newCam) {
+    this.camera = newCam;
+  }
+  replaceControls(newControls) {
+    if (this.controls === newControls) {
+      return;
+    }
+    // disable the old, install the new.
+    this.controls.enabled = false;
+
+    // detach old control change handlers
+    this.removeControlHandlers();
+    this.controls = newControls;
+    this.controls.enabled = true;
+
+    // re-install existing control change handlers on new controls
+    if (this.controlStartHandler) {
+      this.controls.addEventListener("start", this.controlStartHandler);
+    }
+    if (this.controlChangeHandler) {
+      this.controls.addEventListener("change", this.controlChangeHandler);
+    }
+    if (this.controlEndHandler) {
+      this.controls.addEventListener("end", this.controlEndHandler);
+    }
+    this.controls.update();
+  }
+  switchViewMode(mode) {
+    mode = mode.toUpperCase();
+    switch (mode) {
+      case "YZ":
+      case "X":
+        this.replaceCamera(this.orthographicCameraX);
+        this.replaceControls(this.orthoControlsX);
+        this.axisHelperObject.rotation.set(0, Math.PI * 0.5, 0);
+        this.viewMode = Axis.X;
+        break;
+      case "XZ":
+      case "Y":
+        this.replaceCamera(this.orthographicCameraY);
+        this.replaceControls(this.orthoControlsY);
+        this.axisHelperObject.rotation.set(Math.PI * 0.5, 0, 0);
+        this.viewMode = Axis.Y;
+        break;
+      case "XY":
+      case "Z":
+        this.replaceCamera(this.orthographicCameraZ);
+        this.replaceControls(this.orthoControlsZ);
+        this.axisHelperObject.rotation.set(0, 0, 0);
+        this.viewMode = Axis.Z;
+        break;
+      default:
+        this.replaceCamera(this.perspectiveCamera);
+        this.replaceControls(this.perspectiveControls);
+        this.axisHelperObject.rotation.setFromRotationMatrix(this.camera.matrixWorldInverse);
+        this.viewMode = Axis.NONE;
+        break;
+    }
+    this.updateScaleBarVisibility();
+  }
+  getMeshDepthTexture() {
+    return this.meshRenderTarget.depthTexture;
+  }
+  resize(comp, w, h, _ow, _oh, _eOpts) {
+    w = w || this.containerdiv.parentElement?.offsetWidth || this.containerdiv.offsetWidth;
+    h = h || this.containerdiv.parentElement?.offsetHeight || this.containerdiv.offsetHeight;
+    this.containerdiv.style.width = "" + w + "px";
+    this.containerdiv.style.height = "" + h + "px";
+    const aspect = w / h;
+    this.perspectiveControls.aspect = aspect;
+    this.orthoControlsZ.aspect = aspect;
+    this.orthoControlsZ.panSpeed = w * 0.5;
+    this.orthoControlsY.aspect = aspect;
+    this.orthoControlsY.panSpeed = w * 0.5;
+    this.orthoControlsX.aspect = aspect;
+    this.orthoControlsX.panSpeed = w * 0.5;
+    if (isOrthographicCamera(this.camera)) {
+      this.camera.left = -DEFAULT_ORTHO_SCALE * aspect;
+      this.camera.right = DEFAULT_ORTHO_SCALE * aspect;
+      this.camera.updateProjectionMatrix();
+    } else {
+      this.camera.aspect = aspect;
+      this.camera.updateProjectionMatrix();
+    }
+    this.axisCamera.left = 0;
+    this.axisCamera.right = w;
+    this.axisCamera.top = h;
+    this.axisCamera.bottom = 0;
+    this.axisCamera.updateProjectionMatrix();
+    if (this.renderer.getPixelRatio() !== window.devicePixelRatio) {
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+    }
+    this.renderer.setSize(w, h);
+    this.meshRenderTarget.setSize(w, h);
+    this.perspectiveControls.handleResize();
+    this.orthoControlsZ.handleResize();
+    this.orthoControlsY.handleResize();
+    this.orthoControlsX.handleResize();
+  }
+  setClearColor(color, alpha) {
+    this.renderer.setClearColor(color, alpha);
+  }
+  getWidth() {
+    return this.renderer.getContext().canvas.width;
+  }
+  getHeight() {
+    return this.renderer.getContext().canvas.height;
+  }
+  getCameraState() {
+    return {
+      position: this.camera.position.toArray(),
+      up: this.camera.up.toArray(),
+      target: this.controls.target.toArray(),
+      orthoScale: isOrthographicCamera(this.camera) ? this.controls.scale : undefined,
+      fov: isPerspectiveCamera(this.camera) ? this.camera.fov : undefined
+    };
+  }
+
+  /**
+   * Updates the camera's state, including the position, up vector, target position,
+   * scaling, and FOV. If values are missing from `state`, they will be left unchanged.
+   *
+   * @param state Partial `CameraState` object.
+   *
+   * If an OrthographicCamera is used, the camera's position will be constrained to match
+   * the `target` position along the current view mode.
+   */
+  setCameraState(state) {
+    const currentState = this.getCameraState();
+    // Fill in any missing properties with current state
+    const newState = {
+      ...currentState,
+      ...state
+    };
+    this.camera.up.fromArray(newState.up).normalize();
+    this.controls.target.fromArray(newState.target);
+    const constrainedPosition = constrainToAxis(newState.position, newState.target, this.viewMode);
+    this.camera.position.fromArray(constrainedPosition);
+
+    // Update fields by camera type
+    if (isOrthographicCamera(this.camera)) {
+      const scale = newState.orthoScale || DEFAULT_ORTHO_SCALE;
+      this.controls.scale = scale;
+      this.camera.zoom = 0.5 / scale;
+    } else {
+      this.camera.fov = newState.fov || this.fov;
+    }
+    this.controls.update();
+    this.camera.updateProjectionMatrix();
+  }
+  render() {
+    // update the axis helper in case the view was rotated
+    if (!isOrthographicCamera(this.camera)) {
+      this.axisHelperObject.rotation.setFromRotationMatrix(this.camera.matrixWorldInverse);
+    }
+
+    // do whatever we have to do before the main render of this.scene
+    for (let i = 0; i < this.animateFuncs.length; i++) {
+      if (this.animateFuncs[i]) {
+        this.animateFuncs[i](this.renderer, this.camera, this.meshRenderTarget.depthTexture);
+      }
+    }
+
+    // RENDERING
+    // Step 1: Render meshes, e.g. isosurfaces, separately to a render target. (Meshes are all on
+    //   layer 1.) This is necessary to access the depth buffer.
+    this.camera.layers.set(MESH_LAYER);
+    this.renderer.setRenderTarget(this.meshRenderTarget);
+    this.renderer.render(this.scene, this.camera);
+
+    // Step 2: Render the mesh render target out to the screen.
+    this.meshRenderToBuffer.material.uniforms.image.value = this.meshRenderTarget.texture;
+    this.meshRenderToBuffer.render(this.renderer);
+
+    // Step 3: Render volumes, which can now depth test against the meshes.
+    this.camera.layers.set(VOLUME_LAYER);
+    this.renderer.setRenderTarget(null);
+    this.renderer.autoClear = false;
+    this.renderer.render(this.scene, this.camera);
+    this.renderer.autoClear = true;
+
+    // overlay
+    if (this.showAxis) {
+      this.renderer.autoClear = false;
+      this.renderer.render(this.axisHelperScene, this.axisCamera);
+      this.renderer.autoClear = true;
+    }
+    if (this.dataurlcallback) {
+      this.dataurlcallback(this.canvas.toDataURL());
+      this.dataurlcallback = undefined;
+    }
+  }
+  redraw() {
+    // if we are not in a render loop already
+    if (!this.inRenderLoop) {
+      // if there is currently a queued redraw, cancel it and replace it with a new one.
+      if (this.requestedRender) {
+        cancelAnimationFrame(this.requestedRender);
+      }
+      this.timer.begin();
+      this.requestedRender = requestAnimationFrame(this.onAnimationLoop.bind(this));
+    }
+  }
+  onAnimationLoop() {
+    // delta is in seconds
+    this.timer.update();
+    const delta = this.timer.lastFrameMs / 1000.0;
+    this.controls.update(delta);
+    this.render();
+  }
+  startRenderLoop() {
+    this.inRenderLoop = true;
+    // reset the timer so that the time delta won't go back to the last time we were animating.
+    this.timer.begin();
+    this.renderer.setAnimationLoop(this.onAnimationLoop.bind(this));
+  }
+  stopRenderLoop() {
+    this.renderer.setAnimationLoop(null);
+    this.inRenderLoop = false;
+    if (this.requestedRender) {
+      cancelAnimationFrame(this.requestedRender);
+      this.requestedRender = 0;
+    }
+    this.timer.end();
+  }
+  removeControlHandlers() {
+    if (this.controlStartHandler) {
+      this.controls.removeEventListener("start", this.controlStartHandler);
+    }
+    if (this.controlChangeHandler) {
+      this.controls.removeEventListener("change", this.controlChangeHandler);
+    }
+    if (this.controlEndHandler) {
+      this.controls.removeEventListener("end", this.controlEndHandler);
+    }
+  }
+  setControlHandlers(onstart, onchange, onend) {
+    this.removeControlHandlers();
+    if (onstart) {
+      this.controlStartHandler = onstart;
+      this.controls.addEventListener("start", this.controlStartHandler);
+    }
+    if (onchange) {
+      this.controlChangeHandler = onchange;
+      this.controls.addEventListener("change", this.controlChangeHandler);
+    }
+    if (onend) {
+      this.controlEndHandler = onend;
+      this.controls.addEventListener("end", this.controlEndHandler);
+    }
+  }
+}

package/es/Timing.js

@@ -0,0 +1,28 @@
+export default class Timing {
+  constructor() {
+    this.beginTime = (performance || Date).now();
+    this.prevTime = this.beginTime;
+    this.frames = 0;
+    this.lastFrameMs = 0;
+    this.lastFPS = 0;
+  }
+  begin() {
+    this.beginTime = (performance || Date).now();
+  }
+  end() {
+    this.frames++;
+    const time = (performance || Date).now();
+    this.lastFrameMs = time - this.beginTime;
+
+    // wait at least a second's worth of frames, to update FPS.
+    if (time >= this.prevTime + 1000) {
+      this.lastFPS = this.frames * 1000 / (time - this.prevTime);
+      this.prevTime = time;
+      this.frames = 0;
+    }
+    return time;
+  }
+  update() {
+    this.beginTime = this.end();
+  }
+}