如何在ReactJs中加载WebGL顶点和片段着色器？

Question

让我先把我的问题放在前面，然后分享相关细节: 有没有办法在ReactJS中使用/加载（修复解析错误）WebGL着色器？是否有任何可用的加载程序？ 在谷歌上苦苦搜索了数小时，试图找到一种能够使用着色器文件（即顶点和片段着色器）的方法，但仍未找到确定性的解决方案。

当我在ReactJS应用程序中执行以下操作时：

• require('../shaders/particle.vert')
• import particleVert from '../shaders/particle.vert'

我会遇到这个错误：

ERROR in ./src/particles/src/shaders/particle.vert 3:10
Module parse failed: Unexpected token (3:10)
You may need an appropriate loader to handle this file type.

这是我在react-app代码中使用这些着色器的方式：

const material = new THREE.RawShaderMaterial({
        uniforms,
        vertexShader: glslify(require('../shaders/particle.vert')),
        fragmentShader: glslify(require('../shaders/particle.frag')),
        // vertexShader: glslify(particleVert),
        // fragmentShader: glslify(particleFrag),
        depthTest: false,
        transparent: true,
        // blending: THREE.AdditiveBlending
});

---

这里是一张显示问题完整日志的屏幕截图：

- Aaditya Sharma

---

你使用的打包工具是什么？Webpack？Parcel？该打包工具负责将 require('textfile.frag') 转换为正确的内容。目前它不知道如何处理 .frag 和 .vert 文件。 - Alex Wayne

我正在使用基本的React应用程序create-react-app。 - Aaditya Sharma

Answer 1

我认为你正在超出create-react-app为你设置的范围，这意味着现在是时候弹出你的应用程序并自定义其构建过程了。

运行：

npm run eject

现在你需要配置webpack来允许将frag和vert文件导入为字符串。使用webpack的'raw-loader'可以完成此操作。

npm install raw-loader --save-dev

现在，在你的目录根目录中应该有一个webpack.config.js文件，添加一些配置行。你需要找到它定义了 module: { rules: { /*...*/ } }的位置。将以下规则添加到数组中：

// Require .vert and .frag as raw text.
{
  test: /\.(vert|frag)$/i,
  use: 'raw-loader',
}

test 是一个要在文件名上运行的正则表达式，这意味着以 .vert 或 .frag 结尾的任何文件应使用 raw-loader

- Alex Wayne

---

我可能错了，但我也怀疑你想在构建时而不是运行时调用 glslify。 - gman

Answer 2

如果什么都不起作用，尝试将其作为字符串常量导入

const vertex = `
varying vec2 vertexUV;
varying vec3 vertexNormal;

void main(){
    vertexUV = uv;
    vertexNormal = normalize(normalMatrix * normal);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`;

export default vertex

- Abdul.Moqueet

Answer 3

更新：

• 使用新的React版本（使用webpack > 5），我们必须使用asset/source。
• 无需进行npm/yarn安装

注意：项目必须被弹出。 查看更多细节https://webpack.js.org/guides/asset-modules/：

{
  test: /\.(glsl|vert|frag)$/,
  type: 'asset/source',
},

- sugaith

---

这意思不太清楚——它应该放在哪里？它指的是什么？你是假设项目已经从 CRA 中弹出了吗？ - stephent

是的，该项目必须被弹出。这应该在webpack配置中完成。您可以在此处查看更多详细信息：https://webpack.js.org/guides/asset-modules/。 - sugaith

Answer 4

react-three-fiber/drei 是你在 three.js 的 rawshadermaterial 上使用最轻量级的封装。以下是文档：

https://docs.pmnd.rs/drei/shaders/shader-material

文档非常直观，您仍然可以使用glsify导入外部文件

- investInSoup