在webgl2中篱笆同步的正确用法是什么？

Question

寻找一些模式/代码示例/在webgl2（gl.fenceSync）中适当使用围栏的最佳实践-如果不阻塞JS线程，则是最佳选择。

    var fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);

    setTimeout(() => {
      gl.clientWaitSync(fence, gl.SYNC_FLUSH_COMMANDS_BIT, 1000000);
      gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, dataOut);
    }, 0);

Answer 1

我只是在说老实话，实际上我不确定WebGL2中的同步有多么有用，但是我认为您不想阻止，那么模式将是这样

 function main() { const gl = document.createElement('canvas').getContext('webgl2'); if (!gl) { return alert('need webgl2'); } callbackOnSync(gl, () => { console.log("done"); }); function callbackOnSync(gl, callback) { const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0); gl.flush(); // make sure the sync command is read setTimeout(checkSync); function checkSync() { const timeout = 0; // 0 = just check the status const bitflags = 0; const status = gl.clientWaitSync(sync, bitflags, timeout); switch (status) { case gl.TIMEOUT_EXPIRED: // it's not done, check again next time return setTimeout(checkSync); case gl.WAIT_FAILED: throw new Error('should never get here'); default: // it's done! gl.deleteSync(sync); callback(); } } } } main();