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 match random

This plugin does rename some functions to avoid clashes (like functions referenced inside of imports), but not ones that you import.

Inspiration

• glslify
• babel-plugin-glslify