Registry / serialization / glsl-transpiler

glsl-transpiler

library3.0.3jsnpmunverified

Transforms GLSL source code into optimized JavaScript, enabling WebGL shaders to run without a GPU or WebGL context. Current stable version is 3.0.3. Maintained as part of stackgl ecosystem. Key differentiators: converts vectors/matrices to typed arrays, expands swizzles, applies expression optimizations, and provides stdlib for environment compatibility. Supports both GLSL ES 100 and 300 versions. Can be used programmatically or as a stream via glsl-parser. Suitable for headless rendering, testing, and education.

serialization data

npm install glsl-transpiler

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GLSL-TRANSPILER

glsl-transpiler

serializationjavascriptv3.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (compile function)

✓ import GLSL from 'glsl-transpiler'

✗ const GLSL = require('glsl-transpiler')

Package is ESM-only since v2.0.0. Use dynamic import with CommonJS.

compile stream

✓ import compile from 'glsl-transpiler/stream.js'

✗ const compile = require('glsl-transpiler/stream')

Stream submodule path must include .js extension for ESM. CommonJS require may not work.

GLSL type (TypeScript)

✓ import type { GLSL } from 'glsl-transpiler'

✗ import { GLSL } from 'glsl-transpiler'

TypeScript users should import the type separately. The default export is the compile function, not a named export.

Transpile a basic GLSL vertex shader to JavaScript using custom uniform/attribute mappers.

import GLSL from 'glsl-transpiler'; const compile = GLSL({ uniform: (name) => `uniforms.${name}`, attribute: (name) => `attributes.${name}` }); const result = compile(` precision mediump float; attribute vec2 uv; attribute vec4 color; varying vec4 fColor; uniform vec2 uScreenSize; void main(void) { fColor = color; vec2 position = vec2(uv.x, -uv.y) * 1.0; position.x *= uScreenSize.y / uScreenSize.x; gl_Position = vec4(position, 0, 1); } `); console.log(result);

glsl-transpiler --version

Debug

Known issues

breakingESM-only since v2.0.0: CommonJS require('glsl-transpiler') will fail.

fix

Use dynamic import or switch to ESM imports.

affects: >=2.0.0

deprecatedNode streams API for glsl-parser/stream is experimental and may change in future versions.

fix

Prefer programmatic API unless streaming is required.

affects: >=1.0.0

gotchatexture2D function expects ndarray or objects with width/height properties; passing a plain Float32Array may cause runtime errors.

fix

Wrap texture data in ndarray or provide width/height metadata.

affects: >=1.0.0

gotchaOptimizer may rename variables and remove dead code; debugging can be harder.

fix

Set optimize: false or enable debug: true to preserve original structure.

affects: >=1.0.0

Errors

Common errors & fixes

SyntaxError: Unexpected token 'export'

Using CommonJS require on ESM-only package v2+

fix

Replace require with dynamic import: const GLSL = await import('glsl-transpiler')

TypeError: GLSL is not a function

Misinterpreting GLSL as named export instead of default

fix

Use import GLSL from 'glsl-transpiler' (default import) not import { GLSL } from 'glsl-transpiler'

Module not found: Can't resolve 'glsl-transpiler/stream'

Missing .js extension in ESM import path

fix

Use import compile from 'glsl-transpiler/stream.js' (with .js extension)

Upgrade

Version history

3.0.3latest on npm

Audit

Dependencies

glsl-parserrequiredBuilds GLSL AST from tokenized GLSL source

glsl-tokenizerrequiredTokenizes GLSL source code into tokens

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/stackgl/glsl-transpiler ↗

packagehttps://www.npmjs.com/package/glsl-transpiler ↗

homepagehttp://stack.gl/ ↗