如何在 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
});

---

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

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

Answer 2

react-three-fiber/drei 是 three.js 原始着色器材质的轻量级包装器的最佳选择。这是文档：

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

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

Answer 3

如果没有任何效果，请尝试将其作为字符串常量导入

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

Answer 4

更新：

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

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

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