Ways to write shader code in a separate file
fnick851 opened this issue · comments
Hi Matt, in the workshop you mentioned there is a way to import shader written in a separate/standalone file.
Is it just putting the shader code as string in a .js
file and export it?
For example -
"frag-shader.js":
const shaderString = /* glsl */`
uniform vec3 color;
main() {
...
}
`
export default shaderString
"sketch.js":
import fragShader from "./frag-shader.js"
...
Thanks.
If you are using canvas-sketch you can put the shaded code in a .glsl file and import that. This also works with some other frontend tools like Parcel.
https://github.com/mattdesl/canvas-sketch
Alternatively you could use window.fetch() to get the shader source as a string, from a GLSL file.