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)
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?