Error with shader in webgl/three.js

i'm struggling with some issues in three js and need help with parallax mapping. vertex shader :

varying vec3 v_pos;
  varying vec3 v_nrm;
  varying vec2 v_txc;

  void main(){
    v_pos = position;
    v_nrm = normal;
    v_txc = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
  }

fragment shader :

  uniform vec3 camPos;
  uniform sampler2D heightMap;
  uniform sampler2D textureDiffuse;
  uniform float bumpness;

  varying vec3 v_pos;
  varying vec3 v_nrm;
  varying vec2 v_txc;

  float ApplyChainRule( float dhdu, float dhdv, float dud_, float dvd_ )
  {
      return dhdu * dud_ + dhdv * dvd_;
  }

  vec3 SurfaceGradient( vec3 n, vec3 dpdx, vec3 dpdy, float dhdx, float dhdy )
  {
      vec3 r1 = cross( dpdy, n );
      vec3 r2 = cross( n, dpdx );
      float det = dot( dpdx, r1 );

      return ( r1 * dhdx + r2 * dhdy ) / det;
  }
   
  void main()
  {
      vec3 wsViewDir = normalize( camPos - v_pos );
      vec3 wsNormal = normalize( v_nrm );
       
      vec3 dpdx = dFdx( v_pos );
      vec3 dpdy = dFdy( v_pos );
   
      vec2 uv = v_txc;
      vec2 duvdx = dFdx( uv );
      vec2 duvdy = dFdy( uv );
   
      // POM code here
       
      vec2 dhduv = texture2D( heightMap, uv ).rg;
      dhduv = ( dhduv * 2.0 - 1.0 ) * bumpness;
       
      float dhdx = ApplyChainRule( dhduv.x, dhduv.y, duvdx.x, duvdx.y );
      float dhdy = ApplyChainRule( dhduv.x, dhduv.y, duvdy.x, duvdy.y );
       
      wsNormal = normalize( wsNormal - SurfaceGradient( wsNormal, dpdx, dpdy, dhdx, dhdy ) );

      gl_FragColor = vec4(texture2D( textureDiffuse, uv )+(wsNormal * 0.5 +0.5),1.0);
   
      // lighting and shading code here
  }

Encountering this error :

THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:? : '' : syntax error

I'm having trouble identifying the issue, can someone assist me please ?

Thank you ;)

Answer №1

Were you referring to this:

The output color is determined by adding the texture color and a vector with normalized world space normals, resulting in a new color.

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

Is there a way to apply a consistent border to both the input radio button and its corresponding label once the radio button has been selected

CSS: <div class="form-check fs-3 mb-3"> <input id="first_question" name="first_question" type="radio" value="n"> <label for="first_question">no</label> </div> Is ...

Scripting events in JavaScript/jQuery are failing to trigger on elements located inside nested <div> containers

I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...

Interactive Map Displayed within a Pop-up Window

Recently, I developed a custom Google map where points are plotted and an HTML popup window appears when the image is clicked. Now, my goal is to open a file with JavaScript functions inside a lightbox/fancybox when a user clicks on an image. Below is th ...

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

Enhancing the Value of BehaviorSubject with Object Assign in Angular using Typescript and RxJs

I have a user object stored as a BehaviorSubject which is being observed. I need help figuring out how to detect if a specific value within my user object has changed. I've noticed that my current implementation doesn't seem to work correctly, a ...

execute action after a specific point in time in the video is reached

How can I hide a div after a video has been playing for a certain amount of time? The code provided below seems like it should work in theory, but is currently not doing so. Any suggestions on how to fix this issue would be greatly appreciated! <body ...

Differences between Global and Local Variables in Middleware Development

While exploring ways to manage globally used data in my research, I stumbled upon this question: See 2. Answer After integrating the suggested approach into my codebase, I encountered a problem that I would like to discuss and seek help for. I created a ...

issue encountered while passing a callback in a res.render() function

Currently, I am working on a small application where I am fetching data from remote JSON files to generate statistics that will be displayed in an EJS file later. My objective is to pass separate values for rendering and then utilize them within the EJS d ...

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

I am trying to implement a drag and drop file feature on my webpage, but for some reason, it's not working as expected. The drop zone is supposed to change its background color when I drag a file onto it, but that functionality doesn't seem to be ...

What is the significance of XmlHttpRequest's readyState being at 2 when receiving a 200 HTTP response

Currently, I am utilizing pure JavaScript (no jQuery) to send a file to the server. The PHP script on the server returns status code 200 upon completion, but the JavaScript is interpreting it as readyState == 2. The PHP code responds with status code 200: ...

When scrolling, the fixed menu bar at the top of the page is making the content below jump

I am attempting to create a fixed submenu that sticks to the top of the page when scrolling, but I am encountering some issues. The current code I have is as follows: $(window).scroll(function () { if ($(window).scrollTop() > 175) { $('#loca ...

Adjust the object's rotation by specifying its axis in Three.js

Attempting to set the rotation of an object at its own axis using the following code: object.rotateOnAxis(new THREE.Vector3(1,0,0) , Math.PI) in the render function, causes the object to rotate in every rendering cycle. Is there a method to set the rotat ...

Achieving two-way data binding in a directive without using an isolated scope

Implementing scope: { ... } in a directive creates an isolated scope that doesn't inherit from its parent. However, my usual practice has been to utilize this for easily declaring HTML attributes with bi-directional data binding: scope: { attr1: ...

Include the selected class in the relative URL

I am attempting to apply a highlight class to my selected category: My code looks like this : <div id="category"> <ul> <a href="category.php?c=electronic"> <li>Electronic</li> </a> ...

The folder cannot be created due to an invalid argument provided for the mkdir function

Having trouble running this code to create a folder that doesn't exist, while testing code updates from v13 to v14 and implementing slash commands. I'm stuck at this point. var dir = `./cha/${"<@" + interaction.member.id + "> ...

Achieving a full-height div using CSS and HTML to fill the remaining space

Here is the current layout structure I am working with: div { border: 1px solid } <div id="col_1" style="float:left;width:150px;">1</div> <div id="col_2" style="float:left;width:100px;">2</div> <div id="col_3" style="float:l ...

What steps can I take to personalize Material UI within a React application?

As someone who is new to this UI framework and React, I have been tasked with developing an application that requires more design patterns. I specifically chose a framework that does not depend on jQuery code. However, I am facing challenges when it comes ...

Having trouble getting the code to properly execute a PHP file when a button is clicked

I'm facing an issue with a button on my page. When I click on the button, jQuery-AJAX is supposed to execute PHP code from another file, but it's not working as expected. The button's code is very simple: <button type="submit" onclick=" ...

Is there a way to prevent specific objects from being dropped?

Imagine having object1, object2, and object3. They are designated for dropping only in Zone1 Now, consider object4, object5, and object6. They can only be dropped in Zone2 How do I set up this configuration? Additionally, I want object7 to be droppable ...