WebGL程式設計指南（2）繪製和變換三角形

書本原始碼 https://download.csdn.net/download/qfire/10371055

2.1 繪製多個點

   不管三維模型的形狀多麼複雜，其基本組成部分都是三角形，只不過複雜的模型由更多的三角形構成而已。

   WebGL提供了一種很方便的機制，即緩衝區物件（buffer object），它可以一次性地向著色器傳入多個頂點的資料。緩衝區物件使WebGL系統中的一塊記憶體區域，我們可以一次性地向緩衝區物件中填充大量的頂點資料，然後將這些資料儲存在其中，供頂點著色器使用。

//頂點著色器程式
var VSHADER_SOURCE = 
   'attribute vec4 a_Position;\n' +
   'void main() {\n' + 
   '  gl_Position = a_Position; \n' + //設定座標
   '  gl_PointSize = 10.0; \n' + //設定尺寸
   '}\n';
//片元著色器程式
var FSHADER_SOURCE = 
   'void main() {\n' +
   '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + //設定顏色
   '}\n';
   

function main() {
	var canvas = document.getElementById('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 initialize shaders.');
		return ;
	}
	//
	var n = initVertexBuffers(gl);
	if (n < 0) {
		console.log("Failed to set the positions of the vertices");
		return;
	}
	
	//註冊滑鼠
	//canvas.onmousedown = function(ev) { click(ev, gl, canvas, a_Position, u_FragColor)};
	//gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
	//RGBA
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	//清空
	gl.clear(gl.COLOR_BUFFER_BIT);
	//繪製點
	gl.drawArrays(gl.POINTS, 0, n);  //點的位置和大小
}

function initVertexBuffers(gl) {
	var vertices = new Float32Array([
		0.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);
	// Write data into the buffer object
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
	//獲取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.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
	// 
	gl.enableVertexAttribArray(a_Position);
	return n;
}

五個步驟：

1. 建立緩衝區物件（gl.createBuffer()）
2. 繫結緩衝區物件（gl.bindBuffer()）
3. 將資料寫入緩衝區物件（gl.bufferData()）
4. 將緩衝區物件分配給一個attribute變數（gl.vertexAttribPointer()）
5. 開啟attribute變數（gl.enableVertexAttribArray()）

2.2 繪製三角形

   gl.drawArrays(gl.TRIANGLES, 0, n); 

2.3 移動、旋轉和縮放

   gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB; 

   變換矩陣：旋轉3x3或4x4，平移4x4，