Как связать файлы GLSL с Gulp? - PullRequest
Новая
       14

Как связать файлы GLSL с Gulp?

0 голосов
/ 16 октября 2018

Я работаю над проектом 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.Что я могу сделать с Gulp, чтобы это произошло?

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Знаете ли вы о glslify ?

- это система сборки модулей в стиле Node.js, очень похожая на browserify, за исключением шейдеров GLSL!Он позволяет вам обмениваться и использовать код шейдера на npm.

Он формирует один из основных компонентов экосистемы stack.gl , позволяя устанавливать модули GLSL из npm и использовать их вваши шейдеры.Это упрощает объединение различных эффектов и методов сообщества, включая, но не ограничиваясь этим, туман, шум, зернистость пленки, помощники по лучу, функции ослабления и модели освещения.

Поскольку glslify выводит только один шейдерфайл в виде строки, его легко использовать с любой платформой WebGL по вашему выбору, если они принимают пользовательские шейдеры.

0 голосов
/ 17 октября 2018

Gulp - это бегун задач.Он не связывает ваши скрипты, но может запустить какой-то другой инструмент для связывания или предварительной обработки.Похоже, что ваша проблема связана с тем, как вы импортируете шейдер, а не с модулем минификатора.

ParseError терпит неудачу в действительной директиве glsl shader.

Я предлагаю попробовать импортировать ваш .glslбез gulp-glsl сначала.Если в вашем проекте используется какой-либо пакет, такой как browserify или webpack, - проверьте наличие модуля glsl-importer для этого пакета (например, webpack-glsl-loader для webpack).

...