Ok, so this was slightly confusing. Setting up glslify with webpack can be a little tricky and depending on your setup there can be some unexpected quirks - at least there was for me.
While trying to get glslify to play nicely with my webpack config I ran into several issues and depending on your setup they seem to flip around. So, to get a handle on how to get this all working correctly I stripped everything right back to a bare bones setup and tried a couple of suggested webpack loaders and babel plugins, some of which appear to be out of date and awaiting fixes.
Overall the process hasn't been exactly smooth or encouraging so hopefully this repo helps out the next person who finds themselves struggling.
This repo covers three somewhat basic approaches to incorporating glslify with a webpack setup. They cover the following:
- babel-plugin-glslify - uses babel
- glslify-loader - an older webpack loader which doesn't seem to be recommended anymore
- ify-loader - a newer browserify based loader for webpack
Each of the above approaches are explored in a seperate workspace:
Below is a summary table outlining at a high-level what works with which setup. Jump into each workspace and run the respective commands to view the output in a browser as well as any compiler errors.
| Workspace | Method | File | Works? |
|---|---|---|---|
| test-babel-plugin-glslify | glslify`` |
glsl-inline.js | ½ |
| test-babel-plugin-glslify | glslify('./file.glsl') |
glsl-file.js | ✔ |
| test-babel-plugin-glslify | glslify(/* shader string */) |
glsl-import.js | ✘ |
| test-glslify-loader | glslify`` |
glsl-inline.js | ✘ |
| test-glslify-loader | glslify('./file.glsl') |
glsl-file.js | ✘ |
| test-glslify-loader | glslify(/* shader string */) |
glsl-import.js | ✔ |
| test-ify-loader | glslify`` |
glsl-inline.js | ✔ |
| test-ify-loader | glslify('./file.glsl') |
glsl-file.js | ✔ |
| test-ify-loader | glslify(/* shader string */) |
glsl-import.js | ✘ |
In summary the ify-loader is definitely the best choice. However, if you are using babel then you will want to use the babel-plugin-glslify babel plugin but you will need to be careful not to use tagged template literals that contain variables (I'm still working out why Babel is concatinating these and if that's the exact issue here).
I think what's thrown me, at least while getting started, is how the method glslify behaves differently with each approach. As you can see in some scenarios it will compile fine when passed an imported shader string but in others it will throw an error and in other cases it will compile but silently ignore pragma imports. This probably makes sense once you've been working with it for a while but when I tried loading some of these approaches into an existing webpack setup I quickly became confused as to which approach was semantically right even after reading the docs. It's also worth mentioning that I am exteremly tired with a newborn and that I may just be missing the obvious here.
Anyways, I'm super keen to start using stack.gl within some existing projects so this will help serve as a reminder of what works going forward. If you know more about this than me, please please drop me a line in an issue here to help clear things up - cheers.
If you have Nodejs > 8.9 and Yarn installed you can use the following:
git clone [email protected]:chasevida/glslify-webpack.git
cd glslify-webpack
yarn install
To run examples in any of the three workspaces change directory into one and then run one of the following three commands:
cd <workspace>
yarn start:babel-glslify
yarn start:glslify-loader
yarn start:ify-loader