skeeto / igloojs

Low-level, fluent, OOP WebGL wrapper

Igloo WebGL

Igloo is a minimal, fluent, object-oriented wrapper API for WebGL. The idea is to maintain WebGL's low-level graphics access but fit it to JavaScript idioms and simplify the API. It's designed to play very well with glMatrix, though its use is not strictly required.

WebGL requires lots of boilerplate to use directly and the existing abstraction wrappers are too high-level. The long term goal is to make prototyping WebGL ideas much quicker and easier so that the OpenGL calls don't dominate small programs.

Igloo is not intended to completely replace use of the WebGLRenderingContext object, nor is it intended to hide details from beginners. The WebGLRenderingContext object still needed for all the enumerations, occasionally you may need to do something that Igloo doesn't cover, and you still need to understand the intricacies of the OpenGL API.

Example Usage

function Demo() {
    var igloo    = this.igloo = new Igloo($('#my-canvas')[0]);
    this.quad    = igloo.array(Igloo.QUAD2);        // create array buffer
    this.image   = igloo.texture($('#image')[0]);   // create texture
    this.program = igloo.program('src/project.vert', 'src/tint.frag');
}

Demo.prototype.draw = function() {
    this.image.bind(0);  // active texture 0
    this.program.use()
        .uniform('tint', [1, 0, 0])
        .uniform('scale', 1.2)
        .uniformi('image', 0)
        .attrib('points', this.quad, 2)
        .draw(this.igloo.gl.TRIANGLE_STRIP, Igloo.QUAD2.length / 2);
}

This example (shader code not shown) would display a scaled, tinted image on the screen. No other WebGL calls are required to make this work.

Documentation

All functions and methods have complete JSDoc headers. Someday this will used to automatically generate documentation.

Igloo has wrapper objects for programs, array buffers, element array buffers, textures, and framebuffers. The object being wrapped is directly accessible through the name of the kind of thing (texobject.texture, arraybuffer.buffer, etc.) in case you need to access it.

Alternative Bindings

• skew-igloo (Skew)
• igloo-ts (TypeScript)

IglooJS Showcase

• Visualizations in NYT: Miles of Ice Collapsing Into the Sea
• Various demos: Liquid, Particles, Voronoi, Game of Life, Path Solver, Feedback

igloojs's Issues

Does it support fallback canvas if browser no webGL ?

program() incorrectly thinks shaders are urls...

If I have my shaders as JavaScript strings like so:

var vert = "attribute vec2 a_position;\n\nvoid main() {\n    gl_Position = vec4(a_position, 0, 1);\n}\n\n";
var frag = "void main() {\n    gl_FragColor = vec4(0, 1, 0, 1); // green\n}\n";

and then try to create my program:

var program = igloo.program(vert, frag);

program thinks my shaders are urls and tries to download them.

The work-around seems to be to put a space at the start of my strings:

var program = igloo.program(" " + vert, " " + frag);

It seems like this Regex should be changed:

Igloo.looksLikeURL = function(string) {
    //return /^[\w+:\/\/]/.exec(string) != null;
    return /^\w+:\/\//.exec(string) != null;
};

Executable Demo

I love the idea of this library, but I'm having trouble using the demo code from the readme in an actual application. What is the recommended way to load vertices and textures? A minimal example that draws a static object (perhaps an igloo model?) would be nice.

gl.getError() in Igloo.Program.prototype.draw causes huge performance loss in Chrome

The draw call checks for errors everytime it is called on line 299. This is okay if you are just rendering a single quad but if using Igloo to render lots of quads this causes a huge performance hit, in fact it sometimes takes 2-3 ms per quad. Commenting out the line sped up performance a lot so maybe it is worth making it optional.

Chrome Version 62.0.3202.94 (Official Build) (64-bit) on Mac OS X El Capitan (2015 Macbook Pro 15" AMD Radeon R9 M370X 2048 MB)

TypeScirpt

Bottom of the README.

[BUG] uniform to pass array of vec

https://github.com/skeeto/igloojs/blob/master/igloo.js#L225
doesn't work if value is an array of vec.