@luma.gl/core

What is @luma.gl/core?

@luma.gl/core is a high-performance WebGL2 framework designed for GPU-powered data visualization and computation. It provides a suite of tools for creating and managing WebGL contexts, shaders, buffers, and other GPU resources, making it easier to build complex visualizations and simulations.

What are @luma.gl/core's main functionalities?

Creating a WebGL Context

This feature allows you to create a WebGL context, which is the starting point for any WebGL application. The context is used to manage all WebGL state and resources.

const {createGLContext} = require('@luma.gl/core');
const gl = createGLContext();

Shader Management

This feature allows you to create and manage shaders, which are programs that run on the GPU. Shaders are essential for rendering graphics and performing computations on the GPU.

const {Shader} = require('@luma.gl/core');
const vs = `
  attribute vec4 position;
  void main() {
    gl_Position = position;
  }
`;
const fs = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
const shader = new Shader(gl, {vs, fs});

Buffer Management

This feature allows you to create and manage buffers, which are used to store data on the GPU. Buffers are used to store vertex data, texture data, and other types of data that need to be processed by the GPU.

const {Buffer} = require('@luma.gl/core');
const positions = new Float32Array([
  -1, -1,
  1, -1,
  -1, 1,
  1, 1
]);
const positionBuffer = new Buffer(gl, positions);

Rendering

This feature allows you to create and manage models, which are used to render graphics. Models are composed of shaders, buffers, and other resources, and they provide a high-level interface for rendering graphics.

const {Model} = require('@luma.gl/core');
const model = new Model(gl, {
  vs: `
    attribute vec4 position;
    void main() {
      gl_Position = position;
    }
  `,
  fs: `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `,
  attributes: {
    position: positionBuffer
  },
  vertexCount: 4
});
model.draw();

Other packages similar to @luma.gl/core

three

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a higher-level API compared to @luma.gl/core, making it easier to create complex 3D scenes with less code. However, it may not offer the same level of control and performance optimization as @luma.gl/core.

babylonjs

Babylon.js is another powerful 3D engine for creating immersive web experiences. It offers a comprehensive set of features for 3D rendering, physics, and more. Like Three.js, it provides a higher-level API compared to @luma.gl/core, which can simplify development but may limit fine-grained control over WebGL resources.

pixi

PixiJS is a fast 2D rendering engine that can also handle some 3D graphics. It is designed for creating interactive graphics and games. While it is not as focused on 3D and GPU computation as @luma.gl/core, it offers a simpler API for 2D and some 3D rendering tasks.

README

@luma.gl/core

luma.gl | Docs

luma.gl: WebGPU and WebGL2 Components for GPU Visualization and Compute

Overview

luma.gl is a set of WebGPU and WebGL2 components for high-performance GPU-based rendering and computation in the browser.

luma.gl is the GPU engine that powers applications and frameworks like

• kepler.gl WebGL based visualization overlays
• deck.gl WebGL based visualization overlays

Installation, Running Examples etc

For details, please refer to the extensive online website.

Changelog

9.0.0-alpha.36

• fix: Fix picking in instancing showcase example (#1814)
• chore: UniformStore-related cleanup (#1813)
• feat(core): UniformStore / uniform buffers (#1812)
• chore: Update WebGPU examples to latest WGSL (#1808)
• chore(shadertools): clean up code, types, file and directory structure (#1809)
• feat(core): Device API exposes a new VertexArray resource type. (#1806)
• feat(webgl): Rename parameter setters to emphasize they take WebGL paramaters (#1804)