@kitware/vtk.js 22.1.7 → 22.2.2

package/Rendering/OpenGL/RenderWindow.d.ts

@@ -3,6 +3,7 @@ import { Size, Vector2, Vector3 } from '@kitware/vtk.js/types';
 import { vtkRenderer } from '@kitware/vtk.js/Rendering/Core/Renderer';
 import { VtkDataTypes } from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture';
+import vtkViewStream from '@kitware/vtk.js/IO/Core/ImageStream/ViewStream';
 
 /**
  *
@@ -18,7 +19,7 @@ export interface IOptions {
 	resetCamera: boolean,
 	size: Size,
 	scale: number
-} 
+}
 
 type vtkOpenGLRenderWindowBase = vtkObject & Omit<vtkAlgorithm,
 	| 'getInputData'
@@ -32,7 +33,7 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 
 	/**
 	 * Builds myself.
-	 * @param {Boolean} prepass 
+	 * @param {Boolean} prepass
 	 */
 	buildPass(prepass: boolean): void;
 
@@ -45,12 +46,12 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 	initialize(): void;
 
 	/**
-	 * 
+	 *
 	 */
 	makeCurrent(): void;
 
 	/**
-	 * 
+	 *
 	 * @param {HTMLElement} el The container element.
 	 */
 	setContainer(el: HTMLElement): void;
@@ -91,170 +92,170 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 	getViewportCenter(viewport: vtkRenderer): Vector2;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
 	 */
 	displayToNormalizedDisplay(x: number, y: number, z: number): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
 	 */
 	normalizedDisplayToDisplay(x: number, y: number, z: number): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	worldToView(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	viewToWorld(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	worldToDisplay(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	displayToWorld(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	normalizedDisplayToViewport(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	viewportToNormalizedViewport(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
 	 */
 	normalizedViewportToViewport(x: number, y: number, z: number): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
 	 */
 	displayToLocalDisplay(x: number, y: number, z: number): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
-	 * @param {Number} z 
-	 * @param {vtkRenderer} renderer 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
+	 * @param {Number} z
+	 * @param {vtkRenderer} renderer
 	 */
 	viewportToNormalizedDisplay(x: number, y: number, z: number, renderer: vtkRenderer): Vector3;
 
 	/**
-	 * 
-	 * @param {Number} x1 
-	 * @param {Number} y1 
-	 * @param {Number} x2 
-	 * @param {Number} y2 
+	 *
+	 * @param {Number} x1
+	 * @param {Number} y1
+	 * @param {Number} x2
+	 * @param {Number} y2
 	 */
 	getPixelData(x1: number, y1: number, x2: number, y2: number): Uint8Array;
 
 	/**
-	 * 
-	 * @param options 
+	 *
+	 * @param options
 	 */
 	get3DContext(options: object): WebGLRenderingContext | null;
 
 	/**
-	 * 
+	 *
 	 */
 	startVR(): void;
 
 	/**
-	 * 
+	 *
 	 */
 	stopVR(): void;
 
 	/**
-	 * 
+	 *
 	 */
 	vrRender(): void;
 
 	/**
-	 * 
+	 *
 	 */
 	restoreContext(): void;
 
 	/**
-	 * 
-	 * @param {vtkTexture} texture 
+	 *
+	 * @param {vtkTexture} texture
 	 */
 	activateTexture(texture: vtkTexture): void;
 
 	/**
-	 * 
-	 * @param {vtkTexture} texture 
+	 *
+	 * @param {vtkTexture} texture
 	 */
 	deactivateTexture(texture: vtkTexture): void;
 
 	/**
-	 * 
-	 * @param {vtkTexture} texture 
+	 *
+	 * @param {vtkTexture} texture
 	 */
 	getTextureUnitForTexture(texture: vtkTexture): number;
 
 	/**
-	 * 
-	 * @param vtktype 
-	 * @param numComps 
-	 * @param useFloat 
+	 *
+	 * @param vtktype
+	 * @param numComps
+	 * @param useFloat
 	 */
 	getDefaultTextureInternalFormat(vtktype: VtkDataTypes, numComps: number, useFloat: boolean): void;
 
 	/**
-	 * 
-	 * @param {HTMLImageElement} img 
+	 *
+	 * @param {HTMLImageElement} img
 	 */
 	setBackgroundImage(img: HTMLImageElement): void;
 
 	/**
-	 * 
-	 * @param {Boolean} value 
+	 *
+	 * @param {Boolean} value
 	 */
 	setUseBackgroundImage(value: boolean): void;
 
@@ -269,70 +270,70 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 	 * size.  If no `size` or `scale` are provided, the current renderwindow
 	 * size is assumed.  The default format is "image/png". Returns a promise
 	 * that resolves to the captured screenshot.
-	 * @param {String} format 
-	 * @param {IOptions} options 
+	 * @param {String} format
+	 * @param {IOptions} options
 	 */
 	captureNextImage(format: string, options: IOptions): Promise<string> | null;
 
 	/**
-	 * 
+	 *
 	 */
 	getGLInformations(): object;
 
 	/**
-	 * 
+	 *
 	 */
 	traverseAllPasses(): void;
 
 	/**
-	 * 
+	 *
 	 */
 	disableCullFace(): void;
 
 	/**
-	 * 
+	 *
 	 */
 	enableCullFace(): void;
 
 	/**
-	 * 
-	 * @param stream 
+	 *
+	 * @param stream
 	 */
-	setViewStream(stream: any): boolean;
+	setViewStream(stream: vtkViewStream): boolean;
 
 	/**
-	 * 
-	 * @param {Vector2} size 
+	 *
+	 * @param {Vector2} size
 	 */
 	setSize(size: Vector2): void;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y 
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
 	 */
 	setSize(x: number, y: number): void;
 
 	/**
-	 * 
+	 *
 	 */
 	getSize(): Vector2;
 
 	/**
-	 * 
-	 * @param {Vector2} size 
+	 *
+	 * @param {Vector2} size
 	 */
 	setVrResolution(size: Vector2): void;
 
 	/**
-	 * 
-	 * @param {Number} x 
-	 * @param {Number} y  
+	 *
+	 * @param {Number} x
+	 * @param {Number} y
 	 */
 	setVrResolution(x: number, y: number): void;
 
 	/**
-	 * 
+	 *
 	 */
 	getVrResolution(): Vector2;
 }
@@ -353,20 +354,20 @@ export function extend(publicAPI: object, model: object, initialValues?: IOpenGL
 export function newInstance(initialValues?: IOpenGLRenderWindowInitialValues): vtkOpenGLRenderWindow;
 
 /**
- * 
- * @param cb 
+ *
+ * @param cb
  */
 export function pushMonitorGLContextCount(cb: any): void;
 
 /**
- * 
- * @param cb 
+ *
+ * @param cb
  */
 export function popMonitorGLContextCount(cb: any): void;
 
 /**
  * WebGL rendering window
- * 
+ *
  * vtkOpenGLRenderWindow is designed to view/render a vtkRenderWindow.
  */
 export declare const vtkOpenGLRenderWindow: {

package/Rendering/OpenGL/RenderWindow.js

@@ -816,6 +816,12 @@ function vtkOpenGLRenderWindow(publicAPI, model) {
     return true;
   };
 
+  publicAPI.createSelector = function () {
+    var ret = vtkHardwareSelector.newInstance();
+    ret.setOpenGLRenderWindow(publicAPI);
+    return ret;
+  };
+
   publicAPI.delete = macro.chain(publicAPI.delete, publicAPI.setViewStream, deleteGLContext);
 } // ----------------------------------------------------------------------------
 // Object factory

package/Rendering/OpenGL/VolumeMapper.js

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { newInstance as newInstance$1, obj, setGet, vtkWarningMacro as vtkWarningMacro$1, vtkErrorMacro as vtkErrorMacro$1 } from '../../macros.js';
+import { newInstance as newInstance$1, obj, setGet, chain, vtkWarningMacro as vtkWarningMacro$1, vtkErrorMacro as vtkErrorMacro$1 } from '../../macros.js';
 import { mat4, mat3, vec3 } from 'gl-matrix';
 import vtkDataArray from '../../Common/Core/DataArray.js';
 import { VtkDataTypes } from '../../Common/Core/DataArray/Constants.js';
@@ -672,90 +672,86 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
       program.setUniform3fv("vClipPlaneNormals", clipPlaneNormals);
       program.setUniformfv("vClipPlaneDistances", clipPlaneDistances);
     }
-  };
+  }; // unsubscribe from our listeners
+
+
+  publicAPI.delete = chain(function () {
+    if (model._animationRateSubscription) {
+      model._animationRateSubscription.unsubscribe();
+
+      model._animationRateSubscription = null;
+    }
+  }, publicAPI.delete);
 
   publicAPI.getRenderTargetSize = function () {
-    if (model.lastXYF > 1.43) {
-      var sz = model.framebuffer.getSize();
-      return [model.fvp[0] * sz[0], model.fvp[1] * sz[1]];
+    if (model._useSmallViewport) {
+      return [model._smallViewportWidth, model._smallViewportHeight];
     }
 
     return model.openGLRenderWindow.getFramebufferSize();
   };
 
   publicAPI.renderPieceStart = function (ren, actor) {
-    if (model.renderable.getAutoAdjustSampleDistances()) {
-      var rwi = ren.getVTKWindow().getInteractor();
-      var rft = rwi.getLastFrameTime(); // console.log(`last frame time ${Math.floor(1.0 / rft)}`);
-      // frame time is typically for a couple frames prior
-      // which makes it messy, so keep long running averages
-      // of frame times and pixels rendered
-
-      model.avgFrameTime = 0.97 * model.avgFrameTime + 0.03 * rft;
-      model.avgWindowArea = 0.97 * model.avgWindowArea + 0.03 / (model.lastXYF * model.lastXYF);
-
-      if (ren.getVTKWindow().getInteractor().isAnimating()) {
-        // compute target xy factor
-        var txyf = Math.sqrt(model.avgFrameTime * rwi.getDesiredUpdateRate() / model.avgWindowArea); // limit subsampling to a factor of 10
-
-        if (txyf > 10.0) {
-          txyf = 10.0;
-        }
+    var rwi = ren.getVTKWindow().getInteractor();
+    model._useSmallViewport = false;
+
+    if (rwi.isAnimating() && model._lastScale > 1.5) {
+      model._useSmallViewport = true;
+    }
+
+    if (!model._animationRateSubscription) {
+      // when the animation frame rate changes recompute the scale factor
+      model._animationRateSubscription = rwi.onAnimationFrameRateUpdate(function () {
+        if (model.renderable.getAutoAdjustSampleDistances()) {
+          var frate = rwi.getRecentAnimationFrameRate();
+          var adjustment = rwi.getDesiredUpdateRate() / frate; // only change if we are off by 15%
+
+          if (adjustment > 1.15 || adjustment < 0.85) {
+            model._lastScale *= adjustment;
+          } // clamp scale to some reasonable values.
+          // Below 1.5 we will just be using full resolution as that is close enough
+          // Above 400 seems like a lot so we limit to that 1/20th per axis
 
-        model.targetXYF = txyf;
-      } else {
-        model.targetXYF = Math.sqrt(model.avgFrameTime * rwi.getStillUpdateRate() / model.avgWindowArea);
-      } // have some inertia to change states around 1.43
 
+          if (model._lastScale > 400) {
+            model._lastScale = 400;
+          }
+
+          if (model._lastScale < 1.5) {
+            model._lastScale = 1.5;
+          }
+        } else {
+          model._lastScale = model.renderable.getImageSampleDistance() * model.renderable.getImageSampleDistance();
+        }
+
+        var size = model.openGLRenderWindow.getFramebufferSize();
+        model._smallViewportWidth = Math.ceil(size[0] / Math.sqrt(model._lastScale));
+        model._smallViewportHeight = Math.ceil(size[1] / Math.sqrt(model._lastScale));
+      });
+    } // use/create/resize framebuffer if needed
 
-      if (model.targetXYF < 1.53 && model.targetXYF > 1.33) {
-        model.targetXYF = model.lastXYF;
-      } // and add some inertia to change at all
 
+    if (model._useSmallViewport) {
+      var size = model.openGLRenderWindow.getFramebufferSize(); // adjust viewportSize to always be at most the dest fo size
 
-      if (Math.abs(1.0 - model.targetXYF / model.lastXYF) < 0.1) {
-        model.targetXYF = model.lastXYF;
+      if (model._smallViewportHeight > size[1]) {
+        model._smallViewportHeight = size[1];
       }
 
-      model.lastXYF = model.targetXYF;
-    } else {
-      model.lastXYF = model.renderable.getImageSampleDistance();
-    } // only use FBO beyond this value
-
-
-    if (model.lastXYF <= 1.43) {
-      model.lastXYF = 1.0;
-    } // console.log(`last target  ${model.lastXYF} ${model.targetXYF}`);
-    // console.log(`awin aft  ${model.avgWindowArea} ${model.avgFrameTime}`);
-
-
-    var xyf = model.lastXYF;
-    var size = model.openGLRenderWindow.getFramebufferSize(); // const newSize = [
-    //   Math.floor((size[0] / xyf) + 0.5),
-    //   Math.floor((size[1] / xyf) + 0.5)];
-    // const diag = vtkBoundingBox.getDiagonalLength(model.currentInput.getBounds());
-    // // so what is the resulting sample size roughly
-    // console.log(`sam size ${diag / newSize[0]} ${diag / newSize[1]} ${model.renderable.getImageSampleDistance()}`);
-    // // if the sample distance is getting far from the image sample dist
-    // if (2.0 * diag / (newSize[0] + newSize[1]) > 4 * model.renderable.getSampleDistance()) {
-    //   model.renderable.setSampleDistance(4.0 * model.renderable.getSampleDistance());
-    // }
-    // if (2.0 * diag / (newSize[0] + newSize[1]) < 0.25 * model.renderable.getSampleDistance()) {
-    //   model.renderable.setSampleDistance(0.25 * model.renderable.getSampleDistance());
-    // }
-    // create/resize framebuffer if needed
+      if (model._smallViewportWidth > size[0]) {
+        model._smallViewportWidth = size[0];
+      }
 
-    if (xyf > 1.43) {
       model.framebuffer.saveCurrentBindingsAndBuffers();
 
       if (model.framebuffer.getGLFramebuffer() === null) {
-        model.framebuffer.create(Math.floor(size[0] * 0.7), Math.floor(size[1] * 0.7));
+        model.framebuffer.create(size[0], size[1]);
         model.framebuffer.populateFramebuffer();
       } else {
         var fbSize = model.framebuffer.getSize();
 
-        if (fbSize[0] !== Math.floor(size[0] * 0.7) || fbSize[1] !== Math.floor(size[1] * 0.7)) {
-          model.framebuffer.create(Math.floor(size[0] * 0.7), Math.floor(size[1] * 0.7));
+        if (fbSize[0] !== size[0] || fbSize[1] !== size[1]) {
+          model.framebuffer.create(size[0], size[1]);
           model.framebuffer.populateFramebuffer();
         }
       }
@@ -765,8 +761,8 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
       gl.clearColor(0.0, 0.0, 0.0, 0.0);
       gl.colorMask(true, true, true, true);
       gl.clear(gl.COLOR_BUFFER_BIT);
-      gl.viewport(0, 0, size[0] / xyf, size[1] / xyf);
-      model.fvp = [Math.floor(size[0] / xyf) / Math.floor(size[0] * 0.7), Math.floor(size[1] / xyf) / Math.floor(size[1] * 0.7)];
+      gl.viewport(0, 0, model._smallViewportWidth, model._smallViewportHeight);
+      model.fvp = [model._smallViewportWidth / size[0], model._smallViewportHeight / size[1]];
     }
 
     model.context.disable(model.context.DEPTH_TEST); // make sure the BOs are up to date
@@ -817,7 +813,7 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
       model.zBufferTexture.deactivate();
     }
 
-    if (model.lastXYF > 1.43) {
+    if (model._useSmallViewport) {
       // now copy the framebuffer with the volume into the
       // regular buffer
       model.framebuffer.restorePreviousBindingsAndBuffers();
@@ -1006,8 +1002,7 @@ function vtkOpenGLVolumeMapper(publicAPI, model) {
       var dims = image.getDimensions();
       model.scalarTexture.releaseGraphicsResources(model.openGLRenderWindow);
       model.scalarTexture.resetFormatAndType();
-      model.scalarTexture.create3DFilterableFromRaw(dims[0], dims[1], dims[2], numComp, scalars.getDataType(), scalars.getData(), model.renderable.getPreferSizeOverAccuracy()); // console.log(model.scalarTexture.get());
-
+      model.scalarTexture.create3DFilterableFromRaw(dims[0], dims[1], dims[2], numComp, scalars.getDataType(), scalars.getData(), model.renderable.getPreferSizeOverAccuracy());
       model.scalarTextureString = toString;
     }
 
@@ -1125,7 +1120,8 @@ function extend(publicAPI, model) {
   model.idxNormalMatrix = mat3.identity(new Float64Array(9));
   model.modelToView = mat4.identity(new Float64Array(16));
   model.projectionToView = mat4.identity(new Float64Array(16));
-  model.projectionToWorld = mat4.identity(new Float64Array(16)); // Build VTK API
+  model.projectionToWorld = mat4.identity(new Float64Array(16));
+  model._lastScale = 1.0; // Build VTK API
 
   setGet(publicAPI, model, ['context']); // Object methods
 

package/Rendering/SceneGraph/RenderWindowViewNode.js

@@ -123,6 +123,11 @@ function vtkRenderWindowViewNode(publicAPI, model) {
     macro.vtkErrorMacro('not implemented');
     return undefined;
   };
+
+  publicAPI.createSelector = function () {
+    macro.vtkErrorMacro('not implemented');
+    return undefined;
+  };
 } // ----------------------------------------------------------------------------
 // Object factory
 // ----------------------------------------------------------------------------

package/Rendering/WebGPU/FullScreenQuad.js

@@ -11,7 +11,7 @@ function vtkWebGPUFullScreenQuad(publicAPI, model) {
 
   publicAPI.replaceShaderPosition = function (hash, pipeline, vertexInput) {
     var vDesc = pipeline.getShaderDescription('vertex');
-    vDesc.addBuiltinOutput('vec4<f32>', '[[builtin(position)]] Position');
+    vDesc.addBuiltinOutput('vec4<f32>', '@builtin(position) Position');
     var code = vDesc.getCode();
     code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', ['output.tcoordVS = vec2<f32>(vertexBC.x * 0.5 + 0.5, 1.0 - vertexBC.y * 0.5 - 0.5);', 'output.Position = vec4<f32>(vertexBC, 1.0);']).result;
     vDesc.setCode(code);

package/Rendering/WebGPU/Glyph3DMapper.js

@@ -21,8 +21,8 @@ function vtkWebGPUGlyph3DMapper(publicAPI, model) {
 
   publicAPI.replaceShaderPosition = function (hash, pipeline, vertexInput) {
     var vDesc = pipeline.getShaderDescription('vertex');
-    vDesc.addBuiltinInput('u32', '[[builtin(instance_index)]] instanceIndex');
-    vDesc.addBuiltinOutput('vec4<f32>', '[[builtin(position)]] Position');
+    vDesc.addBuiltinInput('u32', '@builtin(instance_index) instanceIndex');
+    vDesc.addBuiltinOutput('vec4<f32>', '@builtin(position) Position');
     var code = vDesc.getCode();
     code = vtkWebGPUShaderCache.substitute(code, '//VTK::Position::Impl', ['    output.Position = rendererUBO.SCPCMatrix*mapperUBO.BCSCMatrix', '      *glyphSSBO.values[input.instanceIndex].matrix', '      *vertexBC;']).result;
     vDesc.setCode(code);

package/Rendering/WebGPU/HardwareSelector.js

@@ -278,6 +278,7 @@ function vtkWebGPUHardwareSelector(publicAPI, model) {
               // result object (by value in most cases)
 
               result = {
+                area: [0, 0, texture.getWidth() - 1, texture.getHeight() - 1],
                 captureZValues: model.captureZValues,
                 fieldAssociation: model.fieldAssociation,
                 renderer: renderer,

package/Rendering/WebGPU/ImageMapper.js

@@ -11,7 +11,7 @@ import { InterpolationType } from '../Core/ImageProperty/Constants.js';
 import { registerOverride } from './ViewNodeFactory.js';
 
 var SlicingMode = Constants.SlicingMode;
-var imgFragTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Image::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n[[stage(fragment)]]\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  //VTK::Image::Sample\n\n  // var computedColor: vec4<f32> = vec4<f32>(1.0,0.7, 0.5, 1.0);\n\n//VTK::RenderEncoder::Impl\n\n  return output;\n}\n"; // ----------------------------------------------------------------------------
+var imgFragTemplate = "\n//VTK::Renderer::Dec\n\n//VTK::Mapper::Dec\n\n//VTK::TCoord::Dec\n\n//VTK::Image::Dec\n\n//VTK::RenderEncoder::Dec\n\n//VTK::IOStructs::Dec\n\n@stage(fragment)\nfn main(\n//VTK::IOStructs::Input\n)\n//VTK::IOStructs::Output\n{\n  var output: fragmentOutput;\n\n  //VTK::Image::Sample\n\n  // var computedColor: vec4<f32> = vec4<f32>(1.0,0.7, 0.5, 1.0);\n\n//VTK::RenderEncoder::Impl\n\n  return output;\n}\n"; // ----------------------------------------------------------------------------
 // helper methods
 // ----------------------------------------------------------------------------
 
@@ -318,7 +318,7 @@ function vtkWebGPUImageMapper(publicAPI, model) {
 
   publicAPI.replaceShaderPosition = function (hash, pipeline, vertexInput) {
     var vDesc = pipeline.getShaderDescription('vertex');
-    vDesc.addBuiltinOutput('vec4<f32>', '[[builtin(position)]] Position');
+    vDesc.addBuiltinOutput('vec4<f32>', '@builtin(position) Position');
     var code = vDesc.getCode();
     var lines = ['var pos: vec4<f32> = mapperUBO.Origin +', '   (vertexBC.x * 0.5 + 0.5) * mapperUBO.Axis1 + (vertexBC.y * 0.5 + 0.5) * mapperUBO.Axis2;', 'pos.w = 1.0;'];