JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Lightgl.js

    A lightweight WebGL library
    Filed under  › 

    • 🔾33%Overall
    • 880
    • 28.1 days
    • 🕩109
    • 👥6

    lightgl.js

    This library makes it easier to quickly prototype WebGL applications. It's lower level than many other WebGL libraries and while it doesn't provide a scene graph, it re-implements OpenGL's modelview/projection matrix stack to provide similar functionality. It also re-introduces some built-in uniforms from GLSL (such as gl_Vertex and gl_ModelViewProjectionMatrix) and OpenGL's immediate mode.

    Building the library

    • python build.py: build lightgl.js from the files in the src directory
    • python build.py debug: rebuild the library any time the contents of the src directory change
    • python build.py release: minify the library using UglifyJS, which assumes there is an uglifyjs command in your path
    • docco src/*.js: build the documentation, which is generated in the docs directory

    The latest lightgl.js build can be found at http://evanw.github.com/lightgl.js/lightgl.js.

    Sample code

        <!DOCTYPE html>
        <html><body>
          <script src="lightgl.js"></script>
          <script>
    
        var angle = 0;
        var gl = GL.create();
        var mesh = GL.Mesh.cube();
        var shader = new GL.Shader('\
          void main() {\
            gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
          }\
        ', '\
          void main() {\
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\
          }\
        ');
    
        gl.onupdate = function(seconds) {
          angle += 45 * seconds;
        };
    
        gl.ondraw = function() {
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
          gl.loadIdentity();
          gl.translate(0, 0, -5);
          gl.rotate(30, 1, 0, 0);
          gl.rotate(angle, 0, 1, 0);
    
          shader.draw(mesh);
        };
    
        gl.fullscreen();
        gl.animate();
    
          </script>
        </body></html>
    

    Documentation

    The documentation is automatically generated using Docco:

    Examples

    Available examples:

    Show All