A Babel plugin to process GLSL code with glslify, a module system for GLSL.
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);
}
`;
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);
}
`;
# yarn
yarn add -D glslify babel-plugin-glsl
# npm
npm i --save-dev glslify babel-plugin-glsl
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`
// ...
`;
Constants are inlined at compile time and the result is processed by Glslify
const ALPHA = 1;
const frag = glsl`
void main () {
gl_FragColor = vec4(1, 0, 0, ${ALPHA});
}
`;
const ALPHA = 1;
const frag = `
void main () {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;
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.
function createShader(alpha)
return glsl`
#define ALPHA ${alpha}
void main () {
gl_FragColor = vec4(1, 0, 0, ALPHA);
}
`;
}
function createShader(alpha)
return `
#define ALPHA ${alpha}
void main () {
gl_FragColor = vec4(1, 0, 0, ALPHA);
}
`;
}
Shader transforms like glslify-hex and glslify-import can be used.
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);
}
`;
const frag = `
#define PI 3.141592653589793
void main () {
gl_FragColor = vec4(vec3(1,0,0), 1);
}
`;
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.