Question

我正在研究一个需要自定义.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怎么做才能做到这一点？

Answer 1

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

ParseError在有效的glsl shader指令上失败。

我建议尝试先导入.glsl，而不要导入gulp-glsl。如果您的项目使用了某些捆绑器，例如browserify或webpack，请检查该捆绑器的glsl-importer模块（例如，webpack-glsl-loader用于webpack）。

Answer 2

您知道glslify吗？

是Node.js样式的模块构建系统，非常类似于 browserify，除了GLSL着色器！它可以让你分享并在npm上使用着色器代码。

它构成stack.gl生态系统的核心组件之一，允许您从npm安装GLSL模块并在着色器中使用它们。这使得将社区中不同的效果和技术组合在一起变得轻而易举，包括但当然不限于雾，噪声，胶片颗粒，光线行进辅助器，缓动功能和照明模型。

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

如何用Gulp捆绑GLSL文件？

2 个答案: