# vtkWebGPURenderWindow cannot render frame

**URL:** https://discourse.vtk.org/t/vtkwebgpurenderwindow-cannot-render-frame/14927
**Category:** vtk.wasm
**Created:** [November 27, 2024, 1:42pm UTC](https://discourse.vtk.org/t/vtkwebgpurenderwindow-cannot-render-frame/14927 "2024-11-27T13:42:03Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![blocky](https://discourse.vtk.org/user_avatar/discourse.vtk.org/blocky/32/9531_2.png) [@blocky](https://discourse.vtk.org/u/blocky)
#### Post date: [November 27, 2024, 1:42pm UTC](https://discourse.vtk.org/t/vtkwebgpurenderwindow-cannot-render-frame/14927/1 "2024-11-27T13:42:03Z")

</div>

I’m trying to make a web application like [vtk-wasm-demos](https://github.com/Kitware/vtk-wasm-demos.) The program runs well with WebGL, but when switching to WebGPU, the canvas appears blank, without any error messages. If I trigger any interactions, I will receive the following errors:

> ERROR: In vtkWebGPURenderWindow.cxx, line 893  
> vtkWebAssemblyWebGPURenderWindow (0x30302a80): Cannot render frame because the command encoder is null!

I’ve tried [MultiCone example](https://gitlab.kitware.com/vtk/vtk/-/tree/master/Examples/Emscripten/Cxx/MultiCone) and it works well in both WebGL and WebGPU.  
Anyway vtk-wasm-demos is more complex, perhaps I have missed some settings for WebGPU. Is anyone able to give me any hints?  
thanks

the code of configuration  
CanvasFunction.js:

```auto
async function InitCanvas() {
  const module = await import("./utils/wasmConfigure.js");
  let configuration = module.getConfiguration(await TestIfSupportGpu());
  // init canvas viewer
  wasmModule = await createCanvasViewer(configuration);
  canvasViewer = new wasmModule.CanvasViewer();
  await canvasViewer.initialize();
}

async function TestIfSupportGpu() {
  if (navigator.gpu === undefined) {
    return false;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (adapter === null) {
    return false;
  }
  return true;
}

```

CanvasViewer.cxx:

```auto
void CanvasViewer::Initialize()
{
    this->P->Window->AddRenderer(this->P->Renderer);
    this->P->Window->SetInteractor(this->P->Interactor);
    auto iren = vtkWebAssemblyRenderWindowInteractor::SafeDownCast(this->P->Interactor);
    iren->SetCanvasSelector("#canvas");
    if (auto wasmWebGPURenderWindow =
            vtkWebAssemblyWebGPURenderWindow::SafeDownCast(this->P->Window))
    {
        wasmWebGPURenderWindow->SetCanvasSelector("#canvas");
    }
    if (auto wasmOpenGLRenderWindow =
            vtkWebAssemblyOpenGLRenderWindow::SafeDownCast(this->P->Window))
    {
        wasmOpenGLRenderWindow->SetCanvasSelector("#canvas");
    }
    vtkRenderWindowInteractor::InteractorManagesTheEventLoop = false;
    if (auto iStyle = vtkInteractorStyle::SafeDownCast(
            this->P->Interactor->GetInteractorStyle()))
    {
        if (auto switchStyle = vtkInteractorStyleSwitch::SafeDownCast(iStyle))
        {
            switchStyle->SetCurrentStyleToTrackballCamera();
        }
    }
    this->P->Renderer->ResetCamera();
    this->P->Window->Render();
    this->P->Interactor->Start();
}

```

wasmConfigure.js:

```auto
export function getConfiguration(supportWebGpu) {
  if (supportWebGpu) {
    const configuration = {
      canvas: (function () {
        const canvas = document.getElementById("canvas");
        canvas.oncontextmenu = (event) => {
          event.preventDefault();
        };
        canvas.onclick = () => {
          canvas.focus();
        }; 
        canvas.tabIndex = -1;
        return canvas;
      })(),
      print: (text) => console.debug(text),
      printErr: (text) => console.error(text),
      preRun: [
        function (module) {
          module.ENV.VTK_GRAPHICS_BACKEND = "WEBGPU";
        },
      ],
    };
    return configuration;
  } else {
    const configuration = {
      canvas: (function () {
        const canvas = document.getElementById("canvas");
        canvas.oncontextmenu = (event) => {
          event.preventDefault();
        };
        canvas.onclick = () => {
          canvas.focus();
        }; 
        canvas.tabIndex = -1;
        canvas.addEventListener(
          "webglcontextlost",
          function (e) {
            alert("WebGL context lost. You will need to reload the page.");
            e.preventDefault();
          },
          false
        );
        return canvas;
      })(),
      print: (text) => console.debug(text),
      printErr: (text) => console.error(text),
    };
    return configuration;
  }
}

```

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [November 27, 2024, 3:56pm UTC](https://discourse.vtk.org/t/vtkwebgpurenderwindow-cannot-render-frame/14927/2 "2024-11-27T15:56:58Z")

</div>

Hi @blocky, that can happen when browser failed to provision a webgpu device. Some browsers succeed in providing an adapter but fail to give a device, I think a combination of Linux and specific nvidia drivers is known to cause it. Are there any other errors you see in dev console?

What VTK commit is your build based upon?

---

<div class="post-metadata">

### Author: ![blocky](https://discourse.vtk.org/user_avatar/discourse.vtk.org/blocky/32/9531_2.png) [@blocky](https://discourse.vtk.org/u/blocky)
#### Post date: [December 2, 2024, 12:53pm UTC](https://discourse.vtk.org/t/vtkwebgpurenderwindow-cannot-render-frame/14927/3 "2024-12-02T12:53:51Z")

</div>

Hi @jaswantp

thanks for taking the time to look into the issue! My system is Windows and the version of VTK is [v9.4.0.](https://github.com/Kitware/VTK/releases/tag/v9.4.0)

I tried to hand device over to the module object, but that not functioning as expected.  
There are no further prompts on the interactor. But When I tried to run this [example](https://examples.vtk.org/site/Cxx/Visualization/ColoredAnnotatedCube/) , `vtkAxesActor` results in a “null function or function signature mismatch” error during rendering, and for the gradient background color, only a single color seems to be displayed. Anyway, here are some cases where it runs successfully in WebGPU. It appears that I have only been using certain features of VTK.

---

<div class="post-metadata">

### Author: ![jaswantp](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jaswantp/32/10046_2.png) [@jaswantp](https://discourse.vtk.org/u/jaswantp)
#### Post date: [December 2, 2024, 3:13pm UTC](https://discourse.vtk.org/t/vtkwebgpurenderwindow-cannot-render-frame/14927/4 "2024-12-02T15:13:39Z")

</div>

> I tried to hand device over to the module object, but that not functioning as expected.

That approach will not work. Please allow VTK to initialize the device.

> But When I tried to run this [example](https://examples.vtk.org/site/Cxx/Visualization/ColoredAnnotatedCube/) , `vtkAxesActor` results in a “null function or function signature mismatch” error during rendering, and for the gradient background color, only a single color seems to be displayed.

Yes, the `vtkAxesActor`, gradient background are some of the features that do not work with webgpu right now. Work is in progress.

> Anyway, here are some cases where it runs successfully in WebGPU. It appears that I have only been using certain features of VTK.

Okay. We’re adding webgpu support for features that our paying customer is interested in. So far, those have been the polydata mapper, composite poyldata mapper, and the glyph mapper. As a result, you might see some VTK classes work in webgpu, others do not. However, it’s good to have early adopters from the community try out the VTK webgpu backend! Our customer is also interested in `vtkAxesActor`. It will be fixed.
