@luma.gl/shadertools

What is @luma.gl/shadertools?

@luma.gl/shadertools is a collection of tools for working with WebGL shaders. It provides utilities for shader transpilation, shader module management, and shader debugging, making it easier to develop and manage complex WebGL applications.

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

Shader Transpilation

This feature allows you to transpile GLSL code to be compatible with different versions of WebGL. The code sample demonstrates how to transpile a simple GLSL fragment shader to WebGL2.

const { transpileShader } = require('@luma.gl/shadertools');
const glslCode = `
  void main() {
    gl_FragColor = vec4(1.0);
  }
`;
const transpiledCode = transpileShader(glslCode, { target: 'webgl2' });
console.log(transpiledCode);

Shader Module Management

This feature helps in managing and assembling shader modules. The code sample shows how to assemble vertex and fragment shaders along with additional shader modules.

const { assembleShaders } = require('@luma.gl/shadertools');
const vs = `
  attribute vec4 position;
  void main() {
    gl_Position = position;
  }
`;
const fs = `
  void main() {
    gl_FragColor = vec4(1.0);
  }
`;
const modules = [
  { name: 'module1', vs, fs }
];
const assembledShaders = assembleShaders({ vs, fs, modules });
console.log(assembledShaders);

Shader Debugging

This feature provides tools for parsing and debugging GLSL code. The code sample demonstrates how to parse a simple GLSL fragment shader to get an abstract syntax tree (AST) representation.

const { parseGLSL } = require('@luma.gl/shadertools');
const glslCode = `
  void main() {
    gl_FragColor = vec4(1.0);
  }
`;
const parsedShader = parseGLSL(glslCode);
console.log(parsedShader);

Other packages similar to @luma.gl/shadertools

glslify

glslify is a module system for GLSL that allows you to write modular and reusable shader code. It is similar to @luma.gl/shadertools in that it helps manage shader code, but it focuses more on modularity and reusability rather than transpilation and debugging.

three.js

three.js is a popular 3D library that includes extensive support for shaders. While it is a more comprehensive library for 3D graphics, it also provides utilities for shader management and debugging, similar to @luma.gl/shadertools.

glslang

glslang is a reference front-end for GLSL, providing tools for parsing and compiling GLSL code. It is similar to @luma.gl/shadertools in its focus on shader parsing and debugging, but it is more low-level and closer to the Vulkan ecosystem.

README

@luma.gl/shadertools

This is the shader module system module for luma.gl.

See luma.gl for documentation.

Changelog

7.4.0-alpha.2

• DevicePixelRatio: Cache canvas size to avoid expensive setting on each frame (#1269)
• WebGL Features: add caching (#1270)