如何将 GLSL 文件与 Gulp 捆绑在一起？

Question

我正在开发一个需要自定义 .glsl 着色器的 WebGL 项目。该项目将应用程序与 Gulp 捆绑在一起，因此我正在尝试使用 https://github.com/mikecao/gulp-glsl，这是 "Gulp plugin that converts GLSL code into minified strings." 完美！

我运行 npm install gulp-glsl --save-dev 和我的 gulpfile.js 看起来如下：

const gulp = require('gulp');
const glsl = require('gulp-glsl');

gulp.src('**/GLSL/*.glsl')
    .pipe(glsl({format: 'raw'}))
    .pipe(gulp.dest('build'));

然后我尝试像这样导入我的着色器：

import fragShader from "./GLSL/frag.glsl";

但是 Gulp 编译器给我一个编译错误：

[13:27:17] gulp-notify: [Compile Error]
/Users/.../WebGL/GLSL/polyFrag.glsl:1
#extension GL_OES_standard_derivatives : enable
^
ParseError: Unexpected character '#'

我不需要Gulp来编译.glsl文件，我只需要它把它变成一个字符串以便与WebGL一起使用。我可以用 Gulp 做什么来实现这一点？

Answer 1

Gulp 是一个任务运行器。它不会捆绑您的脚本，但可以启动一些其他工具来捆绑或预处理。看来您的问题与导入着色器的方式有关，而不是与 minifier 模块有关。

ParseError 在有效的 glsl 着色器指令上失败。

我建议先尝试在没有 gulp-glsl 的情况下导入 .glsl。如果你的项目使用一些像 browserify 或 webpack 这样的打包器——检查那个打包器的 glsl-importer 模块（例如 webpack-glsl-loader for webpack）。

Answer 2

你知道 glslify 吗？

是一个 Node.js 风格的模块构建系统，很像 browserify，除了 GLSL 着色器！它允许你分享并在 npm 上使用着色器代码。

它构成了 stack.gl 生态系统的核心组件之一，允许您从 npm 安装 GLSL 模块并在着色器中使用它们。这使得将来自社区的不同效果和技术拼凑起来变得微不足道，包括但当然不限于雾、噪声、胶片颗粒、光线行进助手、缓动函数和照明模型。

因为 glslify 仅将单个着色器文件输出为字符串，所以只要它们接受自定义着色器，就可以很容易地将其与您选择的任何 WebGL 框架一起使用。

如何将 GLSL 文件与 Gulp 捆绑在一起？

How to bundle GLSL files with Gulp?

javascript

glsl

webgl

npm

gulp