提问人：Th0rgal 提问时间：3/12/2022 最后编辑：juliomalvesTh0rgal 更新时间：3/12/2022 访问量：1192
从 Next.js 加载着色器
load shaders from next.js
问：
我正在将 next.js 用于我的 Web 应用程序。我使用 WebGL 渲染 2D 场景。我有一个片段和一个顶点着色器，在我的 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);
这很糟糕，我更愿意使用单独的 fragment.glsl 和 vertex.glsl 文件进行开发（即使编译版本在最后获得硬编码字符串）。我读过关于 webpack 的东西，但这是我第一次使用 next/webpack，我不确定该怎么做（例子是 6 岁或更长时间）。
答：
5赞
Th0rgal
3/12/2022
#1
这是使用原始加载器的解决方案。这是我的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
我现在可以以这种方式导入我的着色器代码：
import fragmentShader from '../../shaders/fragment.glsl'
import vertexShader from '../../shaders/vertex.glsl'
评论