Model:body-segmentation browser freezes for ~7-9 seconds in initial run

Hi, I am not sure if this is a bug so am posting it here.
This line take ~7-9 seconds to run and freezes the browser when running for the first time, then it just takes ~100ms.

bodySegmenter.segmentPeople(video);
video is a HTMLVideoElement

Running on chrome 107 with webgl backend.
The tf and backend and the segmenter has already loaded and is ready before running this.

import * as bodySegmentation from '@tensorflow-models/body-segmentation';
import * as tf from '@tensorflow/tfjs-core';
import '@tensorflow/tfjs-backend-webgl';
import '@tensorflow/tfjs-backend-wasm';

const model = bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation;
const bodySegmenterConfig: MediaPipeSelfieSegmentationTfjsModelConfig = {
  runtime: 'tfjs', //mediapipe or 'tfjs'
  modelType: 'general', // or 'landscape'
};

let bodySegmenter: BodySegmenter;

tf.ready().then(() => {
  log('backend ready  :', tf.getBackend()); // <--------------webgl
  bodySegmentation.createSegmenter(model, bodySegmenterConfig).then((value) => {
    log('segmenter created');
    bodySegmenter = value;
  });
});

    "@tensorflow-models/body-segmentation": "^1.0.1",
    "@tensorflow/tfjs": "^4.0.0",
    "@tensorflow/tfjs-backend-wasm": "^4.0.0",
    "@tensorflow/tfjs-backend-webgl": "^4.0.0",
    "@tensorflow/tfjs-converter": "^4.0.0",
    "@tensorflow/tfjs-core": "^4.0.0",

------------------
System Information
------------------
Operating System: Windows 10 Enterprise N 64-bit (10.0, Build 19043) (19041.vb_release.191206-1406)
System Manufacturer: ASUS
BIOS: 1401 (type: UEFI)
Processor: Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz (12 CPUs), ~2.9GHz
Memory: 32768MB RAM
Available OS Memory: 32686MB RAM
Page File: 26483MB used, 8250MB available
DirectX Version: DirectX 12
User DPI Setting: 96 DPI (100 percent)
System DPI Setting: 96 DPI (100 percent)
DWM DPI Scaling: Disabled
DirectX Database Version: 1.0.8
DxDiag Version: 10.00.19041.2075 64bit Unicode

---------------
Display Devices
---------------
Card name: NVIDIA GeForce RTX 3060
DAC type: Integrated RAMDAC
Device Type: Full Device (POST)
Device Status: 0180200A [DN_DRIVER_LOADED|DN_STARTED|DN_DISABLEABLE|DN_NT_ENUMERATOR|DN_NT_DRIVER] 
Device Problem Code: No Problem
Driver Problem Code: Unknown
Display Memory: 28484 MB
Dedicated Memory: 12142 MB
Shared Memory: 16342 MB
Current Mode: 1920 x 1080 (32 bit) (60Hz)

Any points or ideas ?

[Linchenn]

Thank you Jiajia for redirecting the solution!

@Exlord for your case, you could use tf.env().set('WEBGL_USE_SHAPES_UNIFORMS', true); when tf is ready as Jiajia mentioned. Also using ENGINE_COMPILE_ONLY may have obvious perf gain. Specifically, you could add the following codes before your first inference:

    tf.env().set('ENGINE_COMPILE_ONLY', true);
    bodySegmenter.segmentPeople(video);
    tf.backend().checkCompileCompletion();
    tf.backend().getUniformLocations();
    tf.env().set('ENGINE_COMPILE_ONLY', false);

If it still does not work, I could help you tell a look at your codes.

[Linchenn]

For WebGL backend, it’s MathBackendWebGL (class MathBackendWebGL extends KernelBackend) and you could use it as tf.MathBackendWebGL.