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: