WebGL编程指南（3）高级变换与动画基础

书本源代码 https://download.youkuaiyun.com/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;
}