Aframe: Possible regression: material based on canvas not updating

Created on 3 Jan 2019 · 4Comments · Source: aframevr/aframe

Description:

The code below, which uses a canvas with the rendering of a camera for the material of an object is, apparently, not updated after the initial frame. With 0.8.2 it works, but with current master it doesn't.

The effect can be appreciated in the example below. With 0.8.2, the screen (a-plane) on the left shows the scene from above. With current master, I get the scene in the screen too, but only as a black shape. I'm just wondering, but maybe this could be due to the material not updating after the initialization.

A-Frame Version: current master (works with 0.8.2)
Platform / Device: Firefox Quantum 65.0b7 (64-bit), and Chrome Version 61.0.3163.100 (Official Build) (64-bit), both on Debian GNU/Linux.
Reproducible Code Snippet or URL:

<!DOCTYPE html>
<html>
  <head>
<!--    <script src="//aframe.io/releases/0.8.2/aframe.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@cb4de2e19d577e9b5c34f01efe1c1d96c1d1c2e0/dist/aframe-master.min.js"></script> -->
    <script>
AFRAME.registerComponent('camrender',{
    'schema': {
       // desired FPS
       fps: {
            type: 'number',
            default: 90.0
       },
       // Id of the renderer element
       rid: {
            type: 'string',
            default: 'camRenderer'
       },
       // Height of the renderer element
       height: {
            type: 'number',
            default: 300
       },
       // Width of the renderer element
       width: {
            type: 'number',
            default: 400
       }
    },
    'init': function() {
        var canvasEl = document.getElementById(this.data.rid);
        this.counter = 0;
        this.renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvasEl } );
        console.log("this: ", this);
        this.renderer.setPixelRatio( window.devicePixelRatio );
        this.renderer.setSize( this.data.width, this.data.height );
        this.renderer.domElement.crossorigin = "anonymous"
        this.renderer.domElement.height = this.data.height;
        this.renderer.domElement.width = this.data.width;
        this.el.removeAttribute('look-controls');
        this.el.removeAttribute('wasd-controls');
    },
    '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.renderer.render( this.el.sceneEl.object3D , this.el.object3DMap.camera );
            }
        this.counter += 1;
    }
});
    </script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <canvas id="cam2"></canvas>
      </a-assets>

      <a-box position='0 0.5 0' material='color: red;'></a-box>
      <a-box position="-1 0.5 -1" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -3" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -1" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -2" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>

      <a-entity camera position="0 1.6 5"></a-entity>

      <a-entity camera="active: false" camrender="rid: cam2" position="-1 5 -3" rotation="-90 90 0">
      </a-entity>

      <a-plane position="-4 2 0" width="4" height="3" material="src:#cam2"></a-plane>

    </a-scene>

  </body>
</html>

Source

jgbarah

Most helpful comment

From looking at the examples near https://github.com/aframevr/aframe/commit/95917ecf1f31ef93661e41e6d89e23941ff9d25e, you can add

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;
          }
      });

Then use the canvas-updater component in the a-plane that is displaying the canvas.

andygill on 6 Jan 2019

❤3 👍1

All 4 comments

https://github.com/aframevr/aframe/commit/95917ecf1f31ef93661e41e6d89e23941ff9d25e is the commit that caused the regression.

andygill on 6 Jan 2019

From looking at the examples near https://github.com/aframevr/aframe/commit/95917ecf1f31ef93661e41e6d89e23941ff9d25e, you can add

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;
          }
      });

Then use the canvas-updater component in the a-plane that is displaying the canvas.

andygill on 6 Jan 2019

❤3 👍1

Thanks a lot, @andygill! It worked pretty well, and it also works with 0.8.2. The only problem I see is how to make that this.tick in canvas-updater run only after the canvas was updated. Using some event, I think...

Besides, is this canvas-updater component going to become a standard AFrame component?

jgbarah on 6 Jan 2019

Well, I'm closing this for now. If somebody has ideas about how to make this.tick in canvas-updater run only after the canvas was updated, please leave a comment here.

BTW, I've included canvas-updater as a component in aframe-playground-components.

jgbarah on 7 Jan 2019

Was this page helpful?

0 / 5 - 0 ratings