I am experiencing difficulty with my Glsl shaders not loading properly on either the Liveserver or Github pages

I'm fairly new to the world of web development and I've been experimenting with incorporating 3D images into a webpage. In one of my projects, I'm utilizing .glsl files to load textures and shaders. Everything works smoothly when I run my code locally, but as soon as I attempt to view it on a live server, I encounter the following error:

https://i.sstatic.net/6Ixik.png

I'm a bit puzzled by this error, as I faced a similar issue in another project when I was trying to access gsap from my node modules. In order to resolve that, I had to include a script directly into my HTML file, such as a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Therefore, I'm wondering if there is a similar solution for .glsl files, or if there is a more permanent fix for these types of errors.

By the way, the project I'm working on is a simple one involving HTML, CSS, and JavaScript (specifically ThreeJS).

javascriptthree.jscdnliveserver

Answer №1

After much searching and trial and error, I finally cracked the code on this issue. It was a challenging process since there wasn't a straightforward solution readily available. The key realization was that trying to access node-modules in a basic HTML, CSS, JS project using Github or a LiveServer was not feasible. This was causing the error as the server couldn't find my glsl files. The solution to this problem was not as simple as including a CDN like I could with other dependencies.

For those delving into ThreeJs or WebGl, I came across a fantastic resource called The Book Of Shaders. The workaround I found was to embed the glsl code directly into the HTML document within a script tag. While there may not be a CDN available for glsl files at the moment, this approach did the trick for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

I have a scenario on my website where I have two separate div elements: <div class="wg-block" data-reactid="10" <div class="wg-header" data-reactid="11"/div> .... <h4 class='condition'> "Text" </h4> <div cl ...

javascriptcssnightwatch.js

Changing the size of circles in text and adjusting the dimensions of SVG elements

As a novice JavaScript programmer, I am attempting to resize circles and SVG elements based on the window size. Currently, my code creates circles of varying sizes, but I haven't been able to adjust them in relation to text size. var width = 600; va ...

javascripthtmld3.jssvg

Expand the data retrieved from the database in node.js to include additional fields, not just the id

When creating a login using the code provided, only the user's ID is returned. The challenge now is how to retrieve another field from the database. I specifically require the "header" field from the database. Within the onSubmit function of the for ...

javascriptnode.jsangulardatabasetypescript

The request to login at the specified API endpoint on localhost:3000 was not successful, resulting in a

As I continue to develop my programming skills, I have been working on configuring a database connected with nodejs in the same folder. However, when trying to make an ajax request to the database, I encountered an error indicating that the database may be ...

javascriptnode.jsreactjsajaxbackend

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Discovering targeted information from object utilizing React

When using the fetch method to retrieve film data, how can I extract specific details from the returned object? I am able to access and manipulate properties like name, genre, cast, trailers, and recommendations, but I'm struggling with retrieving the ...

javascriptarraysreactjsthemoviedb-api

The event listener for browser.menus.onClicked is dysfunctional in Firefox

Currently, I am in the process of developing my own Firefox extension and I have encountered an issue with adding a listener to an onclick event for a context menu item. manifest.json { "manifest_version": 2, "name": "My exten ...

javascriptfirefoxfirefox-addonfirefox-addon-webextensions

The issue with AngularJS ng-show and $timeout functionality not functioning as expected

As a newcomer to AngularJS, I recently started an individual project utilizing ng-show and if else statements with $timeout. Despite my efforts, I have been unable to make the answers timeout after being displayed for a few seconds. I've tried various ...

javascriptangularjs

AngularJS: Transitioning from Expressions to Javascript (Coffeescript)

Looking to convert an expression into JavaScript in order to maintain an object's value in $scope: <dl class = "mortgage-information"> <dt><abbr title = "Loan-to-value Ratio">LTV</abbr></dt> <dd>{{(total_fi ...

javascriptangularjscoffeescript

The request's body in the PUT method is void

I seem to be having an issue with my PUT request. While all my other requests are functioning properly, the req.body appears to remain empty, causing this error message to occur: errmsg: "'$set' is empty. You must specify a field like so: ...

javascriptnode.jsmongodbexpressput

CORS has restricted access to the XMLHttpRequest, despite the backend being configured correctly

I have a Flask backend integrated with React frontend. I encountered an issue while attempting to make a POST request to my backend. The error message states: Access to XMLHttpRequest at 'http://127.0.0.1:5000/predict' from origin 'http://lo ...

javascriptpythonreactjsflask

Is a shifting background image possible?

Can anyone shed some light on how the dynamic background image on this website is created? Is it a JavaScript plugin, a simple .gif, or something else entirely? Appreciate any insights! ...

javascriptjquery

How can JSON data objects be transmitted to the HTML side?

I created a JSON object using Node JS functions, and now I'm looking to transfer this data to the HTML side in order to generate a table with it. However, I'm encountering difficulties sending the JSON object over because of my limited experience ...

javascripthtmlnode.jsexpress

Combining an array of intricate data models to create

Currently, my setup involves using Entity Framework 7 in conjunction with ASP.NET MVC 5. In my application, I have various forms that resemble the design showcased in this image. By clicking on the "new" button within these forms, a Bootstrap modal like t ...

javascripthtmlasp.netasp.net-mvc

Creating a dynamic loader with JavaScript and PHP: A step-by-step guide

Currently focused on PHP development, my task involves retrieving data from a database using multiple queries. The database may contain anywhere from 10 records to 10,000 records. I am looking for a way to incorporate a progress bar that displays the com ...

javascriptphpajax

jQuery functions failing to target dynamically generated elements

I've encountered an issue while attempting to implement my jQuery functions on dynamically created content using the .on API from jQuery. The main objective of the code is to display a specific set of options only when a user hovers over the ".feed_po ...

javascriptjqueryhtmldom

Enhanced capabilities for the <input> element

I am seeking to develop a component that incorporates an <input> tag and offers additional functionalities like a clear text value "X" icon or any other customized actions and markup, all while maintaining the same event bindings ((click), (keyup), e ...

javascriptangular

Creating vibrant row displays in Vue.js: A guide to styling each row uniquely

I am not a front-end developer, so Vue and JS are new concepts for me. Currently, I am working on an application for managing sales. One of the components in my project involves displaying invoices in a list format. To make the rows visually appealing, I ...

javascripthtmlcssvue.js

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

I am currently exploring Typescript and attempting to replicate the functionality of styled-components on a smaller scale. Specifically, I want to make children required if the user passes in 'true' for the children parameter in createStyledCompo ...

javascriptreactjstypescriptstyled-components

What is the best way to refresh a navigation bar after making an API request, such as when using Google Sign-In?

Struggling to grasp the hook concept in this particular scenario: The flow goes like this - the user logs in with Google, which updates the session state. Consequently, the visitorType state transitions from 'viewer' to 'buyside'... A ...

javascriptreactjsnext.js