如何用Gulp捆绑GLSL文件？

Question

我正在处理一个需要自定义WebGL着色器的.glsl项目。这个项目将应用程序与Gulp捆绑在一起，所以我尝试使用https://github.com/mikecao/gulp-glsl，它是一个"Gulp插件，可以将GLSL代码转换成缩小的字符串“。太棒了！

我运行了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一起使用。我该怎么办才能让这一切发生呢？

Answer 1

狼吞虎咽是一名任务跑步者。它不捆绑您的脚本，但可以启动一些其他工具来打包或预处理。看起来你的问题与你导入着色器的方式有关，而不是小型机模块。

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

我建议先尝试在没有.glsl的情况下导入gulp-glsl。如果您的项目使用了一些绑定器，如browserify或webpack -请检查该绑定程序的glsl-导入程序模块(例如，webpack-glsl-loader用于webpack)。

Answer 2

你知道玻璃化的事吗？

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

它构成了stack.gl生态系统的核心组件之一，允许您从npm安装GLSL模块并在您的着色器中使用它们。这使得将不同的效果和技术拼凑在一起变得微不足道，其中包括但不限于雾、噪音、胶片颗粒、射线行军助手、放松功能和照明模式。

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