Error: WebGL warning: getBufferSubData: Reading from a buffer with usage other than *_READ causes pipeline stalls.

To get help from the community, check out our Google group.

TensorFlow.js version

0.13.2

Browser version

Mac OS X 10.13.2 64-bit Google Chrome: Version 69.0.3497.100 (Official Build) (64-bit) Firefox Quantum: Version 62.0.3 (64-bit) Opera: Version 55.0.2994.56 Safari: Version 11.0.2

Describe the problem or feature request

Running model.predict() using a HTMLCanvasElement on a retrained MobileNetV2 model produces the following error, when the predict method is called often/repeatedly. It freezes the browser for a few seconds and my graphics card glitches (both my screens flicker/glitch for a second).

Chrome/Opera/Safari:

[.WebGL-0x7fa75e016e00]GL ERROR :GL_INVALID_OPERATION : glReadPixels: format and type incompatible with the current read framebuffer

Firefox:

Error: WebGL warning: getBufferSubData: Reading from a buffer with usage other than *_READ causes pipeline stalls. Copy through a STREAM_READ buffer.

To be honest, i’m not using requestAnimationFrame or debouncing any function calls yet (which i probably should), so i can imagine some stalling when running predict repeatedly. The GPU glitches and the random -seconds long- stalls are inconvenient though, and i don’t think they should happen when predict is only called every now and then.

Code to reproduce the bug / link to feature request

I’ve been able to reproduce the error by modifying the start function in my example app index.js. This example is quite different from the app we’re building (I’m not calling predict in a for-loop), but after clicking a few times the same error should occur.

const start = async () => {
  const input = document.getElementById('input')
  const output = document.getElementById('output')
  const model = await loadModel()

  document.onclick = async () => {
    for (let i = 0; i < 100; i++) {
      const canvas = document.createElement('canvas')
      canvas.width = IMAGE_SIZE
      canvas.height = IMAGE_SIZE
      const context = canvas.getContext('2d')
      context.drawImage(input, Math.random() * 100, Math.random() * 100)
      const predictions = await predict(canvas, model)
      console.log(predictions)
      output.innerHTML = JSON.stringify(predictions, null, 2)
    }
  }
}

[dsmilkov]

I fixed the warning in Firefox, but I’m still curious if the ERROR :GL_INVALID_OPERATION : glReadPixels issue in Chrome/Safari/Opera is still there. I’ll ping this thread once we release a new version.

Thanks!

[dsmilkov]

14GB is a lot of memory. Usually browsers will freeze a tab if it allocated more than 1GB. Make sure you are not leaking memory and process the data in streaming fashion (e.g. don’t load all the images at once)