A-Frame Scene Using OffscreenCanvas

Question

I am seeking advice on implementing an A-Frame scene using OffscreenCanvas. I am using https://github.com/spite/ccapture.js to record my VR scene and the result is very janky and slow when FPS is above 30.

The video and the code samples within the Google link below provide examples of modifying Three.js to leverage OffscreenCanvas. Thus, I believe it is possible to modify A-Frame to include an OffscreenCanvas option.

https://developers.google.com/web/updates/2018/08/offscreen-canvas https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

I have experimented with modifying the A-Frame a-scene setupRenderer function to use an OffscreenCanvas within the rendererConfig, but I am running into getContext issues.

I am not sure what the best approach is to offload rendering (and getting blob/bitmap image) to a Web Worker.

I want to take advantage of rendering in the Worker without conflicting with the built in requestAnimationFrame functionality of A-Frame.

Any advice is greatly appreciated. Thank you.

https://github.com/aframevr/aframe/blob/master/src/core/scene/a-scene.js#L561

setupRenderer: {
      value: function () {
        var self = this;
        var renderer;
        var rendererAttr;
        var rendererAttrString;
        var rendererConfig;

        const offscreenCanvas = this.canvas.transferControlToOffscreen();
        const worker = new Worker('./canvasworker.js');
        worker.postMessage({ msg: 'init', canvas: offscreenCanvas }, [offscreenCanvas]);

        rendererConfig = {
          alpha: true,
          antialias: !isMobile,
          canvas: offscreenCanvas,
          logarithmicDepthBuffer: false
        };

        this.maxCanvasSize = {height: 1920, width: 1920};

        if (this.hasAttribute('renderer')) {
          rendererAttrString = this.getAttribute('renderer');
          rendererAttr = utils.styleParser.parse(rendererAttrString);

          if (rendererAttr.precision) {
            rendererConfig.precision = rendererAttr.precision + 'p';
          }

          if (rendererAttr.antialias && rendererAttr.antialias !== 'auto') {
            rendererConfig.antialias = rendererAttr.antialias === 'true';
          }

          if (rendererAttr.logarithmicDepthBuffer && rendererAttr.logarithmicDepthBuffer !== 'auto') {
            rendererConfig.logarithmicDepthBuffer = rendererAttr.logarithmicDepthBuffer === 'true';
          }

          this.maxCanvasSize = {
            width: rendererAttr.maxCanvasWidth
              ? parseInt(rendererAttr.maxCanvasWidth)
              : this.maxCanvasSize.width,
            height: rendererAttr.maxCanvasHeight
              ? parseInt(rendererAttr.maxCanvasHeight)
              : this.maxCanvasSize.height
          };
        }

        renderer = this.renderer = new THREE.WebGLRenderer(rendererConfig);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.sortObjects = false;
        if (this.camera) { renderer.vr.setPoseTarget(this.camera.el.object3D); }
        this.addEventListener('camera-set-active', function () {
          renderer.vr.setPoseTarget(self.camera.el.object3D);
        });
        loadingScreen.setup(this, getCanvasSize);
      },
      writable: window.debug
    },

I would like to take advantage of OffscreenCanvas and rendering on a Web Worker to maintain a consistent 60 fps.