簡単なチュートリアルWebGLのは、（B）：シェーダにデータを送信します

1.概要

チュートリアルでは：「簡単なチュートリアルWebGLの（a）は、第1の簡単な例」一例として、図中のプログラム可能なWebGLのレンダリングパイプライン上の点は、基本的な理解を持っています。プロットされた点の前の例では、点の位置は、ポイントサイズ、カラードットは、そのようなプログラムは、スケーラビリティの欠如であり、固定されたシェーダに書き込まれます。

例えば、私は、地形データは通常、地形のファイルに格納され、地形（DEM）を描きたいです。プログラムがロードされた後、データが最初にメモリに読み込まれ、その後、グラフィックスカードによって描かれた最後のメモリに転送する必要があります。データは、シェーダに渡すことができるため、柔軟で強力なレンダリング・パイプラインは、それが正確である理由は、仕事を描画するための責任があります。

2.例：プロット点（修正版）

次のようにプロットされた点、改善HelloPoint1.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
  '  gl_PointSize = 10.0;\n' +                    // Set the point size
  '}\n';

// 片元着色器程序
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'uniform vec4 u_FragColor;\n' +  // uniform変数
  'void main() {\n' +
  '  gl_FragColor = u_FragColor;\n' + // Set the point color
  '}\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;
  }

  // 获取attribute变量的存储位置
  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;
  }

  // 将顶点位置传输给attribute变量
  gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0);

  //获取u_FragColor变量的存储地址
  var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
  if (!u_FragColor) {
    console.log('Failed to get the storage location of u_FragColor');
    return;
  }

  //将点的颜色传入到u_FragColor变量中
  gl.uniform4f(u_FragColor, 0.0, 0.8, 0.0, 1.0);

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

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

  // 绘制一个点
  gl.drawArrays(gl.POINTS, 0, 1);
}

1）属性変数

頂点シェーダでは、属性はグローバル変数を宣言しa_Position見ることができ、これらのgl_Positionに割り当てます。

// 顶点着色器程序
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
  '  gl_PointSize = 10.0;\n' +                    // Set the point size
  '}\n';

属性は、代表頂点のみ頂点シェーダで使用され、データに関連付けられている、3つの可変宣言GLSLの一つです。この変数は、外部からデータを転送するために頂点シェーダに格納されます。

あなたがシェーダで良い属性変数を定義した後、あなたはまた、JSとシェーダーを介して相互作用する必要があります。コンテキスト変数のWebGL GLをレンダリングすることによって、メモリアドレスを取得する方法は、次のように定義された属性変数をgetAttribLocation（）、得ることができます。

この機能により、属性が位置シェーダ変数を取得します：

  // 获取attribute变量的存储位置
  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;
  }

アドレスを取得した後、あなたは変数を属性にデータを転送することができます。シェーダに値を渡すGL。VertexAttrib3f（）関数を使用して。ここでプロットされた点の所望の位置は、頂点シェーダに送られます。

  // 将顶点位置传输给attribute变量
  gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0);

次のようにその機能が定義されています。

この機能は、同じ家族の一連の関数であることに注意してください、異なる送信データを満たすために、関数名+ +型の名前付きパラメータに基づくパラメータの数に基づいています。特定のは、WebGLのAPIにアクセスすることができます。

2）均一な変数

同様に、フラグメントシェーダは、均一u_FragColorのグローバル変数を宣言し、そしてgl_FragColorに割り当てられました：

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

GLSLは、別の変数宣言で均一である（同一の）データの同じ頂点シェーダ及びフラグメントシェーダ送信表されるJavaScriptプログラムであり、それは変数が頂点シェーダでも使用することができるということですシェーダを断片化するために使用することができます。

同様に、属性変数で、制服の変数は、そのアドレスとその伝統的な価値を得ることがあります。ここで、所望の演色性は、フラグメントシェーダに転送されます。

//获取u_FragColor变量的存储地址
  var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
  if (!u_FragColor) {
    console.log('Failed to get the storage location of u_FragColor');
    return;
  }

  //将点的颜色传入到u_FragColor变量中
  gl.uniform4f(u_FragColor, 0.0, 0.8, 0.0, 1.0);

均一な変数）関数は、アドレスgl.getUniformLocation（、gl.uniform4f（）可変データ伝送を取得することがわかります。次のようにその機能が定義されています。

3）様々な変数

均一かつ可変属性の変数に加えて、変化する変数、フラグメントシェーダ頂点シェーダ変数からの流れを表す変数があります。これは後述します。実施形態は、着色された送信データを以下に示します。

3.結果

次のようにオープンHelloPoint1.htmlは再び、それは結果を表示します。

我々はポイントの位置が変更されている、だけでなく、色が赤から緑になっ見ることができます。位置情報及び色情報はもはやシェーダにハードコードされていないが、外部から到来します。

4.リファレンス

：「WebGLのプログラミングガイド、」ソースリンクからコードやイラストのもともと一部https://share.weiyun.com/5VjlUKo、パスワード：sw0x2x。フォローアップは、この共有ディレクトリの内容を更新していきます。