Как получить рамку, чтобы загружать содержимое холста в текстуру только при необходимости - PullRequest
Новая
       4

Как получить рамку, чтобы загружать содержимое холста в текстуру только при необходимости

0 голосов
/ 23 мая 2018

Как мне остановить рамку от загрузки текстуры холста каждый кадр?

Я настраиваю этот холст только один раз во время инициализации, но проверяю вызовы на texImage2D, он загружается постоянно. 

const elem = document.querySelector("#ui span");
let count = 0;
WebGLRenderingContext.prototype.texImage2D = (function(origFn) {
  return function(...args) {
    elem.textContent = [++count, ...args].join(' ');
    origFn.call(this, ...args);
  };
}(WebGLRenderingContext.prototype.texImage2D));
#ui {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background: gray;
  color: white;
  padding: .5em;
}
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('draw-canvas-once', {
  schema: {type: 'selector'},

  init: function () {
    const canvas = this.canvas = this.data;
    const ctx = this.ctx = canvas.getContext('2d');
    ctx.fillStyle = '#F00';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = "70px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "#000";
    ctx.fillText("X", 150, 75);
  },
});
</script>
<a-scene>
  <a-assets>
    <canvas id="helloWorldCanvas" crossOrigin="anonymous"></canvas>
  </a-assets>

  <a-entity material="shader: flat; src: #helloWorldCanvas"
            geometry="primitive: plane; width: 160; height: 90"
            position="0 60 -250" rotation="0 35 0"
            draw-canvas-once="#helloWorldCanvas">
  </a-entity>
</a-scene>
<div id="ui">texImage2D call count: <span></span></div>

Вы также можете просто сравнить перф.Вот один из 100 самолетов с 100 холстами.На моем MPB он работает со скоростью 20fps 

const elem = document.querySelector("#ui span");
let then = 0;
function check(now) {
  const et = now - then;
  then = now;
  elem.textContent = (1 / (et * 0.001)).toFixed(2);
  requestAnimationFrame(check);
}
requestAnimationFrame(check);
#ui {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background: gray;
  color: white;
  padding: .5em;
}
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('grid', {
  schema: {
    across: {type: 'int', default: 3},
    down: {type: 'int', default: 3},
  },
  init() {
    for (let y = 0; y < this.data.down; ++y) {
      for (let x = 0; x < this.data.across; ++x) {
        const id = `c${x}${y}`;
        const elem = document.createElement('a-entity');
        elem.setAttribute('draw-canvas-once', {id});
        elem.setAttribute('geometry', { 
           primitive: 'plane', 
           height: 1, 
           width: 1,
         });
        elem.setAttribute('material', {
          shader: 'flat', src: `#${id}`,
        });
        this.el.appendChild(elem);
        elem.setAttribute('position', {
          x: (x - this.data.across / 2) * 1.1, 
          y: (y - this.data.down / 2) * 1.1, 
          z: 0,
        });
      }
    }
  },
});
AFRAME.registerComponent('draw-canvas-once', {
  schema: {id: {type: 'string'}},
  init() {
    const canvas = this.canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.id = this.data.id;
    const ctx = this.ctx = canvas.getContext('2d');
    ctx.fillStyle = '#F00';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = "70px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "#000";
    ctx.fillText(this.data.id, 150, 75);
  },
});
</script>
<a-scene>
  <a-assets>
  </a-assets>
  <a-entity grid="across: 10; down: 10" position="0 0 -10" />
</a-scene>
<div id="ui">fps: <span></span></div>

против 100 плоскостей без холста, только изображение.он работает на скорости 60 кадров в секунду.Два образца должны работать с одинаковой скоростью. 

const elem = document.querySelector("#ui span");
let then = 0;
function check(now) {
  const et = now - then;
  then = now;
  elem.textContent = (1 / (et * 0.001)).toFixed(2);
  requestAnimationFrame(check);
}
requestAnimationFrame(check);
#ui {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background: gray;
  color: white;
  padding: .5em;
}
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('grid', {
  schema: {
    across: {type: 'int', default: 3},
    down: {type: 'int', default: 3},
  },
  init() {
    for (let y = 0; y < this.data.down; ++y) {
      for (let x = 0; x < this.data.across; ++x) {
        const elem = document.createElement('a-entity');
        elem.setAttribute('geometry', { 
           primitive: 'plane', 
           height: 1, 
           width: 1,
         });
        elem.setAttribute('material', {
          shader: 'flat', src: '#img',
        });
        this.el.appendChild(elem);
        elem.setAttribute('position', {
          x: (x - this.data.across / 2) * 1.1, 
          y: (y - this.data.down / 2) * 1.1, 
          z: 0,
        });
      }
    }
  },
});
</script>
<a-scene>
  <a-assets>
    <img id="img" src="https://i.imgur.com/ZKMnXce.png" crossorigin="anonymous" />
  </a-assets>
  <a-entity grid="across: 10; down: 10" position="0 0 -10" />
</a-scene>
<div id="ui">fps: <span></span></div>

1 Ответ

0 голосов
/ 24 мая 2018

A-Frame делал: 

loadCanvas: function (src, data, cb) {
  // Hack readyState and HAVE_CURRENT_DATA on canvas to work with THREE.VideoTexture
  src.readyState = 2;
  src.HAVE_CURRENT_DATA = 2;
  this.loadVideo(src, data, cb);
},

Плохое проскальзывание при слиянии PR исправит.

Тем временем вы можете вручную создать CanvasTexture three.js и назначитьэто к материалу в компоненте.

...