Can't wait on a fence

[jjppof]

I don't know whether it's the right place to ask about WebGL2, but if it's not the case, feel free to close this issue.

I'm trying to get some data from TRANSFORM_FEEDBACK_BUFFER with the code below:

const transform_feedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transform_feedback);
gl.transformFeedbackVaryings(program, ['position'], gl.INTERLEAVED_ATTRIBS);
gl.linkProgram(program);
const feedback_buffer = gl.createBuffer();

const data_length = 2;
const output_data = new Float32Array(data_length);

gl.bindBuffer(gl.TRANSFORM_FEEDBACK_BUFFER, feedback_buffer);
gl.bufferData(gl.TRANSFORM_FEEDBACK_BUFFER, output_data, gl.STATIC_READ);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, feedback_buffer);

gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, data_length);
gl.endTransformFeedback();

gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, output_data);

But if I do in this way, I get the following warning msg on getBufferSubData:

performance warning: READ-usage buffer was read back without waiting on a fence. This caused a graphics pipeline stall.

Then, I tried to add the below code just after gl.endTransformFeedback();:

const fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
gl.flush();
wait_for_results = async () => {
    const status = gl.clientWaitSync(fence, 0, 0);
    if (status === gl.CONDITION_SATISFIED || status === gl.ALREADY_SIGNALED) {
        gl.deleteSync(fence);
        gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, output_data);
        return true;
    } else {
        return false;
    }
};

let result_is_ok = false;
while (!result_is_ok) {
    result_is_ok = await wait_for_results();
}

The problem I'm having here is that status is always returning gl.TIMEOUT_EXPIRED. Then I tried to set gl.MAX_CLIENT_WAIT_TIMEOUT_WEBGL as the timeout value in gl.clientWaitSync, then I got:

WebGL: INVALID_OPERATION: clientWaitSync: timeout > MAX_CLIENT_WAIT_TIMEOUT_WEBGL

This also happens if I set gl.MAX_CLIENT_WAIT_TIMEOUT_WEBGL - 1. Next, I tried setting gl.TIMEOUT_IGNORED as timeout value, with this set, status is getting gl.WAIT_FAILED.

What am I missing here in order to rid of that performance warning?

I'm using Chrome 90.0.4430.212.

[greggman]

There's nothing in your code that's actually async. You're required to exit the current event handler in order for the fence to work. Maybe try this

wait = ms => new Promise(resolve => setTimeout(resolve, ms));
wait_for_results = async () => {
    const status = gl.clientWaitSync(fence, 0, 0);
    if (status === gl.CONDITION_SATISFIED || status === gl.ALREADY_SIGNALED) {
        gl.deleteSync(fence);
        gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, output_data);
        return true;
    } else {
        await wait();
        return false;
    }
};

[greggman]

https://stackoverflow.com/questions/54494712/what-is-a-proper-usage-of-fence-synchronization-in-webgl2

[jjppof]

First, many thanks for your reply!

I tried to do something similar to your answer in SO:

...
const fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
gl.flush();
let aux_resolve;
const aux_promise = new Promise(resolve => aux_resolve = resolve);
function checkSync() {
    const status = gl.clientWaitSync(fence, 0, 0);
    switch (status) {
        case gl.TIMEOUT_EXPIRED:
            return setTimeout(checkSync);
        case gl.WAIT_FAILED:
            throw new Error('should never get here');
        default:
            gl.deleteSync(fence);
            gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, output_data);
            aux_resolve();
    }
}
setTimeout(checkSync);
await aux_promise;
...

I got these messages:

[.WebGL-00001ED00034C300] GL_INVALID_OPERATION: Buffer is bound for transform feedback.

The one below I believe that's due to infinite checkSync call:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

Then a consequence of losing context, I believe...

Uncaught Error: should never get here

[greggman]

There's some voodoo here. I'd suggest you turn off transform feedback before trying to read the buffer, and further, read it via ARRAY_BUFFER, not TRANSFORM_FEEDBACK_BUFFER. It would be much easier to help if you put up a jsgist or jsfiddle or some kind of repo

[jjppof]

Here's a standalone code:

const foo_canvas = document.createElement('canvas');
const gl = foo_canvas.getContext("webgl2", {
  alpha: false,
  antialias: false,
  powerPreference: "high-performance"
});

gl.enable(gl.RASTERIZER_DISCARD);

const fragment_shader_source = `
  precision mediump float;

  void main() {
    gl_FragColor = vec4(0, 0, 0, 0);
  }
`;
const vertex_shader_source = `
  varying float position;

  void main() {
    position = 1.0;
    gl_Position = vec4(0, 0, 0, 0);
  }
`;

function create_shader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}
const fragment_shader = create_shader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
const vertex_shader = create_shader(gl, gl.VERTEX_SHADER, vertex_shader_source);
const program = gl.createProgram();
gl.attachShader(program, fragment_shader);
gl.attachShader(program, vertex_shader);
gl.linkProgram(program);

gl.useProgram(program);

const data_length = 2;

const transform_feedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transform_feedback);
gl.transformFeedbackVaryings(program, ["position"], gl.INTERLEAVED_ATTRIBS);
gl.linkProgram(program);

const feedback_buffer = gl.createBuffer();
const output_data = new Float32Array(data_length);
gl.bindBuffer(gl.TRANSFORM_FEEDBACK_BUFFER, feedback_buffer);
gl.bufferData(gl.TRANSFORM_FEEDBACK_BUFFER, output_data, gl.STATIC_READ);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, feedback_buffer);

gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, data_length);
gl.endTransformFeedback();

const fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
gl.flush();

checkSync = () => {
  const status = gl.clientWaitSync(fence, 0, 0);
  switch (status) {
    case gl.TIMEOUT_EXPIRED:
      return setTimeout(checkSync);
    case gl.WAIT_FAILED:
      throw new Error('should never get here');
    default:
      gl.deleteSync(fence);
      gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, output_data);
      console.log(output_data);
  }
}
setTimeout(checkSync);

The console.log here outputs [0, 0] with the following warning:

GL_INVALID_OPERATION: Buffer is bound for transform feedback.

But if I remove everything after gl.flush() and then I add this instead:

gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, output_data);
console.log(output_data);

I get the expected [1,1], but with the performance warning.

(I'm having problems to run this code in these code playgrounds, but here is what I tried in JSFiddle).

[jjppof]

Btw, I tried it on Firefox. The code with checkSync function works fine with no warning, it seems to be a Chrome problem...

[jjppof]

Funny fact about the behavior of this in Firefox, the setTimeout(checkSync) expression inside the switch statement is always executed exactly 255 times before reaching the default statement.

[greggman]

The issue is exactly what the error message said.

GL_INVALID_OPERATION: Buffer is bound for transform feedback.

I did like I said above, use ARRAY_BUFFER to read the values back. I also had to unbind the transform feedback (because otherwise a buffer is still bound to transform feedback.

...
gl.endTransformFeedback();

//  ---vvv--- added
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);
gl.bindBuffer(gl.TRANSFORM_FEEDBACK_BUFFER, null);
gl.bindBuffer(gl.ARRAY_BUFFER, feedback_buffer);
// ---^^^---

const fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
gl.flush();

checkSync = () => {
  const status = gl.clientWaitSync(fence, 0, 0);
  switch (status) {
    case gl.TIMEOUT_EXPIRED:
      return setTimeout(checkSync);
    case gl.WAIT_FAILED:
      throw new Error('should never get here');
    default:
      gl.deleteSync(fence);
      gl.getBufferSubData(gl.ARRAY_BUFFER, 0, output_data);    // changed
      console.log(output_data);
  }
}
setTimeout(checkSync);

https://jsgist.org/?src=502f2a5e036a3414de8ebd38f0eb2140