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

【问题标题】：How to bundle GLSL files with Gulp?如何将 GLSL 文件与 Gulp 捆绑在一起？
【发布时间】：2018-10-18 16:07:45
【问题描述】：

我正在开发一个需要自定义 .glsl 着色器的 WebGL 项目。该项目将应用程序与 Gulp 捆绑在一起，因此我尝试使用 https://github.com/mikecao/gulp-glsl，这是一个“将 GLSL 代码转换为缩小字符串的 Gulp 插件”。完美！

我跑了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 做些什么来实现这一点？

【问题讨论】：

“把它变成一个字符串”，你的意思是“缩小”glsl结果吗？
@DacreDenny 问题是 Gulp 将 #extension GL_OES 视为 JavaScript，它不理解。我需要将.glsl 文件转换为字符串，因此它相当于var fragShader = "#extension GL_OES : enable"。 Webpack 和 Rollup 可以轻松处理这个问题，但我似乎无法使用 Gulp。

标签： javascript npm gulp glsl webgl

【解决方案1】：

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

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

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

【讨论】：

那么github.com/mikecao/gulp-glsl 是做什么的呢？它声称是“将 GLSL 代码转换为缩小字符串的 Gulp 插件。”
并在自述文件示例 (.pipe(gulp.dest('build'))) 中将这些写回文件系统到 build 目录。那是将一个 .glsl 文件更改为另一个 .glsl 文件（缩小）。旧文件内容也可以视为字符串。
Shader 文件内容只是没有任何魔法的纯文本。 gulp-glsl 在捆绑环境中似乎没有帮助。
谢谢！我确实误解了 Gulp 在做什么，但该项目使用的是 Browserify，所以我能够使用 npmjs.com/package/browserify-shader

【解决方案2】：

你知道glslify吗？

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

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

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

【讨论】：