{"id":25637,"library":"glsl-transpiler-fork-for-gm","title":"glsl-transpiler","description":"Transforms GLSL shader source code into optimized JavaScript, converting vectors and matrices to arrays, expanding swizzles, and applying expression optimizations. The latest version (2.0.21) ships as an ESM package with optional CommonJS support. It works both as a programmatic API and as a stream transform, integrating with glsl-parser and glsl-tokenizer. Key differentiators include runtime variable replacement for uniforms/attributes/varyings, built-in stdlib for environment compatibility, debug facilities (print/show), and support for GLSL ES 100 and 300. Alternatives like glsl.js or raw string manipulation lack its AST-level optimization and streaming pipeline. The package is a fork of the original stackgl/glsl-transpiler with ongoing maintenance.","status":"active","version":"2.0.21","language":"javascript","source_language":"en","source_url":"https://github.com/bayazit/glsl-transpiler","tags":["javascript","headless-gl","gl","glsl","glsl.js","glsl-transpiler","transpiler","stackgl","js"],"install":[{"cmd":"npm install glsl-transpiler-fork-for-gm","lang":"bash","label":"npm"},{"cmd":"yarn add glsl-transpiler-fork-for-gm","lang":"bash","label":"yarn"},{"cmd":"pnpm add glsl-transpiler-fork-for-gm","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Parse GLSL source into AST for transformation","package":"glsl-parser","optional":false},{"reason":"Tokenize GLSL source before parsing","package":"glsl-tokenizer","optional":false}],"imports":[{"note":"Package is ESM-first; CommonJS require works but is discouraged.","wrong":"const GLSL = require('glsl-transpiler')","symbol":"default","correct":"import GLSL from 'glsl-transpiler'"},{"note":"Stream subpath must include .js extension and is ESM-only.","wrong":"const compile = require('glsl-transpiler/stream')","symbol":"compileStream","correct":"import compile from 'glsl-transpiler/stream.js'"},{"note":"TypeScript users should import types from the package.","wrong":null,"symbol":"GLSL type","correct":"import type { CompilerOptions } from 'glsl-transpiler'"}],"quickstart":{"code":"import GLSL from 'glsl-transpiler';\n\nconst compile = GLSL({\n  uniform: (name) => `uniforms.${name}`,\n  attribute: (name) => `attributes.${name}`,\n  version: '300 es',\n  optimize: true\n});\n\nconst result = compile(`\n  precision mediump float;\n  attribute vec2 uv;\n  attribute vec4 color;\n  varying vec4 fColor;\n  uniform vec2 uScreenSize;\n\n  void main(void) {\n    fColor = color;\n    vec2 position = vec2(uv.x, -uv.y) * 1.0;\n    position.x *= uScreenSize.y / uScreenSize.x;\n    gl_Position = vec4(position, 0, 1);\n  }\n`);\n\nconsole.log('Compiled JS:', result);","lang":"typescript","description":"Shows how to transpile a basic vertex shader to JavaScript with uniforms/attributes as object properties."},"warnings":[{"fix":"Use Node.js >=12 or enable ESM compatibility.","message":"Version 2.x drops Node.js 10 support and requires ESM imports or newer Node.js with --experimental-modules.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update import to include .js extension.","message":"The stream API import path changed from 'glsl-transpiler/stream' to 'glsl-transpiler/stream.js'.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Call GLSL(options) directly without new.","message":"The default export is a factory function, not a class. Calling new GLSL() will cause a TypeError.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass texture data as ndarray or provide width and height fields.","message":"texture2D expects an ndarray or an object with width/height properties, not a plain array.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass an object like { normalize: false } instead of false.","message":"The 'includes' option now expects an object with function names to include, not just a boolean.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use version '100' or '300 es'.","message":"Removed support for GLSL version '100 es' in favor of '100' and '300 es'.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Set \"type\": \"module\" in package.json or use .mjs extension for import.","cause":"Package is ESM-only and may not be resolved correctly in a CJS project or TypeScript without proper module configuration.","error":"Cannot find module 'glsl-transpiler' or its corresponding type declarations."},{"fix":"Remove new: const compile = GLSL(options);","cause":"Using new with the default export, which is a factory function.","error":"TypeError: GLSL is not a constructor"},{"fix":"Use '100' or '300 es' instead.","cause":"Passing '100 es' as version, which is deprecated.","error":"Error: Invalid GLSL version. Must be '100' or '300 es'."},{"fix":"Ensure callbacks return a string that resolves to a valid JS expression.","cause":"Missing or incorrect options passed to the compiler; often the uniform/attribute callback returns undefined.","error":"TypeError: Cannot read properties of undefined (reading 'type')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}