@kitware/vtk.js 23.1.0 → 23.2.0

package/Rendering/OpenGL/ForwardPass.js

@@ -1,6 +1,7 @@
 import macro from '../../macros.js';
 import vtkOpenGLFramebuffer from './Framebuffer.js';
 import vtkRenderPass from '../SceneGraph/RenderPass.js';
+import vtkOpenGLOrderIndependentTranslucentPass from './OrderIndependentTranslucentPass.js';
 
 function vtkForwardPass(publicAPI, model) {
   // Set our className
@@ -72,8 +73,11 @@ function vtkForwardPass(publicAPI, model) {
           }
 
           if (model.translucentActorCount > 0) {
-            publicAPI.setCurrentOperation('translucentPass');
-            renNode.traverse(publicAPI);
+            if (!model.translucentPass) {
+              model.translucentPass = vtkOpenGLOrderIndependentTranslucentPass.newInstance();
+            }
+
+            model.translucentPass.traverse(viewNode, renNode, publicAPI);
           }
 
           if (model.volumeCount > 0) {
@@ -136,7 +140,7 @@ function extend(publicAPI, model) {
   Object.assign(model, DEFAULT_VALUES, initialValues); // Build VTK API
 
   vtkRenderPass.extend(publicAPI, model, initialValues);
-  macro.get(publicAPI, model, ['framebuffer']); // Object methods
+  macro.get(publicAPI, model, ['framebuffer', 'opaqueActorCount', 'translucentActorCount', 'volumeCount']); // Object methods
 
   vtkForwardPass(publicAPI, model);
 } // ----------------------------------------------------------------------------

package/Rendering/OpenGL/Framebuffer.js

@@ -1,4 +1,4 @@
-import { newInstance as newInstance$1, obj, setGet, vtkErrorMacro } from '../../macros.js';
+import { newInstance as newInstance$1, obj, vtkErrorMacro, getArray } from '../../macros.js';
 import vtkOpenGLTexture from './Texture.js';
 import { VtkDataTypes } from '../../Common/Core/DataArray/Constants.js';
 import { Filter } from './Texture/Constants.js';
@@ -23,6 +23,11 @@ function vtkFramebuffer(publicAPI, model) {
   };
 
   publicAPI.saveCurrentBindings = function (modeIn) {
+    if (!model.context) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling saveCurrentBindings');
+      return;
+    }
+
     var gl = model.context;
     model.previousDrawBinding = gl.getParameter(model.context.FRAMEBUFFER_BINDING);
     model.previousActiveFramebuffer = model.openGLRenderWindow.getActiveFramebuffer();
@@ -38,6 +43,11 @@ function vtkFramebuffer(publicAPI, model) {
   };
 
   publicAPI.restorePreviousBindings = function (modeIn) {
+    if (!model.context) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling restorePreviousBindings');
+      return;
+    }
+
     var gl = model.context;
     gl.bindFramebuffer(gl.FRAMEBUFFER, model.previousDrawBinding);
     model.openGLRenderWindow.setActiveFramebuffer(model.previousActiveFramebuffer);
@@ -47,16 +57,28 @@ function vtkFramebuffer(publicAPI, model) {
   };
 
   publicAPI.bind = function () {
-    model.context.bindFramebuffer(model.context.FRAMEBUFFER, model.glFramebuffer);
+    var modeArg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var mode = modeArg;
+
+    if (mode === null) {
+      mode = model.context.FRAMEBUFFER;
+    }
+
+    model.context.bindFramebuffer(mode, model.glFramebuffer);
 
-    if (model.colorTexture) {
-      model.colorTexture.bind();
+    for (var i = 0; i < model.colorBuffers.length; i++) {
+      model.colorBuffers[i].bind();
     }
 
     model.openGLRenderWindow.setActiveFramebuffer(publicAPI);
   };
 
   publicAPI.create = function (width, height) {
+    if (!model.context) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling create');
+      return;
+    }
+
     model.glFramebuffer = model.context.createFramebuffer();
     model.glFramebuffer.width = width;
     model.glFramebuffer.height = height;
@@ -65,6 +87,12 @@ function vtkFramebuffer(publicAPI, model) {
   publicAPI.setColorBuffer = function (texture) {
     var attachment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var gl = model.context;
+
+    if (!gl) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling setColorBuffer');
+      return;
+    }
+
     var glAttachment = gl.COLOR_ATTACHMENT0;
 
     if (attachment > 0) {
@@ -76,13 +104,19 @@ function vtkFramebuffer(publicAPI, model) {
       }
     }
 
-    model.colorTexture = texture;
+    model.colorBuffers[attachment] = texture;
     gl.framebufferTexture2D(gl.FRAMEBUFFER, glAttachment, gl.TEXTURE_2D, texture.getHandle(), 0);
   };
 
   publicAPI.removeColorBuffer = function () {
     var attachment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var gl = model.context;
+
+    if (!gl) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling removeColorBuffer');
+      return;
+    }
+
     var glAttachment = gl.COLOR_ATTACHMENT0;
 
     if (attachment > 0) {
@@ -95,9 +129,15 @@ function vtkFramebuffer(publicAPI, model) {
     }
 
     gl.framebufferTexture2D(gl.FRAMEBUFFER, glAttachment, gl.TEXTURE_2D, null, 0);
+    model.colorBuffers = model.colorBuffers.splice(attachment, 1);
   };
 
   publicAPI.setDepthBuffer = function (texture) {
+    if (!model.context) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling setDepthBuffer');
+      return;
+    }
+
     if (model.openGLRenderWindow.getWebgl2()) {
       var gl = model.context;
       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, texture.getHandle(), 0);
@@ -107,6 +147,11 @@ function vtkFramebuffer(publicAPI, model) {
   };
 
   publicAPI.removeDepthBuffer = function () {
+    if (!model.context) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling removeDepthBuffer');
+      return;
+    }
+
     if (model.openGLRenderWindow.getWebgl2()) {
       var gl = model.context;
       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, null, 0);
@@ -137,10 +182,6 @@ function vtkFramebuffer(publicAPI, model) {
     if (model.glFramebuffer) {
       model.context.deleteFramebuffer(model.glFramebuffer);
     }
-
-    if (model.colorTexture) {
-      model.colorTexture.releaseGraphicsResources();
-    }
   };
 
   publicAPI.getSize = function () {
@@ -155,6 +196,11 @@ function vtkFramebuffer(publicAPI, model) {
   };
 
   publicAPI.populateFramebuffer = function () {
+    if (!model.context) {
+      vtkErrorMacro('you must set the OpenGLRenderWindow before calling populateFrameBuffer');
+      return;
+    }
+
     publicAPI.bind();
     var gl = model.context;
     var texture = vtkOpenGLTexture.newInstance();
@@ -169,6 +215,11 @@ function vtkFramebuffer(publicAPI, model) {
     gl.bindRenderbuffer(gl.RENDERBUFFER, model.depthTexture);
     gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, model.glFramebuffer.width, model.glFramebuffer.height);
     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, model.depthTexture);
+  }; // For backwards compatibility. Use getColorBuffers()[0] going forward.
+
+
+  publicAPI.getColorTexture = function () {
+    return model.colorBuffers[0];
   };
 } // ----------------------------------------------------------------------------
 // Object factory
@@ -178,7 +229,7 @@ function vtkFramebuffer(publicAPI, model) {
 var DEFAULT_VALUES = {
   openGLRenderWindow: null,
   glFramebuffer: null,
-  colorTexture: null,
+  colorBuffers: null,
   depthTexture: null,
   previousDrawBinding: 0,
   previousReadBinding: 0,
@@ -192,7 +243,13 @@ function extend(publicAPI, model) {
   Object.assign(model, DEFAULT_VALUES, initialValues); // Build VTK API
 
   obj(publicAPI, model);
-  setGet(publicAPI, model, ['colorTexture']); // For more macro methods, see "Sources/macros.js"
+
+  if (model.colorBuffers) {
+    vtkErrorMacro('you cannot initialize colorBuffers through the constructor. You should call setColorBuffer() instead.');
+  }
+
+  model.colorBuffers = [];
+  getArray(publicAPI, model, ['colorBuffers']); // For more macro methods, see "Sources/macros.js"
   // Object specific methods
 
   vtkFramebuffer(publicAPI, model);

package/Rendering/OpenGL/ImageMapper.js

@@ -41,6 +41,7 @@ function vtkOpenGLImageMapper(publicAPI, model) {
 
   publicAPI.buildPass = function (prepass) {
     if (prepass) {
+      model.currentRenderPass = null;
       model.openGLImageSlice = publicAPI.getFirstAncestorOfType('vtkOpenGLImageSlice');
       model.openGLRenderer = publicAPI.getFirstAncestorOfType('vtkOpenGLRenderer');
       model.openGLRenderWindow = model.openGLRenderer.getParent();
@@ -58,8 +59,9 @@ function vtkOpenGLImageMapper(publicAPI, model) {
     }
   };
 
-  publicAPI.translucentPass = function (prepass) {
+  publicAPI.translucentPass = function (prepass, renderPass) {
     if (prepass) {
+      model.currentRenderPass = renderPass;
       publicAPI.render();
     }
   };
@@ -95,7 +97,12 @@ function vtkOpenGLImageMapper(publicAPI, model) {
   };
 
   publicAPI.buildShaders = function (shaders, ren, actor) {
-    publicAPI.getShaderTemplate(shaders, ren, actor);
+    publicAPI.getShaderTemplate(shaders, ren, actor); // apply any renderPassReplacements
+
+    if (model.lastRenderPassShaderReplacement) {
+      model.lastRenderPassShaderReplacement(shaders);
+    }
+
     publicAPI.replaceShaderValues(shaders, ren, actor);
   };
 
@@ -240,9 +247,21 @@ function vtkOpenGLImageMapper(publicAPI, model) {
     // input modified
     // light complexity changed
     var tNumComp = model.openGLTexture.getComponents();
-    var iComp = actor.getProperty().getIndependentComponents();
+    var iComp = actor.getProperty().getIndependentComponents(); // has the render pass shader replacement changed? Two options
+
+    var needRebuild = false;
+
+    if (!model.currentRenderPass && model.lastRenderPassShaderReplacement) {
+      needRebuild = true;
+      model.lastRenderPassShaderReplacement = null;
+    }
+
+    if (model.currentRenderPass && model.currentRenderPass.getShaderReplacement() !== model.lastRenderPassShaderReplacement) {
+      model.lastRenderPassShaderReplacement = model.currentRenderPass.getShaderReplacement();
+      needRebuild = true;
+    }
 
-    if (model.lastHaveSeenDepthRequest !== model.haveSeenDepthRequest || cellBO.getProgram() === 0 || model.lastTextureComponents !== tNumComp || model.lastIndependentComponents !== iComp) {
+    if (needRebuild || model.lastHaveSeenDepthRequest !== model.haveSeenDepthRequest || cellBO.getProgram() === 0 || model.lastTextureComponents !== tNumComp || model.lastIndependentComponents !== iComp) {
       model.lastHaveSeenDepthRequest = model.haveSeenDepthRequest;
       model.lastTextureComponents = tNumComp;
       model.lastIndependentComponents = iComp;

package/Rendering/OpenGL/OrderIndependentTranslucentPass.js

@@ -0,0 +1,293 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import macro from '../../macros.js';
+import vtkOpenGLTexture from './Texture.js';
+import vtkOpenGLFramebuffer from './Framebuffer.js';
+import vtkRenderPass from '../SceneGraph/RenderPass.js';
+import vtkDataArray from '../../Common/Core/DataArray.js';
+import vtkHelper from './Helper.js';
+import vtkProperty from '../Core/Property.js';
+import vtkShaderProgram from './ShaderProgram.js';
+import vtkVertexArrayObject from './VertexArrayObject.js';
+
+var Representation = vtkProperty.Representation;
+var vtkErrorMacro = macro.vtkErrorMacro; // ----------------------------------------------------------------------------
+
+function translucentShaderReplacement(shaders) {
+  var substituteRes = vtkShaderProgram.substitute(shaders.Fragment, '//VTK::RenderPassFragmentShader::Impl', "\n      float weight = gl_FragData[0].a * pow(max(1.1 - gl_FragCoord.z, 0.0), 2.0);\n      gl_FragData[0] = vec4(gl_FragData[0].rgb*weight, gl_FragData[0].a);\n      gl_FragData[1].r = weight;\n    ", false);
+  shaders.Fragment = substituteRes.result;
+}
+
+var oitpFragTemplate = "//VTK::System::Dec\n\nin vec2 tcoord;\n\nuniform sampler2D translucentRTexture;\nuniform sampler2D translucentRGBATexture;\n\n// the output of this shader\n//VTK::Output::Dec\n\nvoid main()\n{\n  vec4 t1Color = texture(translucentRGBATexture, tcoord);\n  float t2Color = texture(translucentRTexture, tcoord).r;\n  gl_FragData[0] = vec4(t1Color.rgb/max(t2Color,0.01), 1.0 - t1Color.a);\n}\n";
+
+function vtkOpenGLOrderIndependentTranslucentPass(publicAPI, model) {
+  // Set our className
+  model.classHierarchy.push('vtkOpenGLOrderIndependentTranslucentPass'); // build vertices etc
+
+  publicAPI.createVertexBuffer = function () {
+    // 4 corner points in clipping space in order (x, y, z) where z is always set to -1
+    // prettier-ignore
+    var ptsArray = new Float32Array([-1, -1, -1, 1, -1, -1, -1, 1, -1, 1, 1, -1]); // 4 corresponding corner points in texture space in order (x, y)
+
+    var tcoordArray = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]); // a square defined as cell relation ship in order (cell_size, v1, v2, v3, v4)
+
+    var cellArray = new Uint16Array([4, 0, 1, 3, 2]);
+    var points = vtkDataArray.newInstance({
+      numberOfComponents: 3,
+      values: ptsArray
+    });
+    points.setName('points');
+    var tcoords = vtkDataArray.newInstance({
+      numberOfComponents: 2,
+      values: tcoordArray
+    });
+    tcoords.setName('tcoords');
+    var cells = vtkDataArray.newInstance({
+      numberOfComponents: 1,
+      values: cellArray
+    });
+    model.tris.getCABO().createVBO(cells, 'polys', Representation.SURFACE, {
+      points: points,
+      tcoords: tcoords,
+      cellOffset: 0
+    });
+    model.VBOBuildTime.modified();
+  };
+
+  publicAPI.createFramebuffer = function (viewNode) {
+    var _model$framebuffer;
+
+    var size = viewNode.getSize();
+    var gl = viewNode.getContext();
+    model.framebuffer = vtkOpenGLFramebuffer.newInstance();
+    model.framebuffer.setOpenGLRenderWindow(viewNode);
+
+    (_model$framebuffer = model.framebuffer).create.apply(_model$framebuffer, _toConsumableArray(size));
+
+    model.framebuffer.saveCurrentBindingsAndBuffers();
+    model.framebuffer.bind();
+    model.translucentRGBATexture = vtkOpenGLTexture.newInstance();
+    model.translucentRGBATexture.setInternalFormat(gl.RGBA16F);
+    model.translucentRGBATexture.setFormat(gl.RGBA);
+    model.translucentRGBATexture.setOpenGLDataType(gl.HALF_FLOAT);
+    model.translucentRGBATexture.setOpenGLRenderWindow(viewNode);
+    model.translucentRGBATexture.create2DFromRaw(size[0], size[1], 4, 'Float32Array', null);
+    model.translucentRTexture = vtkOpenGLTexture.newInstance();
+    model.translucentRTexture.setInternalFormat(gl.R16F);
+    model.translucentRTexture.setFormat(gl.RED);
+    model.translucentRTexture.setOpenGLDataType(gl.HALF_FLOAT);
+    model.translucentRTexture.setOpenGLRenderWindow(viewNode);
+    model.translucentRTexture.create2DFromRaw(size[0], size[1], 1, 'Float32Array', null);
+    model.translucentZTexture = vtkOpenGLTexture.newInstance();
+    model.translucentZTexture.setOpenGLRenderWindow(viewNode);
+    model.translucentZTexture.createDepthFromRaw(size[0], size[1], 'Float32Array', null);
+    model.framebuffer.setColorBuffer(model.translucentRGBATexture, 0);
+    model.framebuffer.setColorBuffer(model.translucentRTexture, 1);
+    model.framebuffer.setDepthBuffer(model.translucentZTexture);
+  };
+
+  publicAPI.createCopyShader = function (viewNode) {
+    model.copyShader = viewNode.getShaderCache().readyShaderProgramArray(['//VTK::System::Dec', 'attribute vec4 vertexDC;', 'attribute vec2 tcoordTC;', 'varying vec2 tcoord;', 'void main() { tcoord = tcoordTC; gl_Position = vertexDC; }'].join('\n'), oitpFragTemplate, '');
+  };
+
+  publicAPI.createVBO = function (viewNode) {
+    var gl = viewNode.getContext();
+    model.tris.setOpenGLRenderWindow(viewNode);
+    publicAPI.createVertexBuffer();
+    var program = model.copyShader; // prepare the vertex and triangle data for the image plane to render to
+
+    model.tris.getCABO().bind();
+
+    if (!model.copyVAO.addAttributeArray(program, model.tris.getCABO(), 'vertexDC', model.tris.getCABO().getVertexOffset(), model.tris.getCABO().getStride(), gl.FLOAT, 3, gl.FALSE)) {
+      vtkErrorMacro('Error setting vertexDC in copy shader VAO.');
+    }
+
+    if (!model.copyVAO.addAttributeArray(program, model.tris.getCABO(), 'tcoordTC', model.tris.getCABO().getTCoordOffset(), model.tris.getCABO().getStride(), gl.FLOAT, 2, gl.FALSE)) {
+      vtkErrorMacro('Error setting vertexDC in copy shader VAO.');
+    }
+  };
+
+  publicAPI.traverse = function (viewNode, renNode, forwardPass) {
+    if (model.deleted) {
+      return;
+    }
+
+    var size = viewNode.getSize();
+    var gl = viewNode.getContext();
+
+    if (gl === null) {
+      // nothing to do -> no render context
+      // traverse delegate passes -> has to be done in order for the vtk render-pipeline to work correctly
+      model.delegates.forEach(function (val) {
+        val.traverse(viewNode, publicAPI);
+      });
+      return;
+    } // if we lack the webgl2 and half floatsupport just do
+    // basic alpha blending
+
+
+    if (!viewNode.getWebgl2() || !gl.getExtension('EXT_color_buffer_half_float') && !gl.getExtension('EXT_color_buffer_float')) {
+      console.log('fallback');
+      publicAPI.setCurrentOperation('translucentPass');
+      renNode.traverse(publicAPI);
+      return;
+    } // prepare framebuffer // allocate framebuffer if needed and bind it
+
+
+    if (model.framebuffer === null) {
+      publicAPI.createFramebuffer(viewNode);
+    } else {
+      var fbSize = model.framebuffer.getSize();
+
+      if (fbSize === null || fbSize[0] !== size[0] || fbSize[1] !== size[1]) {
+        model.framebuffer.releaseGraphicsResources();
+        model.translucentRGBATexture.releaseGraphicsResources(viewNode);
+        model.translucentRTexture.releaseGraphicsResources(viewNode);
+        model.translucentZTexture.releaseGraphicsResources(viewNode);
+        publicAPI.createFramebuffer(viewNode);
+      } else {
+        // store framebuffer bindings to restore them later
+        model.framebuffer.saveCurrentBindingsAndBuffers();
+        model.framebuffer.bind();
+      }
+    }
+
+    gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
+    gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 0.0]);
+    gl.clearBufferfv(gl.DEPTH, 0, [1.0]);
+    gl.colorMask(false, false, false, false); // rerender the opaque pass to set the depth buffer
+    // TODO remove when webgl1 is deprecated and instead
+    // have the forward pass use a texture backed zbuffer
+
+    if (forwardPass.getOpaqueActorCount() > 0) {
+      forwardPass.setCurrentOperation('opaquePass');
+      renNode.traverse(forwardPass);
+    }
+
+    gl.colorMask(true, true, true, true);
+    gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
+    gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
+    gl.clearBufferfv(gl.COLOR, 1, [0.0, 0.0, 0.0, 0.0]);
+    gl.enable(gl.DEPTH_TEST);
+    gl.enable(gl.BLEND); // basic gist is we accumulate color into RGB We compute final opacity
+    // into A We store accumulated opacity into R of the R texture.
+
+    gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ZERO, gl.ONE_MINUS_SRC_ALPHA); // now do the translucent rendering
+
+    publicAPI.setCurrentOperation('translucentPass');
+    renNode.traverse(publicAPI);
+    gl.drawBuffers([gl.NONE]);
+    model.framebuffer.restorePreviousBindingsAndBuffers(); // gl.drawBuffers([gl.BACK]);
+    // make sure the copy shader is ready
+
+    if (model.copyShader === null) {
+      publicAPI.createCopyShader(viewNode);
+    } else {
+      viewNode.getShaderCache().readyShaderProgram(model.copyShader);
+    } // make sure we have a VAO
+
+
+    if (!model.copyVAO) {
+      model.copyVAO = vtkVertexArrayObject.newInstance();
+      model.copyVAO.setOpenGLRenderWindow(viewNode);
+    }
+
+    model.copyVAO.bind(); // make sure the VBO is up to date
+
+    if (model.VBOBuildTime.getMTime() < publicAPI.getMTime()) {
+      publicAPI.createVBO(viewNode);
+    }
+
+    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.depthMask(false);
+    gl.depthFunc(gl.ALWAYS);
+    gl.viewport(0, 0, size[0], size[1]);
+    gl.scissor(0, 0, size[0], size[1]); // activate texture
+
+    model.translucentRGBATexture.activate();
+    model.copyShader.setUniformi('translucentRGBATexture', model.translucentRGBATexture.getTextureUnit());
+    model.translucentRTexture.activate();
+    model.copyShader.setUniformi('translucentRTexture', model.translucentRTexture.getTextureUnit()); // render quad
+
+    gl.drawArrays(gl.TRIANGLES, 0, model.tris.getCABO().getElementCount());
+    gl.depthMask(true);
+    gl.depthFunc(gl.LEQUAL);
+    model.translucentRGBATexture.deactivate();
+    model.translucentRTexture.deactivate();
+  };
+
+  publicAPI.getShaderReplacement = function () {
+    return translucentShaderReplacement;
+  };
+
+  publicAPI.releaseGraphicsResources = function (viewNode) {
+    if (model.framebuffer) {
+      model.framebuffer.releaseGraphicsResources(viewNode);
+      model.framebuffer = null;
+    }
+
+    if (model.translucentRGBATexture) {
+      model.translucentRGBATexture.releaseGraphicsResources(viewNode);
+      model.translucentRGBATexture = null;
+    }
+
+    if (model.translucentRTexture) {
+      model.translucentRTexture.releaseGraphicsResources(viewNode);
+      model.translucentRTexture = null;
+    }
+
+    if (model.translucentZTexture) {
+      model.translucentZTexture.releaseGraphicsResources(viewNode);
+      model.translucentZTexture = null;
+    }
+
+    if (model.copyVAO) {
+      model.copyVAO.releaseGraphicsResources(viewNode);
+      model.copyVAO = null;
+    }
+
+    if (model.copyShader) {
+      model.copyShader.releaseGraphicsResources(viewNode);
+      model.copyShader = null;
+    }
+
+    if (model.tris) {
+      model.tris.releaseGraphicsResources(viewNode);
+      model.tris = null;
+    }
+
+    publicAPI.modified();
+  };
+} // ----------------------------------------------------------------------------
+// Object factory
+// ----------------------------------------------------------------------------
+
+
+var DEFAULT_VALUES = {
+  framebuffer: null,
+  copyShader: null,
+  tris: null
+}; // ----------------------------------------------------------------------------
+
+function extend(publicAPI, model) {
+  var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  Object.assign(model, DEFAULT_VALUES, initialValues); // Build VTK API
+
+  vtkRenderPass.extend(publicAPI, model, initialValues);
+  model.VBOBuildTime = {};
+  macro.obj(model.VBOBuildTime, {
+    mtime: 0
+  });
+  model.tris = vtkHelper.newInstance();
+  macro.get(publicAPI, model, ['framebuffer']); // Object methods
+
+  vtkOpenGLOrderIndependentTranslucentPass(publicAPI, model);
+} // ----------------------------------------------------------------------------
+
+var newInstance = macro.newInstance(extend, 'vtkOpenGLOrderIndependentTranslucentPass'); // ----------------------------------------------------------------------------
+
+var vtkOpenGLOrderIndependentTranslucentPass$1 = {
+  newInstance: newInstance,
+  extend: extend
+};
+
+export { vtkOpenGLOrderIndependentTranslucentPass$1 as default, extend, newInstance };

package/Rendering/OpenGL/PolyDataMapper.js

@@ -46,6 +46,7 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
 
   publicAPI.buildPass = function (prepass) {
     if (prepass) {
+      model.currentRenderPass = null;
       model.openGLActor = publicAPI.getFirstAncestorOfType('vtkOpenGLActor');
       model.openGLRenderer = model.openGLActor.getFirstAncestorOfType('vtkOpenGLRenderer');
       model.openGLRenderWindow = model.openGLRenderer.getParent();
@@ -54,8 +55,9 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
   }; // Renders myself
 
 
-  publicAPI.translucentPass = function (prepass) {
+  publicAPI.translucentPass = function (prepass, renderPass) {
     if (prepass) {
+      model.currentRenderPass = renderPass;
       publicAPI.render();
     }
   };
@@ -92,7 +94,12 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
   };
 
   publicAPI.buildShaders = function (shaders, ren, actor) {
-    publicAPI.getShaderTemplate(shaders, ren, actor); // user specified pre replacements
+    publicAPI.getShaderTemplate(shaders, ren, actor); // apply any renderPassReplacements
+
+    if (model.lastRenderPassShaderReplacement) {
+      model.lastRenderPassShaderReplacement(shaders);
+    } // user specified pre replacements
+
 
     var openGLSpec = model.renderable.getViewSpecificProperties().OpenGL;
     var shaderReplacements = null;
@@ -603,6 +610,17 @@ function vtkOpenGLPolyDataMapper(publicAPI, model) {
         lastLightCount: numberOfLights
       }, true);
       needRebuild = true;
+    } // has the render pass shader replacement changed? Two options
+
+
+    if (!model.currentRenderPass && model.lastRenderPassShaderReplacement) {
+      needRebuild = true;
+      model.lastRenderPassShaderReplacement = null;
+    }
+
+    if (model.currentRenderPass && model.currentRenderPass.getShaderReplacement() !== model.lastRenderPassShaderReplacement) {
+      model.lastRenderPassShaderReplacement = model.currentRenderPass.getShaderReplacement();
+      needRebuild = true;
     } // has something changed that would require us to recreate the shader?
     // candidates are
     // property modified (representation interpolation and lighting)

package/Rendering/OpenGL/ShaderCache.js

@@ -46,8 +46,16 @@ function vtkShaderCache(publicAPI, model) {
     if (gl2) {
       nVSSource = vtkShaderProgram.substitute(nVSSource, 'varying', 'out').result;
       nFSSource = vtkShaderProgram.substitute(nFSSource, 'varying', 'in').result;
-      nFSSource = vtkShaderProgram.substitute(nFSSource, 'gl_FragData\\[0\\]', 'fragOutput0').result;
-      nFSSource = vtkShaderProgram.substitute(nFSSource, '//VTK::Output::Dec', 'layout(location = 0) out vec4 fragOutput0;').result;
+      var shaderOutputs = '';
+      var outputCount = 0;
+
+      while (nFSSource.includes("gl_FragData[".concat(outputCount, "]"))) {
+        nFSSource = vtkShaderProgram.substitute(nFSSource, "gl_FragData\\[".concat(outputCount, "\\]"), "fragOutput".concat(outputCount)).result;
+        shaderOutputs += "layout(location = ".concat(outputCount, ") out vec4 fragOutput").concat(outputCount, ";\n");
+        outputCount++;
+      }
+
+      nFSSource = vtkShaderProgram.substitute(nFSSource, '//VTK::Output::Dec', shaderOutputs).result;
     } // nFSSource = ShaderProgram.substitute(nFSSource, 'gl_FragData\\[0\\]',
     //   'gl_FragColor').result;
 

package/Rendering/OpenGL/Texture.js

@@ -456,7 +456,11 @@ function vtkOpenGLTexture(publicAPI, model) {
 
   publicAPI.getOpenGLDataType = function (vtkScalarType) {
     var useHalfFloatType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    model.openGLDataType = publicAPI.getDefaultDataType(vtkScalarType, useHalfFloatType);
+
+    if (!model.openGLDataType) {
+      model.openGLDataType = publicAPI.getDefaultDataType(vtkScalarType, useHalfFloatType);
+    }
+
     return model.openGLDataType;
   };
 
@@ -561,13 +565,17 @@ function vtkOpenGLTexture(publicAPI, model) {
 
     if (dataType !== VtkDataTypes.FLOAT && model.openGLDataType === model.context.FLOAT) {
       for (var idx = 0; idx < data.length; idx++) {
-        var newArray = new Float32Array(pixCount);
+        if (data[idx]) {
+          var newArray = new Float32Array(pixCount);
 
-        for (var i = 0; i < pixCount; i++) {
-          newArray[i] = data[idx][i];
-        }
+          for (var i = 0; i < pixCount; i++) {
+            newArray[i] = data[idx][i];
+          }
 
-        pixData.push(newArray);
+          pixData.push(newArray);
+        } else {
+          pixData.push(null);
+        }
       }
     } // if the opengl data type is ubyte
     // then the data array must be u8, we currently simply truncate the data
@@ -575,13 +583,17 @@ function vtkOpenGLTexture(publicAPI, model) {
 
     if (dataType !== VtkDataTypes.UNSIGNED_CHAR && model.openGLDataType === model.context.UNSIGNED_BYTE) {
       for (var _idx = 0; _idx < data.length; _idx++) {
-        var _newArray = new Uint8Array(pixCount);
+        if (data[_idx]) {
+          var _newArray = new Uint8Array(pixCount);
 
-        for (var _i = 0; _i < pixCount; _i++) {
-          _newArray[_i] = data[_idx][_i];
-        }
+          for (var _i = 0; _i < pixCount; _i++) {
+            _newArray[_i] = data[_idx][_i];
+          }
 
-        pixData.push(_newArray);
+          pixData.push(_newArray);
+        } else {
+          pixData.push(null);
+        }
       }
     } // if the opengl data type is half float
     // then the data array must be u16
@@ -592,13 +604,17 @@ function vtkOpenGLTexture(publicAPI, model) {
 
     if (halfFloat) {
       for (var _idx2 = 0; _idx2 < data.length; _idx2++) {
-        var _newArray2 = new Uint16Array(pixCount);
+        if (data[_idx2]) {
+          var _newArray2 = new Uint16Array(pixCount);
 
-        for (var _i2 = 0; _i2 < pixCount; _i2++) {
-          _newArray2[_i2] = HalfFloat.toHalf(data[_idx2][_i2]);
-        }
+          for (var _i2 = 0; _i2 < pixCount; _i2++) {
+            _newArray2[_i2] = HalfFloat.toHalf(data[_idx2][_i2]);
+          }
 
-        pixData.push(_newArray2);
+          pixData.push(_newArray2);
+        } else {
+          pixData.push(null);
+        }
       }
     } // The output has to be filled
 

package/Rendering/OpenGL/glsl/vtkPolyDataFS.glsl.js

@@ -1,3 +1,3 @@
-var vtkPolyDataFS = "//VTK::System::Dec\n\n/*=========================================================================\n\n  Program:   Visualization Toolkit\n  Module:    vtkPolyDataFS.glsl\n\n  Copyright (c) Ken Martin, Will Schroeder, Bill Lorensen\n  All rights reserved.\n  See Copyright.txt or http://www.kitware.com/Copyright.htm for details.\n\n     This software is distributed WITHOUT ANY WARRANTY; without even\n     the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR\n     PURPOSE.  See the above copyright notice for more information.\n\n=========================================================================*/\n// Template for the polydata mappers fragment shader\n\nuniform int PrimitiveIDOffset;\n\n// VC position of this fragment\n//VTK::PositionVC::Dec\n\n// optional color passed in from the vertex shader, vertexColor\n//VTK::Color::Dec\n\n// optional surface normal declaration\n//VTK::Normal::Dec\n\n// extra lighting parameters\n//VTK::Light::Dec\n\n// Texture coordinates\n//VTK::TCoord::Dec\n\n// picking support\n//VTK::Picking::Dec\n\n// Depth Peeling Support\n//VTK::DepthPeeling::Dec\n\n// clipping plane vars\n//VTK::Clip::Dec\n\n// the output of this shader\n//VTK::Output::Dec\n\n// Apple Bug\n//VTK::PrimID::Dec\n\n// handle coincident offsets\n//VTK::Coincident::Dec\n\n//VTK::ZBuffer::Dec\n\nvoid main()\n{\n  // VC position of this fragment. This should not branch/return/discard.\n  //VTK::PositionVC::Impl\n\n  // Place any calls that require uniform flow (e.g. dFdx) here.\n  //VTK::UniformFlow::Impl\n\n  // Set gl_FragDepth here (gl_FragCoord.z by default)\n  //VTK::Depth::Impl\n\n  // Early depth peeling abort:\n  //VTK::DepthPeeling::PreColor\n\n  // Apple Bug\n  //VTK::PrimID::Impl\n\n  //VTK::Clip::Impl\n\n  //VTK::Color::Impl\n\n  // Generate the normal if we are not passed in one\n  //VTK::Normal::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Light::Impl\n\n  if (gl_FragData[0].a <= 0.0)\n    {\n    discard;\n    }\n\n  //VTK::DepthPeeling::Impl\n\n  //VTK::Picking::Impl\n\n  // handle coincident offsets\n  //VTK::Coincident::Impl\n\n  //VTK::ZBuffer::Impl\n}\n";
+var vtkPolyDataFS = "//VTK::System::Dec\n\n/*=========================================================================\n\n  Program:   Visualization Toolkit\n  Module:    vtkPolyDataFS.glsl\n\n  Copyright (c) Ken Martin, Will Schroeder, Bill Lorensen\n  All rights reserved.\n  See Copyright.txt or http://www.kitware.com/Copyright.htm for details.\n\n     This software is distributed WITHOUT ANY WARRANTY; without even\n     the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR\n     PURPOSE.  See the above copyright notice for more information.\n\n=========================================================================*/\n// Template for the polydata mappers fragment shader\n\nuniform int PrimitiveIDOffset;\n\n// VC position of this fragment\n//VTK::PositionVC::Dec\n\n// optional color passed in from the vertex shader, vertexColor\n//VTK::Color::Dec\n\n// optional surface normal declaration\n//VTK::Normal::Dec\n\n// extra lighting parameters\n//VTK::Light::Dec\n\n// Texture coordinates\n//VTK::TCoord::Dec\n\n// picking support\n//VTK::Picking::Dec\n\n// Depth Peeling Support\n//VTK::DepthPeeling::Dec\n\n// clipping plane vars\n//VTK::Clip::Dec\n\n// the output of this shader\n//VTK::Output::Dec\n\n// Apple Bug\n//VTK::PrimID::Dec\n\n// handle coincident offsets\n//VTK::Coincident::Dec\n\n//VTK::ZBuffer::Dec\n\nvoid main()\n{\n  // VC position of this fragment. This should not branch/return/discard.\n  //VTK::PositionVC::Impl\n\n  // Place any calls that require uniform flow (e.g. dFdx) here.\n  //VTK::UniformFlow::Impl\n\n  // Set gl_FragDepth here (gl_FragCoord.z by default)\n  //VTK::Depth::Impl\n\n  // Early depth peeling abort:\n  //VTK::DepthPeeling::PreColor\n\n  // Apple Bug\n  //VTK::PrimID::Impl\n\n  //VTK::Clip::Impl\n\n  //VTK::Color::Impl\n\n  // Generate the normal if we are not passed in one\n  //VTK::Normal::Impl\n\n  //VTK::TCoord::Impl\n\n  //VTK::Light::Impl\n\n  if (gl_FragData[0].a <= 0.0)\n    {\n    discard;\n    }\n\n  //VTK::DepthPeeling::Impl\n\n  //VTK::Picking::Impl\n\n  // handle coincident offsets\n  //VTK::Coincident::Impl\n\n  //VTK::ZBuffer::Impl\n\n  //VTK::RenderPassFragmentShader::Impl\n}\n";
 
 export { vtkPolyDataFS as v };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitware/vtk.js",
-  "version": "23.1.0",
+  "version": "23.2.0",
   "description": "Visualization Toolkit for the Web",
   "keywords": [
     "3d",