babel-plugin-glsl
A Babel plugin to process GLSL code with glslify, a module system for GLSL.
Example
In
; const fragmentShader = 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 fragmentShader = ` 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
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:
; const fragmentShader = glsl` // ...`;