AFrame: как отрендерить камеру до текстуры - PullRequest
Новая
       54

AFrame: как отрендерить камеру до текстуры

0 голосов
/ 23 декабря 2018

Я пытаюсь использовать вторую камеру, чтобы показать «с неба» вид сцены AFrame.Я узнал, как это сделать, используя 2D-холст для рендеринга, следуя этому примеру :

Но мне интересно, можно ли это сделать без использования внешнего <div>, что-то вроде рендеринганепосредственно к некоторому активу или, может быть, напрямую к текстуре ...

Мой текущий код: 

<html>
  <head>
    <script src="//aframe.io/releases/0.8.2/aframe.min.js"></script>

    <script>
// Original code:
//   https://wirewhiz.com/how-to-use-a-cameras-output-as-a-texture-in-aframe/
//
AFRAME.registerComponent('view',{
    'schema': {
       canvas: {
            type: 'string',
            default: ''
       },
       // desired FPS
       fps: {
            type: 'number',
            default: 90.0
       }
    },
    'init': function() {
        var targetEl = document.querySelector(this.data.canvas);
        this.counter = 0;
        this.renderer = new THREE.WebGLRenderer( { antialias: true } );
        this.renderer.setPixelRatio( window.devicePixelRatio );
        this.renderer.setSize( targetEl.offsetWidth, targetEl.offsetHeight );
        // creates spectator canvas
        targetEl.appendChild(this.renderer.domElement);
        this.renderer.domElement.id = "canvas";
        this.renderer.domElement.crossorigin="anonymous"
        this.renderer.domElement.height=300;
        this.renderer.domElement.width=400;
        this.el.removeAttribute('look-controls');
        this.el.removeAttribute('wasd-controls');
        console.log(this.renderer.domElement);
        console.log(document.querySelector('a-scene'))
    },
    'tick': function(time, timeDelta) {
        var loopFPS = 1000.0 / timeDelta;
        var hmdIsXFasterThanDesiredFPS = loopFPS / this.data.fps;
        var renderEveryNthFrame = Math.round(hmdIsXFasterThanDesiredFPS);
        if(this.counter % renderEveryNthFrame === 0){
            this.render(timeDelta);
            }
        this.counter += 1;
    },
    'render': function(){
        this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
    }
});
    </script>
  <body>
    <a-scene physics="debug: true">

      <a-plane static-body position="0 0 -4" rotation="-90 0 0" width="30" height="40"
               color="yellow"></a-plane>

      <a-box color="red" position="0 2 0" depth="8" width="8"></a-box>

      <a-entity id="secondaryCamera" position="0 40 0" rotation="-90 0 0">
        <a-camera view="canvas:#spectatorDiv;" active="false">
        </a-camera>
      </a-entity>

      <a-entity position="0 0 10" look-controls>
        <a-entity camera position="0 1.6 0" wasd-controls>
          <a-entity geometry="primitive:plane; width:.2; height:.2" material="src:#canvas; opacity: .6"
                    position="0.2 -0.3 -0.7" rotation="0 -10 0"></a-entity>
          <a-cylinder radius="2" color="green"></a-box>
        </a-entity>
      </a-entity>

    </a-scene>

    <div style="height:300px; width:400px;" id='spectatorDiv'></div>

  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

После некоторой обработки и рассмотрения всех предложений, я пришел к этому коду, который дает мне то, что я хотел.Короче говоря, я построил компонент (camrenderer), который использует холст внутри элемента a-assets для рендеринга вывода камеры.Это позволяет любому материалу ссылаться на него (в приведенном ниже коде он добавлен в плоскость, прикрепленную к основной камере).Чтобы обеспечить обновление материала при изменении рендеринга, вам также необходимо добавить еще один компонент (canvas-updater) к объекту, действующему как экран.

Следовательно, на средство рендеринга камеры может ссылаться любой материал в любом компоненте.без дополнительных хаков. 

<html>
  <head>
    <script src="//aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script>
AFRAME.registerComponent('camrender',{
    'schema': {
       // desired FPS
       fps: {
            type: 'number',
            default: 90.0
       },
       // Id of the canvas element used for rendering the camera
       cid: {
            type: 'string',
            default: 'camRenderer'
       },
       // Height of the renderer element
       height: {
            type: 'number',
            default: 300
       },
       // Width of the renderer element
       width: {
            type: 'number',
            default: 400
       }
    },
    'update': function(oldData) {
        var data = this.data
        if (oldData.cid !== data.cid) {
            // Find canvas element to be used for rendering
            var canvasEl = document.getElementById(this.data.cid);
            // Create renderer
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
                canvas: canvasEl
            });
            // Set properties for renderer DOM element
            this.renderer.setPixelRatio( window.devicePixelRatio );
            this.renderer.domElement.crossorigin = "anonymous";
        };
        if (oldData.width !== data.width || oldData.height !== data.height) {
            // Set size of canvas renderer
            this.renderer.setSize(data.width, data.height);
            this.renderer.domElement.height = data.height;
            this.renderer.domElement.width = data.width;
        };
        if (oldData.fps !== data.fps) {
            // Set how often to call tick
            this.tick = AFRAME.utils.throttleTick(this.tick, 1000 / data.fps , this);
        };
    },
    'tick': function(time, timeDelta) {
        this.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
    }
});

AFRAME.registerComponent('canvas-updater', {
    dependencies: ['geometry', 'material'],

    tick: function () {
        var el = this.el;
        var material;

        material = el.getObject3D('mesh').material;
        if (!material.map) { return; }
        material.map.needsUpdate = true;
    }
});
</script>
  </head>
  <body>
    <a-scene>

      <a-assets>
          <canvas id="cam2"></canvas>
      </a-assets>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="30" height="40"
               color="yellow"></a-plane>

      <a-box color="red" position="0 2 0" depth="8" width="16"></a-box>
      <a-box color="blue" position="0 2 6" depth="2" width="6"></a-box>

      <a-entity position="0 40 0" rotation="-90 0 0">
        <a-camera camrender="cid: cam2" active="false">
        </a-camera>
      </a-entity>

      <a-entity position="0 0 10" look-controls>
        <a-entity camera position="0 1.6 0" wasd-controls>
          <a-entity geometry="primitive:plane; width:.2; height:.2"
                    material="src:#cam2; opacity: .6" canvas-updater
                    position="0.2 -0.3 -0.7" rotation="0 -10 0"></a-entity>
          <a-cylinder radius="2" color="green"></a-cylinder>
        </a-entity>
      </a-entity>

    </a-scene>

  </body>
</html>

Примечания :

0 голосов
/ 24 декабря 2018

Ознакомьтесь с реализацией компонента снимка экрана .Рендеринг в цель рендеринга, а затем делать все, что вы хотите с данными пикселей (использовать его как текстуру внутри WebGL, копировать на холст ...)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...