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);
glpileShader(shader);

This sucks and I would prefer to use separated fragment.glsl and vertex.glsl files to dev (even if the piled 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).

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.pileShader(shader);

This sucks and I would prefer to use separated fragment.glsl and vertex.glsl files to dev (even if the piled 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).

• javascript
• next.js
• shader
• webgl

Share Improve this question Follow edited Mar 11, 2022 at 16:39 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Mar 11, 2022 at 16:22 Th0rgalTh0rgal 95911 gold badge1313 silver badges3636 bronze badges 2

• What is the actual error you get - Do you get something about using a loader? – Ramakay Commented Mar 11, 2022 at 17:13
• Why not put them in your public folder and load them as needed? – k.tten Commented Mar 11, 2022 at 17:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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'

I had to use raw-loader.

import testVertexShader from "!!raw-loader!@/shaders/test/vertex.glsl";
import testFragmentShader from "!!raw-loader!@/shaders/test/fragment.glsl";

Found the solution in this great tutorial about shaders and react three fiber.