evanw/lightgl.js

JavaScript

A lightweight WebGL library

javascriptwebglgraphicslibrary
스타 성장
스타
1.6k
포크
151
주간 성장
+0
이슈
7
5001k1.5k
2023년 1월2024년 4월2025년 7월2026년 10월
아티팩트npm
README

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: