I have been writing a bunch of WebGL code over the last year, and I got a bit into Coffeescript. What has always bothered me is how messy it is to create structured applications. A major part of that is that JS has no module system. The following post presents a way to deal with the issue.
- Code and Demo
- The problem
- Packing for release
- Modify Reload
- Cleaning up builds
One way to deal with this is to just pollute your html file with script tags, and to globally load all shaders with some preprocessing step. But that means that the code using a shader is usually far from where the shader gets loaded, and the binding is tedious to type.
So all scripts and shaders will get resolved using RequireJS, which greatly simplifies managing them.
To kick off compiling you can type
The tool finds all .coffee files, and automatically wraps them in a RequireJS define (i.e. makes them a module) and writes them to the debug folder.
Files ending with .shader are compiled assuming they're going to produce shader programs. Files ending with .glsl are assumed to be shader includes.
If a coffeescript file needs to get a shader, it can directly require it and call the "create" method with the webgl context. This will resolve the shader includes and produce a ready to use object.
Shader files are also validated, and if there is a compile error, the filename from where the error stems as well as the line number and source line are reported on the error console.
A useful tool for RequireJS is r.js, a static resolver that produces a single file from the dependencies of the code.
In order to avoid having to use require.js to load the code, almond.js is prepended by the packer.
In order to avoid having to type make all the time, you can use the command:
This automatically looks out for modified files and compiles/packs them automatically
Use the command
To cleanup generated files.
The code for this project serves as an example on how to use it, check it out on github.