@luma.gl/engine

What is @luma.gl/engine?

@luma.gl/engine is a high-performance WebGL2 framework designed for GPU-powered data visualization and graphics rendering. It provides a suite of tools and abstractions to simplify the creation of complex 3D scenes, animations, and visual effects.

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

Creating a WebGL Context

This feature allows you to create and manage a WebGL context using the AnimationLoop class. The onInitialize method is used to set up the WebGL context, and the onRender method is used to render each frame.

const {AnimationLoop} = require('@luma.gl/engine');

const animationLoop = new AnimationLoop({
  onInitialize: ({gl}) => {
    // Initialize WebGL context
  },
  onRender: ({gl}) => {
    // Render frame
  }
});

animationLoop.start();

Loading and Displaying a 3D Model

This feature allows you to load and display a 3D model using the Model and Geometry classes. You can define the vertex and fragment shaders, as well as the geometry attributes like positions and normals.

const {Model, Geometry} = require('@luma.gl/engine');

const model = new Model(gl, {
  vs: `...`, // Vertex shader
  fs: `...`, // Fragment shader
  geometry: new Geometry({
    attributes: {
      positions: new Float32Array([...]),
      normals: new Float32Array([...])
    }
  })
});

model.draw();

Handling User Input

This feature allows you to handle user input events such as mouse clicks and keyboard presses using the EventManager class. You can attach event listeners to the canvas and respond to user interactions.

const {EventManager} = require('@luma.gl/engine');

const eventManager = new EventManager(canvas);

eventManager.on('click', (event) => {
  console.log('Canvas clicked', event);
});

Other packages similar to @luma.gl/engine

three

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a higher-level abstraction compared to @luma.gl/engine, making it easier to create complex scenes and animations with less code. However, it may offer less control over low-level WebGL operations.

babylonjs

Babylon.js is another powerful 3D engine for rendering graphics in the browser. It offers a comprehensive set of features for game development, including physics, animations, and advanced materials. Compared to @luma.gl/engine, Babylon.js provides more out-of-the-box functionality but may be less flexible for custom rendering techniques.

pixi.js

PixiJS is a 2D rendering engine that can also handle some 3D graphics. It is optimized for performance and ease of use, making it a good choice for creating interactive applications and games. While it is not as focused on 3D rendering as @luma.gl/engine, it offers a simpler API for 2D and basic 3D graphics.

README

The README file is missing