[SuboptimalEng]

Good question! If I knew how to do it, I'd probably write this in just TypeScript. Turns out I don't know how to set that up. So I instead start with Vite and throw React in there to handle rerenders and simple state management. I think R3F is interesting, but I never used it because it makes graphics programming too front-endy.

The most important reason for my code structure is that I just like writing GLSL shaders! It's annoying that I need to set up Vite, TypeScript, Tailwind, React, etc. all so that I can write some shaders. I know I can write shaders in ShaderToy, but then I won't be able to upload custom 3D texture files or add simple user controls.

[bj-rn]

> I know I can write shaders in ShaderToy, but then I won't be able to upload custom 3D texture files or add simple user controls.

Maybe check out https://cables.gl

[crabmusket]

> The most important reason for my code structure is that I just like writing GLSL shaders! It's annoying that I need to set up Vite, TypeScript, Tailwind, React, etc. all so that I can write some shaders

That's what the frontend hype canal wants you to think!

Your frontend JS could just `fetch` the GLSL files from the backend instead of trying to compile them into your build process.

There are tradeoffs to this of course, but dealing with the complexity death star of JS tooling can be opted out of.