Johann Felipe González Ávila

En este caso realizamos un cambio de camaras. La idea es jugar con la matriz de proyección. Veamos el ejemplo completo

Los botones controlan el tipo de camara que se desea.

Para lograr esto se jugó con la matriz de proyección en posición y rotación. Como se nota, los efectos son suaves, luego los cambios se realizan graduales por medio de matrices intermedias. Para esto creamos 4 botones para manejar las vistas. de la siguiente manera.

< input class= "tm-button" type="button" id="btnPrimeraPersona" value="Primera persona">
< input class= "tm-button"  type="button" id="btnTerceraPersona" value="Tercera persona">
< input class= "tm-button"  type="button" id="btnLongshot" value="Long Shot">
< input class= "tm-button"  type="button" id="btnNormal" value="Normal">
								

Creamos las matrices

var translacion = [0, 0, 0, 0];
var rotacion = [0, 0, 0, 0];
var translacionParcial = [0, 0, 0, 0];
var rotacionpParcial = [0, 0, 0, 0];
								

Los nombres son dicientes. Estas van a cambiar de valores siempre que se presione alguno de los botones. Luego en la inicialización de las variables

document.getElementById("btnPrimeraPersona").addEventListener("click",function(){
	translacion = [0,-10,-5,0];
	rotacion = [90,0,0,0];		
});

document.getElementById("btnTerceraPersona").addEventListener("click",function(){
	translacion = [8,-5,-5,0];		
	rotacion = [45,55,0,0];		
});

document.getElementById("btnLongshot").addEventListener("click",function(){
	translacion = [1,2,-7,0];
	rotacion = [-20,0,-5,0];		
});
document.getElementById("btnNormal").addEventListener("click",function(){
	translacion = [0,0,0,0];
	rotacion = [0,0,0,0];		
});
								

En el momento de realizar la escena, en el método draw, cambiamos la matriz de proyección. Si realizamos el cambio directo puede ser confuso para el usuario. Por tal motivo se va cambiando de manera gradual. Se ahcen pequeños cambios, se dibuja así hasta llegar al valor final

pMatrix = mat4.create();
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); // Esto habla es de la perspectiva. 45 grados, la relación entre las dimensiones del viwport, el z minimo, el z maximo y la matriz que nos describe ls proyecciones

for(var i = 0; i <4 ;i++)
{
	var signo;
	if(translacionParcial[i] > translacion[i])
	{
		translacionParcial[i] -= 0.4;
		if (translacionParcial[i] < translacion[i])
			translacionParcial[i] = translacion[i];
	}
	else if (translacionParcial[i] < translacion[i])
	{
		translacionParcial[i] += 0.4;
		if (translacionParcial[i] > translacion[i])
			translacionParcial[i] = translacion[i];
	}
	
	if(rotacionpParcial[i] > rotacion[i])
	{
		rotacionpParcial[i] -= 1;
		if (rotacionpParcial[i] < rotacion[i])
			rotacionpParcial[i] = rotacion[i];
	}
	else if (rotacionpParcial[i] < rotacion[i])
	{
		rotacionpParcial[i] += 1;
		if (rotacionpParcial[i] > rotacion[i])
			rotacionpParcial[i] = rotacion[i];
	}
}
	
	
	mat4.translate(pMatrix, translacionParcial);
	mat4.rotate(pMatrix, degToRad(rotacionpParcial[0]), [1,0,0]);
	mat4.rotate(pMatrix, degToRad(rotacionpParcial[1]), [0,1,0]);
	mat4.rotate(pMatrix, degToRad(rotacionpParcial[2]), [0,0,1]);

	.
	.
	.
								

Para ver el código puede referirse al repositorio, o al JsFiddle a continuación.