@kitware/vtk.js 23.0.1 → 23.3.0-beta.1

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/RenderWindow.d.ts

@@ -1,9 +1,9 @@
-import { vtkAlgorithm, vtkObject } from '@kitware/vtk.js/interfaces';
-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';
+import { vtkAlgorithm, vtkObject } from '../../interfaces';
+import { Nullable, Size, Vector2, Vector3 } from '../../types';
+import { vtkRenderer } from '../../Rendering/Core/Renderer';
+import { VtkDataTypes } from '../../Common/Core/DataArray';
+import vtkTexture from '../Core/Texture';
+import vtkViewStream from '../../IO/Core/ImageStream/ViewStream';
 
 /**
  *
@@ -199,7 +199,7 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 	 *
 	 * @param options
 	 */
-	get3DContext(options: object): WebGLRenderingContext | null;
+	get3DContext(options: object): Nullable<WebGLRenderingContext>;
 
 	/**
 	 *
@@ -241,20 +241,20 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 
 	/**
 	 *
-	 * @param vtktype
-	 * @param numComps
-	 * @param useFloat
+	 * @param {VtkDataTypes} vtktype 
+	 * @param {Number} numComps 
+	 * @param {Boolean} useFloat 
 	 */
 	getDefaultTextureInternalFormat(vtktype: VtkDataTypes, numComps: number, useFloat: boolean): void;
 
 	/**
-	 *
-	 * @param {HTMLImageElement} img
+	 * 
+	 * @param {HTMLImageElement} img The background image.
 	 */
 	setBackgroundImage(img: HTMLImageElement): void;
 
 	/**
-	 *
+	 * 
 	 * @param {Boolean} value
 	 */
 	setUseBackgroundImage(value: boolean): void;
@@ -273,7 +273,7 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 	 * @param {String} format
 	 * @param {IOptions} options
 	 */
-	captureNextImage(format: string, options: IOptions): Promise<string> | null;
+	captureNextImage(format: string, options: IOptions): Nullable<Promise<string>>;
 
 	/**
 	 *
@@ -297,20 +297,20 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
 
 	/**
 	 *
-	 * @param stream
+	 * @param {vtkViewStream} stream The vtkViewStream instance.
 	 */
 	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;
 

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;