glsl-transpiler2 v1.8.6

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

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)
	}
`)

// result:

`
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

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.
• turbo/js — webgl-based computation
• shaderdsl
• wgsl_reflect