@luma.gl/webgl

What is @luma.gl/webgl?

@luma.gl/webgl is a WebGL framework that provides a set of tools and utilities for working with WebGL. It is designed to simplify the process of creating high-performance 3D graphics applications in the browser. The package offers a range of features including context creation, shader management, buffer handling, and more.

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

Context Creation

This feature allows you to create a WebGL context, which is the starting point for any WebGL application. The code sample demonstrates how to create a WebGL context using a canvas element.

const {createGLContext} = require('@luma.gl/webgl');
const canvas = document.createElement('canvas');
const gl = createGLContext({canvas});

Shader Management

This feature provides utilities for managing shaders, which are essential for rendering graphics in WebGL. The code sample shows how to create vertex and fragment shaders using the @luma.gl/webgl package.

const {Shader} = require('@luma.gl/webgl');
const vertexShaderSource = `
  attribute vec4 position;
  void main() {
    gl_Position = position;
  }
`;
const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`;
const vertexShader = new Shader(gl, {source: vertexShaderSource, shaderType: gl.VERTEX_SHADER});
const fragmentShader = new Shader(gl, {source: fragmentShaderSource, shaderType: gl.FRAGMENT_SHADER});

Buffer Handling

This feature allows you to create and manage buffers, which are used to store vertex data. The code sample demonstrates how to create a buffer and upload vertex positions to it.

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

Other packages similar to @luma.gl/webgl

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/webgl, making it easier to create complex 3D scenes with less code. However, it may offer less control over low-level WebGL operations.

babylonjs

Babylon.js is another powerful 3D engine for the web. It offers a comprehensive set of features for creating 3D games and applications, including physics, animations, and more. Like Three.js, it provides a higher-level API compared to @luma.gl/webgl.

pixi.js

PixiJS is a 2D rendering engine that can also handle some 3D graphics. It is designed for high-performance rendering and is often used for creating interactive graphics and games. While it focuses more on 2D, it can be a good alternative for simpler 3D tasks.

README

@luma.gl/webgl

This module contains the WebGL Device adapter for luma.gl.

It also exports a set of JavaScript classes for the WebGL2 API. These represent the legacy luma.gl v8 API.

Changelog

9.1.0-alpha.18

• gltf: Fix animations (#2227)
• fix(website): Fix examples (#2225)
• docs: Clean up webgpu and webgl device docs (#2224)
• chore: More granular CI workflow (#2223)
• chore(deps): bump micromatch from 4.0.7 to 4.0.8 (#2219)
• chore: Separate lint step in CI (#2221)