I am using next.js for my web app. I use WebGL to render a 2d scene. I have a fragment and a vertex shader hardcoded as strings in my javascript:
var fragmentShaderSource = [
` #ifdef GL_ES`,
`precision highp float;`,
` #endif`,
``,
`uniform vec4 uGlobalColor;`,
``,
`void main() {`,
` gl_FragColor = uGlobalColor;`,
`}`,
].join("\n");
...
let shader = gl.createShader(type);
gl.shaderSource(shader, fragmentShaderSource);
gl.compileShader(shader);
This sucks and I would prefer to use separated fragment.glsl and vertex.glsl files to dev (even if the compiled version gets a hardcoded string at the end). I read things about webpack but it's my first time using next/webpack and I'm not sure to understand what to do (and examples are 6 years old or more).
Here is a solution using raw loader. This is my next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
webpack: (config, options) => {
config.module.rules.push({
test: /\.glsl/,
type: "asset/source",
})
return config
},
}
module.exports = nextConfig
I can now import my shaders code that way:
import fragmentShader from '../../shaders/fragment.glsl'
import vertexShader from '../../shaders/vertex.glsl'