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.
import GLSL from 'glsl-transpiler' var compile = GLSL({ 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) } `) // result: ` var uv = attributes.uv var color = attributes.color var fColor = new Float32Array([0, 0, 0, 0]) var uScreenSize = uniforms.uScreenSize function main () { fColor = color var position = new Float32Array([uv[0], -uv[1]]) position[0] *= uScreenSize[1] / uScreenSize[0] gl_Position = new Float32Array([position[0], position[1], 0, 1]) } `To apply compilation to glsl AST or string, require glsl-transpiler:
import GLSL from 'glsl-transpiler' let compile = GLSL({ // Enable expressions optimizations. optimize: true, // Apply preprocessing. Pass custom preprocessor function `(srcString) => resultString;` to set own preprocessing. preprocess: true, // A function replacing each uniform declaration. Eg: ``(name, node) => `uniforms["${name}"]`;`` will render each uniform declaration as `var <name> = uniforms["<name>"]`. uniform: false, // Same as `uniform`, but for attribute declarations. attribute: false, // Same as `uniform`, but for varying declarations. varying: false, // GLSL shader version, one of `'300 es'` or `'100 es'`. version: '100 es', // Append stdlib includes for the result. Can be bool or an object with defined stdlib functions to include, eg. `{normalize: false, min: false}`. includes: true, // 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. debug: false }) //compile source code let result = compile('...source.glsl') //get collected info let { attributes, uniforms, varyings, structs, functions, scopes } = compile.compiler //clean collected info compiler.reset()Note that texture2D function expects whether ndarray instance or defined width and height parameters on passed array.
glsl-transpiler can also be used as a stream. For each node from the glsl-parser it will return compiled js chunk:
import compile from 'glsl-transpiler/stream.js' import parse from 'glsl-parser/stream.js' import tokenize from 'glsl-tokenizer/stream.js' 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) })- glsl-parser — build glsl AST.
- glsl-tokenizer — detect glsl tokens.
- nogl-shader-output — evaluate fragment shader on rectangular vertex input, gl-less.
- GLSLRun – debug shader via adding
print()function.
- 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.
- turbo/js — webgl-based computation.
- shaderdsl
- wgsl_reflect
- glm-js