WebGL程式設計指南（3）高階變換與動畫基礎

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

本章要介紹的技術，是複雜的WebGL程式的基礎。

3.1 平移，然後旋轉

    為了簡化程式設計，大多數WebGL開發者都使用矩陣操作函式庫來隱藏矩陣計算的細節，簡化與矩陣有關的操作。目前已經有一些開源的矩陣庫。

     本書矩陣變換庫：cuon-matrix.js，允許你通過與OpenGL中類似的方式建立變換矩陣。

     var xformMatrix = new Matrix4();

     xformMatrix.setRotate(ANGLE, 0, 0, 1);  //旋轉角和旋轉軸（x,y,z）

//頂點著色器程式
var VSHADER_SOURCE = 
   'attribute vec4 a_Position;\n' +
   'uniform mat4 u_ModelMatrix;\n' +
   'void main() {\n' + 
   '  gl_Position = u_ModelMatrix * a_Position; \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;
	}
	var modelMatrix = new Matrix4();
	var ANGLE = 60.0;
	var Tx = 0.5;
	modelMatrix.setRotate(ANGLE, 0, 0, 1);  //
	modelMatrix.translate(Tx, 0, 0);
	var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
	gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
	//註冊滑鼠
	//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.TRIANGLES, 0, n);  //點的位置和大小
}

function initVertexBuffers(gl) {
	var vertices = new Float32Array([
		0.0, 0.3, -0.3, -0.3, 0.3, -0.3
	]);
	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;
}

3.2 動畫

   將矩陣變換運用到動畫圖形中

   不斷擦除和重繪三角形，並且在每次重繪時輕微地改變其角度

//頂點著色器程式
var VSHADER_SOURCE = 
   'attribute vec4 a_Position;\n' +
   'uniform mat4 u_ModelMatrix;\n' +
   'void main() {\n' + 
   '  gl_Position = u_ModelMatrix * a_Position; \n' + //設定座標
   '}\n';
//片元著色器程式
var FSHADER_SOURCE = 
   'void main() {\n' +
   '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + //設定顏色
   '}\n';
   
var ANGLE_STEP = 45.0;
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;
	}
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	
	var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
	//gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
	//三角形的當前旋轉角度
	var currentAngle = 0.0;
	var modelMatrix = new Matrix4();
	//開始繪製三角形
	var tick = function() {
		currentAngle = animate(currentAngle);
		draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);
		requestAnimationFrame(tick);
	};
	tick();
	//註冊滑鼠
	//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.TRIANGLES, 0, n);  //點的位置和大小
}

function initVertexBuffers(gl) {
	var vertices = new Float32Array([
		0.0, 0.3, -0.3, -0.3, 0.3, -0.3
	]);
	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;
}

function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
	modelMatrix.setRotate(currentAngle, 0, 0, 1);  //
	gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
	//清空
	gl.clear(gl.COLOR_BUFFER_BIT);
	//繪製點
	gl.drawArrays(gl.TRIANGLES, 0, n);  //點的位置和大小
}
// 記錄上一次呼叫函式的計劃
var g_last = Date.now();
function animate(angle) {
	var now = Date.now();
	var elapsed = now - g_last;
	g_last = now;
	var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
	return newAngle %= 360;
}