vtk.js

DeviceOrientationToCamera

Live example

Source

import '@kitware/vtk.js/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/Geometry';

import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper'; // HTTP + zip

import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkHttpDataSetReader from '@kitware/vtk.js/IO/Core/HttpDataSetReader';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkCubeSource from '@kitware/vtk.js/Filters/Sources/CubeSource';
import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture';
import vtkDeviceOrientationToCamera from '@kitware/vtk.js/Interaction/Misc/DeviceOrientationToCamera';

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
  background: [0, 0, 0],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
const interactor = fullScreenRenderer.getInteractor();

// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------

let cameraListenerId = -1;

let nbTextureLoaded = 0;
const texture = vtkTexture.newInstance();
const texturePathList = [
  `${__BASE_PATH__}/data/skybox/mountains/right.jpg`,
  `${__BASE_PATH__}/data/skybox/mountains/left.jpg`,
  `${__BASE_PATH__}/data/skybox/mountains/top.jpg`,
  `${__BASE_PATH__}/data/skybox/mountains/bottom.jpg`,
  `${__BASE_PATH__}/data/skybox/mountains/front.jpg`,
  `${__BASE_PATH__}/data/skybox/mountains/back.jpg`,
];

const cube = vtkCubeSource.newInstance();
cube.setGenerate3DTextureCoordinates(true);

const mapper = vtkMapper.newInstance();
mapper.setInputConnection(cube.getOutputPort());

const actor = vtkActor.newInstance();
actor.getProperty().setDiffuse(0.0);
actor.getProperty().setAmbient(1.0);
actor.setMapper(mapper);
actor.addTexture(texture);

function render() {
  renderer.resetCameraClippingRange();
  renderWindow.render();
}

function dataReady() {
  const bounds = renderer.computeVisiblePropBounds();
  const scale = 500;
  cube.setBounds(
    bounds[0] * scale,
    bounds[1] * scale,
    bounds[2] * scale,
    bounds[3] * scale,
    bounds[4] * scale,
    bounds[5] * scale
  );
  renderer.addActor(actor);

  renderer.getActiveCamera().setPhysicalViewUp(0, -1, 0);
  renderer.getActiveCamera().setPhysicalViewNorth(0, 0, 1);
  renderer.getActiveCamera().setFocalPoint(0, 0, 1);
  renderer.getActiveCamera().setPosition(0, 0, -50);
  renderer.getActiveCamera().setViewAngle(80);
  renderer.resetCameraClippingRange();
  render();
}

function loadTexture(url, index) {
  const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
  reader.setUrl(url, { loadData: true }).then(() => {
    const dataset = reader.getOutputData();
    const scalarName = dataset.getPointData().getArrayByIndex(0).getName();
    dataset.getPointData().setActiveScalars(scalarName);
    texture.setInputData(dataset, index);
    nbTextureLoaded += 1;
    if (nbTextureLoaded === texturePathList.length) {
      dataReady();
    }
  });
}

/* eslint-disable no-alert */

function validateMotionDetectionAgain() {
  if (!vtkDeviceOrientationToCamera.isDeviceOrientationSupported()) {
    vtkDeviceOrientationToCamera.removeCameraToSynchronize(cameraListenerId);
    vtkDeviceOrientationToCamera.removeWindowListeners();
    alert('No motion have been detected. Freeing the camera.');
  }
}

// Trigger the loading of the texture in parallel
texturePathList.forEach(loadTexture);

// If device support motion bind it to the camera
if (vtkDeviceOrientationToCamera.isDeviceOrientationSupported()) {
  vtkDeviceOrientationToCamera.addWindowListeners();
  cameraListenerId = vtkDeviceOrientationToCamera.addCameraToSynchronize(
    interactor,
    renderer.getActiveCamera(),
    renderer.resetCameraClippingRange
  );
} else {
  alert(
    'Your device does not support motion detection so regular interaction will be available'
  );
}

/* eslint-enable no-alert */

setTimeout(validateMotionDetectionAgain, 100);