Skip to content

Instantly share code, notes, and snippets.

@sinterstice
Last active January 28, 2025 13:43

Revisions

  1. sinterstice revised this gist Sep 12, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // From http://robots.thoughtbot.com/an-introduction-to-webgl
    var app = function () {
    var canvas = document.getElementById('canvas'),
    gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  2. sinterstice revised this gist Sep 12, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.js
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    var app = function () {
    var canvas = document.getElementById('canvas'),
    gl = canvas.getContext('webgl');
    gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

    // Create elements on the page which contain your shaders.
    // I like using script tags with a different type attribute, like:
  3. sinterstice revised this gist Sep 12, 2014. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion index.js
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,17 @@
    var app = function () {
    var canvas = document.getElementById('canvas'),
    gl = canvas.getContext('webgl');


    // Create elements on the page which contain your shaders.
    // I like using script tags with a different type attribute, like:
    // `<script id="vertex-shader" type="x-vertex/x-shader">`
    // You could also just put the shaders inline, but I hate escaping line breaks.
    var shaders = {
    vertexMain : document.getElementById('vertex-shader').innerHTML,
    fragmentMain : document.getElementById('fragment-shader').innerHTML
    }

    // This pattern from "The Good Parts", which you should read if you haven't.
    var WebGLCompiler = function (gl, shaders) {
    var that = {};

    @@ -89,4 +94,5 @@ var app = function () {

    gl.drawArrays(gl.TRIANGLES, 0, 3);
    }
    // Wait until the DOM is ready
    window.requestAnimationFrame(app);
  4. sinterstice created this gist Sep 12, 2014.
    92 changes: 92 additions & 0 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    var app = function () {
    var canvas = document.getElementById('canvas'),
    gl = canvas.getContext('webgl');

    var shaders = {
    vertexMain : document.getElementById('vertex-shader').innerHTML,
    fragmentMain : document.getElementById('fragment-shader').innerHTML
    }

    var WebGLCompiler = function (gl, shaders) {
    var that = {};

    that.shaders = shaders || {};
    that.gl = gl;

    that.createProgramWithShaders = function (vertexShaderName, fragmentShaderName) {
    var vertexShader = this.createShader(vertexShaderName),
    fragmentShader = this.createShader(fragmentShaderName);
    return this.createProgram(vertexShader, fragmentShader);
    }

    that.createShader = function (shaderName) {
    var shaderSource = this.shaders[shaderName];
    if (!shaderSource) {
    throw "Shader not found";
    }
    return this.compileShader(shaderSource, this.typeForShader(shaderName));
    }

    that.typeForShader = function (name) {
    if (name.indexOf('vertex') != -1) {
    return this.gl.VERTEX_SHADER;
    } else if (name.indexOf('fragment') != -1) {
    return this.gl.FRAGMENT_SHADER;
    } else {
    throw "Unknown shader type";
    }
    }

    that.compileShader = function (shaderSource, shaderType) {
    shader = this.gl.createShader(shaderType);
    this.gl.shaderSource(shader, shaderSource);
    this.gl.compileShader(shader);
    return shader;
    }

    that.createProgram = function (vertexShader, fragmentShader) {
    var program = this.gl.createProgram();
    this.gl.attachShader(program, vertexShader);
    this.gl.attachShader(program, fragmentShader);
    this.gl.linkProgram(program);

    if ( !this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ) {
    error = this.gl.getProgramInfoLog(program);
    console.error(error);
    throw "Program failed to link. Error: #{error}";
    }

    return program;
    }

    return that;
    }

    compiler = WebGLCompiler(gl, shaders);

    program = compiler.createProgramWithShaders('vertexMain', 'fragmentMain');

    gl.clearColor(1.0, 1.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);
    buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
    0.0, 0.8,
    -0.8, -0.8,
    0.8, -0.8,
    ]),
    gl.STATIC_DRAW
    );

    vertexCoord = gl.getAttribLocation(program, "vertexCoord");

    gl.enableVertexAttribArray(vertexCoord);
    gl.vertexAttribPointer(vertexCoord, 2, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.TRIANGLES, 0, 3);
    }
    window.requestAnimationFrame(app);