babel-plugin-glsl

    1.0.0 • Public • Published

    babel-plugin-glsl

    experimental Babel Macro

    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`
      // ...
    `;

    Install

    npm i babel-plugin-glsl

    DownloadsWeekly Downloads

    1,697

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    21.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • onno