EffectHub.com: your best source for gaming

Recommendation

More Effects...

/*  _  _ ____ ___ _  _
    |\/| |__|  |  |__|
    |  | |  |  |  |  |  */

// Vector math
var vec3 = {
    add: function (a, b) {
        return [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
    },

sub: function (a, b) {
        return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
    },

div: function (v, d) {
        return [v[0] / d, v[1] / d, v[2] / d];
    },

dot: function (a, b) {
        return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
    },

cross: function (a, b) {
        return [
            a[1] * b[2] - a[2] * b[1],
            a[2] * b[0] - a[0] * b[2],
            a[0] * b[1] - a[1] * b[0]
        ];
    },

magnitude: function (v) {
        return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
    },

normalize: function (v) {
        var m = this.magnitude(v);
        return this.div(v, m);
    }
};

// Matrix math
var mat4 = {
    perspective: function (fovy, aspect, near, far) {
        var f = 1 / Math.tan(fovy * 0.5);
        var nf = 1 / (near - far);
        return [
            f / aspect, 0, 0, 0,
            0, f, 0, 0,
            0, 0, (near + far) * nf, -1,
            0, 0, 2 * near * far * nf, 0
        ];
    },

lookAt: function (eye, center, up) {
        var w = vec3.normalize(vec3.sub(eye, center));
        var u = vec3.normalize(vec3.cross(up, w));
        var v = vec3.normalize(vec3.cross(w, u));

return [
            u[0], v[0], w[0], 0,
            u[1], v[1], w[1], 0,
            u[2], v[2], w[2], 0,
            -vec3.dot(u, eye), -vec3.dot(v, eye), -vec3.dot(w, eye), 1
        ]
    }
};

/*  ____ _       ____ ____ ___ _  _ ___
    | __ |       [__  |___  |  |  | |__]
    |__] |___    ___] |___  |  |__| |       */

var gl;
var prg;
var vbo;

// Get a canvas of the name and return its webgl context
var getGLContext = function(name) {
    var canvas = document.getElementById(name || 'canvas');
    if (canvas === null) {
        console.error('Could not get the canvas');
        return;
    }

var ctx = canvas.getContext('webgl');
    if (ctx === null) {
        console.error('Could not get WebGL context');
        return;
    }

return ctx;
};

// Create vertex shader with script element id
var createVertexShader = function(id) {
    var vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, document.getElementById(id).textContent);
    gl.compileShader(vs);
    if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(vs));
        return;
    }
    return vs;
};

// Create fragment shader with script element id
var createFragmentShader = function(id) {
    var fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fs, document.getElementById(id).textContent);
    gl.compileShader(fs);
    if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(fs));
        return;
    }
    return fs;
};

// Initialize program
var initProgram = function() {
    // Create and attach shaders
    var vs = createVertexShader('gl_vs');
    if (vs === null) return;

var fs = createFragmentShader('gl_fs');
    if (fs === null) return;

prg = gl.createProgram();
    gl.attachShader(prg, vs);
    gl.attachShader(prg, fs);

// Link the program and use it
    gl.linkProgram(prg);
    if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
        console.error('Could not link the progam');
        return;
    }
    gl.useProgram(prg);

// Extra variables
    prg.a_pos = gl.getAttribLocation(prg, 'a_pos');
    prg.u_proj = gl.getUniformLocation(prg, 'u_proj');
    prg.u_view = gl.getUniformLocation(prg, 'u_view');
};

// Initialize buffers
var initBuffers = function() {
    space.init();

vbo = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(space.posStars), gl.STATIC_DRAW);
};

/*  _    ____ ____ ___
    |    |  | |  | |__]
    |___ |__| |__| |        */

var frameCount = 0;
var time = 0;
var proj;
var view;

var update = function() {
    time = frameCount / 60;

proj = mat4.perspective(Math.PI * 0.25, gl.canvas.width / gl.canvas.height, 1, 1000);

eye = [0, 0, Math.sin(time * 0.05) * 200 + 200];
    var center = [Math.cos(time)*0.05, Math.sin(time)*0.05, eye[2] + 1];
    view = mat4.lookAt(eye, center, [0, 1, 0]);

frameCount++;
};

var draw = function() {
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.uniformMatrix4fv(prg.u_proj, false, proj);
    gl.uniformMatrix4fv(prg.u_view, false, view);
    gl.vertexAttribPointer(prg.a_pos, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(prg.a_pos);
    gl.drawArrays(gl.POINTS, 0, space.nStars);
};

var loop = function() {
    update();
    draw();
    requestAnimationFrame(loop);
};

/*  ____ ___  ____ ____ ____
    [__  |__] |__| |    |___
    ___] |    |  | |___ |___    */

/*  ____ ___ ____ ____ ___    ___  ____ _ _  _ ___
    [__   |  |__| |__/  |     |__] |  | | |\ |  |
    ___]  |  |  | |  \  |     |    |__| | | \|  |   */

// Start everything once the window is done loading
window.onload = function() {
    gl = getGLContext('canvas');
    if (gl === null) return;
    gl.canvas.width = window.innerWidth;
    gl.canvas.height = window.innerHeight;
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.enable(gl.DEPTH_TEST);

initProgram();
    initBuffers();
    loop();
};

CSS

HTML

Recommendation

Join Effecthub.com