@kitware/vtk.js 25.4.0 → 25.7.0

package/Interaction/Style/InteractorStyleTrackballCamera.js

@@ -218,6 +218,10 @@ function vtkInteractorStyleTrackballCamera(publicAPI, model) {
 
 
   publicAPI.handleMouseRotate = function (renderer, position) {
+    if (!model.previousPosition) {
+      return;
+    }
+
     var rwi = model._interactor;
     var dx = position.x - model.previousPosition.x;
     var dy = position.y - model.previousPosition.y;
@@ -251,6 +255,10 @@ function vtkInteractorStyleTrackballCamera(publicAPI, model) {
 
 
   publicAPI.handleMouseSpin = function (renderer, position) {
+    if (!model.previousPosition) {
+      return;
+    }
+
     var rwi = model._interactor;
     var camera = renderer.getActiveCamera();
     var center = rwi.getView().getViewportCenter(renderer);
@@ -265,6 +273,10 @@ function vtkInteractorStyleTrackballCamera(publicAPI, model) {
 
 
   publicAPI.handleMousePan = function (renderer, position) {
+    if (!model.previousPosition) {
+      return;
+    }
+
     var camera = renderer.getActiveCamera(); // Calculate the focal depth since we'll be using it a lot
 
     var viewFocus = camera.getFocalPoint();
@@ -291,6 +303,10 @@ function vtkInteractorStyleTrackballCamera(publicAPI, model) {
 
 
   publicAPI.handleMouseDolly = function (renderer, position) {
+    if (!model.previousPosition) {
+      return;
+    }
+
     var dy = position.y - model.previousPosition.y;
     var rwi = model._interactor;
     var center = rwi.getView().getViewportCenter(renderer);

package/Proxy/Core/View2DProxy.js

@@ -1,7 +1,7 @@
 import macro from '../../macros.js';
 import vtkMouseRangeManipulator from '../../Interaction/Manipulators/MouseRangeManipulator.js';
 import vtkViewProxy from './ViewProxy.js';
-import { j as cross, F as getMajorAxisIndex } from '../../Common/Core/Math/index.js';
+import { k as cross, F as getMajorAxisIndex } from '../../Common/Core/Math/index.js';
 
 var DEFAULT_STEP_WIDTH = 512;
 

package/Rendering/Core/Actor2D.d.ts

@@ -1,7 +1,7 @@
 import vtkProp, { IPropInitialValues } from './Prop';
 import vtkCoordinate from './Coordinate';
 import vtkMapper from './Mapper';
-import vtkProperty from './Property';
+import vtkProperty2D, { IProperty2DInitialValues } from './Property2D';
 import { Bounds } from './../../types';
 
 /**
@@ -9,7 +9,7 @@ import { Bounds } from './../../types';
  */
 export interface IActor2DInitialValues extends IPropInitialValues {
 	mapper?: vtkMapper;
-	property?: vtkProperty;
+	property?: vtkProperty2D;
 	layerNumber?: number;
 	positionCoordinate?: vtkCoordinate;
 	positionCoordinate2?: vtkCoordinate;
@@ -31,12 +31,18 @@ export interface vtkActor2D extends vtkProp {
 
 	/**
 	 * Return the property object that controls this actors surface
-	 * properties. This should be an instance of a vtkProperty object. Every
+	 * properties. This should be an instance of a vtkProperty2D object. Every
 	 * actor must have a property associated with it. If one isn’t specified,
 	 * then one will be generated automatically. Multiple actors can share one
 	 * property object.
 	 */
-	getProperty(): vtkProperty;
+	getProperty(): vtkProperty2D;
+
+	/**
+	 * Create a new property suitable for use with this type of Actor.
+	 * @param {IProperty2DInitialValues} [initialValues] (default: {})
+	 */
+	 makeProperty(initialValues?: IProperty2DInitialValues): vtkProperty2D;
 
 	/**
 	 * 
@@ -112,8 +118,8 @@ export function newInstance(initialValues?: IActor2DInitialValues): vtkActor2D;
  * vtkProp. The actor also has scaling and maintains a reference to the
  * defining geometry (i.e., the mapper), rendering properties, and possibly a
  * texture map.
- * @see [vtkMapper](./Rendering_Core_Mapper.html)2D
- * @see [vtkProperty](./Rendering_Core_Property.html)2D 
+ * @see [vtkMapper2D](./Rendering_Core_Mapper2D.html)
+ * @see [vtkProperty2D](./Rendering_Core_Property2D.html)
  */
 export declare const vtkActor2D: {
 	newInstance: typeof newInstance,

package/Rendering/Core/Camera.js

@@ -1,7 +1,7 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { mat4, vec4, vec3, quat } from 'gl-matrix';
 import macro from '../../macros.js';
-import { r as radiansFromDegrees, k as add, j as cross } from '../../Common/Core/Math/index.js';
+import { r as radiansFromDegrees, l as add, k as cross } from '../../Common/Core/Math/index.js';
 
 var vtkDebugMacro = macro.vtkDebugMacro;
 /* eslint-disable new-cap */

package/Rendering/Core/CellPicker.js

@@ -5,7 +5,8 @@ import vtkLine from '../../Common/DataModel/Line.js';
 import vtkPicker from './Picker.js';
 import vtkPolyLine from '../../Common/DataModel/PolyLine.js';
 import vtkTriangle from '../../Common/DataModel/Triangle.js';
-import { l as normalize } from '../../Common/Core/Math/index.js';
+import vtkQuad from '../../Common/DataModel/Quad.js';
+import { m as normalize } from '../../Common/Core/Math/index.js';
 import { CellType } from '../../Common/DataModel/CellTypes/Constants.js';
 import { vec3 } from 'gl-matrix';
 
@@ -18,7 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function createCellMap() {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, CellType.VTK_LINE, vtkLine.newInstance()), _defineProperty(_ref, CellType.VTK_POLY_LINE, vtkPolyLine.newInstance()), _defineProperty(_ref, CellType.VTK_TRIANGLE, vtkTriangle.newInstance()), _ref;
+  return _ref = {}, _defineProperty(_ref, CellType.VTK_LINE, vtkLine.newInstance()), _defineProperty(_ref, CellType.VTK_POLY_LINE, vtkPolyLine.newInstance()), _defineProperty(_ref, CellType.VTK_TRIANGLE, vtkTriangle.newInstance()), _defineProperty(_ref, CellType.VTK_QUAD, vtkQuad.newInstance()), _ref;
 }
 
 function clipLineWithPlane(mapper, matrix, p1, p2) {

package/Rendering/Core/ColorTransferFunction/ColorMaps.d.ts

@@ -0,0 +1,24 @@
+/**
+ * vtkColorMaps represents a global registry of preset color maps.
+ */
+
+import { Vector3 } from '../../../types';
+
+export interface IColorMapPreset {
+  Name: string;
+  Creator?: string;
+  ColorSpace?: string;
+  NanColor?: Vector3;
+  RGBPoints: number[];
+  IndexedColors?: number[];
+  Annotations?: (number | string)[];
+}
+
+export declare const vtkColorMaps: {
+  addPreset(preset: IColorMapPreset): void;
+  removePresetByName(name: string): void;
+  getPresetByName(name: string): IColorMapPreset;
+  rgbPresetNames: string[];
+};
+
+export default vtkColorMaps;

package/Rendering/Core/Light.js

@@ -1,5 +1,5 @@
 import macro from '../../macros.js';
-import { l as normalize, r as radiansFromDegrees } from '../../Common/Core/Math/index.js';
+import { m as normalize, r as radiansFromDegrees } from '../../Common/Core/Math/index.js';
 import { vec3 } from 'gl-matrix';
 
 var LIGHT_TYPES = ['HeadLight', 'CameraLight', 'SceneLight']; // ----------------------------------------------------------------------------

package/Rendering/Core/Picker.js

@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import macro from '../../macros.js';
 import vtkAbstractPicker from './AbstractPicker.js';
 import vtkBoundingBox from '../../Common/DataModel/BoundingBox.js';
-import { d as dot, l as normalize, n as norm, f as distance2BetweenPoints } from '../../Common/Core/Math/index.js';
+import { d as dot, m as normalize, n as norm, f as distance2BetweenPoints } from '../../Common/Core/Math/index.js';
 import { mat4, vec4 } from 'gl-matrix';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

package/Rendering/Core/Property2D.d.ts

@@ -2,7 +2,7 @@ import { vtkObject } from './../../interfaces';
 import { RGBColor } from './../../types';
 import { DisplayLocation } from './Property2D/Constants';
 
-interface IProperty2DInitialValues{
+export interface IProperty2DInitialValues{
 	color?: RGBColor;
 	opacity?: number;
 	pointSize?: number;

package/Rendering/Core/VolumeProperty.d.ts

@@ -5,7 +5,7 @@ import { InterpolationType, OpacityMode } from './VolumeProperty/Constants';
 
 export interface IVolumePropertyInitialValues  {
 	independentComponents?: boolean;
-	shade?: number;
+	shade?: boolean;
 	ambient?: number;
 	diffuse?: number;
 	specular?: number;
@@ -111,7 +111,7 @@ export interface vtkVolumeProperty extends vtkObject {
 	/**
 	 * Get the shading of a volume.
 	 */
-	getShade(): number;
+	getShade(): boolean;
 
 	/**
 	 *
@@ -236,9 +236,9 @@ export interface vtkVolumeProperty extends vtkObject {
 	 * turning shading off is generally the same as setting ambient=1,
 	 * diffuse=0, specular=0. Shading can be independently turned on/off per
 	 * component.
-	 * @param {Number} shade 
+	 * @param {Boolean} shade
 	 */
-	setShade(shade: number): boolean;
+	setShade(shade: boolean): boolean;
 
 	/**
 	 *

package/Rendering/Core/VolumeProperty.js

@@ -237,7 +237,7 @@ function vtkVolumeProperty(publicAPI, model) {
 var DEFAULT_VALUES = {
   independentComponents: true,
   interpolationType: InterpolationType.FAST_LINEAR,
-  shade: 0,
+  shade: false,
   ambient: 0.1,
   diffuse: 0.7,
   specular: 0.2,

package/Rendering/OpenGL/PolyDataMapper.js

@@ -3,7 +3,7 @@ import { mat3, mat4, vec3 } from 'gl-matrix';
 import { newInstance as newInstance$1, setGet, obj, vtkErrorMacro as vtkErrorMacro$1 } from '../../macros.js';
 import vtkHelper from './Helper.js';
 import vtkMapper from '../Core/Mapper.js';
-import { l as normalize, u as uninitializeBounds } from '../../Common/Core/Math/index.js';
+import { m as normalize, u as uninitializeBounds } from '../../Common/Core/Math/index.js';
 import vtkOpenGLTexture from './Texture.js';
 import vtkProp from '../Core/Prop.js';
 import vtkProperty from '../Core/Property.js';

package/Rendering/OpenGL/RenderWindow/ContextProxy.js

@@ -0,0 +1,65 @@
+function createContextProxyHandler() {
+  var cache = new Map();
+  var getParameterHandler = {
+    apply: function apply(target, gl, args) {
+      if (cache.has(args[0])) {
+        return cache.get(args[0]);
+      }
+
+      return target.apply(gl, args);
+    }
+  }; // only supports single-value setters
+
+  function cachedSetterHandler(key) {
+    return {
+      apply: function apply(target, gl, args) {
+        cache.set(key, args[0]);
+        return target.apply(gl, args);
+      }
+    };
+  } // When a property is accessed on the webgl context proxy,
+  // it's accessed is intercepted. If the property name matches
+  // any of the keys of `propHandlers`, then that handler is called
+  // with the following arguments: (gl, prop, receiver, propValue)
+  // - gl (WebGL2RenderingContext): the underlying webgl context
+  // - propName (string): the property name
+  // - receiver (Proxy): the webgl context proxy
+  // - propValue (unknown): the value of `gl[propName]`
+
+
+  var propHandlers = Object.create(null); // Sets getParameter(property) as a cached getter proxy.
+  // propValue.bind(gl) is to avoid Illegal Invocation errors.
+
+  propHandlers.getParameter = function (gl, prop, receiver, propValue) {
+    return new Proxy(propValue.bind(gl), getParameterHandler);
+  }; // Sets depthMask(flag) as a cached setter proxy.
+
+
+  propHandlers.depthMask = function (gl, prop, receiver, propValue) {
+    return new Proxy(propValue.bind(gl), cachedSetterHandler(gl.DEPTH_WRITEMASK));
+  };
+
+  return {
+    get: function get(gl, prop, receiver) {
+      var value = Reflect.get(gl, prop, receiver);
+
+      if (value instanceof Function) {
+        // prevents Illegal Invocation errors
+        value = value.bind(gl);
+      }
+
+      var propHandler = propHandlers[prop];
+
+      if (propHandler) {
+        return propHandler(gl, prop, receiver, value);
+      }
+
+      return value;
+    }
+  };
+}
+var ContextProxy = {
+  createContextProxyHandler: createContextProxyHandler
+};
+
+export { createContextProxyHandler, ContextProxy as default };

package/Rendering/OpenGL/RenderWindow.js

@@ -12,6 +12,7 @@ import vtkTextureUnitManager from './TextureUnitManager.js';
 import vtkViewNodeFactory from './ViewNodeFactory.js';
 import vtkRenderPass from '../SceneGraph/RenderPass.js';
 import vtkRenderWindowViewNode from '../SceneGraph/RenderWindowViewNode.js';
+import { createContextProxyHandler } from './RenderWindow/ContextProxy.js';
 
 var vtkDebugMacro = macro.vtkDebugMacro,
     vtkErrorMacro = macro.vtkErrorMacro;
@@ -84,6 +85,7 @@ function popMonitorGLContextCount(cb) {
 function vtkOpenGLRenderWindow(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkOpenGLRenderWindow');
+  var cachingContextHandler = createContextProxyHandler();
 
   publicAPI.getViewNodeFactory = function () {
     return model.myFactory;
@@ -256,7 +258,7 @@ function vtkOpenGLRenderWindow(publicAPI, model) {
       result = model.canvas.getContext('webgl', options) || model.canvas.getContext('experimental-webgl', options);
     }
 
-    return result;
+    return new Proxy(result, cachingContextHandler);
   }; // Request an XR session on the user device with WebXR,
   // typically in response to a user request such as a button press
 

package/Rendering/WebGPU/BufferManager.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { newInstance as newInstance$1, obj, setGet, vtkErrorMacro as vtkErrorMacro$1, newTypedArray } from '../../macros.js';
-import { j as cross, l as normalize } from '../../Common/Core/Math/index.js';
+import { k as cross, m as normalize } from '../../Common/Core/Math/index.js';
 import vtkDataArray from '../../Common/Core/DataArray.js';
 import vtkWebGPUBuffer from './Buffer.js';
 import vtkWebGPUIndexBuffer from './IndexBuffer.js';

package/Rendering/WebGPU/ForwardPass.js

@@ -1,8 +1,14 @@
 import macro from '../../macros.js';
+import vtkWebGPUFullScreenQuad from './FullScreenQuad.js';
 import vtkWebGPUOpaquePass from './OpaquePass.js';
 import vtkWebGPUOrderIndepenentTranslucentPass from './OrderIndependentTranslucentPass.js';
+import vtkWebGPURenderEncoder from './RenderEncoder.js';
 import vtkWebGPUVolumePass from './VolumePass.js';
 import vtkRenderPass from '../SceneGraph/RenderPass.js';
+import vtkWebGPUSampler from './Sampler.js';
+import vtkWebGPUTextureView from './TextureView.js';
+
+var finalBlitFragTemplate = "\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n@fragment\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  var computedColor: vec4<f32> = clamp(textureSampleLevel(opaquePassColorTexture, finalPassSampler, input.tcoordVS, 0),vec4<f32>(0.0),vec4<f32>(1.0));\n\n  //VTK::RenderEncoder::Impl\n  return output;\n}\n"; // ----------------------------------------------------------------------------
 
 function vtkForwardPass(publicAPI, model) {
   // Set our className
@@ -69,24 +75,96 @@ function vtkForwardPass(publicAPI, model) {
             model.volumePass.setDepthTextureView(model.opaquePass.getDepthTextureView());
             model.volumePass.setVolumes(model.volumes);
             model.volumePass.traverse(renNode, viewNode);
-          }
+          } // blit the result into the swap chain
+
+
+          publicAPI.finalPass(viewNode, renNode);
         }
       }
-    } // blit the result into the swap chain
-
-
-    var sctex = viewNode.getCurrentTexture();
-    var optex = model.opaquePass.getColorTexture();
-    var cmdEnc = viewNode.getCommandEncoder();
-    cmdEnc.copyTextureToTexture({
-      texture: optex.getHandle()
-    }, {
-      texture: sctex
-    }, {
-      width: optex.getWidth(),
-      height: optex.getHeight(),
-      depthOrArrayLayers: 1
+    }
+  };
+
+  publicAPI.finalPass = function (viewNode, renNode) {
+    if (!model._finalBlitEncoder) {
+      publicAPI.createFinalBlitEncoder(viewNode);
+    }
+
+    model._finalBlitOutputTextureView.createFromTextureHandle(viewNode.getCurrentTexture(), {
+      depth: 1,
+      format: viewNode.getPresentationFormat()
+    });
+
+    model._finalBlitEncoder.attachTextureViews();
+
+    model._finalBlitEncoder.begin(viewNode.getCommandEncoder());
+
+    renNode.scissorAndViewport(model._finalBlitEncoder);
+
+    model._fullScreenQuad.prepareAndDraw(model._finalBlitEncoder);
+
+    model._finalBlitEncoder.end();
+  };
+
+  publicAPI.createFinalBlitEncoder = function (viewNode) {
+    model._finalBlitEncoder = vtkWebGPURenderEncoder.newInstance({
+      label: 'forwardPassBlit'
+    });
+
+    model._finalBlitEncoder.setDescription({
+      colorAttachments: [{
+        view: null,
+        loadOp: 'load',
+        storeOp: 'store'
+      }]
+    });
+
+    model._finalBlitEncoder.setPipelineHash('fpf');
+
+    model._finalBlitEncoder.setPipelineSettings({
+      primitive: {
+        cullMode: 'none'
+      },
+      fragment: {
+        targets: [{
+          format: viewNode.getPresentationFormat(),
+          blend: {
+            color: {
+              srcFactor: 'src-alpha',
+              dstFactor: 'one-minus-src-alpha'
+            },
+            alpha: {
+              srcfactor: 'one',
+              dstFactor: 'one-minus-src-alpha'
+            }
+          }
+        }]
+      }
+    });
+
+    model._fsqSampler = vtkWebGPUSampler.newInstance({
+      label: 'finalPassSampler'
+    });
+
+    model._fsqSampler.create(viewNode.getDevice(), {
+      minFilter: 'linear',
+      magFilter: 'linear'
     });
+
+    model._fullScreenQuad = vtkWebGPUFullScreenQuad.newInstance();
+
+    model._fullScreenQuad.setDevice(viewNode.getDevice());
+
+    model._fullScreenQuad.setPipelineHash('fpfsq');
+
+    model._fullScreenQuad.setTextureViews([model.opaquePass.getColorTextureView()]);
+
+    model._fullScreenQuad.setAdditionalBindables([model._fsqSampler]);
+
+    model._fullScreenQuad.setFragmentShaderTemplate(finalBlitFragTemplate);
+
+    model._finalBlitOutputTextureView = vtkWebGPUTextureView.newInstance();
+
+    model._finalBlitEncoder.setColorTextureView(0, model._finalBlitOutputTextureView);
   };
 
   publicAPI.incrementOpaqueActorCount = function () {

package/Rendering/WebGPU/OpaquePass.js

@@ -27,7 +27,7 @@ function vtkWebGPUOpaquePass(publicAPI, model) {
       model.colorTexture.create(device, {
         width: viewNode.getCanvas().width,
         height: viewNode.getCanvas().height,
-        format: 'bgra8unorm',
+        format: 'rgba16float',
 
         /* eslint-disable no-undef */
 

package/Rendering/WebGPU/OrderIndependentTranslucentPass.js

@@ -184,7 +184,7 @@ function vtkWebGPUOrderIndependentTranslucentPass(publicAPI, model) {
       },
       fragment: {
         targets: [{
-          format: 'bgra8unorm',
+          format: 'rgba16float',
           blend: {
             color: {
               srcFactor: 'src-alpha',

package/Rendering/WebGPU/RenderEncoder.js

@@ -51,9 +51,11 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
       console.trace();
     } else {
       for (var i = 0; i < model.colorTextureViews.length; i++) {
-        var fmt = model.colorTextureViews[i].getTexture().getFormat();
+        var _model$colorTextureVi;
 
-        if (fmt !== pd.fragment.targets[i].format) {
+        var fmt = (_model$colorTextureVi = model.colorTextureViews[i].getTexture()) === null || _model$colorTextureVi === void 0 ? void 0 : _model$colorTextureVi.getFormat();
+
+        if (fmt && fmt !== pd.fragment.targets[i].format) {
           console.log("mismatched attachments for attachment ".concat(i, " on pipeline ").concat(pd.fragment.targets[i].format, " while encoder has ").concat(fmt));
           console.trace();
         }
@@ -65,9 +67,11 @@ function vtkWebGPURenderEncoder(publicAPI, model) {
       console.log('mismatched depth attachments');
       console.trace();
     } else if (model.depthTextureView) {
-      var dfmt = model.depthTextureView.getTexture().getFormat();
+      var _model$depthTextureVi;
+
+      var dfmt = (_model$depthTextureVi = model.depthTextureView.getTexture()) === null || _model$depthTextureVi === void 0 ? void 0 : _model$depthTextureVi.getFormat();
 
-      if (dfmt !== pd.depthStencil.format) {
+      if (dfmt && dfmt !== pd.depthStencil.format) {
         console.log("mismatched depth attachments on pipeline ".concat(pd.depthStencil.format, " while encoder has ").concat(dfmt));
         console.trace();
       }
@@ -202,7 +206,7 @@ function extend(publicAPI, model) {
     },
     fragment: {
       targets: [{
-        format: 'bgra8unorm',
+        format: 'rgba16float',
         blend: {
           color: {
             srcFactor: 'src-alpha',

package/Rendering/WebGPU/RenderWindow.js

@@ -9,6 +9,7 @@ import vtkWebGPUHardwareSelector from './HardwareSelector.js';
 import vtkWebGPUViewNodeFactory from './ViewNodeFactory.js';
 import vtkRenderPass from '../SceneGraph/RenderPass.js';
 import vtkRenderWindowViewNode from '../SceneGraph/RenderWindowViewNode.js';
+import HalfFloat from '../../Common/Core/HalfFloat.js';
 
 var vtkErrorMacro = macro.vtkErrorMacro; // const IS_CHROME = navigator.userAgent.indexOf('Chrome') !== -1;
 
@@ -67,14 +68,14 @@ function vtkWebGPURenderWindow(publicAPI, model) {
   publicAPI.recreateSwapChain = function () {
     if (model.context) {
       model.context.unconfigure();
-      var presentationFormat = navigator.gpu.getPreferredCanvasFormat(model.adapter);
+      model.presentationFormat = navigator.gpu.getPreferredCanvasFormat(model.adapter);
       /* eslint-disable no-undef */
 
       /* eslint-disable no-bitwise */
 
       model.context.configure({
         device: model.device.getHandle(),
-        format: presentationFormat,
+        format: model.presentationFormat,
         alphaMode: 'premultiplied',
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
         width: model.size[0],
@@ -545,10 +546,10 @@ function vtkWebGPURenderWindow(publicAPI, model) {
             result = {
               width: texture.getWidth(),
               height: texture.getHeight()
-            }; // must be a multiple of 256 bytes, so 64 texels with rgba8
+            }; // must be a multiple of 256 bytes, so 32 texels with rgba16
 
-            result.colorBufferWidth = 64 * Math.floor((result.width + 63) / 64);
-            result.colorBufferSizeInBytes = result.colorBufferWidth * result.height * 4;
+            result.colorBufferWidth = 32 * Math.floor((result.width + 31) / 32);
+            result.colorBufferSizeInBytes = result.colorBufferWidth * result.height * 8;
             colorBuffer = vtkWebGPUBuffer.newInstance();
             colorBuffer.setDevice(device);
             /* eslint-disable no-bitwise */
@@ -565,7 +566,7 @@ function vtkWebGPURenderWindow(publicAPI, model) {
               texture: texture.getHandle()
             }, {
               buffer: colorBuffer.getHandle(),
-              bytesPerRow: 4 * result.colorBufferWidth,
+              bytesPerRow: 8 * result.colorBufferWidth,
               rowsPerImage: result.height
             }, {
               width: result.width,
@@ -581,7 +582,7 @@ function vtkWebGPURenderWindow(publicAPI, model) {
 
           case 14:
             /* eslint-enable no-undef */
-            result.colorValues = new Uint8ClampedArray(colorBuffer.getMappedRange().slice());
+            result.colorValues = new Uint16Array(colorBuffer.getMappedRange().slice());
             colorBuffer.unmap(); // repack the array
 
             tmparray = new Uint8ClampedArray(result.height * result.width * 4);
@@ -590,10 +591,10 @@ function vtkWebGPURenderWindow(publicAPI, model) {
               for (x = 0; x < result.width; x++) {
                 doffset = (y * result.width + x) * 4;
                 soffset = (y * result.colorBufferWidth + x) * 4;
-                tmparray[doffset] = result.colorValues[soffset + 2];
-                tmparray[doffset + 1] = result.colorValues[soffset + 1];
-                tmparray[doffset + 2] = result.colorValues[soffset];
-                tmparray[doffset + 3] = result.colorValues[soffset + 3];
+                tmparray[doffset] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset]);
+                tmparray[doffset + 1] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset + 1]);
+                tmparray[doffset + 2] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset + 2]);
+                tmparray[doffset + 3] = 255.0 * HalfFloat.fromHalf(result.colorValues[soffset + 3]);
               }
             }
 
@@ -635,7 +636,8 @@ var DEFAULT_VALUES = {
   useOffScreen: false,
   useBackgroundImage: false,
   nextPropID: 1,
-  xrSupported: false
+  xrSupported: false,
+  presentationFormat: null
 }; // ----------------------------------------------------------------------------
 
 function extend(publicAPI, model) {
@@ -671,7 +673,7 @@ function extend(publicAPI, model) {
   macro.event(publicAPI, model, 'imageReady');
   macro.event(publicAPI, model, 'initialized'); // Build VTK API
 
-  macro.get(publicAPI, model, ['commandEncoder', 'device', 'useBackgroundImage', 'xrSupported']);
+  macro.get(publicAPI, model, ['commandEncoder', 'device', 'presentationFormat', 'useBackgroundImage', 'xrSupported']);
   macro.setGet(publicAPI, model, ['initialized', 'context', 'canvas', 'device', 'renderPasses', 'notifyStartCaptureImage', 'cursor', 'useOffScreen']);
   macro.setGetArray(publicAPI, model, ['size'], 2); // Object methods
 

package/Rendering/WebGPU/TextureView.js

@@ -23,6 +23,19 @@ function vtkWebGPUTextureView(publicAPI, model) {
     model.bindGroupLayoutEntry.texture.sampleType = tDetails.sampleType;
   };
 
+  publicAPI.createFromTextureHandle = function (textureHandle, options) {
+    model.texture = null;
+    model.options = options;
+    model.options.dimension = model.options.dimension || '2d';
+    model.options.label = model.label;
+    model.textureHandle = textureHandle;
+    model.handle = model.textureHandle.createView(model.options);
+    model.bindGroupLayoutEntry.texture.viewDimension = model.options.dimension;
+    var tDetails = vtkWebGPUTypes.getDetailsFromTextureFormat(options.format);
+    model.bindGroupLayoutEntry.texture.sampleType = tDetails.sampleType;
+    model.bindGroupTime.modified();
+  };
+
   publicAPI.getBindGroupEntry = function () {
     var foo = {
       resource: publicAPI.getHandle()
@@ -58,7 +71,7 @@ function vtkWebGPUTextureView(publicAPI, model) {
 
   publicAPI.getBindGroupTime = function () {
     // check if the handle changed
-    if (model.texture.getHandle() !== model.textureHandle) {
+    if (model.texture && model.texture.getHandle() !== model.textureHandle) {
       model.textureHandle = model.texture.getHandle();
       model.handle = model.textureHandle.createView(model.options);
       model.bindGroupTime.modified();
@@ -69,7 +82,7 @@ function vtkWebGPUTextureView(publicAPI, model) {
 
 
   publicAPI.getHandle = function () {
-    if (model.texture.getHandle() !== model.textureHandle) {
+    if (model.texture && model.texture.getHandle() !== model.textureHandle) {
       model.textureHandle = model.texture.getHandle();
       model.handle = model.textureHandle.createView(model.options);
       model.bindGroupTime.modified();

package/Rendering/WebGPU/VolumePass.js

@@ -560,7 +560,7 @@ function vtkWebGPUVolumePass(publicAPI, model) {
       },
       fragment: {
         targets: [{
-          format: 'bgra8unorm',
+          format: 'rgba16float',
           blend: {
             color: {
               srcFactor: 'one',