JavaScripting

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

  • ×

    Lightgl.js

    Github

    A lightweight WebGL library
    Filed under  › 

    • 🔾38%Overall
    • ★1,506
    • ⏳55.8 days
    • 🕩146
    • 👥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