Normal Programming Mistake

    @mkhatib/babel-plugin-glsl

    1.1.0 • Public • Published

    babel-plugin-glsl

    npm version Babel Macro

    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

    Install

    npm i @mkhatib/babel-plugin-glsl

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    25.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • mkhatib