Question

我正在寻求有关使用OffscreenCanvas实现A帧场景的建议。我正在使用https://github.com/spite/ccapture.js来记录我的VR场景，当FPS高于30时，结果非常混乱且缓慢。

下面Google链接中的视频和代码示例提供了修改Three.js以利用OffscreenCanvas的示例。因此，我相信可以修改A框架以包含OffscreenCanvas选项。

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

我已经尝试过修改A帧a场景setupRenderer函数以在rendererConfig中使用OffscreenCanvas，但是我遇到了getContext问题。

我不确定最好的方法是将渲染（以及获取Blob /位图图像）卸载到Web Worker。

我想利用Worker中的呈现功能而又不与A-Frame的内置requestAnimationFrame功能冲突。

任何建议都将不胜感激。谢谢。

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
    },

我想利用OffscreenCanvas和Web Worker上的渲染来保持稳定的60 fps。

使用OffscreenCanvas的A帧场景

0 个答案: