load shaders from next.js

Question

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

What is the actual error you get - Do you get something about using a loader? — Ramakay, Mar 11 '22 at 17:13
Why not put them in your public folder and load them as needed? — kelsny, Mar 11 '22 at 17:38

score 4 · Accepted Answer · answered Mar 12 '22 at 13:58

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'

load shaders from next.js

1 Answers1