JSFiddle - React, Tailwind, and code Playground

by Johann Felipe Gonzalez

HTML

<script src="https://rawgit.com/Falkulator/3D-multi-shmup-prototype/master/public/javascripts/glMatrix-0.9.5.min.js"></script>
<script src="https://rawgit.com/kmindi/webgl-utils.js/master/webgl-utils.js"></script>
<body onload = 'webGLStart()'>
	
		<script id="shader-fs" type="x-shader/x-fragment">
		  precision mediump float;
	      varying vec4 vColor;
		  void main(void) {
			gl_FragColor = vColor;
		  }
		</script>

		<script id="shader-vs" type="x-shader/x-vertex">
		  attribute vec3 aVertexPosition; // Esto son atributos. Var[ian de vertice en vertice
		  attribute vec4 aVertexColor;

		  uniform mat4 uMVMatrix; // Elementos fijos para todos los vertices	
		  uniform mat4 uPMatrix;

		  varying vec4 vColor; // Salidas de este shader en varyng // Primero corre el vertex y liego el fragment
		  
		  void main(void) {
			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
			vColor = aVertexColor;
		  }
		</script>
		<table>
			<tr>
				<td>
					<input type="button" id="btnPrimeraPersona" value="Primera persona"></input>
					<input type="button" id="btnTerceraPersona" value="Tercera persona"></input>
					<input type="button" id="btnLongshot" value="Long Shot"></input>
					<input type="button" id="btnNormal" value="Original"></input>
				</td>
			</tr>
			<tr>
				<td>
					<canvas id = "miCanvas" width="500" height="500"></canvas>
				</td>
			</tr>
		</table>
	</body>

JavaScript

// Modificaciones de camara
var rotacionPrimeraPersona;
var translacion = [0, 0, 0, 0];
var rotacion = [0, 0, 0, 0];
var translacionParcial = [0, 0, 0, 0];
var rotacionpParcial = [0, 0, 0, 0];






// Buffers de la esfera central. Posición y color
var sphereVertexPositionBuffer;
var sphereVertexColorBuffer;

// Buffers de los soportes superiores. Posición y color
var cubo1VertexPositionBuffer;
var cubo2VertexPositionBuffer;
var cubo1VertexColorBuffer;
var cubo2VertexColorBuffer;

// Buffers para  las líneas que cualegan de los soportes
var linea1VertexPositionBuffer;
var linea1VertexColorBuffer;

// Buffers para cada una de las esferas de la ilsutración.
var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;

// Buffers para las líneas que conectan las esferas
var squareVertexPositionBuffer;
var squareVertexColorBuffer;

// Contexto
var gl; // WEB GL

// Matriz de modelo vista
var mvMatrix = mat4.create();
// Matriz de proyección.
var pMatrix = mat4.create();

// Ángulo de rotación de todo el escenario.
var rSquare = 0;

// Pila para mantener la matriz en cambios
var mvMatrixStack = [];

// Matriz para mantener la rotación
var mvMatrixRotacion = [];

// Movimientos aleatorios en y
var rndy = [];
var dys = [];
var resys = [];

// Rotaciones aleatorias en Y
var grasys = [];


var conteo;
var shaderProgram;

// Iniciación de los shaders
function initShaders()
{
	var fragmentShader = getShader(gl, "shader-fs");
	var vertexShader = getShader(gl, "shader-vs");

	shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
		alert("Could not initialise shaders");
	}

	gl.useProgram(shaderProgram);

	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram,...