This package has been deprecated

Author message:

Package renamed to luma.gl

lumagl

LumaGL: A JavaScript WebGL Framework for Data Visualization

Note LumaGL has just been made public and is still in the process of being published on npm.

Overview

LumaGL's primary focus is to provide a set of efficient and easy-to-use WebGL building blocks enabling high-performance browser-based data visualizations.

LumaGL Design Goals

• Focused on data visualization. While generic in nature, LumaGL will prioritize features that enable efficient rendering of large sets of data or that support improved visualization techniques.
• Modular: a set of small collaborating classes that can used together with components from other frameworks (e.g. stackgl).
• No "magic" global state. All components work with a standard WebGLRenderingContext.
• A modern, compact codebase leveraging the latest JavaScript standards (ES6+)
• Use modern JavaScript build technologies (browserify/babel/npm etc).

History

LumaGL started as a fork of PhiloGL (https://github.com/philogb/philogl) however no effort has been made to maintain compatibility with PhiloGL-based applications.

Installation

npm install luma.gl --save

Documentation, Lessons and Examples

Luma.gl comes with 16 lessons, a number of examples, and a full set of reference documenation.

To run examples:

git clone [e-mail]:uber-common/luma.gl.git
cd luma.gl
npm install
npm run start

This builds the LumaGL bundle and starts a small local server. You should now be able to access the examples using your browser, at http://127.0.0.1:3000 e.g. http://127.0.0.1:3000/examples/lessons/1/

Quickstart

The following code sample illustrates the "flavor" of the LumaGL API.

import {createGLContext, Program, Buffer, PerspectiveCamera} from 'luma.gl';

// Initialize WebGL context
const canvas = document.getElementById('lesson01-canvas');

const gl = createGLContext(canvas, {initialize: true});
const camera = new PerspectiveCamera({aspect: canvas.width/canvas.height});

const program = Program.fromDefaultShaders(gl);
program.use();
program.setBuffer(new Buffer(gl, {
  attribute: 'aVertexPosition',
  data: new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]),
  size: 3
}));

camera.view.$translate(-1.5, 0, -7);
program.setUniform('uMVMatrix', camera.view);
program.setUniform('uPMatrix', camera.projection);

// Draw Triangle
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);