Rotating Triangle

by juansb827

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
<html>
    <body >
        <canvas id="game-surface" width="500" height="500">
            
        </canvas>
        <br>
        <i>Triangulo Girando</i>
        <!-- Agregamos la libreria glMatrix para facilitar las operaciones 
            con matrices y vectores-->
       
    </body>
</html>

JavaScript

var vertexShaderText = 
[
'precision mediump float;',
'',
'attribute vec3 vertPosition;',
'attribute vec3 vertColor;',
'varying vec3 fragColor;',
'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.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!', gl.getProgramInfoLog(program));
  return;
  }
  
  gl.validateProgram(program);
if...