Estoy usando next.js para mi aplicación web. Uso WebGL para renderizar una escena 2d. Tengo un fragmento y un sombreador de vértices codificado como cadenas en mi 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);Esto apesta y preferiría usar archivos separados fragment.glsl y vertex.glsl para desarrollar (incluso si la versión compilada obtiene una cadena codificada al final). Leí cosas sobre webpack, pero es la primera vez que uso next/webpack y no estoy seguro de entender qué hacer (y los ejemplos tienen 6 años o más).
Aquí hay una solución usando el cargador sin procesar. Este es mi siguiente.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 = nextConfigAhora puedo importar mi código de shaders de esa manera:
import fragmentShader from '../../shaders/fragment.glsl' import vertexShader from '../../shaders/vertex.glsl'