Passing HTTP headers to vtkPLYReader

Web
1

Hi,

I’m putting together an application that uses React and vtk.js to render a mesh created by gmsh and exported as PLY format.

All is working well, but the problem comes when I fiddle with the idea of interacting with a reasonably complex backend REST API in order to feed the PLY data as binary files to the frontend, for which I will need to pass on headers for diverse purposes (authentication/authorization at least)

I found here that some readers might be able to take in option objects with parameters such as headers. When I try that with the vtkPLYReader, it just stops working.

function App() {
  const vtkContainerRef = useRef(null);
  const context = useRef(null);
  const [representation, setRepresentation] = useState(2);  
  
  
  useEffect(() => {
    if (!context.current) {
        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        container: vtkContainerRef.current
      });

    const renderer = fullScreenRenderer.getRenderer();
    const renderWindow = fullScreenRenderer.getRenderWindow();
    
    const reader = vtkPLYReader.newInstance();
    const mapper = vtkMapper.newInstance({scalarVisibility: false});
    
    reader.setUrl("mesh", {headers: { Authorization: "Bearer 123"}})
    
    const outputport = reader.getOutputPort();
    mapper.setInputConnection(outputport);

    const actor = vtkActor.newInstance();
    actor.setMapper(mapper);
    actor.getProperty().setColor(0.3, 1.0, 0.5)
    renderer.addActor(actor);
    renderer.resetCamera();
    renderWindow.render();

/*
More code
*/

image
image1486×524 73.4 KB

Is there a way to accomplish this? I’ve also tried a fetch implementation, and although I do see the traffic being exchanged between frontend and backed, it does not seem to reach the reader.

function App() {
  const vtkContainerRef = useRef(null);
  const context = useRef(null);
  const [representation, setRepresentation] = useState(2);  
  
  
  useEffect(() => {
    if (!context.current) {
        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        container: vtkContainerRef.current
      });

    const renderer = fullScreenRenderer.getRenderer();
    const renderWindow = fullScreenRenderer.getRenderWindow();
    
    const reader = vtkPLYReader.newInstance();
    const mapper = vtkMapper.newInstance({scalarVisibility: false});
    
    fetch("mesh", { mode: "no-cors"})
    .then( r => r.arrayBuffer() )
    .then( c => reader.parseAsArrayBuffer(c))
    .catch( e => console.error(e))

    const outputport = reader.getOutputPort();
    mapper.setInputConnection(outputport);

    const actor = vtkActor.newInstance();
    actor.setMapper(mapper);
    actor.getProperty().setColor(0.3, 1.0, 0.5)
    renderer.addActor(actor);
    renderer.resetCamera();
    renderWindow.render();

    /*
    More code
    */

I suspect it might be arriving late and some sort of callback might be necessary.
Please have some mercy, these are my first steps with React and JS in general, I might be overlooking things that might be obvious to you.

Thanks in advance.

2

In your fetch code, is your mesh hosted on a different domain? no-cors will not give you access to the response contents, so r.arrayBuffer() will fail and never reach reader.parseAsArrayBuffer(c). Try removing the mode: 'no-cors' bit and see what happens.

3

Indeed @Forrest, { mode: "same-origin" } did the trick for development purposes, since I am calling a service on localhost. Probably in production this will require different configurations in this regard. My understanding of cors seems to be quite poor at the moment.

Thanks for your input!