Ways to write shader code in a separate file

[(Noah) Hanlun Song]

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.

[Matt DesLauriers]

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.