キャンバス上にない描画要素 - 高価ですか？

Question

私はJavaScriptのゲームエンジンを作ってるんだ - demo - と私はキャンバスに描画するための最も安価となり、これらのオプションのどちら思ったんだけど：

• は、オブジェクトのxとy coordsのかどうかを確認するための条件を持っています高さおよび幅の範囲内にある。
• 多くのオブジェクトは表示されませんが、オブジェクトは関係なく描画します。

最初のオプションでは、各オブジェクトとアニメーションループごとに4つ以上の変数を比較する必要があります。私はそれがすべてのオブジェクトを描画するよりも安価だろうと思っています。

実際のゲームには、xとy座標を持つ多数のオブジェクトがあります。キャンバスは人間のプレイヤーをより大きなゲームマップ上で中心に置いています。

私は、描画ループを行うためにrequestAnimationFrameを使用します。私もフレームワークを使用していません。

Answer 1

オフスクリーンの描画はGPUによって無視されるため、レンダリングにかかる​​時間が短くなります（ummm - レンダリングしません）。ただし、CPUは描画コマンドを処理して、オフスクリーン描画が「フリー」でないようにします。

しかし、2回目のパフォーマンスヒットがあります。あなたは、独自のパス内のすべての円を描いている。

ctx.beginPath(); 
ctx.arc(p.x,p.y,p.r,0,PI2); 
ctx.fillStyle=p.color; 
ctx.fill();  

それは、単一の（マルチ円）パス内のすべての一般的な色の弧を描くように、より効率的です。ここで

ctx.fillStyle='red'; 
ctx.beginPath(); 
for(var i=0;i<len;i++){ 
    var p=players[i]; 
    if(p.color=='red'){ 
     ctx.moveTo(p.x,p.y); 
     ctx.arc(p.x,p.y,p.r,0,PI2); 
    } 
} 
ctx.fill(); 

は、高度に最適化されていないセットですパーフォーマンステストの結果は

• です。個別のbeginPathパスを持つ画面上の円の描画。
• 個別のbeginPathパスのオフスクリーンサークルを描画します。
• 色ごとに1つのマルチサークルパスを持つ画面上の円を描く。
• 色ごとに1つのマルチサークルパスを持つオフスクリーンサークルを描画します。私のささやかな開発用コンピュータに

これらはPERF結果である：

• オンスクリーン/個々のパス：1050ms

• オフスクリーン/個々のパス：427ms

• オンスクリーン/色ごとに一つのパス：528ms

• オフスクリーン/ 1色あたりのパス：220ms

性の高い非最適化PERFテスト：チェックするためにプロファイラを使用しないのはなぜ

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var colors=['red','green','blue','gold']; 
 
var playersOnscreen=[]; 
 
var playersOffscreen=[]; 
 
for(var c=0;c<colors.length;c++){ 
 
    var color=colors[c]; 
 
    for(var p=0;p<100;p++){ 
 
     playersOnscreen.push({x:50,y:50,r:10,color:color}); 
 
    } 
 
} 
 
for(var c=0;c<colors.length;c++){ 
 
    var color=colors[c]; 
 
    for(var p=0;p<100;p++){ 
 
     playersOffscreen.push({x:-50,y:50,r:10,color:color}); 
 
    } 
 
} 
 

 
var count=100; 
 
var t1=performance.now(); 
 
for(var i=0;i<count;i++){ drawIndividualPaths(playersOnscreen); } 
 
var t2=performance.now(); 
 
for(var i=0;i<count;i++){ drawIndividualPaths(playersOffscreen); } 
 
var t3=performance.now(); 
 
for(var i=0;i<count;i++){ drawColorPaths(playersOnscreen); } 
 
var t4=performance.now(); 
 
for(var i=0;i<count;i++){ drawColorPaths(playersOffscreen); } 
 
var t5=performance.now(); 
 
alert('onscreen/individual='+parseInt(t2-t1)+', offscreen/individual='+parseInt(t3-t2)+', onscreen/by color='+parseInt(t4-t3)+', offscreen/by color='+parseInt(t5-t4)); 
 

 
function drawIndividualPaths(players){ 
 
    var len=players.length; 
 
    var PI2=Math.PI*2; 
 
    for(var i=0;i<len;i++){ 
 
     var p=players[i]; 
 
     ctx.beginPath(); 
 
     ctx.arc(p.x,p.y,p.r,0,PI2); 
 
     ctx.fillStyle=p.color; 
 
     ctx.fill();  
 
    } 
 
} 
 

 
function drawColorPaths(players){ 
 
    var len=players.length; 
 
    var PI2=Math.PI*2; 
 
    var clen=colors.length; 
 
    for(var c=0;c<clen;c++){ 
 
     var color=colors[c]; 
 
     ctx.fillStyle=color; 
 
     ctx.beginPath(); 
 
     for(var i=0;i<len;i++){ 
 
      var p=players[i]; 
 
      if(p.color==color){ 
 
       ctx.moveTo(p.x,p.y); 
 
       ctx.arc(p.x,p.y,p.r,0,PI2); 
 
      } 
 
     } 
 
     ctx.fill(); 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<h2>Please wait for perf tests to complete</h2> 
 
<canvas id="canvas" width=300 height=300></canvas>