I’m trying to make a web application like 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 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:
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:
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:
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;
}
}