What Is A Proper Usage Of Fence Synchronization In Webgl2?

Looking for some patterns/code examples/best practices of appropriate usage of fences in webgl2 (gl.fenceSync) - best if it would be non blocking of JS thread. var fence = gl.f

Solution 1:

I'm just guessing to be honest, I'm not actually sure how useful syncs are in WebGL2 but I'd think you don't want to block then the pattern would be like this

functionmain() {
  const gl = document.createElement('canvas').getContext('webgl2');
  if (!gl) {
    returnalert('need webgl2');
  }
  
  callbackOnSync(gl, () => {
    console.log("done");
  });
  
  functioncallbackOnSync(gl, callback) {
    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
    gl.flush();  // make sure the sync command is readsetTimeout(checkSync);  

    functioncheckSync() {
      const timeout = 0;   // 0 = just check the statusconst bitflags = 0;
      const status = gl.clientWaitSync(sync, bitflags, timeout);
      switch (status) {
        case gl.TIMEOUT_EXPIRED:
          // it's not done, check again next timereturnsetTimeout(checkSync);
        case gl.WAIT_FAILED:
          thrownewError('should never get here');
        default:
          // it's done!
          gl.deleteSync(sync);

          callback();
      }
    }
  }
}

main();