<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WebGL Sample Triangle 00</title>
<meta charset="utf-8">

<style type="text/css">
    canvas {
        border: 2px solid grey;
    }
    .text {
        position:absolute;
        top: 40px;
        left: 20px;
        font-size: 1.5em;
        color: black;
    }
</style>

<script type="text/javascript">
var gl;
var canvas;
var shaderProgram;
var vertexBuffer;

function createGLContext(canvas) {
  var names = ["webgl", "experimental-webgl"];
  var context = null;
  for (var i=0; i<names.length; i++) {
    try {
      context = canvas.getContext(names[i]);
    } catch(e) {}
    if (context) {
      break;
    }
  }
  if (context) {
    context.viewportWidth = canvas.width;
    context.viewportHeight = canvas.height;
  } else {
    alert("Failed to create context.");
  }
  return context;
}

function loadShader(type, shaderSource) {
  var shader = gl.createShader(type);
  gl.shaderSource(shader,shaderSource);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert("Error compiling shader" + gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

function setupShaders() {
  var vertexShaderSource = 
    "attribute vec3 aVertexPosition;  \n" +
    "void main() { \n" +
    "  gl_Position = vec4(aVertexPosition, 1.0); \n" +
    "} \n";

  var fragmentShaderSource =
    "precision mediump float; \n" +
    "void main() {    \n" + 
    "  gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); \n" +
    "} \n";

  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Failed to setup shader.");
  }

  gl.useProgram(shaderProgram);

  shaderProgram.vertexPositionAttribute = 
    gl.getAttribLocation(shaderProgram, "aVertexPosition");
}

function setupBuffers() {
  vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  var triangleVertices = [
        -0.9,-0.3, 0.0,
         0.9,-0.3, 0.0,
        -0.75,-0.8, 0.0,

	 0.9,-0.3, 0.0,
         0.75,-0.8, 0.0,
        -0.75,-0.8, 0.0,

        -0.5, 0.05, 0.0,
	 0.5, 0.05, 0.0,
        -0.6,-0.3, 0.0,

	 0.5, 0.05, 0.0,
	 0.6,-0.3, 0.0,
        -0.6,-0.3, 0.0,

	 0.35, 0.05, 0.0,
         0.35, 0.4, 0.0,
         0.15, 0.05, 0.0,

         0.15, 0.4, 0.0,
         0.35, 0.4, 0.0,
         0.15, 0.05, 0.0,

	 0.3, 0.5, 0.0,
         0.45, 0.57, 0.0,
         0.35, 0.62, 0.0,

	 0.5, 0.69, 0.0,
         0.45, 0.57, 0.0,
         0.35, 0.62, 0.0,

	 0.52, 0.70, 0.0,
         0.67, 0.77, 0.0,
         0.57, 0.82, 0.0,

	 0.72, 0.89, 0.0,
         0.67, 0.77, 0.0,
         0.57, 0.82, 0.0,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),
                gl.STATIC_DRAW);
  vertexBuffer.itemSize = 3;
  vertexBuffer.numberOfItems = 30;
}

function draw() {
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
                         vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
}

function startup() {
  canvas = document.getElementById("myGLCanvas");
  gl = createGLContext(canvas);
  setupShaders();
  setupBuffers();
  gl.clearColor(0.1, 0.6, 0.9, 1.0);
  draw();
}

</script>
</head>

<body onload="startup();">
  <canvas id="myGLCanvas" width="480" height="480"></canvas>
  <div class="text">This is the ship.</div>
</body>
</html>