Cameras

by juansb827

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
<html>
    <body>
    <div style="position:absolute">
			
				<button onclick="changeToFirst()">
					Primera Persona
				</button>
			
			
				<button onclick="changeTo3rd()">
					Tercera Persona
				</button>	
				
			
			
				<button onclick="changeToLongShot()">
				Long Shot
				</button>
				
				<button onclick="changeToUpper()">
				Superior
				</button>
			
		</div>	
        <canvas id="game-surface" width="500" height="500">
            
        </canvas>
        <br>
        <i>Ejemplo camaras</i>
       
    </body>
</html>

JavaScript

var vertexShaderText = 
[
'precision mediump float;',
'',
'attribute vec3 vertPosition;',
'attribute vec3 vertColor;',
'varying vec3 fragColor;',
'uniform vec3 translation;',
'uniform mat4 mWorld;',
'uniform mat4 mView;',
'uniform mat4 mProj;',
'',
'void main()',
'{',
'  fragColor = vertColor;',
'  ',    
'  gl_Position = mProj * mView * mWorld * vec4(vertPosition, 1.0);',
'}'
].join('\n');

var fragmentShaderText =
[
'precision mediump float;',
'',
'varying vec3 fragColor;',
'void main()',
'{',
'  gl_FragColor = vec4(fragColor, 1.0);',
'}'
].join('\n');

initDemo();
function initDemo(){

  console.log('Inicia Demo');

var canvas = document.getElementById('game-surface');
gl = canvas.getContext('webgl');

if (!gl) {
  console.log('WebGL no es soportado, usando experimental-webgl');
  gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
  alert('El navegador no soporta support WebGL');
  }

  gl.enable(gl.DEPTH_TEST);

  
	
  gl.clearColor(0.75, 0.85, 0.8, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  //
  // Se crean los shaders
  // 
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertexShader, vertexShaderText);
  gl.shaderSource(fragmentShader, fragmentShaderText);
  
  gl.compileShader(vertexShader);
  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error('ERROR compilando vertex shader!', gl.getShaderInfoLog(vertexShader));
  return;
  }
  
  gl.compileShader(fragmentShader); 
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error('ERROR compilando fragment shader!', gl.getShaderInfoLog(fragmentShader));
  return;
  }
  
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error('ERROR enlazando el programa!',...