I'm still new at web development, and have been working on using 3D images in a web page. On a particular project I am using .glsl files to load textures and shaders. When I run my code locally everything works fine but when I attempt to view on a live server I get the following error.
I'm not sure how to interpret this but i came into a similar error on another project where i tried to access gsap from my node modules. To solve that i had to implement a script directly into my html file, a CDN of some sorts.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
So, is there a something similar for .glsl files or is there a more permanent solution for these kind of errors.
PS. The project is a simple HTML, CSS, JS (Albeit ThreeJS)
I finally figured it out, it was especially difficult because no one had a direct answer for it. The thing is we cannot expect Github or a LiveServer to access node-modules in a basic HTML, CSS, JS project. That meant i was getting the above error because the server couldn't locate my glsl files. This is where things got tricky - for other dependencies used in the project, I could just write a script tag with a CDN that hosted them. Unfortunately, there isn't a CDN for glsl files (maybe someone might work on that) but there was a solution.
For anyone trying to get into ThreeJs ort WebGl, The Book Of Shaders is an excellent resource. Basically, you have to write your glsl code in your HTML doc (in a script tag).