#1 Basic WebGL program

by Michal Vodicka

HTML

<script src="http://glmatrix.net/dist/gl-matrix-min.js"></script>

JavaScript

var vertexShaderSource = [
    "attribute vec2 pos;",

    "void main(void) {",
    "gl_Position = vec4(pos, 0.0, 1.0);",
    "gl_PointSize = 135.0;",
    "}"].join("\n");

var fragmentShaderSource = [
    "precision mediump float;",

    "void main(void) {",
    "float alphaColor;",
    "float dist = distance( gl_PointCoord, vec2(0.5) );",
    "if (dist > 0.5) {",
    "gl_FragColor = vec4(0.0, 0, 0, 1.0);",
    "} else if (dist > 0.495) {",  
    "alphaColor = 1.0 - (dist - 0.495) * 200.0;",
    "gl_FragColor = vec4(alphaColor, alphaColor, alphaColor, 1.0);",
    "} else if (dist < 0.490) {",
    "// alphaColor = 1.0 - (dist - 0.495) * 200.0;",
    "gl_FragColor = vec4(0, 0, 0, 1.0);",
    "} else if (dist < 0.495) {",
    "alphaColor = (dist - 0.490) * 200.0;",
    "gl_FragColor = vec4(alphaColor, alphaColor, alphaColor, 1.0);",
    "} else {",
    "gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }",
    "}"].join("\n");


function OrbitBackground(container, orbitCnt) {
    this.colors = [
        '#ce1427',
        '#1d3e87',
        '#29abe2'];
    this.defaultOrbitColor = '#808989';

    this.pageWidth = window.screen.width | 0;
    this.pageHeight = window.screen.height | 0;

    this.orbits = [];

    // stages
    this.canvas = null;
    this.gl = null;

    this.init(container, orbitCnt);
}

OrbitBackground.prototype.init = function (container, orbitCnt) {
    // make orbits
    for (var i = 0; i < orbitCnt; i++) {
        // var satellite = this.makeRandomOrbit();
        // this.orbits.push(satellite);
    }

    // create "stages"
    this.canvas = document.createElement("canvas");
    this.canvas.id = "orbits";
    container.appendChild(this.canvas);
    this.canvas.style = "z-index: -9999;";

    // draw static background and start animation
    // this.drawStaticStage();
    // this.drawFrame();

    this.initGL();
    this.initShaders();
    this.initProgram();
    this.initWebGL();
    this.initOrbits();
   ...