The Three.js GLSL shader encountered a compilation error

I encountered a compile error message: 

THREE.WebGLShader: Shader could not compile.

I attempted to use shaders from shaderfrog.com, but unfortunately they did not compile correctly.

To troubleshoot, I added my new vertex and fragment shaders to the DOM after referencing an example file.

<script id="vertexShader_new" type="x-shader/x-vertex">
  . . .
</script>

material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader_new').textContent,
    fragmentShader: document.getElementById('fragmentShader_new').textContent
});

In order to test other functionalities, I reverted the IDs back to vertexShader and fragmentShader in the demo code.

https://codesandbox.io/s/practical-kepler-3pdps?fontsize=14

The question remains: what is causing the issue with the shader? Here is the link to the shader in question: Molten Noise shader

javascriptthree.jsglsl

Answer №1

There are a couple of issues in your code that need to be addressed:

  • You should consider using RawShaderMaterial instead of ShaderMaterial. It is incorrect to define attributes like position or normal since they are part of the set of Built-in attributes and uniforms, as outlined in the documentation.

  • All uniforms must be defined in your shader definition, not just a few. Otherwise, the uniforms will have undefined values which can result in unexpected outputs. Here is an example of how the correct uniforms should be defined (note that defining a type property is no longer necessary).

    uniforms = {
    color1: { value: new THREE.Color( 0xff0000 ) },
    color2: { value: new THREE.Color( 0x00ff00 ) },
    color3: { value: new THREE.Color( 0x0000ff ) },
    iterations: { value: 1 },
    permutations: { value: 10 },
    brightness: { value: 1 },
    time: { value: 1 },
    speed: { value: 0.02 },
    uvScale: { value: new THREE.Vector2(1, 1) }
};

For a demonstration of the corrected code, please visit: https://jsfiddle.net/qb6u8vjp/5/

Using three.js version R105

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

Using JavaScript to consume ASP.net Script Services

My ASP.NET script service needs to be accessed from JavaScript using JSONP due to cross-domain restrictions. When dealing with a complex input structure, I have to construct the client-side input structure myself. How does the matching between the client ...

asp.netjavascriptweb-services

Axios and Postman generate unique X-CSRF tokens

Why does the X-CSRF token I receive from my axios request differ from the one I get in Postman? Here is how I am retrieving it: headers: { "X-CSRF-Token": "FETCH" } Furthermore, I am unable to use the X-CSRF token from my axios request in Postman as it ...

javascriptgetaxiospostmantoken

Steps for creating a functional counter in AngularJS

I am attempting to create a counter in AngularJS that will be used for some other purpose once it is working with a variable. However, I am facing an issue where the variable is not updating as expected. Since this will eventually become a more complex com ...

javascriptangularjs

Getting a variable from outside of the observable in Angular - a step-by-step guide

I have an Observable containing an array that I need to extract so I can combine it with another array. this.builderService.getCommercialData() .subscribe( data=>{ this.commercialDetails = data; this.commercialDetailsArr ...

javascriptarraysjsonangularobservable

Call a React component from an external JavaScript file

I am working on a react application that has a bundle.js file created using webpack containing all the necessary code. Recently, I started developing a separate dotnet application and I need to display the main 'App' component from my react appl ...

javascript.netreactjs

Generate a JSON structure from HTML with the help of jQuery

Issue Overview Imagine a scenario where there is a delivery of assorted candies. The delivery consists of multiple boxes, each containing various types of unique candies. Each box and candy type has its own distinct identifier. Moreover, every candy comes ...

javascriptjqueryjsonhtml-parsingscrape

Encountering an issue with html2canvas: receiving an error message stating "object

To print the div using Javascript, I encountered an issue with the generated barcode not appearing in the printed page. This led me to use the html2canvas approach to 'render' the div before printing it out. Here is the code snippet: HTML: < ...

javascriptphphtmlhtml2canvas

Unable to pass Ajax value to Laravel controller

Currently, I am facing an issue while trying to retrieve a value from an ajax request in my controller. Although my JavaScript function successfully displays the desired value in an alert, when I attempt to pass this value as data to the controller, it is ...

javascriptphpajaxlaravel

Is there a more efficient method for converting an array of objects?

Is there a more efficient way to change just one value in an array without iterating through every element? I've included the code below where I am trying to update the contact number for each user in an array. Although my current solution works, it ...

javascriptarraysvue.js

Retrieve the final ID of a dynamic div

Unable to find a solution, I am attempting to retrieve the ID of the most recently created div on the page. The code I have been using with .last() doesn't seem to be functioning correctly. My syntax may be incorrect, as I can't seem to extract a ...

javascriptjquery

What could be causing these strange white lines to show up on my AFrame meshes?

When I import a GLB scene with baked textures into A-Frame using THREE.js, I am experiencing an issue where white lines appear on my objects (pictured below). The walls are grouped meshes which may explain the lines appearing there, but I am puzzled as to ...

javascriptthree.jsaframe

Discovering an <a> element with an href attribute containing two specified strings

Here's what I have: $("a[href*='string1' && 'string2']") Unfortunately, this code didn't work for me. I also attempted: $("a:contains('string1' && 'string2')") The second one only return ...

javascriptjqueryhtml

Attempting to organize date and time down to the second

I'm currently working on sorting time with seconds included. While I am able to sort the minutes successfully, I'm facing difficulty in sorting the seconds. Despite trying various approaches and using dynamic data that needs to be sorted in desce ...

javascriptjquerymomentjs

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

Having a bit of trouble here. I'm trying to make an async request using redux-thunk in my action creator, and the code looks like this: export const downloadFromYoutube = (download) => { console.log("Hello"); return dispatch => { va ...

javascriptreactjsasynchronousreduxreact-redux

Looking for a way to detect changes in a select menu using Angular?

How can I determine with the openedChange event if there have been any changes to the select box items when the mat select panel is closed or opened? Currently, I am only able to detect if the panel is open or closed. I would like to be able to detect any ...

javascriptangulartypescriptangular-material

Updating the value of a $scope variable located within an included template in AngularJS

My setup is quite simple as outlined below. The issue I'm facing is that out of the two variables I define within the $http success callback, only one is reflected in the UI. In this scenario, I am attempting to display progress when the controller l ...

javascriptajaxangularjs

Uploading images seamlessly through ajax

Despite the abundance of tutorials, I am struggling to make them work. In my input form for file upload, I have: <input onChange="userPreviewImage(this)" type="file" accept="image/*" style="display:none"/> Here is my Javascript code: function use ...

javascriptjqueryajax

Tips for creating a useState variable within the render() function in reactjs

I'm completely new to reactjs, and I've been trying to define useState variables within the render() method of a reactjs component. However, I keep running into an error: "Invalid hook call." class ProductDefinition extends Component { construc ...

javascriptreactjs

What is the reason for the Pointer Lock API entry displaying a significant number when the window is compressed?

Take a look at these two screenshots that illustrate the issue: The first screenshot demonstrates the correct behavior - the fullscreen mode works perfectly. However, in the second screenshot, a problem arises. Depending on the size of the browser window, ...

javascripthtmlthree.js

Transmitting data from the front end to the server in React/Shopify for updating API information using a PUT request

After successfully retrieving my API data, I am now tasked with updating it. Within my component, I have the ability to log the data using the following code snippet. In my application, there is an input field where I can enter a new name for my product an ...

javascriptreactjsapiexpressshopify