Блог

Я ищу совета по реализации сцены A-Frame с использованием OffscreenCanvas. Я использую https://github.com/spite/ccapture.js чтобы записать мою VR-сцену, и результат получается очень резким и медленным, когда FPS превышает 30.

Видео и примеры кода в приведенной ниже ссылке Google предоставляют примеры изменения Three.js чтобы использовать закадровые возможности. Таким образом, я считаю, что можно изменить A-Frame, чтобы включить опцию OffscreenCanvas.

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

Я экспериментировал с изменением функции A-Frame a-scene setupRenderer для использования OffscreenCanvas в rendererConfig, но я столкнулся с проблемами getContext.

Я не уверен, какой наилучший подход заключается в разгрузке рендеринга (и получении большого двоичного объекта / растрового изображения) для веб-работника.

Я хочу воспользоваться преимуществами рендеринга в Worker, не вступая в противоречие со встроенной функциональностью requestAnimationFrame A-Frame.

Любые советы приветствуются. Спасибо.

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 amp;amp; rendererAttr.antialias !== 'auto') {
            rendererConfig.antialias = rendererAttr.antialias === 'true';
          }

          if (rendererAttr.logarithmicDepthBuffer amp;amp; 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 кадров в секунду.