conwayのgame of life(いわゆるライフゲーム)/GPU版 by てぃふと@うぇいく

▶ 実行
# Conway's Game Of Life

!「https://n3s.nadesi.com/plain/565.nako3」を取り込む

「全て」を実行速度優先

# 設定
画面幅は1600
画面高は800
ワールド幅は1600
ワールド高は800

#
# WEBGL更新表示ためのワークエリア

WEBGL用キャンバンスは空
テクスチャ幅は0
テクスチャ高は0
部分頂点情報バッファは空
全体頂点情報バッファは空
表示頂点情報バッファは空
更新プログラムは空
表示プログラムは空
FBリストは空配列
表FBは0
裏FBは1-表FB

色リストは[
  [  0,  0,  0],
  [255,  0,  0],
  [  0,255,  0],
  [  0,  0,255],
  [255,255,  0],
  [255,  0,255],
  [  0,255,255],
  [255,255,255]
]

コントロールパネルリストは[
  [[  0,  0], [ 90, 20], "runInfo", "", 0, NULL],
  [[  0, 20], [ 30, 20], "EndButton", "終", 0, "End"],
  [[ 30, 20], [ 20, 20], "StopButton", "⏸", 0, "Stop"],
  [[ 50, 20], [ 20, 20], "StepButton", "⏯", 0, "Step"],
  [[ 70, 20], [ 20, 20], "StartButton", "⏩", 0, "Start"],
  [[270,  0], [ 60, 20], "SpeedInfo", "", 0, NULL],
  [[270, 20], [ 30, 20], "SpeedDownButton", "遅", 0, "SpeedDown"],
  [[300, 20], [ 30, 20], "SpeedUpButton", "速", 0, "SpeedUp"],
  [[330,  0], [160, 20], "TurnInfo", "", 0, NULL],
  [[330, 20], [ 80, 20], "ClearButton", "クリア", 0, "Clear"],
  [[410, 20], [ 80, 20], "SetRandomButton", "ランダム", 0, "SetRandom"]
]

最大表示倍率は８
最小表示倍率は１

表示起点は[0,0]
表示倍率は１
ターン数は１
実行状態は「停止」
表示速度は０．０５

REQIDは0
前回タイムスタンプは０
経過時間は０
ステータス更新はオフ
コントロールパネルは{}

#
# メイン処理

準備処理する
REQIDは「アニメーション」を画面更新時実行

# 操作パネルの指定した名称のところに文字を表示する
●(NAMEにLABELを)コントロールラベル描画とは
　CTLはコントロールパネル[NAME]
　もし、CTLでなければ、戻る
　XYはCTL["位置"]
　WHはCTL["サイズ"]
　RはCTL["回転"]
　[XY[0],XY[1],WH[0],WH[1]]に描画クリア
　キャンバス状態保存
　白色に塗り色設定
　[XY[0]+WH[0]/2, XY[1]+WH[1]/2]に描画起点設定
　もし、R≠0ならば、
　　Rに描画回転
　ここまで
　[0,0]にLABELを文字描画
　キャンバス状態復元
ここまで

# 情報表示・操作パネルを配列を元に表示
# 表示の際、辞書型の変数に格納しなおす
●コントロールパネル描画とは
　[0,0,280,40]に描画クリア
　キャンバス状態保存
　コントロールパネルリストを反復する
　　パネルは対象
　　XYはパネル[0]
　　WHはパネル[1]
　　NAMEはパネル[2]
　　LABELはパネル[3]
　　Rはパネル[4]
　　EVTはパネル[5]
　　もし、LABELが空でなければ、
　　　キャンバス状態保存
　　　もし、EVTならば、
　　　　緑色に線色設定
　　　　白色に塗り色設定
　　　　[XY[0]+0.5, XY[1]+0.5, WH[0]-1, WH[1]-1]へ四角描画
　　　　黒色に塗色設定
　　　違えば、
　　　　空に線色設定
　　　　白色に塗り色設定
　　　ここまで
　　　[XY[0]+WH[0]/2, XY[1]+WH[1]/2]に描画起点設定
　　　もし、R≠0ならば、
　　　　Rに描画回転
　　　ここまで
　　　[0,0]にLABELを文字描画
　　　キャンバス状態復元
　　ここまで
　　コントロールは{
　　　ID:NAME,
　　　ラベル:LABEL,
　　　位置:XY,
　　　サイズ:WH,
　　　回転:R,
　　　イベントID:EVT
　　}
　　コントロールパネル[NAME]はコントロール
　ここまで
　キャンバス状態復元
ここまで

# 現在のセル世代の状態を表示する
●現世代描画とは
　FBリスト[表FB]をFB描画する
ここまで

# セル配列を１世代進めて表示する
●世代更新とは
　FBリスト[表FB]からFBリスト[裏FB]へFB更新する

　# FB0とFB1を交換
　表FBは1-表FB
　裏FBは1-表FB

　ターン数はターン数＋１
　現世代描画する
ここまで

# アニメーションフレームのメイン処理
●(タイムスタンプで)アニメーションとは
　もし、実行状態が「停止」でなければ
　　もし、表示速度が０ならば、
　　　世代更新
　　　もし、実行状態が「ステップ」ならば、
　　　　実行状態は「停止」
　　　　ステータス更新はオン
　　　ここまで
　　　経過時間は０
　　違えばもし、前回タイムスタンプが０でなければ、
　　　経過時間は経過時間＋タイムスタンプ－前回タイムスタンプ
　　　もし、経過時間が(表示速度×１０００)以上ならば、
　　　　世代更新
　　　　もし、実行状態が「ステップ」ならば、
　　　　　実行状態は「停止」
　　　　　ステータス更新はオン
　　　　ここまで
　　　　経過時間は経過時間－(表示速度×１０００)
　　　ここまで
　　ここまで
　ここまで
　前回タイムスタンプはタイムスタンプ
　もし、ステータス更新ならば、
　　ステータス表示
　　ステータス更新はオフ
　ここまで
　「{ターン数}世代」を"TurnInfo"にコントロールラベル描画
　REQIDは「アニメーション」を画面更新時実行
ここまで

●ステータス表示とは
　実行状態を"runInfo"にコントロールラベル描画
　「×{表示倍率}」を"zoomInfo"にコントロールラベル描画
　「({表示起点[0]},{表示起点[1]})」を"PositionInfo"にコントロールラベル描画
　「{表示速度}秒」を"SpeedInfo"にコントロールラベル描画
ここまで

●準備処理とは
　# 「死」のセルは透明なので背景を黒にする
　描画中キャンバスの"背景色"に黒色をDOMスタイル設定
　WEBGL用キャンバンスはWEBGL用キャンバス準備
　GLはWEBGL用キャンバンスからGLコンテキスト作成
　GOLシェーダ準備する
　FBリスト[表FB]にランダム初期化する
　# 初期設定
　「16px bold sans-serif」に描画フォント設定
　１に線太さ設定
　描画中コンテキスト["textAlign"]は"center"
　描画中コンテキスト["textBaseline"]は"middle"
　# 初期状態表示
　現世代描画する
　コントロールパネル描画
　ステータス更新はオン
　描画中キャンバスの"click"に"クリック受付"をDOMイベント追加
ここまで

●後始末とは
　REQIDを画面更新処理取消
　描画中キャンバスの"click"から"クリック受付"をDOMイベント削除
ここまで

●クリック受付とは
　EVTはWINDOW["event"]
　要素位置はEVT["target"]の"getBoundingClientRect"を[]でJSメソッド実行
　XはEVT["clientX"]-要素位置["left"]
　YはEVT["clientY"]-要素位置["top"]
　コントロールパネルを反復
　　CTLは対象
　　XYはCTL["位置"]
　　WHはCTL["サイズ"]
　　EVTはCTL["イベントID"]
　　もし、EVTならば、
　　　もし、(X≧XY[0])&&(X≦XY[0]+WH[0])ならば、
　　　　もし、(Y≧XY[1])&&(Y≦XY[1]+WH[1])ならば、
　　　　　EVTでイベント処理
　　　　ここまで
　　　ここまで
　　ここまで
　ここまで
ここまで

●(EVTIDで)イベント処理とは
　EVTIDで条件分岐
　　"End"ならば、
　　　もし、実行状態が「停止」ならば
　　　　後始末
　　　　実行状態は「終了」
　　　　ステータス表示
　　　ここまで
　　ここまで
　　"Stop"ならば、
　　　実行状態は「停止」
　　　ステータス更新はオン
　　ここまで
　　"Step"ならば、
　　　実行状態は「ステップ」
　　　ステータス更新はオン
　　ここまで
　　"Start"ならば、
　　　実行状態は「実行中」
　　　ステータス更新はオン
　　ここまで
　　"PosLeft"ならば、
　　　表示起点[0]は表示起点[0]－(画面幅÷表示倍率÷２)の整数部分
　　　表示起点[0]は(表示起点[0]＋ワールド幅)%ワールド幅
　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　ステータス更新はオン
　　ここまで
　　"PosRight"ならば、
　　　表示起点[0]は表示起点[0]＋(画面幅÷表示倍率÷２)の整数部分
　　　表示起点[0]は表示起点[0]%ワールド幅
　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　ステータス更新はオン
　　ここまで
　　"PosUp"ならば、
　　　表示起点[1]は表示起点[1]－(画面高÷表示倍率÷２)の整数部分
　　　表示起点[1]は(表示起点[1]＋ワールド高)%ワールド高
　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　ステータス更新はオン
　　ここまで
　　"PosDown"ならば、
　　　表示起点[1]は表示起点[1]＋(画面高÷表示倍率÷２)の整数部分
　　　表示起点[1]は表示起点[1]%ワールド高
　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　ステータス更新はオン
　　ここまで
　　"PosHome"ならば、
　　　表示起点[0]は(ワールド幅÷２－画面幅÷表示倍率÷２)の整数部分
　　　表示起点[1]は(ワールド高÷２－画面高÷表示倍率÷２)の整数部分
　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　ステータス更新はオン
　　ここまで
　　"ZoomIn"ならば、
　　　もし、表示倍率＜最大表示倍率ならば、
　　　　表示起点[0]は表示起点[0]＋(画面幅÷表示倍率÷２)の整数部分
　　　　表示起点[1]は表示起点[1]＋(画面高÷表示倍率÷２)の整数部分
　　　　表示倍率は表示倍率×２
　　　　表示起点[0]は表示起点[0]－(画面幅÷表示倍率÷２＋０．５)の整数部分
　　　　表示起点[1]は表示起点[1]－(画面高÷表示倍率÷２＋０．５)の整数部分
　　　　表示起点[0]は(表示起点[0]＋ワールド幅)%ワールド幅
　　　　表示起点[1]は(表示起点[1]＋ワールド高)%ワールド高
　　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　　ステータス更新はオン
　　　ここまで
　　ここまで
　　"ZoomOut"ならば、
　　　もし、表示倍率＞最小表示倍率ならば、
　　　　表示起点[0]は表示起点[0]＋(画面幅÷表示倍率÷２＋０．５)の整数部分
　　　　表示起点[1]は表示起点[1]＋(画面高÷表示倍率÷２＋０．５)の整数部分
　　　　表示倍率は表示倍率÷２
　　　　表示起点[0]は表示起点[0]－(画面幅÷表示倍率÷２)の整数部分
　　　　表示起点[1]は表示起点[1]－(画面高÷表示倍率÷２)の整数部分
　　　　表示起点[0]は(表示起点[0]＋ワールド幅)%ワールド幅
　　　　表示起点[1]は(表示起点[1]＋ワールド高)%ワールド高
　　　　もし、実行状態が「停止」ならば、現世代描画する。
　　　　ステータス更新はオン
　　　ここまで
　　ここまで
　　"SpeedDown"ならば、
　　　表示速度で条件分岐
　　　　0ならば、表示速度は0.02。ここまで。
　　　　0.02ならば、表示速度は0.05。ここまで。
　　　　0.05ならば、表示速度は0.1。ここまで。
　　　　0.1ならば、表示速度は0.2。ここまで。
　　　　0.2ならば、表示速度は0.5。ここまで。
　　　　0.5ならば、表示速度は1。ここまで。
　　　　1ならば、表示速度は3。ここまで。
　　　　3ならば、表示速度は5。ここまで。
　　　　5ならば、表示速度は10。ここまで。
　　　ここまで
　　　ステータス更新はオン
　　ここまで
　　"SpeedUp"ならば、
　　　表示速度で条件分岐
　　　　0.02ならば、表示速度は0。ここまで。
　　　　0.05ならば、表示速度は0.02。ここまで。
　　　　0.1ならば、表示速度は0.05。ここまで。
　　　　0.2ならば、表示速度は0.1。ここまで。
　　　　0.5ならば、表示速度は0.2。ここまで。
　　　　1ならば、表示速度は0.5。ここまで。
　　　　3ならば、表示速度は1。ここまで。
　　　　5ならば、表示速度は3。ここまで。
　　　　10ならば、表示速度は5。ここまで。
　　　ここまで
　　　ステータス更新はオン
　　ここまで
　　"Clear"ならば、
　　　もし、実行状態が「停止」ならば
　　　　FBリスト[表FB]に空初期化する
　　　　現世代描画する
　　　　ターン数は１
　　　　ステータス更新はオン
　　　ここまで
　　ここまで
　　"SetRandom"ならば、
　　　もし、実行状態が「停止」ならば
　　　　FBリスト[表FB]にランダム初期化する
　　　　現世代描画する
　　　　ターン数は１
　　　　ステータス更新はオン
　　　ここまで
　　ここまで
　ここまで
ここまで

#
#
#
●WEBGL用キャンバス準備とは
　CANVASは「CANVAS」のDOM要素作成
　CANVAS["width"]は画面幅
　CANVAS["height"]は画面高
　描画中キャンバス["parentNode"]にCANVASをDOM子要素追加
　CANVASで戻る
ここまで

●GOLシェーダ準備とは
　# データの保存に必要なテクスチャのサイズを求める
　基本底数は２でワールド幅のLOGNを切り上げ
　テクスチャ幅は２の(基本底数)乗
　第二底数は２でワールド高のLOGNを切り上げ
　テクスチャ高は２の(第二底数)乗
　「TEX=({テクスチャ幅},{テクスチャ高})」を表示

　# WEBGLの拡張機能のチェックと限界数の表示を行う
　VATTR数は"MAX_VERTEX_ATTRIBS"のGLパラメータ取得
　「利用可能なV属性数={VATTR数}」を表示

　頂点シェーダは『attribute vec2 aPos;
    attribute vec2 aTexCoord;
    varying vec2 vTexCoord;
    void main() {
      vTexCoord = aTexCoord;
      gl_Position = vec4(aPos, 0.0, 1.0);
    }』から"頂点"のGLシェーダ作成

　更新シェーダは『precision mediump float;
    uniform sampler2D uTex;
    uniform vec2 uTexSize;
    uniform vec2 uWorldSize;
    varying vec2 vTexCoord;
    int v2c(vec4 rgba) {
      return (rgba.r > 0.5 ? 4:0) + (rgba.g > 0.5 ? 2:0) + (rgba.b > 0.5 ? 1:0);
    }
    vec4 c2v(int c) {
      vec4 rgba = vec4(1.0);
      rgba.r = c > 3 ? 1.0: 0.0;
      rgba.g = c - ((rgba.r > 0.5) ? 4:0) > 1 ? 1.0: 0.0;
      rgba.b = c - ((rgba.r > 0.5) ? 4:0) - ((rgba.g > 0.5) ? 2:0) > 0 ? 1.0: 0.0;
      return rgba;
    }
    int get(float dx, float dy) {
      vec2 scale = 1.0 / uTexSize;
      vec2 pos = mod(gl_FragCoord.xy + uWorldSize + vec2(dx,  dy), uWorldSize);
      vec4 rgba = texture2D(uTex, pos * scale);
      return v2c(rgba);
    }
    int pick() {
      int c = 0;
      int i = -1;
      c += (c == 0 && i < 0 ) ? get(-1.0, 1.0) : 0;
      i--;
      c += (c == 0 && i < 0 ) ? get( 0.0, 1.0) : 0;
      i--;
      c += (c == 0 && i < 0 ) ? get( 1.0, 1.0) : 0;
      i--;
      c += (c == 0 && i < 0 ) ? get(-1.0, 0.0) : 0;
      i--;
      c += (c == 0 && i < 0 ) ? get( 1.0, 0.0) : 0;
      i--;
      c += (c == 0 && i < 0 ) ? get(-1.0,-1.0) : 0;
      i--;
      c += (c == 0 && i < 0 ) ? get( 0.0,-1.0) : 0;
      c += (c == 0) ? get( 1.0,-1.0) : 0;
      c += (c == 0) ? get(-1.0, 1.0) : 0;
      c += (c == 0) ? get( 0.0, 1.0) : 0;
      c += (c == 0) ? get( 1.0, 1.0) : 0;
      c += (c == 0) ? get(-1.0, 0.0) : 0;
      c += (c == 0) ? get( 1.0, 0.0) : 0;
      c += (c == 0) ? get(-1.0,-1.0) : 0;
      c += (c == 0) ? get( 0.0,-1.0) : 0;
      return c;
    }
    void main() {
      int cur = get(0.0, 0.0);
      int sum = 0;
      sum += get(-1.0, 1.0) > 0 ? 1 : 0;
      sum += get( 0.0, 1.0) > 0 ? 1 : 0;
      sum += get( 1.0, 1.0) > 0 ? 1 : 0;
      sum += get(-1.0, 0.0) > 0 ? 1 : 0;
      sum += get( 1.0, 0.0) > 0 ? 1 : 0;
      sum += get(-1.0,-1.0) > 0 ? 1 : 0;
      sum += get( 0.0,-1.0) > 0 ? 1 : 0;
      sum += get( 1.0,-1.0) > 0 ? 1 : 0;
      gl_FragColor = c2v((cur > 0 && (sum == 2 || sum == 3)) ? cur : ((cur == 0 && sum == 3) ? pick() : 0));
    }』から"フラグメント"のGLシェーダ作成

　表示シェーダは『precision mediump float;
    uniform sampler2D uTex;
    varying vec2 vTexCoord;
    void main() {
      gl_FragColor = texture2D(uTex, vTexCoord);
    }』から"フラグメント"のGLシェーダ作成

　もし、頂点シェーダ＝NULLまたは、表示シェーダ＝NULLまたは、更新シェーダ=NULLならば、
　　「シェーダのコンパイルに失敗しました」でエラー発生
　ここまで

　PGMは頂点シェーダと更新シェーダからGLプログラム作成
　更新プログラムは{
　　PROGRAM: PGM,
　　PARAM: {
　　　頂点: { TYPE: "ATTR", NAME: 「aPos」 },
　　　UV: { TYPE: "ATTR", NAME: 「aTexCoord」 },
　　　テクスチャ: { TYPE: "1i", NAME: 「uTex」 }
　　　テクスチャサイズ: { TYPE: "2fv", NAME: 「uTexSize」 },
　　　ワールドサイズ: { TYPE: "2fv", NAME: 「uWorldSize」 }
　　}
　}
　更新プログラムのパラメータロケーション情報更新

　PGMは頂点シェーダと表示シェーダからGLプログラム作成
　表示プログラムは{
　　PROGRAM: PGM,
　　PARAM: {
　　　頂点: { TYPE: "ATTR", NAME: 「aPos」 },
　　　UV: { TYPE: "ATTR", NAME: 「aTexCoord」 },
　　　テクスチャ: { TYPE: "1i", NAME: 「uTex」 }
　　}
　}
　表示プログラムのパラメータロケーション情報更新

　# X,Y,U,Vの順
　Wはワールド幅/テクスチャ幅*2.0-1.0
　Hはワールド高/テクスチャ高*2.0-1.0
　Uはワールド幅/テクスチャ幅
　Vはワールド高/テクスチャ高

　全体頂点情報リストは[
    -1.0,  1.0, 0.0, 1.0,
     1.0,  1.0, 1.0, 1.0,
    -1.0, -1.0, 0.0, 0.0,
     1.0, -1.0, 1.0, 0.0
  ]
　全体頂点情報バッファは{
　　BUF: 全体頂点情報リストからGL静的配列バッファ作成,
　　STRIDE: 16,
　　NUM: 4,
　　PARAM: {
　　　頂点: { OFFSET: 0, NUM: 2 },
　　　UV: { OFFSET: 8, NUM: 2 }
　　}
　}

　部分頂点情報リストは[
    -1.0,    H, 0.0,   V,
       W,    H,   U,   V,
    -1.0, -1.0, 0.0, 0.0,
       W, -1.0,   U, 0.0
  ]
　部分頂点情報バッファは{
　　BUF: 部分頂点情報リストからGL静的配列バッファ作成,
　　STRIDE: 16,
　　NUM: 4,
　　PARAM: {
　　　頂点: { OFFSET: 0, NUM: 2 },
　　　UV: { OFFSET: 8, NUM: 2 }
　　}
　}

　表示頂点情報リストは[
    -1.0,  1.0, 0.0,   V,
     1.0,  1.0,   U,   V,
    -1.0, -1.0, 0.0, 0.0,
     1.0, -1.0,   U, 0.0
  ]
　表示頂点情報バッファは{
　　BUF: 表示頂点情報リストからGL静的配列バッファ作成,
　　STRIDE: 16,
　　NUM: 4,
　　PARAM: {
　　　頂点: { OFFSET: 0, NUM: 2 },
　　　UV: { OFFSET: 8, NUM: 2 }
　　}
　}

　0をGLテクスチャ枠指定

　２回繰り返す
　　TEXはNULLから[テクスチャ幅,テクスチャ高]のGLテクスチャ作成
　　FBリスト[回数-1]は{
　　　FB: ({COLOR: TEX}のGLフレームバッファ作成),
　　　TEX: TEX,
　　　W: テクスチャ幅,
　　　H: テクスチャ高
　　}
　ここまで
ここまで

●空配置TEX作成とは
　データは(テクスチャ幅*テクスチャ高*4)のUI8配列
　(テクスチャ高)回繰り返す
　　Yは回数-1
　　(テクスチャ幅)回繰り返す
　　　Xは回数-1
　　　Iは(Y*テクスチャ幅+X)*4
　　　データ[I+0]は0
　　　データ[I+1]は0
　　　データ[I+2]は0
　　　もし、X≧ワールド幅またはY≧ワールド高ならば、
　　　　データ[I+3]は0
　　　違えば、
　　　　データ[I+3]は255
　　　ここまで
　　ここまで
　ここまで
　TEXはデータから[テクスチャ幅,テクスチャ高]のGLテクスチャ作成
　TEXで戻る
ここまで

●ランダム配置TEX作成とは
　データは(テクスチャ幅*テクスチャ高*4)のUI8配列
　(テクスチャ高)回繰り返す
　　Yは回数-1
　　(テクスチャ幅)回繰り返す
　　　Xは回数-1
　　　Iは(Y*テクスチャ幅+X)*4
　　　もし、X≧ワールド幅またはY≧ワールド高ならば、
　　　　データ[I+0]は0
　　　　データ[I+1]は0
　　　　データ[I+2]は0
　　　　データ[I+3]は0
　　　違えば、
　　　　もし、(5の乱数)＜３ならば、
　　　　　色は0
　　　　　もし、X＜ワールド幅÷３ならば、
　　　　　　色は1
　　　　　違えばもし、X＜ワールド幅÷３×２ならば、
　　　　　　色は2
　　　　　違えば、
　　　　　　色は3
　　　　　ここまで
　　　　　もし、Y≧ワールド高÷２ならば、
　　　　　　色は色+3
　　　　　ここまで
　　　　　データ[I+0]は色リスト[色][0]
　　　　　データ[I+1]は色リスト[色][1]
　　　　　データ[I+2]は色リスト[色][2]
　　　　違えば
　　　　　データ[I+0]は0
　　　　　データ[I+1]は0
　　　　　データ[I+2]は0
　　　　ここまで
　　　　データ[I+3]は255
　　　ここまで
　　ここまで
　ここまで
　TEXはデータから[テクスチャ幅,テクスチャ高]のGLテクスチャ作成
　TEXで戻る
ここまで

●(FBに)空初期化とは
　TEXは空配置TEX作成する
　FBにTEXを初期描画する
　TEXをGLテクスチャ削除
ここまで

●(FBに)ランダム初期化とは
　TEXはランダム配置TEX作成する
　FBにTEXを初期描画する
　TEXをGLテクスチャ削除
ここまで

●(FBにTEXを)初期描画とは
　現PGMは表示プログラム

　現PGM["PROGRAM"]をGLプログラム使用

　FB["FB"]をGLフレームバッファ設定
　[0,0,テクスチャ幅,テクスチャ高]にGLビューポート設定

　[0.0, 0.0, 0.0, 1.0]にGLクリア色設定

　パラメータ情報は{
　　属性: [全体頂点情報バッファ],
　　共有データ: {},
　　テクスチャ: [
　　　{ テクスチャ: TEX, 共有データ名: "テクスチャ" }
　　]
　}
　使用リソースはパラメータ情報で現PGMにシェーダプログラムパラメータ設定

　{COLOR:オン}でGLクリア

　「TRIANGLE_STRIP」で4をGL配列描画

　GLフラッシュする

　使用リソースをシェーダプログラムパラメータ解放
ここまで

●(TEXを)TEX描画とは
　現PGMは表示プログラム

　現PGM["PROGRAM"]をGLプログラム使用

　NULLをGLフレームバッファ設定
　[0,0,画面幅,画面高]にGLビューポート設定

　[0.0, 0.0, 0.0, 1.0]にGLクリア色設定

　パラメータ情報は{
　　属性: [表示頂点情報バッファ],
　　共有データ: {},
　　テクスチャ: [
　　　{ テクスチャ: TEX, 共有データ名: "テクスチャ" }
　　]
　}
　使用リソースはパラメータ情報で現PGMにシェーダプログラムパラメータ設定

　{COLOR:オン}でGLクリア

　「TRIANGLE_STRIP」で4をGL配列描画

　GLフラッシュする

　使用リソースをシェーダプログラムパラメータ解放
ここまで

●(FBを)FB描画とは
　FB["TEX"]をTEX描画する
ここまで

●(FBSからFBDへ)FB更新とは
　現PGMは更新プログラム

　現PGM["PROGRAM"]をGLプログラム使用
　更新プログラム["PROGRAM"]をGLプログラム使用

　FBD["FB"]をGLフレームバッファ設定
　[0,0,テクスチャ幅,テクスチャ高]にGLビューポート設定

　[0.0, 0.0, 0.0, 1.0]にGLクリア色設定

　パラメータ情報は{
　　属性: [表示頂点情報バッファ],
　　共有データ: {
　　　テクスチャサイズ: [テクスチャ幅, テクスチャ高],
　　　ワールドサイズ: [ワールド幅, ワールド高]
　　},
　　テクスチャ: [
　　　{ テクスチャ: FBS["TEX"], 共有データ名: "テクスチャ" }
　　]
　}
　使用リソースはパラメータ情報で現PGMにシェーダプログラムパラメータ設定

　{COLOR:オン}でGLクリア

　「TRIANGLE_STRIP」で4をGL配列描画

　GLフラッシュする

　使用リソースをシェーダプログラムパラメータ解放
ここまで

# 数学関数群

●(AのN)乗とは
　『(function (a,b) {return Math.pow(a,b)})』を[A,N]でJS関数実行で戻る
ここまで

# イメージデータ操作関数

# 全ピクセルが0x00000000(黒の完全透明)のイメージデータを新たに作成して返す
# PARAMに、[幅,高]の配列を指定すると、指定したサイズのイメージデータを作成する
# PARAMに、[イメージデータ]を指定すると、指定したイメージデータと同じサイズのイメージデータを作成する
●(PARAMの)イメージデータ作成とは
　描画中コンテキストの"createImageData"をPARAMでJSメソッド実行で戻る
ここまで

# 現在のキャンバスにイメージデータを指定した座標にputImageDataにて描画する
# DrawImageとイメージデータの画像で「置き換える」。描くより高速。
●(イメージをXYに)イメージデータ設定とは
　描画中コンテキストの"putImageData"を[イメージ,XY[0],XY[1]]でJSメソッド実行
ここまで

# 現在のキャンバス上の指定した位置・サイズをイメージデータとして取得して返す
●(XYからWHを)イメージデータ取得とは
　描画中コンテキストの"gutImageData"を[XY[0],XY[1],WH[0],WH[1]]でJSメソッド実行
ここまで

ここまで