javascriptnext.jsshaderwebgl

load shaders from next.js


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


Solution

  • 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'