Fork me on GitHub

PicoGL.js

PicoGL.js is minimal WebGL 2-only rendering library. It's meant for developers who understand the WebGL 2 rendering pipeline and want to use it, but with a more convenient API. Typical usage of PicoGL.js will involve creating programs, vertex buffers, vertex arrays, uniform buffers, framebuffers, textures, transform feedbacks, and combining them into draw calls.

    var app = PicoGL.createApp(canvas)
    .clearColor(0.0, 0.0, 0.0, 1.0);

    var program = app.createProgram(vertexShaderSource, fragmentShaderSource);

    var positions = app.createVertexBuffer(PicoGL.FLOAT, 2, new Float32Array([
        -0.5, -0.5,
         0.5, -0.5,
         0.0,  0.5
    ]));

    var vertexArray = app.createVertexArray()
    .vertexAttributeBuffer(0, positions);

    var uniformBuffer = app.createUniformBuffer([
        PicoGL.FLOAT_VEC4,
        PicoGL.FLOAT_VEC4
    ])
    .set(0, new Float32Array([1.0, 0.0, 0.0, 0.3]))
    .set(1, new Float32Array([0.0, 0.0, 1.0, 0.7]))
    .update();

    var drawCall = app.createDrawCall(program, vertexArray)
    .uniformBlock("ColorUniforms", uniformBuffer);

    app.drawCalls([drawCall])
    .clear()
    .draw();
    
Note that PicoGL.js is not a scene graph library. There are no objects, hierarchies, transforms, materials, etc. It has been designed only to make management of GPU state more convenient. Its conceptual model maps fairly directly to the constructs one deals with when writing directly with the WebGL 2 API. The only higher-level construct is the draw call, which manages sets of related lower-level constructs.
Visit the API docs and examples for more details.

Basic Examples

Triangle Uniform Buffers Instanced Drawing Transform Feedback Phong-shaded Cube Cubemap Texture Arrays 3D Textures Render to Texture

Advanced Examples

Picking Shadow Mapping Depth of Field Screen Space Ambient Occlusion Deferred Rendering Order-independent Transparency Particles Bloom Wandering Triangles Cloth

Benchmarks

64,000 Cubes 125,000 Cubes