rendering problems when volume and surface source are added in the same scene

Web
8

Here is the example I’ve been testing that works for me

/* eslint-disable import/prefer-default-export */
/* eslint-disable import/no-extraneous-dependencies */

import 'vtk.js/Sources/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import 'vtk.js/Sources/Rendering/Profiles/All';

import 'vtk.js/Sources/Rendering/Misc/RenderingAPIs';
import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';
import vtkSphereSource from 'vtk.js/Sources/Filters/Sources/SphereSource';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';

// Force the loading of HttpDataAccessHelper to support gzip decompression
import 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';

// Create some control UI
const container = document.querySelector('body');
const renderWindowContainer = document.createElement('div');
container.appendChild(renderWindowContainer);

// create what we will view
const renderWindow = vtkRenderWindow.newInstance();
const renderer = vtkRenderer.newInstance();
renderWindow.addRenderer(renderer);
renderer.setBackground(0.32, 0.3, 0.43);

const volume = vtkVolume.newInstance();

const vmapper = vtkVolumeMapper.newInstance();
vmapper.setSampleDistance(0.7);
volume.setMapper(vmapper);

const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
// create color and opacity transfer functions
const ctfun = vtkColorTransferFunction.newInstance();
ctfun.addRGBPoint(0, 85 / 255.0, 0, 0);
ctfun.addRGBPoint(95, 1.0, 1.0, 1.0);
ctfun.addRGBPoint(225, 0.66, 0.66, 0.5);
ctfun.addRGBPoint(255, 0.3, 1.0, 0.5);
const ofun = vtkPiecewiseFunction.newInstance();
ofun.addPoint(0.0, 0.0);
ofun.addPoint(255.0, 1.0);
volume.getProperty().setRGBTransferFunction(0, ctfun);
volume.getProperty().setScalarOpacity(0, ofun);
volume.getProperty().setScalarOpacityUnitDistance(0, 3.0);
volume.getProperty().setInterpolationTypeToFastLinear();

vmapper.setInputConnection(reader.getOutputPort());

// now create something to view it
const glwindow = renderWindow.newAPISpecificView();
glwindow.setContainer(renderWindowContainer);
renderWindow.addView(glwindow);
glwindow.setSize(400, 400);

// const renderer2 = vtkRenderer.newInstance();
// renderWindow.addRenderer(renderer2);
// renderer2.setLayer(0);
// renderer2.setViewport(0.0, 0.0, 0.5, 0.5);
// renderer2.setBackground(0.8, 0.4, 0.2);
const actor = vtkActor.newInstance();
renderer.addActor(actor);
// renderer2.setPreserveColorBuffer(true);
// renderer2.setPreserveDepthBuffer(true);

const mapper = vtkMapper.newInstance();
actor.setMapper(mapper);
actor.setPosition(300, 200, 200);
actor.getProperty().setOpacity(0.1);

const sphereSource = vtkSphereSource.newInstance({
  radius: 100,
  thetaResolution: 36,
  phiResolution: 18,
});
mapper.setInputConnection(sphereSource.getOutputPort());
// renderer2.resetCamera();

// Interactor
const interactor = vtkRenderWindowInteractor.newInstance();
interactor.setStillUpdateRate(0.01);
interactor.setView(glwindow);
interactor.initialize();
interactor.bindEvents(renderWindowContainer);

interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());

reader.setUrl(`${__BASE_PATH__}/Data/volume/LIDC2.vti`).then(() => {
  reader.loadData().then(() => {
    renderer.addVolume(volume);
    renderer.resetCamera();
    renderer.getActiveCamera().zoom(1.5);
    renderer.getActiveCamera().elevation(70);
    renderer.getActiveCamera().orthogonalizeViewUp();
    renderer.getActiveCamera().azimuth(-20);
    renderer.resetCameraClippingRange();
    renderWindow.render();
  });
  renderWindow.render();
});

renderWindow.render();