The post demonstrates the process of configuring the 3D window after switching from the original canvas to another.

After clicking on the update button at the bottom-left position on the webpage, we will call Worker::ChangeRenderWindow to handle the scene.

index.html:

<html>
   <head>
      <!-- Load WebAssembly module -->
      <script type="text/javascript" src="changeCanvasForWASM.js"></script>
   </head>
   <body>
      <canvas id="canvas" style="position: absolute; left: 0; top: 0; width:500px; height:500px"></canvas>
      <canvas id="canvas1" style="position: absolute; right: 0; top: 0; width:500px; height:500px"></canvas>
      
      <button id="button" style="position: absolute; left: 0; bottom: 0;"> update </button>

      <script>
        function $(id){ return document.getElementById(id); }

        var workerObj = null;
        var Module = {
         canvas: (function () {
           var canvas = document.getElementById('canvas');
           canvas.addEventListener(
             "webglcontextlost",
             function (e) {
               console.error('WebGL context lost. You will need to reload the page.');
               e.preventDefault();
             },
             false
           );
           return canvas;
         })(),
         onRuntimeInitialized: function () {
            workerObj = new Module.Worker();
            workerObj.Init();
            workerObj.Start();
            console.log( "StartWork!" );
         },
         };

        var app = tester(Module);
        console.log('App created');

        // change left and right canvases.
        $('button').onclick = function()
        {
          workerObj.Terminate();

          $('canvas').hidden="hidden";
          $('canvas').id = "canvas2";
          $('canvas1').id = "canvas";
          Module.canvas = $('canvas');
          $('canvas2').id = "canvas1";

          workerObj.ChangeRenderWindow();
          console.log( "StartWork!" );
        }
      </script>
   </body>
</html>

The interface in worker.cpp:

/**
 * @brief   the interface is used in web page
 * 
 * @return  nothing
 */
void Worker::ChangeRenderWindow()
{
    //m_RenderWindowInteractor->TerminateApp();
    
    std::cout << "m_Renderer: " << m_Renderer << std::endl;
    std::cout << "m_RenderWindowInteractor: " << m_RenderWindowInteractor << std::endl;

    m_Renderer = vtkSPtr<vtkRenderer>::New(); // need it!
    m_Renderer->AddActor(m_Actor);
    m_Renderer->SetBackground( 0, 0, 0 );

    m_RenderWindow = vtkSPtr<vtkSDL2OpenGLRenderWindow>::New(); // need
    m_RenderWindow->AddRenderer( m_Renderer );
    //m_RenderWindowInteractor = vtkSPtr<vtkSDL2RenderWindowInteractor>::New();
    m_RenderWindowInteractor->SetRenderWindow( m_RenderWindow );

    m_Renderer->ResetCamera();
    m_RenderWindow->Render();
    m_RenderWindowInteractor->Start();
}

The whole project had been uploaded to GitHub:

https://github.com/theArcticOcean/tutorials/tree/main/learnWebAssembly/changeCanvasForWASM

Result:

Categories: VTKWeb

0 0 votes
Article Rating
Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] and renderer is neccessary if we don’t restart all data loading.The related post is Change Canvas For VTK WASM Project. I got the following error info on the web page if […]

trackback

[…] I found an interesting issue about vtkSDL2OpenGLRenderWindow::SetSize when changed canvas for VTK WASM 3D window.The related post on the website is Change Canvas For VTK WASM Project. […]

Explain Code
: explain the code you input to help you to understand it.

X
3
0
Would love your thoughts, please comment.x
()
x