最終更新:2014-05-07 (水) 09:20:57 (1685d)  

WebGL/開発 はてなブックマークを見る
Top / WebGL / 開発

レンダリングパイプライン

JavaScript

  • uniform変数を使って頂点シェーダに値を渡す

頂点シェーダ

  • 結果をvarying変数と言われるものに格納
  • gl_Position - 必須。処理を終えたあとの頂点座標

ラスタライズ?

フラグメントシェーダ

フレームバッファ

メモ

手順

  • バッファの初期化、頂点座標をシェーダーに投げる
    • gl.createBuffer?();
    • gl.bindBuffer?(gl.ARRAY_BUFFER?, triangleVertexPositionBuffer?);
    • gl.bufferData?(gl.ARRAY_BUFFER?, new Float32Array(vertices), gl.STATIC_DRAW?);
  • フレームごとにパラメータを変えてシェーダープログラムを走らせる
  • 描画の準備
    • gl.clearColor?(0.0, 0.0, 0.0, 1.0);
    • gl.clearDepth?(1.0)
    • gl.enable?(gl.DEPTH_TEST?);
    • gl.depthFunc?(gl.LEQUAL?);

参考

関連