• Stars
    star
    175
  • Rank 218,059 (Top 5 %)
  • Language
    JavaScript
  • Created over 8 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Transpile GLSL to JS

glsl-transpiler Build Status

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

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 = [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:

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/stream

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

Dependencies

Used by

  • nogl-shader-output โ€” evaluate fragment shader on rectangular vertex input, gl-less.
  • GLSLRun โ€“ debug shader via adding print() function.

Similar

More Repositories

1

shader-school

๐ŸŽ“ A workshopper for GLSL shaders and graphics programming
JavaScript
4,275
star
2

webgl-workshop

๐ŸŽ“ The sequel to shader-school: Learn the WebGL API
JavaScript
1,486
star
3

glsl-lighting-walkthrough

๐Ÿ’ก phong shading tutorial with glslify
JavaScript
458
star
4

gl-shader

๐ŸŽ WebGL shader wrapper
JavaScript
120
star
5

packages

๐Ÿ“ฆ A list of packages that fall under the stack.gl umbrella
JavaScript
113
star
6

glsl-parser

transform streamed glsl tokens into an ast
JavaScript
98
star
7

gl-mat4

gl-matrix's mat4, split into smaller pieces
JavaScript
79
star
8

gl-now

Create a WebGL context now!
JavaScript
63
star
9

gl-fbo

WebGL framebuffer wrapper
JavaScript
60
star
10

gl-texture2d

WebGL texture wrapper
JavaScript
59
star
11

stackgl.github.io

๐Ÿ’ป
JavaScript
58
star
12

gl-audio-analyser

Pull audio waveform/frequency data into WebGL for realtime audio visualisation
JavaScript
57
star
13

gl-particles

โœจ Convenience module for FBO-driven particle simulations.
JavaScript
57
star
14

gl-vec3

gl-matrix's vec3, split into smaller pieces
JavaScript
53
star
15

gl-geometry

A flexible wrapper for gl-vao and gl-buffer that you can use to set up renderable WebGL geometries from a variety of different formats.
JavaScript
49
star
16

bunny-walkthrough

Draws a 3D bunny to the screen using stack.gl
JavaScript
42
star
17

gl-vec2

gl-matrix's vec2, split into smaller pieces
JavaScript
36
star
18

glslbin

๐Ÿ”ฎ
JavaScript
29
star
19

learning-webgl-01

Learning WebGL Lesson 1 converted from vanilla WebGL to use stack.gl.
JavaScript
28
star
20

snowden

3D mesh of Snowden's Bust.
JavaScript
27
star
21

gl-vao

Vertex array object wrapper for WebGL
JavaScript
24
star
22

gl-buffer

WebGL buffer wrapper
JavaScript
23
star
23

ray-aabb-intersection

Determine the point of intersection between a ray and axis-aligned bounding box (AABB)
JavaScript
23
star
24

gl-shader-core

Core implementation of gl-shader without parser dependencies
JavaScript
22
star
25

glsl-extract

extract uniforms and attributes from glsl programs
JavaScript
19
star
26

gl-reset

Completely reset the state of a WebGL context, deleting any allocated resources
JavaScript
19
star
27

gl-toy

๐Ÿ”ฎ Quickly create WebGL demos using glslify
JavaScript
19
star
28

gl-magic-uniforms

๐ŸŽฉ Create a magic getter/setter object for a given WebGLProgram's uniforms.
JavaScript
18
star
29

webglew

WebGL Extension Wrangler
JavaScript
17
star
30

gl-mat3

gl-matrix's mat3, split into smaller pieces
JavaScript
17
star
31

gl-state

Saves WebGL context state
JavaScript
17
star
32

gl-post

Simple WebGL post-processing using some pieces from stack.gl
JavaScript
14
star
33

glsl-min-stream

through stream that transforms glsl-parser AST nodes and rewrites variables into shorter forms
JavaScript
14
star
34

contributing

Contribution guidelines for stackgl projects
14
star
35

gl-mesh

Draws static indexed geometry in WebGL
JavaScript
12
star
36

gl-texture2d-read-float

Read out the contents of a floating-point gl-texture2d
JavaScript
11
star
37

gl-clear

A helper WebGL module for clearing the current buffer
JavaScript
11
star
38

lookat-camera

Simple "lookat" camera abstraction built on top of gl-matrix
JavaScript
10
star
39

glsl-deparser

through stream that translates glsl-parser AST nodes into working glsl code
JavaScript
10
star
40

glslify-api

An API and accompanying client for generating glslify shaders in the browser
JavaScript
10
star
41

gl-modules.github.io

modules.gl website
CSS
9
star
42

gl-texture2d-pip

๐Ÿ”ฒ Preview the contents of a set of gl-texture instances alongside your main render pass.
JavaScript
9
star
43

gl-quat

gl-matrix's quaternion, split into smaller pieces
JavaScript
8
star
44

gl-compare

Visually compare two webgl render loops on the fly
JavaScript
8
star
45

stackgl-readme-css

Reusable CSS for styling README/Markdown content consistently.
HTML
8
star
46

learning-webgl-02

Learning WebGL Lesson 2 converted from vanilla WebGL to use stack.gl.
JavaScript
7
star
47

gl-mat2

gl-matrix's mat2, split into smaller pieces
JavaScript
7
star
48

gl-api

A JSON listing of the WebGL 1.0 API
JavaScript
7
star
49

learning-webgl-03

Learning WebGL Lesson 3 converted from vanilla WebGL to use stack.gl.
JavaScript
7
star
50

gl-flags

Easily change and access your WebGL flags set by gl.enable/gl.disable with minimised overhead.
JavaScript
6
star
51

gl-buffer-snoop

Intercepts uploads to WebGL buffers in order to keep track of their expected value on the GPU.
JavaScript
6
star
52

gl-vec4

gl-matrix's vec4, split into smaller pieces
JavaScript
5
star
53

gl-shader-errors

"Parses" the log output of `gl.getShaderInfoLog`
JavaScript
5
star
54

gl-modules-workshopper

workshopper for the js side of glsl.
4
star
55

discussions

3
star