UFO_webgl

by Víctor Garzón Marín

HTML

<script src="https://rawgit.com/mdn/webgl-examples/gh-pages/tutorial/gl-matrix.js"></script>
<p>
Click dentro del recuadro para mover el OVNI
</p>
<canvas id="glcanvas" width="1000" height="1000">
</canvas>

CSS

body {
  margin: 0;
}

canvas {
  width: 100vw;
  height: 100vh;
  display: block
}

p {
  text-align: center;
  background: black;
  color: white;
  margin: 0px !important;
}

JavaScript

var squareRotation = 0.0;
var vertexCount = 0;
var indices = [];
var vertices = [];
//Posiciones donde se presiona el mouse
var px = 0;
var py = 0;
//Posiciones del ovni
var ox = 0;
var oy = 0;
//Velocidad de movimiento de traslación del ovni
var speed = 0.01;

main();
//
// Start here
//
function main() {
  const canvas = document.querySelector('#glcanvas');
  const gl = canvas.getContext('webgl');

  // If we don't have a GL context, give up now

  if (!gl) {
    alert('Unable to initialize WebGL. Your browser or machine may not support it.');
    return;
  }

  // Vertex shader program

  const vsSource = `
    attribute vec4 aVertexPosition;
    attribute vec4 aVertexColor;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    varying lowp vec4 vColor;

    void main(void) {
      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
      vColor = aVertexColor;
    }
  `;

  // Fragment shader program

  const fsSource = `
    varying lowp vec4 vColor;

    void main(void) {
      gl_FragColor = vColor;
    }
  `;

  // Initialize a shader program; this is where all the lighting
  // for the vertices and so forth is established.
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
  
  
	const positionLoc = gl.getAttribLocation(shaderProgram, "position");

  // Collect all the info needed to use the shader program.
  // Look up which attributes our shader program is using
  // for aVertexPosition, aVevrtexColor and also
  // look up uniform locations.
  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
    },
    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
    },
  };
  
  
 ...