Volume Rendering - React

리소스로 가지고 있는 vti 파일을 출력하는 예제입니다.

 

먼저 public 폴더에 vti 파일을 넣습니다. 그리고 그 파일에 접근할때는 process.env.PUBLIC_URL+'/LIDC2.vti' 로 접근하면 됩니다.

 

실제 코드는 아래와 같습니다.

import './App.css'

import { useRef, useEffect } from 'react';

 

// Load the rendering pieces we want to use (for both WebGL and WebGPU)

import '@kitware/vtk.js/Rendering/Profiles/Volume';

 

// Force DataAccessHelper to have access to various data source

import '@kitware/vtk.js/IO/Core/DataAccessHelper/HtmlDataAccessHelper';

import '@kitware/vtk.js/IO/Core/DataAccessHelper/HttpDataAccessHelper';

import '@kitware/vtk.js/IO/Core/DataAccessHelper/JSZipDataAccessHelper';

 

import vtkColorTransferFunction     from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';

import vtkPiecewiseFunction         from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';

import vtkVolume                    from '@kitware/vtk.js/Rendering/Core/Volume';

import vtkVolumeMapper              from '@kitware/vtk.js/Rendering/Core/VolumeMapper';

import vtkRenderer                  from '@kitware/vtk.js/Rendering/Core/Renderer';

import vtkRenderWindow              from '@kitware/vtk.js/Rendering/Core/RenderWindow';

import vtkOpenGLRenderWindow        from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';

import xmlImageDataReader           from '@kitware/vtk.js/IO/XML/XMLImageDataReader';

import vtkRenderWindowInteractor    from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';

import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';

 

import robot from './logo.svg'

 

function App() {

  const vtkContainerRef = useRef(null);

  const context = useRef(null);

 

  useEffect(() => {

 

    if (!context.current) {

     

      const actor = vtkVolume.newInstance();

      const mapper = vtkVolumeMapper.newInstance();

     

      const renderWindow = vtkRenderWindow.newInstance();

      const renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });

      const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();

     

      const interactor = vtkRenderWindowInteractor.newInstance();

      const interStyle = vtkInteractorStyleTrackballCamera.newInstance();

     

      const xmlReader = xmlImageDataReader.newInstance();

 

      renderWindow.addRenderer(renderer);      

      renderWindow.addView(openglRenderWindow);

 

      vtkContainerRef.current.style.width = '300px';

      vtkContainerRef.current.style.height = '300px';

      openglRenderWindow.setContainer(vtkContainerRef.current);

      openglRenderWindow.setSize(300, 300);

 

      interactor.setView(openglRenderWindow);

      interactor.initialize();

      interactor.bindEvents(vtkContainerRef.current);

      interactor.setInteractorStyle(interStyle);

 

      mapper.setSampleDistance(0.7);

      actor.setMapper(mapper);

 

      // create color and opacity transfer functions

      const ctfun = vtkColorTransferFunction.newInstance();

      ctfun.addRGBPoint(-2000.0, 0.4, 0.2, 0.0);

      ctfun.addRGBPoint(7000.0, 1.0, 1.0, 1.0);

      const ofun = vtkPiecewiseFunction.newInstance();

      ofun.addPoint(-2000.0, 0.1);

      ofun.addPoint(1200.0, 0.5);

      ofun.addPoint(7000.0, 0.8);

      actor.getProperty().setRGBTransferFunction(0, ctfun);

      actor.getProperty().setScalarOpacity(0, ofun);

      actor.getProperty().setScalarOpacityUnitDistance(0, 4.5);

      actor.getProperty().setInterpolationTypeToLinear();

      actor.getProperty().setUseGradientOpacity(0, true);

      actor.getProperty().setGradientOpacityMinimumValue(0, 15);

      actor.getProperty().setGradientOpacityMinimumOpacity(0, 0.0);

      actor.getProperty().setGradientOpacityMaximumValue(0, 100);

      actor.getProperty().setGradientOpacityMaximumOpacity(0, 1.0);

      actor.getProperty().setShade(true);

      actor.getProperty().setAmbient(0.2);

      actor.getProperty().setDiffuse(0.7);

      actor.getProperty().setSpecular(0.3);

      actor.getProperty().setSpecularPower(8.0);

 

      mapper.setInputConnection(xmlReader.getOutputPort());

 

      xmlReader.setUrl(process.env.PUBLIC_URL+'/LIDC2.vti').then(() => {

        xmlReader.loadData().then(() =>{

          renderer.addVolume(actor);

          renderer.resetCamera();

          renderer.getActiveCamera().zoom(1.5);

          renderer.getActiveCamera().elevation(70);

          renderer.updateLightsGeometryToFollowCamera();

          renderWindow.render();

        });

      });

    }

  }, [vtkContainerRef]);

 

  return (

    <div>      

      <div className="mainView" ref={vtkContainerRef}></div>

      <a href={robot} download="robot.txt">download</a>

    </div>

  );

}

 

export default App;