ディレクトリ

1.概要

チュートリアルに「簡単なチュートリアルWebGLの（b）はシェーダにデータを送信する」シェーダ（シェーダ）にデータを送信することにより、プロット点の大きさと色を変えます。前の例では、唯一など、三角形、四角形やキューブ、など少し複雑なグラフィックスを描画する必要がある場合、あなたはそれを行う方法に必要なポイントを描くことができますか？バッファオブジェクト（バッファオブジェクト） -今回は非常に便利なメカニズムが必要です。

私たちは、OpenGLの/ WebGLのグラフィック作業、データメモリにアクセスする必要性を知っています。JSまたはCプログラミング言語は、そのようなデータを申請するように、常にメモリに保存されている - つまり、メモリにメモリ内のデータを転送する必要は、OpenGLの/ WebGLの描画します。データ・アプリケーション、輸送、IO動作のため、IO操作を解放、セグメント、複数の読み取りおよび操作効率の書き込みは常に読み取りおよび書き込み操作の合計時間未満です。バッファは、この2つの問題を解決するために使用されるオブジェクト：我々は頂点シェーダの頂点バッファオブジェクトにワンタイム多数のデータを埋めることができます。

ここで三角形を描画することにより例としては、バッファは、オブジェクトを説明するために使用します。一般的に、基本ユニットの任意の三次元モデルが三角形であり、三角形は、複雑な形状を描画することができ、任意に描画されます。

2.例：三角形を描きます

前の例と同様に、三角形を描画する例を2つの部分HTMLとJavaScriptを含みます。

1）HelloTriangle.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hello Triangle</title>
  </head>

  <body onload="main()">
    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="HelloTriangle.js"></script>
  </body>
</html>

ほとんど変化して、このHTMLコードの例は、前に比べて、必要WebGLのメインアセンブリ図面コードHelloTriangle.jsを導入しました。その後、htmlコードの未来は説明しない特段の変化はありません。

2）HelloTriangle.js

// 顶点着色器程序
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' + // attribute variable
  'void main() {\n' +
  '  gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
  '}\n';

// 片元着色器程序
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'uniform vec4 u_FragColor;\n' +  // uniform変数
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
  '}\n';

function main() {
  // 获取 <canvas> 元素
  var canvas = document.getElementById('webgl');

  // 获取WebGL渲染上下文
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // 初始化着色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // 设置顶点位置
  var n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  } 

  // 指定清空<canvas>的颜色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 清空<canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制三角形
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}

function initVertexBuffers(gl) {
  var vertices = new Float32Array([
    0, 0.5,   -0.5, -0.5,   0.5, -0.5
  ]);
  var n = 3; // 点的个数

  // 创建缓冲区对象
  var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

  // 将缓冲区对象绑定到目标
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // 向缓冲区对象写入数据
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  // 将缓冲区对象分配给a_Position变量
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

  // 连接a_Position变量与分配给它的缓冲区对象
  gl.enableVertexAttribArray(a_Position);

  return n;
}

前描画JSコードの大部分と比較して、シェーダは変化がもはや代わりにカスタム頂点位置の初期化関数で、シェーダgl.vertexAttrib3fを介してデータを転送するmain（）関数であり、変化しないれていませんinitVertexBuffers（）。この機能では、データは、シェーダオブジェクトにバッファによって送信されます。

3）バッファ・オブジェクト

関数initVertexBuffers（）、あなたが最初のJavaScript配列を初期化します見ることができて（Float32ArrayのWebGLが配列導入の特殊なタイプがあり、同じ型の要素を大幅に節約することができ）、それが書き込まれるデータ・バッファは、次のとおりです。

var vertices = new Float32Array([
    0, 0.5,   -0.5, -0.5,   0.5, -0.5
  ]);

このデータは、バッファの頂点シェーダオブジェクトを通過させ、次の5つのステップが必要です。

（1）バッファ・オブジェクト（gl.createBuffer（））を作成します

  // 创建缓冲区对象
  var vertexBuffer = gl.createBuffer();
  if (!vertexBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }

WebGLのシステムに指示gl.createBuffer（）によってバッファ・オブジェクトを作成するためのWebGLは、データに対するメモリ送信を受け入れるためにメモリ空間を開きます。次のように詳細な説明の関数です。
1.バッファオブジェクトを作成します。

（2）結合バッファーオブジェクト（gl.bindBuffer（））

  // 将缓冲区对象绑定到目标
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

バッファ・オブジェクトは複数の用途があり、その後、異なるターゲットにバインドする必要があり、バッファを作成することができるので、目標パラメータgl.ARRAY_BUFFERバッファは、頂点のデータが格納されていることを示しています。詳細な説明バインド機能gl.bindBuffer（）を次のように
2.結合バッファオブジェクト

（3）バッファ・オブジェクトにデータを書き込む（gl.bufferData（））

  // 向缓冲区对象写入数据
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

このコードは、そのターゲットgl.ARRAY_BUFFER上の物体のバッファ配列頂点へのデータの送信を意味します。次のように詳細な説明の関数です。
バッファ・オブジェクトに書き込まれたデータ3。

（4）オブジェクトに割り当てられたバッファは、変数（gl.vertexAttribPointer（））属性

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  // 将缓冲区对象分配给a_Position变量
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

通り：「WebGLの簡単なチュートリアル（ii）は、シェーダにデータを送信する」頂点シェーダ機能getAttribLocation（に買収発表、）アドレスa_Position変数を属性。関数はここgl.vertexAttribPointer（）、全体のバッファ・オブジェクト、属性変数使い捨てa_Positionに割り当てられた、すなわち頂点データを使用したことを除い。次のように詳細な説明の関数です。
4.変数を属性するバッファオブジェクトを割り当てます。

（5）オープン属性変数（gl.enableVertexAttribArray（））

  // 连接a_Position变量与分配给它的缓冲区对象
  gl.enableVertexAttribArray(a_Position);

最後のステップは、オープン属性変数は、バッファ属性変数との接続を確立するために、非常に簡単です。次のようにその機能は次のとおりです。
属性変数5.電源を入れ

シェーダは、上記の5つのステップによって描かれたデータバッファオブジェクトを補正してもよいです。次のようにどちらの図です。
6.オブジェクト転送バッファ頂点

4）基本的なグラフィックスレンダリング

別のコースを描画する前の二つの点では、三角形がここに描かれています。

  // 绘制三角形
  gl.drawArrays(gl.TRIANGLES, 0, 3);

：ここでプロットし、その特定の機能次のように）同じ機能を使用gl.drawArrays（であることがわかる
7.drawArrays（）
第二パラメータと第三のパラメータは、頂点データからデータを頂点に描画を表す、非常に簡単です。ここで、例えば、第三の点に最初の点から引き出された三角形を描画します。
最初のパラメータは、描画することができる7つの基本的なパターンを示す、非常に強力です：

次のように基本的な図です。