Skip to main content

vtk.js

Modifying Shader in vtk.js for Inverse Cropping​

Integrating the Shader Changes in vtk.js Example​

  • I identified that the main code impacting the cropping effect lies within CroppingOutlineRepresentation.

  • Assuming This component handles the visual representation of the cropping box, which seemed like the appropriate place to modify the rendering logic to control visibility within the box.

  • my Efforts were focused here under the assumption that the volume rendering pipeline could be manipulated to discard fragments inside the cropping box.

  • Despite these efforts, this approach failed due to the complexities of VTK.js rendering internals, and the changes could not be successfully shown.

  • Setting Up Shader Replacements:

model.mapper.getViewSpecificProperties().ShaderReplacements = {
  Fragment: {
    replacements: [
      {
        type: 'replace',
        source: 'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',
        replace: `
          varying vec4 myPos;
          void main() {
            vec3 pos = myPos.xyz / myPos.w;
            // Discard fragments inside the cropping box
            if (pos.x > 0.0 && pos.x < 1.0 && pos.y > 0.0 && pos.y < 1.0 && pos.z > 0.0 && pos.z < 1.0) {
              discard;
            }
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // Render fragments outside the box
          }
        `,
      },
    ],
  },
};

Error Handling with vtk Macro​

  • To log an error if necessary, use the following JavaScript logic:
try {
  // Your logic to set up the shader replacements
  if (
    model.mapper.getViewSpecificProperties().ShaderReplacements.Fragment
      .replacements.length === 0
  ) {
    vtkErrorMacro('Shader replacements were not added correctly.');
  }
} catch (error) {
  vtkErrorMacro(
    'An error occurred while setting up shader replacements: ',
    error.message
  );
}

VTK/Volview GitHub Issues

Last updated on by Viraj