@mkhatib/babel-plugin-glsl
v1.1.0
Published
Process GLSL code with glslify
Downloads
6
Maintainers
Readme
babel-plugin-glsl
A Babel plugin to process GLSL code with glslify, a module system for GLSL.
Example
In
import glsl from 'glslify';
const frag = glsl`
#pragma glslify: random = require(glsl-random)
void main () {
float brightness = random(gl_FragCoord.xy / resolution.xy);
gl_FragColor = vec4(vec3(brightness), 1.0);
}
`;
Out
const frag = `
highp float random(vec2 co) {
highp float a = 12.9898;
highp float b = 78.233;
highp float c = 43758.5453;
highp float dt = dot(co.xy, vec2(a,b));
highp float sn = mod(dt, 3.14);
return fract(sin(sn) * c);
}
void main () {
float brightness = random(gl_FragCoord.xy / resolution.xy);
gl_FragColor = vec4(vec3(brightness), 1.0);
}
`;
Installation
# yarn
yarn add -D glslify babel-plugin-glsl
# npm
npm i --save-dev glslify babel-plugin-glsl
Usage
Add the plugin to your .babelrc
{
"plugins": ["glsl"]
}
Please note that the Babel plugin should run before other plugins or presets to ensure the template literals are correctly transformed.
Alternatively, instead of using the Babel plugin, you can use this package with babel-plugin-macros. After installing babel-plugin-macros
and adding it to your Babel config, you can use the transform directly with:
import glsl from 'babel-plugin-glsl/macro';
const frag = glsl`
// ...
`;
Features
Inlined constants
Constants are inlined at compile time and the result is processed by Glslify
In
const ALPHA = 1;
const frag = glsl`
void main () {
gl_FragColor = vec4(1, 0, 0, ${ALPHA});
}
`;
Out
const ALPHA = 1;
const frag = `
void main () {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;
Dynamic expressions
Expressions that can't be inlined remain and the surrounding code is processed by Glslify in parts. This imposes the limitation that the parts on either side of the expression should be valid GLSL or compilation is likely to fail. It's probably best to place dynamic expressions as a #define
and use that in the rest of the shader.
In
function createShader(alpha)
return glsl`
#define ALPHA ${alpha}
void main () {
gl_FragColor = vec4(1, 0, 0, ALPHA);
}
`;
}
Out
function createShader(alpha)
return `
#define ALPHA ${alpha}
void main () {
gl_FragColor = vec4(1, 0, 0, ALPHA);
}
`;
}
Glslify transforms
Shader transforms like glslify-hex and glslify-import can be used.
In
Install the transforms and add them to your package.json
// package.json
"glslify": {
"transform": [
"glslify-hex",
"glslify-import"
]
}
// defines.glsl
#define PI 3.141592653589793
const frag = glsl`
#pragma glslify: import(./defines)
void main () {
gl_FragColor = vec4(#ff0000, 1);
}
`;
Out
const frag = `
#define PI 3.141592653589793
void main () {
gl_FragColor = vec4(vec3(1,0,0), 1);
}
`;
Imported function names
This plugin doesn't rename the functions that you import, which is something that Glslify normally does to avoid clashes when you import multiple functions with the same name. This is an issue if you write your shader in multiple parts.
This:
const shader = {
fragPars: glsl`
#pragma glslify: random = require(glsl-random)
`,
fragMain: glsl`
float brightness = random(gl_FragCoord.xy / resolution.xy);
gl_FragColor = vec4(vec3(brightness), 1.0);
`
}
turns into
const shader = {
fragPars: `
highp float random_0(vec2 co) {
highp float a = 12.9898;
highp float b = 78.233;
highp float c = 43758.5453;
highp float dt = dot(co.xy, vec2(a,b));
highp float sn = mod(dt, 3.14);
return fract(sin(sn) * c);
}
`,
fragMain: `
float brightness = random(gl_FragCoord.xy / resolution.xy);
gl_FragColor = vec4(vec3(brightness), 1.0);
`
}
random_0
doesn't matchrandom
This plugin does rename some functions to avoid clashes (like functions referenced inside of imports), but not ones that you import.