Failed to set up webGPU backend.

[MountainAndMorning]

I try to use webGPU backend:

import '@kitware/vtk.js/favicon';

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/Volume';

import Constants from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
import vtkGenericRenderWindow from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
import vtkInteractorStyleImage from '../utils/vtkInteractorStyleImage';
import vtkImageResliceMapper from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper';
import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
import ITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper'
import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
import vtkPiecewiseFunction from "@kitware/vtk.js/Common/DataModel/PiecewiseFunction";
const { convertItkToVtkImage } = ITKHelper;
const { SlicingMode } = Constants;

    context.genericRenderWindow = vtkGenericRenderWindow.newInstance({ background: [0,0,0] })
    context.genericRenderWindow.setContainer(_container)
    context.renderWindow = context.genericRenderWindow.getRenderWindow()
    context.renderWindow.setDefaultViewAPI('WebGPU')
    const openglRenderWindow = context.genericRenderWindow.getApiSpecificRenderWindow()
    console.log(openglRenderWindow.getContext(), 'console.log(openglRenderWindow); '); 
    openglRenderWindow.buildPass(true)

But the console still show the webgl context:

Proxy(WebGL2RenderingContext) {canvas: canvas, drawingBufferWidth: 300, drawingBufferHeight: 300, drawingBufferColorSpace: 'srgb', unpackColorSpace: 'srgb', …}[[Handler]]: Object[[Target]]: WebGL2RenderingContext[[IsRevoked]]: false 'console.log(openglRenderWindow); '

vtk.js: "@kitware/vtk.js": "^32.9.0",
node: v18.20.5
OS: macOS 15.3

[floryst]

Which browser? AFAIK chromium-based browsers are the only ones that have WebGPU enabled by default. Safari and Firefox have WebGPU hidden behind a feature flag.

[MountainAndMorning]

This is an electron app. I have enable the WebGPU at the electron main process and other package such the @tensorflow/tfjs-backend-webgpu working:

import { app } from 'electron'
app.commandLine.appendSwitch('enable-unsafe-webgpu')
app.commandLine.appendSwitch('force_high_performance_gpu')

The frondend framework is vue with vite support.
vite.config.ts

import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'
// Vuetify
import vuetify from 'vite-plugin-vuetify'
import { viteStaticCopy } from 'vite-plugin-static-copy'


// https://vitejs.dev/config/
export default defineConfig({
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  },
  preview: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  },
  plugins: [
    vue(),
    vuetify({ autoImport: true }),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@tensorflow/tfjs-backend-wasm/dist/*.wasm',
          dest: 'dist/node_modules/@tensorflow/tfjs-backend-wasm/dist'
        }
      ]
    }),
    electron({
      main: {
        // Shortcut of `build.lib.entry`.
        entry: 'electron/main.ts',
        // External packages that should not be bundled
        external: ['electron', 'bonjour', 'electron-store', 'get-port', 'realm'],
        // Build options
        buildOptions: {
          minify: false,
        },
      },
      preload: {
        // Shortcut of `build.rollupOptions.input`.
        // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
        input: path.join(__dirname, 'electron/preload.ts'),
      },
      // Ployfill the Electron and Node.js API for Renderer process.
      // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
      // See https://github.com/electron-vite/vite-plugin-electron-renderer
      renderer: {
        resolve: {
          'realm': { type: 'cjs' }
        }
      },
    }),
    viteStaticCopy({
      targets: [
        { src: 'node_modules/@itk-wasm/image-io/dist/pipelines/*.{js,wasm,wasm.zst}', dest: 'pipelines' },
        { src: 'node_modules/@itk-wasm/dicom/dist/pipelines/*.{js,wasm,wasm.zst}', dest: 'pipelines' }
      ],
    })
  ],
  worker: {
    format: 'es'
  },
  optimizeDeps: {
    exclude: ['@itk-wasm/dicom', '@itk-wasm/image-io']
  },
})

package.json

{
  "name": "electronvtk",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "@itk-wasm/dicom": "^7.3.0",
    "@itk-wasm/image-io": "^1.4.0",
    "@kitware/vtk.js": "^32.9.0",
    "@tensorflow/tfjs": "^4.22.0",
    "@tensorflow/tfjs-backend-wasm": "^4.22.0",
    "@tensorflow/tfjs-backend-webgpu": "^4.22.0",
    "axios": "^1.7.9",
    "bonjour": "^3.5.0",
    "d3": "^7.9.0",
    "electron-store": "^8.1.0",
    "get-port": "^7.1.0",
    "lodash-es": "^4.17.21",
    "muuri": "^0.9.5",
    "realm": "^12.14.1",
    "uuid": "^11.0.5"
  },
  "devDependencies": {
    "@mdi/js": "^7.4.47",
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "^30.0.1",
    "electron-builder": "^24.13.3",
    "typescript": "^5.2.2",
    "vite": "^5.1.6",
    "vite-plugin-electron": "^0.28.6",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vite-plugin-static-copy": "^2.2.0",
    "vite-plugin-vuetify": "^2.0.4",
    "vue": "^3.4.21",
    "vue-tsc": "^2.0.26",
    "vuetify": "^3.7.6"
  },
  "main": "dist-electron/main.js"
}

[sridhar-mani]

any updates on this