Questions about the composition of the 3D MENU bar

Web
,
1

Hello! I have a question.

I created two buttons and configured each to load a 3d file on canvas(using VTK.js).

image

However, I noticed a slowdown as I click and release repeatedly. it seems that a memory leak was happening.

I thought paraviewweb would be a convenient way to implement a menu bar. However, I don’t know how to use it(create-react-app).

The structure of the code is as follows:

componentDidUpdate() {
    if (this.props.item === 0) {
      this.cortical()
    }
    if (this.props.item === 1) {
      this.hippo()
    }
    if (this.props.item === 2) {
      this.cortical()
      this.hippo()
    }
}

cortical(){
...
     //var renderer1 : Global variable
     const threeDGenericRenderWindow = vtkGenericRenderWindow.newInstance({
          dimensions: [1, 1, 1],
          background: [0, 0, 0]
     });
     ...
     renderer1 = threeDGenericRenderWindow.getRenderer();
     const vtiReader2 = vtkXMLImageDataReader.newInstance({
       fetchGzip: true
     });
...
}

hippo(){
...
      //var renderer2 : Global variable
     const threeDGenericRenderWindow = vtkGenericRenderWindow.newInstance({
          dimensions: [1, 1, 1],
          background: [0, 0, 0]
     });
     ...
     renderer2 = threeDGenericRenderWindow.getRenderer();
     const vtiReader2 = vtkXMLImageDataReader.newInstance({
       fetchGzip: true
     });
...
}

Is there a better way?

2

Any specific reason to create a new window each time you click the button?

It seems indeed that the code could be better organized but right now it is hard to tell as the specification of the problem is limited.

1 Like
3

Thank you for the answer.

I restructured my code again. It looks like the following code:

//global variable
var renderer;
var renderWindow;
var container;
var widgetContainer;
var piecewiseFunction;
var volumeActor;
var volumeMapper;

export default class VTKVolume extends Component {
componentDidMount() {
    this.original();
}

componentDidUpdate() {
    if (this.props.item === 0) {
      this.cortical();
    }
    if (this.props.item === 1) {
      this.hippo();
    }
    if (this.props.item === 2) {
      this.cortical();
      this.hippo();
    }
}

original() {
...//Share a variable as a global variable
let originalUrl = "..."

vtireader.setUrl(originalUrl).then(() =>{...});
...
}

cortical(){
...//Share a variable as a global variable
let corticalUrl = "..."

vtireader.setUrl(corticalUrl).then(() =>{...});
...
}

hippo(){
...//Share a variable as a global variable
let hippoUrl = "..."

vtireader.setUrl(hippoUrl).then(() =>{...});
...
}
}

I want to use only one canvas for every function call(original(), cortical(), hippo()). The code above seems to recreate the canvas when the function is called. This inefficiency causes memory waste and becomes slower.
This problem has been around for a while. How should I improve my code?

image
image.png1121×649 54.4 KB

thank you!

4

Based on what I can see it is hard to tell. To me it is just poorly designed. Unfortunately discourse does not aim to teach users how to code. So I’m not sure I can be of much help.

1 Like
5

Thank you for your reply.

I’ll try that!!

Thank you