Can I use Object3D.onAfterRender to simulate WebGLRenderer.render finish rendering object on canvas?

Questions
1

I’d like to disable render until the last render has completely finished （object has been rendered on canvas）, since WebGLRenderer.render has no finish callback, can I use Object3D.onAfterRender to simulate WebGLRenderer.render finish callback like this:

const promises = [];
obj.traverse((child) => {
  if (child?.isMesh && child?.visible) {
    promises.push(
      new Promise((resolve) => {
        child.onAfterRender = () => {
          resolve(child.name);
        };
      }),
    );
  }
});
Promise.allSettled(promises).then(() => {
  // render finished, the object has been rendered on canvas
});

However, I find that not all onAfterRender is called, when will onAfterRender will be called?

2

isn’t webglrenderer.render synchroneous? why would it then need a callback? it should be finished by the time you have called it.

1 Like
3

I’d like to execute callback after the object has completely rendered on canvas other than render function finish.

4 
renderer.render(scene, camera);

// <- Here object will be completely rendered

Just be sure to set preserveDrawingBuffer in renderers constructor to true :eyes: