Release v34

Major changes:
- #3239
- #3224
- #3171
- #3159
- #3158
- #3157

Author: floryst

BREAKING_CHANGES.md

@@ -1,3 +1,13 @@
+## From 33.x to 34
+
+- **vtkMapper**: many properties have moved to `vtkVolumeProperty`. The full list of changed methods is: `getAnisotropy`, `getComputeNormalFromOpacity`, `getFilterMode`, `getFilterModeAsString`, `getGlobalIlluminationReach`, `getIpScalarRange`, `getIpScalarRangeByReference`, `getLAOKernelRadius`, `getLAOKernelSize`, `getLocalAmbientOcclusion`, `getPreferSizeOverAccuracy`, `getVolumetricScatteringBlending`, `setAnisotropy`, `setAverageIPScalarRange`, `setComputeNormalFromOpacity`, `setFilterMode`, `setFilterModeToNormalized`, `setFilterModeToOff`, `setFilterModeToRaw`, `setGlobalIlluminationReach`, `setIpScalarRange`, `setIpScalarRangeFrom`, `setLAOKernelRadius`, `setLAOKernelSize`, `setLocalAmbientOcclusion`, `setPreferSizeOverAccuracy`, `setVolumetricScatteringBlending`.
+- **vtkRenderWindowInteractor**: KeyPress, KeyDown and KeyUp events are now observed on the container and no longer on the document. "tabIndex=0" is now automatically added on RWI containers to give focus on your render windows and catch key events. Check the KeyPressEvents example for usage.
+- **vtkOpenGLTexture**: The public `create2D*` and `create3D*` methods used to have positional parameters. These methods now use named parameters via passing in an object record.
+
+## From 32.x to 33
+
+- **vtkColorTransferFunction**, **vtkMapper**: Previous log scaling was disabled but functionality is now quite different from what it maybe was before it was disabled. ColorTransfer function now maps the model.nodes in logarithmic scales so there's an even spacing between powers of ten.
+
 ## From 31.x to 32
 
 - **vtkMapper**: remove `mapScalarsToTexture` from the public API. The function becomes protected and its API changes. This shouldn't cause any issue in most cases.

Documentation/content/docs/gallery/KeyPresEvents.jpg

@@ -326,6 +326,7 @@ This will allow you to see the some live code running in your browser. Just pick
 [![InteractorStyleTrackballCamera Example][InteractorStyleTrackballCamera]](./InteractorStyleTrackballCamera.html "InteractorStyleTrackballCamera")
 [![InteractorStyleUnicam Example][InteractorStyleUnicam]](./InteractorStyleUnicam.html "InteractorStyleUnicam")
 [![KeyboardCameraManipulator Example][KeyboardCameraManipulator]](./KeyboardCameraManipulator.html "KeyboardCameraManipulator")
+[![KeyPressEvents Example][KeyPressEvents]](./KeyPressEvents.html "KeyPressEvents")
 [![MouseRangeManipulator Example][MouseRangeManipulator]](./MouseRangeManipulator.html "MouseRangeManipulator")
 [![PiecewiseGaussianWidget Example][PiecewiseGaussianWidget]](./PiecewiseGaussianWidget.html "PiecewiseGaussianWidget")
 [![TimeStepBasedAnimationHandler Example][TimeStepBasedAnimationHandler]](./TimeStepBasedAnimationHandler.html "TimeStepBasedAnimationHandler")

Documentation/content/examples/index.md

@@ -0,0 +1,51 @@
+<style>
+    #view-1:focus {
+      outline: none; /* remove default */
+      box-shadow: 0 0 20px 10px rgba(0, 255, 0, 0.6); /* red glow */
+      z-index: 1; /* move forward (works only if position!=static) */
+      position: relative;
+    }
+    #view-2:focus, #view-2:focus-visible {
+      outline: none; /* remove default */
+    }
+
+    input:focus {
+      outline: none;
+      border: 2px solid teal;
+      box-shadow: 0 0 4px teal;
+    }
+
+    /* Optional: Use focus-visible for keyboard-only styling */
+    select:focus-visible {
+      outline: 3px dashed orange;
+    }
+  </style>
+<h3>Click or press tab until you "focus" a render window, then type keys (e.g. r, w, s)</h3>
+<table>
+  <tr>
+    <td>Click with mouse then press space key:</td>
+    <td>
+      <input type="checkbox" id="checkboxTranslation" checked>
+    </td>
+  </tr>
+  <tr>
+    <td>Click then key up and down :</td>
+    <td><input id='slider' type="range" min="0" max="255" step="1" value="255" style="width: 100px;"/></td>
+  </tr>
+  <tr>
+    <td>Use key up and down to browse through:</td>
+    <td>
+      <select id="select">
+        <option>One</option>
+        <option>Two</option>
+        <option selected="selected">Three</option>
+        <option>Four</option>
+      </select>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <button id="buttonReset">Click and press space key</button>
+    </td>
+  </tr>
+</table>

Examples/Rendering/KeyPressEvents/controlPanel.html

@@ -0,0 +1,65 @@
+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 vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
+import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+
+import controlPanel from './controlPanel.html';
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const container = document.querySelector('body');
+const controlContainer = document.createElement('div');
+controlContainer.innerHTML = controlPanel;
+container.appendChild(controlContainer);
+
+global.RWIs = [];
+
+const logs = document.createElement('pre');
+
+const cone = vtkConeSource.newInstance();
+
+for (let i = 0; i < 3; ++i) {
+  const elementParent = document.createElement('div');
+  elementParent.style.width = '33%';
+  elementParent.style.height = '300px';
+  elementParent.style.display = 'inline-block';
+
+  const element = document.createElement('div');
+  element.setAttribute('id', `view-${i}`);
+  element.style.width = '100%';
+  element.style.height = '100%';
+  element.tabIndex = 0;
+  elementParent.appendChild(element);
+
+  container.appendChild(elementParent);
+
+  const grw = vtkGenericRenderWindow.newInstance();
+
+  const color = [0, 0, 0];
+  color[i % 3] = 1;
+  grw.getRenderer().setBackground(color);
+
+  const mapper = vtkMapper.newInstance();
+  mapper.setInputConnection(cone.getOutputPort());
+  const actor = vtkActor.newInstance();
+  actor.setMapper(mapper);
+  grw.getRenderer().addActor(actor);
+  grw.getRenderer().resetCamera();
+
+  grw.setContainer(element);
+  grw.resize();
+
+  global.RWIs.push(grw.getInteractor());
+  // Pick on mouse right click
+  grw.getInteractor().onKeyDown((callData) => {
+    logs.textContent += `Pressed ${callData.key} on RWI #${i}\n`;
+  });
+}
+container.appendChild(logs);

Examples/Rendering/KeyPressEvents/index.js

@@ -44,25 +44,24 @@ function createVolumeActor(imageData) {
   // Create and setup the mapper
   const mapper = vtkVolumeMapper.newInstance();
   mapper.setSampleDistance(0.7);
-  mapper.setVolumetricScatteringBlending(0);
-  mapper.setLocalAmbientOcclusion(0);
-  mapper.setLAOKernelSize(10);
-  mapper.setLAOKernelRadius(5);
-  mapper.setComputeNormalFromOpacity(true);
   mapper.setInputData(imageData);
 
   // Create and setup the actor
   const actor = vtkVolume.newInstance();
-  actor
-    .getProperty()
-    .setRGBTransferFunction(0, getRandomColorTransferFunction());
-  actor.getProperty().setScalarOpacity(0, sharedOpacityFunction);
-  actor.getProperty().setInterpolationTypeToLinear();
-  actor.getProperty().setShade(true);
-  actor.getProperty().setAmbient(0.3);
-  actor.getProperty().setDiffuse(0.8);
-  actor.getProperty().setSpecular(1);
-  actor.getProperty().setSpecularPower(8);
+  const actorProperty = actor.getProperty();
+  actorProperty.setComputeNormalFromOpacity(true);
+  actorProperty.setLAOKernelRadius(5);
+  actorProperty.setLAOKernelSize(10);
+  actorProperty.setLocalAmbientOcclusion(0);
+  actorProperty.setVolumetricScatteringBlending(0);
+  actorProperty.setRGBTransferFunction(0, getRandomColorTransferFunction());
+  actorProperty.setScalarOpacity(0, sharedOpacityFunction);
+  actorProperty.setInterpolationTypeToLinear();
+  actorProperty.setShade(true);
+  actorProperty.setAmbient(0.3);
+  actorProperty.setDiffuse(0.8);
+  actorProperty.setSpecular(1);
+  actorProperty.setSpecularPower(8);
   actor.setMapper(mapper);
 
   return actor;

Examples/Rendering/ManyRenderWindows/index.js

@@ -158,28 +158,27 @@ function createVolumeView(renderer, source) {
         .reduce((a, b) => a + b, 0)
     );
   mapper.setSampleDistance(sampleDistance / 2.5);
-  mapper.setComputeNormalFromOpacity(false);
-  mapper.setGlobalIlluminationReach(0.0);
-  mapper.setVolumetricScatteringBlending(0.5);
   mapper.setVolumeShadowSamplingDistFactor(5.0);
 
   // Set volume properties
   const volProp = vtkVolumeProperty.newInstance();
+  volProp.setComputeNormalFromOpacity(false);
+  volProp.setGlobalIlluminationReach(0.0);
+  volProp.setVolumetricScatteringBlending(0.5);
   volProp.setInterpolationTypeToLinear();
-  volume
-    .getProperty()
-    .setScalarOpacityUnitDistance(
-      0,
-      vtkBoundingBox.getDiagonalLength(source.getBounds()) /
-        Math.max(...source.getDimensions())
-    );
+  volProp.setScalarOpacityUnitDistance(
+    0,
+    vtkBoundingBox.getDiagonalLength(source.getBounds()) /
+      Math.max(...source.getDimensions())
+  );
   volProp.setGradientOpacityMinimumValue(0, 0);
   const dataArray =
     source.getPointData().getScalars() || source.getPointData().getArrays()[0];
   const dataRange = dataArray.getRange();
-  volume
-    .getProperty()
-    .setGradientOpacityMaximumValue(0, (dataRange[1] - dataRange[0]) * 0.05);
+  volProp.setGradientOpacityMaximumValue(
+    0,
+    (dataRange[1] - dataRange[0]) * 0.05
+  );
   volProp.setShade(true);
   volProp.setUseGradientOpacity(0, false);
   volProp.setGradientOpacityMinimumOpacity(0, 0.0);

Examples/Rendering/QuadView/index.js

@@ -40,11 +40,12 @@ const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
 const initialSampleDistance = 1.3;
 
 const actor = vtkVolume.newInstance();
+const actorProperty = actor.getProperty();
 const mapper = vtkVolumeMapper.newInstance();
 mapper.setSampleDistance(initialSampleDistance);
 
 // use half float at the cost of precision to save memory
-mapper.setPreferSizeOverAccuracy(true);
+actorProperty.setPreferSizeOverAccuracy(true);
 
 actor.setMapper(mapper);
 
@@ -125,16 +126,16 @@ function updateSampleDistance(event) {
 }
 
 function updateScalarMin(event) {
-  mapper.setIpScalarRange(
+  actorProperty.setIpScalarRange(
     event.target.valueAsNumber,
-    mapper.getIpScalarRange()[1]
+    actorProperty.getIpScalarRange()[1]
   );
   renderWindow.render();
 }
 
 function updateScalarMax(event) {
-  mapper.setIpScalarRange(
-    mapper.getIpScalarRange()[0],
+  actorProperty.setIpScalarRange(
+    actorProperty.getIpScalarRange()[0],
     event.target.valueAsNumber
   );
   renderWindow.render();
@@ -146,7 +147,7 @@ function updateBlendMode(event) {
   const radonScalars = document.querySelectorAll('.radonScalar');
 
   mapper.setBlendMode(currentBlendMode);
-  mapper.setIpScalarRange(0.0, 1.0);
+  actorProperty.setIpScalarRange(0.0, 1.0);
 
   // if average or additive blend mode
   for (let i = 0; i < ipScalarEls.length; i += 1) {