• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

WebGL

WebGL/開発

Top / WebGL / 開発

const gl = canvas.getContext("webgl");

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

• https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-2

JavaScript

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

頂点シェーダ

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

ラスタライズ?

フラグメントシェーダ

• gl_FragColorに色を設定する

フレームバッファ

メモ

• WebGLRenderingContextオブジェクトの標準的な命名規則として通常はglが使われます。
• http://msdn.microsoft.com/ja-jp/library/dn385811(v=vs.85).aspx

手順

• Canvasを用意
• WebGLの初期化
  • gl = canvas.getContext("experimental-webgl");
  • gl.viewportWidth? = canvas.width;
  • gl.viewportHeight? = canvas.height;
• シェーダの初期化
  • shader = gl.createShader(gl.FRAGMENT_SHADER?);//x-shader/x-fragment (フラグメントシェーダ)
  • shader = gl.createShader(gl.VERTEX_SHADER?);//x-shader/x-vertex (頂点シェーダ)
  • gl.shaderSource?(shader, glsl);
  • gl.compileShader(shader);
  • gl.getShaderParameter?
    • gl.getShaderInfoLog?
  • shaderProgram = gl.createProgram();
  • gl.attachShader?(shaderProgram, vertexShader);
  • gl.attachShader?(shaderProgram, fragmentShader);
  • gl.getProgramParameter?(shaderProgram, gl.LINK_STATUS?)
  • gl.useProgram(shaderProgram);

• バッファの初期化、頂点座標をシェーダーに投げる
  • 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?);

• 描画
  • gl.viewport?
  • gl.clear?
  • gl.bindBuffer?
  • gl.vertexAttribPointer?
  • gl.drawArrays

参考

• https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-1
• http://msdn.microsoft.com/ja-jp/library/dn385811(v=vs.85).aspx

関連

• WebGL/まとめ
• GLSL ES