Error: Kernel 'Draw' not registered for backend 'custom-webgl2' at Engine.runKernel at Module.draw

[Apj-infinty]

System information

• Have I written custom code (as opposed to using a stock example script provided in TensorFlow.js): Yes
• OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Windows 11 OS Build: 22621.3593
• Mobile device (e.g. iPhone 8, Pixel 2, Samsung Galaxy) if the issue happens on mobile device: Not sure
• TensorFlow.js installed from (npm or script link): npm
• TensorFlow.js version (use command below): 4.19.0
• Browser version: Chrome Version 125.0.6422.78
• Tensorflow.js Converter Version: Converter v4.19.0

Describe the current behavior

The function is not drawing the image on expected canvas , instead returning an error. That is no canvas is shown.

Describe the expected behavior

Expectation: Rendering a tensor to canvas using WebGL2 on GPU itself rather than CPU.

Standalone code to reproduce the issue

    const img = tf.browser.fromPixels("<any HTML image/video element");
    const canvas2 = document.getElementById("<any image canvas");
    tf.browser.draw(img,canvas2);

Provide a reproducible test case that is the bare minimum necessary to generate the problem. If possible, please share a link to Colab/CodePen/any notebook.

Other info / logs Include any logs or source code that would be helpful to diagnose the problem. If including tracebacks, please include the full traceback. Large logs and files should be attached. localhost-1716621889504.log

[Apj-infinty]

@Linchenn

3457

[Linchenn]

Draw API currently does not have implementation for WebGL backend.

[Apj-infinty]

Thank you for your reply, I was able to complete the objective using WebGPU Kernel! It is almost 100x faster than tf.browser.toPixels() method. Not sure if WebGL will be faster than WebGPU although.

     //importing the WebGPUBackend from npm package @tensorflow/tfjs-backend-webgpu
     import {WebGPUBackend} from @tensorflow/tfjs-backend-webgpu

     //Register the Backend Kernel 
        if (!navigator.gpu) {
          throw new Error("WebGPU not supported on this browser.");
        }

        const customBackendName = 'custom-webgpu';
        const kernels = tf.getKernelsForBackend('webgpu');

        kernels.forEach(kernelConfig => {
          const newKernelConfig = {...kernelConfig, backendName: customBackendName};
          tf.registerKernel(newKernelConfig);
        });

        const adapter = await navigator.gpu.requestAdapter({powerPreference: 'low-power'});
        if (!adapter) {
          throw new Error("No appropriate GPUAdapter found.");
        }

        const device = await adapter.requestDevice();

        tf.registerBackend('custom-webgpu', () => new WebGPUBackend(device));

        await tf.setBackend('custom-webgpu')

        await tf.ready()
        const canvas = document.getElementById("imgCanvas2");
        const context =  canvas.getContext("webgpu");
        const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
          device: device,
          format: canvasFormat,
        });

      //calling Draw API:         
          tf.browser.draw(<input tensor>,canvas);

@Linchenn Shall I close the issue or keep it?

[Linchenn]

WebGPU is typically faster than WebGL, while WebGL has more device coverage.

[google-ml-butler[bot]]

Are you satisfied with the resolution of your issue? Yes No