babel-plugin-glsl

A Babel plugin to process GLSL code with glslify, a module system for GLSL.

Example

In

import glsl from 'glslify';
 
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

{
  "plugins": ["babel-plugin-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 fragmentShader = glsl`
  // ...
`;