Merge pull request #452 from Kitware/webvr_support

feat(Rendering): Add initial support for WebVR

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
   // ],
   globals: {
     __BASE_PATH__: false,
+    VRFrameData: true,
   },
   'settings': {
     'import/resolver': 'webpack'

Examples/Geometry/VR/controller.html

@@ -0,0 +1,21 @@
+<table>
+  <tr>
+    <td>
+      <button class='vrbutton' style="width: 100%">Send To VR</button>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <select class='representations' style="width: 100%">
+        <option value='0'>Points</option>
+        <option value='1'>Wireframe</option>
+        <option value='2' selected>Surface</option>
+      </select>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <input class='resolution' type='range' min='4' max='80' value='6' />
+    </td>
+  </tr>
+</table>

Examples/Geometry/VR/index.js

@@ -0,0 +1,101 @@
+import 'vtk.js/Sources/favicon';
+
+import vtkActor                  from 'vtk.js/Sources/Rendering/Core/Actor';
+import vtkCalculator             from 'vtk.js/Sources/Filters/General/Calculator';
+import vtkConeSource             from 'vtk.js/Sources/Filters/Sources/ConeSource';
+import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
+import vtkMapper                 from 'vtk.js/Sources/Rendering/Core/Mapper';
+import { AttributeTypes }        from 'vtk.js/Sources/Common/DataModel/DataSetAttributes/Constants';
+import { FieldDataTypes }        from 'vtk.js/Sources/Common/DataModel/DataSet/Constants';
+
+import controlPanel from './controller.html';
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ background: [0, 0, 0] });
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
+
+// ----------------------------------------------------------------------------
+// Example code
+// ----------------------------------------------------------------------------
+// create a filter on the fly, sort of cool, this is a random scalars
+// filter we create inline, for a simple cone you would not need
+// this
+// ----------------------------------------------------------------------------
+
+const coneSource = vtkConeSource.newInstance({ height: 100.0, radius: 50.0 });
+// const coneSource = vtkConeSource.newInstance({ height: 1.0, radius: 0.5 });
+const filter = vtkCalculator.newInstance();
+
+filter.setInputConnection(coneSource.getOutputPort());
+// filter.setFormulaSimple(FieldDataTypes.CELL, [], 'random', () => Math.random());
+filter.setFormula({
+  getArrays: inputDataSets => ({
+    input: [],
+    output: [
+      { location: FieldDataTypes.CELL, name: 'Random', dataType: 'Float32Array', attribute: AttributeTypes.SCALARS },
+    ],
+  }),
+  evaluate: (arraysIn, arraysOut) => {
+    const [scalars] = arraysOut.map(d => d.getData());
+    for (let i = 0; i < scalars.length; i++) {
+      scalars[i] = Math.random();
+    }
+  },
+});
+
+const mapper = vtkMapper.newInstance();
+mapper.setInputConnection(filter.getOutputPort());
+
+const actor = vtkActor.newInstance();
+actor.setMapper(mapper);
+actor.setPosition(20.0, 0.0, 0.0);
+
+renderer.addActor(actor);
+renderer.resetCamera();
+renderWindow.render();
+
+// -----------------------------------------------------------
+// UI control handling
+// -----------------------------------------------------------
+
+fullScreenRenderer.addController(controlPanel);
+const representationSelector = document.querySelector('.representations');
+const resolutionChange = document.querySelector('.resolution');
+const vrbutton = document.querySelector('.vrbutton');
+
+representationSelector.addEventListener('change', (e) => {
+  const newRepValue = Number(e.target.value);
+  actor.getProperty().setRepresentation(newRepValue);
+  renderWindow.render();
+});
+
+resolutionChange.addEventListener('input', (e) => {
+  const resolution = Number(e.target.value);
+  coneSource.setResolution(resolution);
+  renderWindow.render();
+});
+
+vrbutton.addEventListener('click', (e) => {
+  if (vrbutton.textContent === 'Send To VR') {
+    fullScreenRenderer.getOpenGLRenderWindow().startVR();
+    vrbutton.textContent = 'Return From VR';
+  } else {
+    fullScreenRenderer.getOpenGLRenderWindow().stopVR();
+    vrbutton.textContent = 'Send To VR';
+  }
+});
+
+// -----------------------------------------------------------
+// Make some variables global so that you can inspect and
+// modify objects in your browser's developer console:
+// -----------------------------------------------------------
+
+global.source = coneSource;
+global.mapper = mapper;
+global.actor = actor;
+global.renderer = renderer;
+global.renderWindow = renderWindow;

Sources/Interaction/Style/InteractorStyleTrackballCamera/index.js

@@ -1,7 +1,9 @@
 import macro              from 'vtk.js/Sources/macro';
 import vtkInteractorStyle from 'vtk.js/Sources/Rendering/Core/InteractorStyle';
 import vtkMath            from 'vtk.js/Sources/Common/Core/Math';
-import { States }         from 'vtk.js/Sources/Rendering/Core/InteractorStyle/Constants';
+import { Device, Input }  from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor/Constants';
+
+const { States } = vtkInteractorStyle;
 
 /* eslint-disable no-lonely-if */
 
@@ -47,6 +49,61 @@ function vtkInteractorStyleTrackballCamera(publicAPI, model) {
     }
   };
 
+  publicAPI.handleButton3D = (arg) => {
+    const ed = arg.calldata;
+    publicAPI.findPokedRenderer(0, 0);
+    if (model.currentRenderer === null) {
+      return;
+    }
+
+    if (ed && ed.pressed &&
+        ed.device === Device.RightController &&
+        ed.input === Input.TrackPad) {
+      publicAPI.startCameraPose();
+      publicAPI.setAnimationStateOn();
+      return;
+    }
+    if (ed && !ed.pressed &&
+        ed.device === Device.RightController &&
+        ed.input === Input.TrackPad &&
+        model.state === States.IS_CAMERA_POSE) {
+      publicAPI.endCameraPose();
+      publicAPI.setAnimationStateOff();
+      // return;
+    }
+  };
+
+  publicAPI.handleMove3D = (arg) => {
+    const ed = arg.calldata;
+    switch (model.state) {
+      case States.IS_CAMERA_POSE:
+        publicAPI.updateCameraPose(ed);
+        break;
+      default:
+    }
+  };
+
+  publicAPI.updateCameraPose = (ed) => {
+    // move the world in the direction of the
+    // controller
+    const camera = model.currentRenderer.getActiveCamera();
+    const oldTrans = camera.getPhysicalTranslation();
+
+    // look at the y axis to determine how fast / what direction to move
+    const speed = ed.gamepad.axes[1];
+
+    // 0.05 meters / frame movement
+    const pscale = speed * 0.05 / camera.getPhysicalScale();
+
+    // convert orientation to world coordinate direction
+    const dir = camera.physicalOrientationToWorldDirection(ed.orientation);
+
+    camera.setPhysicalTranslation(
+      oldTrans[0] + (dir[0] * pscale),
+      oldTrans[1] + (dir[1] * pscale),
+      oldTrans[2] + (dir[2] * pscale));
+  };
+
   //----------------------------------------------------------------------------
   publicAPI.handleLeftButtonPress = () => {
     const pos = model.interactor.getEventPosition(model.interactor.getPointerIndex());