A very brief introduction to luma.gl

What is luma.gl?

It is a framework for GPU-based Visualization and Computation powered by WebGl2.

It is a JavaScript framework that provides developers easier and complete access to underlying WebGL2 APIs provided by modern browsers.

luma.gl was originally created in late 2015 as a fork of PhiloGL to provide high performance WebGL rendering capability for deck.gl - a 3D visualization framework for large scale data.

The core philosophy of luma.gl is to give developers full access to WebGL2 with a strong focus on performance. And the core use case for luma.gl is visualization of large datasets.

Link to core examples page: https://luma.gl/#/examples/overview

Getting Started

Install luma.gl using yarn 

yarn add luma.gl

 npm can also be used as a drop-in substitute in most cases.

Using with Node.js

luma.gl runs using headless-gl under Node.js which is useful for unit testing. We need to use yarn install gl to install headless-gl which will be automatically luma.gl under Node.js.

We can now create a context using the createGLContext context function.

import 'luma.gl';
import {createGLContext, Model, ...} from '@luma.gl/core';
const gl = createGLContext({width, height, ...});

Shader Tools

To add/inject existing modules into your shaders, just add the modules parameter to your assembleShaders call:

import {shaderModule} from 'library-of-shader-modules';
const {vs, fs, getUniforms, moduleMap} = assembleShaders(gl, {
  fs: '...',
  vs: '...',
  modules: [shaderModule],
  ...
})

To create a new shader module, you need to create a descriptor object.

const MY_SHADER_MODULE = {
  name: 'my-shader-module',
  vs: ....
  fs: null,
  dependencies: [],
  deprecations: [],
  getUniforms
};

This object can be used as shader module directly:

assembleShaders(gl, {..., modules: [MY_SHADER_MODULE]});