SImple Path

by juansb827

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
<html>
	<style>
		
		button{
		
		}
		canvas{
			
		}
	</style>
	
	<script id="shader-vs" type="x-shader/x-vertex">
		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);
		}
	</script>


	
	<script id="shader-fs" type="x-shader/x-fragment">
		precision mediump float;		
		varying vec3 fragColor;
		void main(){	
			gl_FragColor = vec4(fragColor, 1.0);
		}
	</script>
	
	
  
	
  
	
		<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>Demo</i>
        <!-- Agregamos la libreria glMatrix para facilitar las operaciones 
            con matrices y vectores-->
		
        
    </body>
</html>

JavaScript

var gl;



function initGL(canvas) {
	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');
	}

}
      

function getShader(gl, id) {
        var shaderScript = document.getElementById(id);
        if (!shaderScript) {
            return null;
        }
        var str = "";
        var k = shaderScript.firstChild;
        while (k) {
            if (k.nodeType == 3) {
                str += k.textContent;
            }
            k = k.nextSibling;
        }
        var shader;
        if (shaderScript.type == "x-shader/x-fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (shaderScript.type == "x-shader/x-vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }
        gl.shaderSource(shader, str);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }
        return shader;
}

var program;
var positionAttribLocation;
var colorAttribLocation;
var matWorldUniformLocation;
var matViewUniformLocation;
var matProjUniformLocation;


function initShaders() {
	var fragmentShader = getShader(gl, "shader-fs");
	var vertexShader = getShader(gl, "shader-vs");

	program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		alert("Could not initialise shaders");
		return;
	}
	
	gl.validateProgram(program);
	if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
		console.error('ERROR validando el  programa!', gl.getProgramInfoLog(program));
		return;
	}
	
	gl.useProgram(program);
	
	positionAttribLocation =...