webglエントリが必須

単純なwebglグラフを描画する方法

私は最近何か他のことに従事していたので、私のwebgl学習シリーズのブログは更新されていませんので、ここで要約します。

新しい知識

webglの予備的な理解があります。つまり、最初にキャンバスのコンテキストを取得し、次に今日のキャンバスへのイメージのパブリッシュについて知る必要があります。

1. アイデアデータをmain（）関数から頂点シェーダーの属性変数に渡します！
2. まず、属性変数のアドレスを取得します

3. Gl.program. a_Position = gl.getAttribLocation(Program, ‘a_program’);
   

4. データを転送する

5. Gl.vertexAttribute3f(a_Postition, (数据));// 顶点的位置数据属性
   

6. 頂点シェーダー：頂点シェーダーは、頂点の特性（位置、色など）を記述するために使用されるプログラムです。
7. フラグメントシェーダー：フラグメントごとのプロセス（カラーデータなど）を処理するプログラム。
8. 変数：属性均一2種類の変数
   1.属性：頂点に関連するデータを送信します。
   2.均一：すべての固定点で同じデータ。
   属性変数をa_xxxxxとして宣言し、統一型変数をu_xxxxとして宣言するのに慣れています

バッファオブジェクト：次に、バッファオブジェクトについて説明します。
実際の実装では、頂点、色、照明などに大量のデータがあるため、通常は配列を使用して格納しますが、配列を操作する場合はさらに面倒なので、バッファオブジェクトを使用して処理します。
1.頂点の配列を作成します。

	var vertices = new Float32Array([]);

2.バッファオブジェクトを作成します。

	var vertexBuffer = gl.createBuffer();

3.バッファーをバインドします。

	gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

4.オブジェクトにデータを書き込みます。
5.バッファオブジェクトを属性変数に割り当てます。

	gl.vertexAttributePointer(a_Position, 2, gl.FLOAT, false, 0, 0);

6. a_Position変数を、それに割り当てられたバッファーに接続します。（オープニング属性変数とも呼ばれます）

Gl.enableVertexAttributeArray(a_Position);