How to use glslify with create-react-app

instructions.md

Create your app

create-react-app my-app
cd my-app

Eject it, so that we can modify webpack config

npm run eject
y # when prompted

Install the necessary loaders

yarn add glslify-loader raw-loader

Edit config/webpack.config.dev.js. Add to module.rules in the oneOf section

{
  test: /\.(glsl|frag|vert)$/,
  use: [
    require.resolve('raw-loader'),
    require.resolve('glslify-loader'),
  ]
},

At this point you should be able to require your shader files by just doing

import myShader from './myShader.glsl'

Within your shader, you can import from other shaders

// in myShader.glsl

// import from node_modules
import noise from 'glsl-noise/simplex/2d'

// import from relative
import foo from './lib/foo.glsl';

In the later case, you'll also want to export from foo.glsl

#pragma glslify: export(foo)

Thank you for this guide! To do this without ejecting, we can use the following .rescriptsrc file:

const { edit, getPaths } = require("@rescripts/utilities");

const predicate = valueToTest => {
  return valueToTest.oneOf;
}

const transform = match => ({
  ...match,
  oneOf: [
    // Need to add as second-to-last to avoid being intercepted by the file-loader in CRA
    ...match.oneOf.slice(0, -1),
    {
      test: /\.(glsl|frag|vert)$/,
      exclude: [/node_modules/],
      use: ["raw-loader", "glslify-loader"]
    },
    ...match.oneOf.slice(-1)
  ]
});

function rescriptGlslifyPlugin() {
  return config => {
    const matchingPaths = getPaths(predicate, config);
    return edit(transform, matchingPaths, config);
  };
}

module.exports = [
  [
    rescriptGlslifyPlugin,
  ],
]

Hello,

When I place

import snoise2 from 'glsl-noise/simplex/2d'

in my .vert file I get a

THREE.WebGLShader: gl.getShaderInfoLog() vertex ERROR: 1:1: '' : syntax error1

Any idea why this might be?

Thank you for this guide! To do this without ejecting, we can use the following .rescriptsrc file:

const { edit, getPaths } = require("@rescripts/utilities");

const predicate = valueToTest => {
  return valueToTest.oneOf;
}

const transform = match => ({
  ...match,
  oneOf: [
    // Need to add as second-to-last to avoid being intercepted by the file-loader in CRA
    ...match.oneOf.slice(0, -1),
    {
      test: /\.(glsl|frag|vert)$/,
      exclude: [/node_modules/],
      use: ["raw-loader", "glslify-loader"]
    },
    ...match.oneOf.slice(-1)
  ]
});

function rescriptGlslifyPlugin() {
  return config => {
    const matchingPaths = getPaths(predicate, config);
    return edit(transform, matchingPaths, config);
  };
}

module.exports = [
  [
    rescriptGlslifyPlugin,
  ],
]

I don't fully understand. Should there be a single file called .rescriptsrc? Would you put it at the root of the project?

Hi Corey, Yes to both, I created the config file and included it in the root. Here’s the repository where this applies: https://github.com/hydrosquall/animated-regl-in-react-minimal

…

On Thu, Apr 1, 2021 at 1:51 PM Corey Tollerud ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Thank you for this guide! To do this without ejecting, we can use the following .rescriptsrc file: const { edit, getPaths } = ***@***.***/utilities"); const predicate = valueToTest => { return valueToTest.oneOf;} const transform = match => ({ ...match, oneOf: [ // Need to add as second-to-last to avoid being intercepted by the file-loader in CRA ...match.oneOf.slice(0, -1), { test: /\.(glsl|frag|vert)$/, exclude: [/node_modules/], use: ["raw-loader", "glslify-loader"] }, ...match.oneOf.slice(-1) ]}); function rescriptGlslifyPlugin() { return config => { const matchingPaths = getPaths(predicate, config); return edit(transform, matchingPaths, config); };} module.exports = [ [ rescriptGlslifyPlugin, ],] I don't fully understand. Should there be a single file called .rescriptsrc? Would you put it at the root of the project? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/595d9fef3b1320d1f94632f8c2d323ef#gistcomment-3689908>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACE2MM2MIS2EANT55XEEUGTTGSXATANCNFSM4JOG6QCQ> .