node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »

glsl-transpiler

glsl-transpiler transforms glsl source to optimized js code. It converts vectors and matrices to arrays, expands swizzles, applies expressions optimizations and provides stdlib for environment compatibility.

Usage

npm install glsl-transpiler

var Compiler = require('glsl-transpiler');
 
var compile = Compiler({
    uniform: function (name) {
        return `uniforms.${name}`;
    },
    attribute: function (name) {
        return `attributes.${name}`;
    }
});
 
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);
    });
`)
 
// 
 
`
var uv = attributes.uv;
var color = attributes.color;
var fColor = [0, 0, 0, 0];
var uScreenSize = uniforms.uScreenSize;
 
function main () {
    fColor = color;
    var position = [uv[0], -uv[1]];
    position[0] *= uScreenSize[1] / uScreenSize[0];
    gl_Position = [position[0], position[1], 0, 1];
};
`

API

glsl-transpiler

To apply compilation to glsl AST or string, require glsl-transpiler:

var GLSL = require('glsl-transpiler');
 
var source = glslify('./source.glsl');
var compile = GLSL(options?);
 
//compile source code 
var result = compile(source);
 
 
//get collected info 
var compiler = compile.compiler;
compiler.attributes;
compiler.uniforms;
compiler.varyings;
compiler.structs;
compiler.functions;
compiler.scopes;
 
 
//clean collected info 
compiler.reset();

Options

Property Default Description
optimize true Enable expressions optimizations.
preprocess true Apply preprocessing. Pass custom preprocessor function taking src argument and returning the result to set own preprocessing.
uniform false A function replacing each uniform declaration. Ex: function (name, node) { return 'uniforms["' + name + '"]'; } will render each uniform declaration as var <name> = uniforms["<name>"].
attribute false Same as uniform, but for attribute declarations.
varying false Same as uniform, but for varying declarations.
debug false Enable debugging facilities: print(anything); will log to console a string of transpiled code with it’s type separated by colon, show(anything); will print the rendered descriptor of passed fragment of code. Note also that you can safely use console.log(value) to debug shader runtime.

Note that texture2D function expects whether ndarray instance or defined width and height parameters on passed array.

glsl-transpiler/stream

glsl-transpiler can also be used as a stream. For each node from the glsl-parser it will return compiled js chunk:

var compile = require('glsl-transpiler/stream');
var parse = require('glsl-parser/stream');
var tokenize = require('glsl-tokenizer/stream');
 
fs.createReadStream('./source.glsl')
.pipe(tokenize())
.pipe(parse())
.pipe(compile(options?))
.once('end', function () {
    //this.source contains the actual version of the compiled code 
    //and gets updated on each input chunk of data. 
    console.log(this.source);
});

Related

nogl-shader-output — eval fragment shader on rectangular vertex input, gl-less.
glsl-parser — build glsl AST.
glsl-tokenizer — detect glsl tokens.
glsl.js — an alternative glsl to asm.js compiler by @devongovett, built with jison instead of glsl-parser. Project is abandoned :(.
js2glsl — transform js subset to glsl.
glsl-simulator — OpenGL1.0 simulation in js.