Hello All,
I am trying to do volume rendering which works with fullscreenrendering but I want to place it in a div element rather than full screen. I tried the example which was provided here vtk.js, but I am getting no input error. Am i doing something wrong?
below is my html code for volume rendering with
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance()
var ofun = vtk.Common.DataModel.vtkPiecewiseFunction.newInstance();
var ctfun = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
var actor = vtk.Rendering.Core.vtkVolume.newInstance();
var mapper = vtk.Rendering.Core.vtkVolumeMapper.newInstance();
var xmlImageDataReader = vtk.IO.XML.vtkXMLImageDataReader.newInstance();
var openglRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();
var renderWindow2 = vtk.Rendering.Core.vtkRenderWindow.newInstance();
var renderWindowInteractor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
var renderer2 = vtk.Rendering.Core.vtkRenderer.newInstance();
var interactor = vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance();
//console.log(screenRenderWindow);
// var reader = vtk.IO.Core.vtkHttpDataSetReader.newInstance({ fetchGzip: true });
//var renderer = fullScreenRenderer.getRenderer();
//var renderWindow = fullScreenRenderer.getRenderWindow();
renderWindow2.addRenderer(renderer2);
mapper.setSampleDistance(1.3);
actor.setMapper(mapper);
renderer2.addActor(actor);
renderer2.resetCamera();
renderWindow2.addView(openglRenderWindow);
const container = document.createElement('div');
document.querySelector('body').appendChild(container);
openglRenderWindow.setContainer(container);
const { width, height } = container.getBoundingClientRect();
openglRenderWindow.setSize(width, height);
renderWindowInteractor.setView(openglRenderWindow);
renderWindowInteractor.initialize();
renderWindowInteractor.bindEvents(container);
renderWindowInteractor.setInteractorStyle(interactor);
mapper.setInputConnection(xmlImageDataReader.getOutputPort());
ofun.addPoint(-3024, 0.1);
ofun.addPoint(-637.62, 0.1);
ofun.addPoint(700, 0.5);
ofun.addPoint(3071, 0.9);
ctfun.addRGBPoint(0, 0, 0, 0);
ctfun.addRGBPoint(255, 1.0, 1.0, 1.0);
actor.getProperty().setRGBTransferFunction(0, ctfun);
actor.getProperty().setScalarOpacity(0, ofun);
actor.getProperty().setInterpolationTypeToLinear();
actor.getProperty().setIndependentComponents(0);
function updateBlendMode(event) {
const blendMode = parseInt(event.target.value, 10);
mapper.setBlendMode(blendMode);
renderWindow2.render();
}
xmlImageDataReader.setUrl('test2.vti').then(() => {
xmlImageDataReader.loadData().then(() => {
renderer2.addVolume(actor);
//const interactor = renderWindow2.getInteractor();
renderWindowInteractor.setDesiredUpdateRate(15.0);
// renderer.background("red");
renderer2.resetCamera();
renderer2.getActiveCamera().elevation(-70);
renderWindow2.render();
// const el = document.querySelector('.blendMode');
// el.addEventListener('change', updateBlendMode);
});
});
</script>
Yes the fullScreen render window part that you want to replace is just the following piece of code from the simple cone. The mapper setup, volume and so on should remain the way they were from your working example.
import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';
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 vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';
// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------
const renderWindow = vtkRenderWindow.newInstance();
const renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
renderWindow.addRenderer(renderer);
// ----------------------------------------------------------------------------
// Use OpenGL as the backend to view the all this
// ----------------------------------------------------------------------------
const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
renderWindow.addView(openglRenderWindow);
// ----------------------------------------------------------------------------
// Create a div section to put this into
// ----------------------------------------------------------------------------
const container = document.createElement('div');
document.querySelector('body').appendChild(container);
openglRenderWindow.setContainer(container);
// ----------------------------------------------------------------------------
// Capture size of the container and set it to the renderWindow
// ----------------------------------------------------------------------------
const { width, height } = container.getBoundingClientRect();
openglRenderWindow.setSize(width, height);
// ----------------------------------------------------------------------------
// Setup an interactor to handle mouse events
// ----------------------------------------------------------------------------
const interactor = vtkRenderWindowInteractor.newInstance();
interactor.setView(openglRenderWindow);
interactor.initialize();
interactor.bindEvents(container);
// ----------------------------------------------------------------------------
// Setup interactor style to use
// ----------------------------------------------------------------------------
interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
As you can see the vtkFullScreenRenderWindow save you quite some boilerplate code.
Thank you so much Sebastien, I really appreciate your help.
Best Regards
Saptarshi
Hello Sebastien,
I hope you are doing well. I added the mapper setup, volume setup the way it was with the fullScreen render window into the new one with just render window, I am not getting the input error, but nothing is getting rendered on the screen. I reverted back my changes to fullscreen it starts to work. Below is my updated html code.
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance()
var ofun = vtk.Common.DataModel.vtkPiecewiseFunction.newInstance();
var ctfun = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
var actor = vtk.Rendering.Core.vtkVolume.newInstance();
var mapper = vtk.Rendering.Core.vtkVolumeMapper.newInstance();
var xmlImageDataReader = vtk.IO.XML.vtkXMLImageDataReader.newInstance();
var openglRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();
var renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();
var interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
var renderer = vtk.Rendering.Core.vtkRenderer.newInstance();
renderWindow.addRenderer(renderer);
renderWindow.addView(openglRenderWindow);
var container = document.createElement('div');
document.querySelector('body').appendChild(container);
openglRenderWindow.setContainer(container);
const { width, height } = container.getBoundingClientRect();
openglRenderWindow.setSize(width, height);
interactor.setView(openglRenderWindow);
interactor.initialize();
interactor.bindEvents(container);
interactor.setInteractorStyle(vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance());
mapper.setSampleDistance(1.3);
actor.setMapper(mapper);
ofun.addPoint(-3024, 0.1);
ofun.addPoint(-637.62, 0.1);
ofun.addPoint(700, 0.5);
ofun.addPoint(3071, 0.9);
ctfun.addRGBPoint(0, 0, 0, 0);
ctfun.addRGBPoint(255, 1.0, 1.0, 1.0);
actor.getProperty().setRGBTransferFunction(0, ctfun);
actor.getProperty().setInterpolationTypeToLinear();
actor.getProperty().setIndependentComponents(0);
mapper.setInputConnection(xmlImageDataReader.getOutputPort());
xmlImageDataReader.setUrl('test2.vti').then(() => {
xmlImageDataReader.loadData().then(() => {
renderer.addVolume(actor);
interactor.setDesiredUpdateRate(15.0);
console.log(interactor);
renderer.resetCamera();
renderer.getActiveCamera().elevation(-70);
renderWindow.render();
});
});
I bet your div does not have any style and therefore no size?
Okay Sebastien, that makes sense. Let me try that out.
Best Regards,
Saptarshi
Hello Sebastien,
I just checked openglRenderWindow.setSize(width, height); it is taking in width and height with value 715, 715.
Best Regards,
Saptarshi
Then it should work. There is no differences except maybe some css.
Hello Sebastien,
Shall I send you the html code file and the vti file? because I am not able to understand where I am going wrong.
Best Regards,
Saptarshi
Just push a codepen and I can look at it.
okay Sebastien. Thank you so much, I really appreciate your help.
Best Regards,
Saptarshi
Hello Sebastien, the free code pen account is not allowing me to upload the vti file which is more than 5mb. Is it possible that I can send you the code and the file via email. I really appreciate your help
Best Regards,
Saptarshi
sure sebastien (dot) jourdain (at) kitware (dot) com
Solution
The issue was that you were still instantiating the fullscreen view that was hiding the other one?
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
var vtkOpenGLRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow;
var vtkRenderWindow = vtk.Rendering.Core.vtkRenderWindow;
var vtkRenderWindowInteractor = vtk.Rendering.Core.vtkRenderWindowInteractor;
var vtkRenderer = vtk.Rendering.Core.vtkRenderer;
var vtkInteractorStyleTrackballCamera = vtk.Interaction.Style.vtkInteractorStyleTrackballCamera;
// var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance()
var ofun = vtk.Common.DataModel.vtkPiecewiseFunction.newInstance();
var ctfun = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
var actor = vtk.Rendering.Core.vtkVolume.newInstance();
var mapper = vtk.Rendering.Core.vtkVolumeMapper.newInstance();
var xmlImageDataReader = vtk.IO.XML.vtkXMLImageDataReader.newInstance();
// var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
// background: [0.3, 0.3, 0.3],
// });
// var renderer = fullScreenRenderer.getRenderer();
// var renderWindow = fullScreenRenderer.getRenderWindow();
var renderWindow = vtkRenderWindow.newInstance();
var renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
renderWindow.addRenderer(renderer);
// ----------------------------------------------------------------------------
// Use OpenGL as the backend to view the all this
// ----------------------------------------------------------------------------
var openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
renderWindow.addView(openglRenderWindow);
// ----------------------------------------------------------------------------
// Create a div section to put this into
// ----------------------------------------------------------------------------
var container = document.createElement('div');
container.style.width = '300px';
container.style.height = '300px';
document.querySelector('body').appendChild(container);
openglRenderWindow.setContainer(container);
// ----------------------------------------------------------------------------
// Capture size of the container and set it to the renderWindow
// ----------------------------------------------------------------------------
var { width, height } = container.getBoundingClientRect();
openglRenderWindow.setSize(width, height);
// ----------------------------------------------------------------------------
// Setup an interactor to handle mouse events
// ----------------------------------------------------------------------------
var interactor = vtkRenderWindowInteractor.newInstance();
interactor.setView(openglRenderWindow);
interactor.initialize();
interactor.bindEvents(container);
// ----------------------------------------------------------------------------
// Setup interactor style to use
// ----------------------------------------------------------------------------
interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
// ----------------------------------------------------------------------------
mapper.setSampleDistance(1.3);
actor.setMapper(mapper);
ofun.addPoint(-3024, 0.1);
ofun.addPoint(-637.62, 0.1);
ofun.addPoint(700, 0.5);
ofun.addPoint(3071, 0.9);
ctfun.addRGBPoint(0, 0, 0, 0);
ctfun.addRGBPoint(255, 1.0, 1.0, 1.0);
actor.getProperty().setRGBTransferFunction(0, ctfun);
actor.getProperty().setInterpolationTypeToLinear();
actor.getProperty().setIndependentComponents(0);
mapper.setInputConnection(xmlImageDataReader.getOutputPort());
xmlImageDataReader.setUrl('test2.vti').then(() => {
xmlImageDataReader.loadData().then(() => {
renderer.addVolume(actor);
const interactor = renderWindow.getInteractor();
interactor.setDesiredUpdateRate(15.0);
console.log(interactor);
renderer.resetCamera();
renderer.getActiveCamera().elevation(-70);
renderWindow.render();
});
});
</script>
</body>
</html>
Hello Sebastien, Thank you so much for your help again. I really really appreciate it. I just checked, it was very foolish of me.
Best Regards
Saptarshi