asm.jsの雛型と速度検証 – browser-land

asm.jsの雛型と速度検証

 asm.jsの雛型

今すぐにコピーして使えるHTML5 の雛形を紹介します。
必要最低限+使いやすさを加味したコードにしています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″/>
<script>
 
 //(1) asm.js関数宣言
 function asm(stdin, foreign, heap){
  
  //(2) use asm宣言
  ”use asm”;
  
  //(3) インポート宣言
  //functions
  var acos = stdin.Math.acos;
  var asin = stdin.Math.asin;
  var atan = stdin.Math.atan;
  var cos = stdin.Math.cos;
  var sin = stdin.Math.sin;
  var tan = stdin.Math.tan;
  var exp = stdin.Math.exp;
  var log = stdin.Math.log;
  var ceil = stdin.Math.ceil;
  var floor = stdin.Math.floor;
  var sqrt = stdin.Math.sqrt;
  var abs = stdin.Math.abs;
  var min = stdin.Math.min;
  var max = stdin.Math.max;
  var atan2 = stdin.Math.atan2;
  var pow = stdin.Math.pow;
  var imul = stdin.Math.imul; //int型の掛け算に用いる
  var fround = stdin.Math.fround; //float型への変換に用いる
  //constants
  var E = stdin.Math.E;
  var LN10 = stdin.Math.LN10;
  var LN2 = stdin.Math.LN2;
  var LOG2E = stdin.Math.LOG2E;
  var LOG10E = stdin.Math.LOG10E;
  var PI = stdin.Math.PI;
  var SQRT1_2 = stdin.Math.SQRT1_2;
  var SQRT2 = stdin.Math.SQRT2;
  //
  var callOuter = foreign.callOuter;
  
  //(4) 共有変数宣言
  var pI = 0; //int
  var pF = fround(0); //float
  var pD = 0.0; //double
  var pArray = new stdin.Float32Array(heap);
  
  //(5) 関数定義
  function fCalculation_Asm(G0,vi0,G1,vi1){
  
   // 引数
   G0 = fround(G0);
   vi0 = fround(vi0);
   G1 = fround(G1);
   vi1 = fround(vi1);
   
   // ローカル変数の定義
   var vI = 0; //int
   var vF = fround(0); //float
   
   for(vI=1; (vI|0)<100000; vI=(vI+1)|0){
    vF = fround(vF + fround(fround(G0 * vi0) + fround(G1 * vi1)));
   }
   
   // 戻り値
   return fround(vF);
  }
  
  //(6) 外部への公開
  return {
   fCalculation_Asm: fCalculation_Asm,
  };
 }
 
 //(7) asm.jsモジュールの呼び出し
 let asmmod = asm(self, {callOuter: function(){}}, new ArrayBuffer(0x10000));
 
 
 //
 function fCalculation_Normal(G0,vi0,G1,vi1){
  var vF = 0;
  for(var i=1; i<100000; i++){
   vF += (G0 * vi0 + G1 * vi1);
  }
  return vF;
 }
 
 window.onload = function() {
  oLog = document.getElementById(‘dLog’);
  
  //★通常のjavascriptタイマーテスト
  // 開始時間を計測
  pCnt = 0;
  pS_1 = performance.now();
  var id1 = setInterval(function(){
   pCnt++;
   
   // 計測する関数
   var v1 = fCalculation_Normal(1,2,3,4);
   
   // 現在時間を計測
   pE_1 = performance.now(); // 現在時間
   pT_1 = Math.floor(pE_1  pS_1);
   // 終了処理 (60fpsの処理で1秒経過したら終了)
   if(pT_1 >= 1000){
    clearInterval(id1);
    oLog.innerHTML += “<br>”+ pT_1 +”ms秒間の処理” + pCnt + “回 (normal)” + v1;
  }}, 1000 / 60);
  
  
  //★asm.jsのjavascriptタイマーテスト
  // 開始時間を計測
  pCnt = 0;
  pS_2 = performance.now();
  var id2 = setInterval(function(){
   pCnt++;
   
   // 計測する関数
   var v2 = asmmod.fCalculation_Asm(1,2,3,4);
   
   // 現在時間を計測
   pE_2 = performance.now(); // 現在時間
   pT_2 = Math.floor(pE_2  pS_2);
   //終了処理 (60fpsの処理で1秒経過したら終了)
   if(pT_2 >= 1000){
    clearInterval(id2);
    oLog.innerHTML += “<br>”+ pT_2 +”ms秒間の処理” + pCnt + “回 (asm.js)” + v2;
  }}, 1000 / 60);
 }
 
 
</script>
</head>
<body>
 <div id=’dLog’></div>
</body>
</html>

 (4) 共有変数宣言

・共通変数を使うと処理が遅くなるのでローカル変数を使う方が良いです。
・変数の初期値には、複雑な値の指定はできないので「0」を代入します。
 var pI = 0; : int型の変数の宣言
 var pF = fround(0); : float型
 var pD = 0.0; : double型

・heapに対する型付き配列(ArrayBufferView)の生成は共有変数宣言部でのみ可能です。
 var pArray = new stdin.Float32Array(heap);

 (5) 関数定義

・引数の型を設定します。
 i = i|0; : int型の引数
 f = fround(f); : float型の引数
 d = +d; : double型の引数

・ローカル変数を定義します。初期値には「0」を代入します。
 var vI = 0; : int型の変数の宣言
 var vF = fround(0); : float型
 var vD = 0.0; : double型

・計算を行います。2つの値の四則演算を行うたびに、型の指定が必要になります。
※asm.js を使う場合

for(vI=1; (vI|0)<100000; vI=(vI+1)|0){
 vF = fround(vF + fround(fround(G0 * vi0) + fround(G1 * vi1)));
}

※asm.js を使わない場合 (普通のJavaScript)

for(var i=1; i<100000; i++){
 vF += (G0 * vi0 + G1 * vi1);
}

・戻り値の型の指定を行います。既に指定が行われている場合は不要です。
 return i|0; : int型の変数の宣言
 return fround(f); : float型
 return +d; : double型

 速度検証における注意事項

・雛形コードでは、「fCalculation_Asm」と「fCalculation_Normal」の速度の比較を行っています。
・正しい結果を得るためには2つの関数共に、同様の計算過程を行う必要があります。
・「int型」>「float型」>「double型」の順で計算速度が遅くなります。
・asm.jsは関数callに非常に時間が掛かる為、関数を何度も呼び出すと普通のJavaScriptよりも遅くなります。
・DOM等による描画処理を行う場合は、「fps60」より早い計算は不要となります。
 fps60 の処理に間に合わないJavaScriptの場合のみasm.jsが有効になります。

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード