A-Frame Scene Использование OffscreenCanvas - PullRequest
Новая
       59

A-Frame Scene Использование OffscreenCanvas

1 голос
/ 17 апреля 2019

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

Видео и примеры кода в ссылке Google ниже приводят примеры модификации Three.js для использования OffscreenCanvas.Таким образом, я полагаю, что можно изменить 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-Функция сцены setupRenderer для использования OffscreenCanvas в rendererConfig, но я сталкиваюсь с проблемами getContext.

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

Я хочу воспользоваться возможностью рендеринга в 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 и рендеринга на веб-рабочем месте для поддержания согласованных 60 кадров в секунду.

...