vert & frag splitted files proposal

[Neonunux]

to ease shader & vert dev, you could use this little loader :

const glsl = [
  // { name: 'vertexShaderJumpy', extension: 'vert', type: 'vertex' },
  { name: 'simpleVertex', extension: 'vert', type: 'vertex' },
  { name: 'vertexShader', extension: 'vert', type: 'vertex' },
  { name: 'fragmentShader', extension: 'frag', type: 'fragment' },
  // { name: 'fragmentShaderPianoLine', extension: 'frag', type: 'fragment' },
  { name: 'fragmentShaderPianoLine2', extension: 'frag', type: 'fragment' },
  // { name: 'fragmentShaderPianoLineFire', extension: 'frag', type: 'fragment' },
]

export function GLSLLoader() {
  glsl.forEach(async (file) => {
    const response = await fetch(`./glsl/${file.name}.${file.extension}`)
    const scriptContent = await response.text()
    const script = document.createElement('script')

    script.id = file.name
    script.type = `x-shader/x-${file.type}`
    script.innerHTML = scriptContent
    document.body.prepend(script)
  })
}

and call it in main.js

so you could have splitted files and dev real .vert & .frag files with syntax color, etc. in glsl folder

It's also possible to preload glsl files with a

<link rel="preload" href="./glsl/vertexShaderJumpy.vert" as="fetch">
<link rel="preload" href="./glsl/simpleVertex.vert" as="fetch">
<link rel="preload" href="./glsl/vertexShader.vert" as="fetch">
<link rel="preload" href="./glsl/fragmentShader.frag" as="fetch">
<link rel="preload" href="./glsl/fragmentShaderPianoLine.frag" as="fetch">
<link rel="preload" href="./glsl/fragmentShaderPianoLine2.frag" as="fetch">
<link rel="preload" href="./glsl/fragmentShaderPianoLineFire.frag" as="fetch">

[Bewelge]

Done. Thanks for the note