webGLの基本

座標系

線形補間

まず、線形補間は値ではなく、多項式である関数を一度に補間する方法です。

では、補間とはどういう意味でしょうか？

数値解析において補間とは、既知の離散データ点の範囲を通して新しいデータ点を外挿するプロセスまたは方法のことです。科学や工学の問題を解くとき、これらの既知のデータ点は、通常、サンプリングや実験などによって得られ、連続関数や密な離散方程式を通して、関数や方程式から未知のデータを推測することができます。

補間アルゴリズムによって、補間の種類は次のように分類されます：

• フラグメント補間：最も近いデータ値を見つけ、同じ値を割り当てます。

• 線形補間：2点における関数fの値を、他の点における既知の値で近似すること。

例えば、2点A、Bから一次方程式 f=ax+bf=ax+bが決まれば、この関数から任意のxに対応する値を求めることができます。

• その他、多項式補間、ニュートン補間、スプライン補間など。

補間手法によって精度が異なるため、速度、時間、コストなど、さまざまな要素を考慮して補間手法を選択する必要があります。

webGLの補間関数は

• step(edg,x)

この関数は、x< />の場合、2つの値に基づいてステップ関数を生成します。

• smoothstep(edg0, edg1, x)

<=edge0则返回0.0；如果x>x =edge1 なら 1.0 を返し、そうでないなら

$f=ax+b$t=クランプ /,,)t=クランプ /,0,1)

t∗t∗はt∗t∗ を返します。

基本ステップ

ステップ 1: webGL コンテキストの作成

 var canvas = document.querySelector("#canvas");
	var gl = canvas.getContext("webgl");
	if (!gl) {
		return;
	}

ステップ2：webGLアプリケーションの作成

//2.1頂点シェーダーとスライスシェーダーの2つのシェーダーを作成する。スライスシェーダーも同様である。
	var source = document.getElementById("vertex-2d").text;
 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // シェーダーオブジェクトを作成する
	gl.shaderSource(vertexShader, source); //データソースを提供する
	gl.compileShader(vertexShader); // コンパイルする> シェーダーを生成する
 
//2.2 webGLアプリケーションを作成し、2つのシェーダーをリンクする
 	var program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);

ステップ3：バッファーの作成

 var positions = [
		-0.7, -0.5,
		0.7, -0.5,
		-0.7, 0.5,
		0.7, -0.5,
		-0.7, 0.5,
		0.7, 0.5,
	];
 var positionBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

ステップ 4: キャンバスのクリーンアップとバッファからのデータ取得

//4.1 キャンバスをクリーンアップする
 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);//座標を変換する
	gl.clearColor(0, 0, 0, 0);// キャンバスをクリーンアップする
	gl.clear(gl.COLOR_BUFFER_BIT);
 
//4.2 webGLアプリケーションをアクティブにする
	gl.useProgram(program);//シェーダープログラムを有効にする
	gl.enableVertexAttribArray(positionAttributeLocation);//対応する属性aを有効にする_position
 
//4.3 バッファからカウンタをフェッチする
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	// positionBufferからデータを読み込む方法をプロパティに伝える（ARRAY_BUFFER)
	var size = 2; // 反復実行ごとに2ユニットのデータを抽出する;
	var type = gl.FLOAT; // 各ユニットのデータ型は32ビット浮動小数点型である。
	var normalize = false; // データを正規化する必要はない
	var stride = 0; // 0 = ユニット数を移動する* 単位あたりのメモリ使用量
	// 各反復は、次のデータ開始点までどれだけのメモリを消費するかスポーツを実行する
	var offset = 0; // バッファの先頭から読み込みを開始する
	gl.vertexAttribPointer(
		positionAttributeLocation, size, type, normalize, stride, offset);
	

ステップ5：シーンのレンダリング

 //GLプログラムを実行する
	var primitiveType = gl.TRIANGLES; //要素のタイプは三角形である
	var offset = 0;
	//頂点シェーダーの実行回数は6回で、毎回バッファから2つの値を取得して_position
	var count = 6;
	gl.drawArrays(primitiveType, offset, count);