There was an issue compiling the dynamically generated shader in THREE.JS

Question

There was an issue compiling the dynamically generated shader in THREE.JS

I am attempting to utilize particles to display falling snow in a 3D scene without creating shaders directly on the HTML page. Due to project constraints, adding specific scripts is not allowed and many additional scripts are loaded dynamically rather than included in the HTML page using <script src=''>.

Encountering the following errors (short version: http://pastebin.com/KqiZze49, full version: http://pastebin.com/LZHhCnuh):

THREE.WebGLShader: Shader couldn't compile. three.min.js:592(anonymous function) 
three.min.js:592(anonymous function) three.min.js:588initMaterial three.min.js:566z
three.min.js:488renderBuffer three.min.js:544v three.min.js:483render 
three.min.js:556Rekod3DBuildings.Engine.renderScene rekod3d-new.js:668
(anonymous function) new-index.html:71
THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:68: 'gl_FragColor' : undeclared identifier
ERROR: 0:68: 'assign' :  cannot convert from '4-component vector of float' to 'float'
ERROR: 0:68: 'gl_PointCoord' : undeclared identifier
ERROR: 0:68: 'texture2D' : no matching overloaded function found

The issue arises when generating shaders dynamically in JavaScript but incorporating them as pre-made parts in the HTML page eliminates the errors, showcasing correct results as seen in the screenshot above.

Including shaders in the HTML page resolves any errors that occur. While it may seem that the incorrect creation of shaders in JavaScript is the root cause, there are peculiarities worth exploring:

1). How are the shaders generated in JavaScript?

http://pastebin.com/HncUKMUL

Snippet shared at http://pastebin.com/HncUKMUL showcases the process of creating vertex and fragment shaders in JavaScript. The functions ensure proper shader generation and addition.

2). After their creation, verifying if the shaders are successfully added is crucial:

Referencing the screenshot, it can be observed that the shaders have been successfully incorporated into the project.

Source code responsible for preparing particles available at http://pastebin.com/HgLHJWFu:

The source code sets up snow particles by loading a texture and defining attributes and uniforms necessary for rendering. A custom shader material is created, followed by the population of particles, each with unique properties.

If you have any insights or advice on resolving the dilemma, your assistance would be greatly appreciated.

javascript three.js glsl webgl shader

Answer 1

Answer №1

After examining the code snippet in the image you provided, it appears that you have inadvertently swapped the fragment shader text with the vertex shader, leading to the error regarding gl_FragColor from the shader compiler. Reversing these should likely resolve the issue. :-)

Answer 2

After examining the code snippet in the image you provided, it appears that you have inadvertently swapped the fragment shader text with the vertex shader, leading to the error regarding gl_FragColor from the shader compiler. Reversing these should likely resolve the issue. :-)

Answer 3

Answer №2

Is it absolutely necessary to navigate through the DOM?

I have found a way to generate shaders dynamically

THREE.SlicedBoxGeometry.prototype.GetVertexShader = function()  {
    var r = "";

    r+= "uniform vec4 uClipPlane1;              \n";
    r+= "uniform vec4 uClipPlane2;              \n";
    r+= "uniform vec4 uClipPlane3;              \n";
    r+= "varying vec3 vPos;                     \n";


    r+= "void main()                                                \n";
    r+= "{                                                  \n";
    r+= "   vec3 newPosition = position;                            \n";

    r+= "   if (position.x == " + this.width_half.toFixed(2) + " ) {            \n";
    r+= "       newPosition.x = - uClipPlane1.w / uClipPlane1.x;        \n";
    r+= "   }                                                   \n";
    r+= "   if (position.y == " + this.height_half.toFixed(2) + ") {            \n";
    r+= "       newPosition.y = - uClipPlane2.w / uClipPlane2.y;        \n";
    r+= "   }                                                   \n";
    r+= "   if (position.z == " + this.depth_half.toFixed(2) + ") {         \n";
    r+= "       newPosition.z = - uClipPlane3.w / uClipPlane3.z;        \n";
    r+= "   }                                                   \n";
    r+= "   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );\n";
    r+= "   vPos = newPosition; \n";
    r+= "}\n";

    return r;
}

Perhaps not the most efficient method, but it does get the job done...

The only reason for embedding a shader in the DOM is like this example:

<script type="something-not-javascript" id="someId">
shader code goes here
</script>

You can then access it using

var shaderSource = document.getElementById("someId").text

The advantage of placing it in the DOM is that you can easily modify it without having to add quotes to each line...

Alternatively, if you prefer to include it in JavaScript, you can use a format similar to this:

THREE.SlicedBoxGeometry.prototype.GetVertexShader = function()  {
  return [  
    "uniform vec4 uClipPlane1;              ",
    "uniform vec4 uClipPlane2;              ",
    "uniform vec4 uClipPlane3;              ",
    "varying vec3 vPos;                     ",
    "",
    "",
    "void main()                                                ",
    "{                                                  ",
    "   vec3 newPosition = position;                            ",

    "   if (position.x == " + this.width_half.toFixed(2) + " ) {            ",
    "       newPosition.x = - uClipPlane1.w / uClipPlane1.x;        ",
    "   }                                                   ",
    "   if (position.y == " + this.height_half.toFixed(2) + ") {            ",
    "       newPosition.y = - uClipPlane2.w / uClipPlane2.y;        ",
    "   }                                                   ",
    "   if (position.z == " + this.depth_half.toFixed(2) + ") {         ",
    "       newPosition.z = - uClipPlane3.w / uClipPlane3.z;        ",
    "   }                                                   ",
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );",
    "   vPos = newPosition; ",
    "}",
  ].join("¥n");
};

Answer 4

Is it absolutely necessary to navigate through the DOM?

I have found a way to generate shaders dynamically

THREE.SlicedBoxGeometry.prototype.GetVertexShader = function()  {
    var r = "";

    r+= "uniform vec4 uClipPlane1;              \n";
    r+= "uniform vec4 uClipPlane2;              \n";
    r+= "uniform vec4 uClipPlane3;              \n";
    r+= "varying vec3 vPos;                     \n";


    r+= "void main()                                                \n";
    r+= "{                                                  \n";
    r+= "   vec3 newPosition = position;                            \n";

    r+= "   if (position.x == " + this.width_half.toFixed(2) + " ) {            \n";
    r+= "       newPosition.x = - uClipPlane1.w / uClipPlane1.x;        \n";
    r+= "   }                                                   \n";
    r+= "   if (position.y == " + this.height_half.toFixed(2) + ") {            \n";
    r+= "       newPosition.y = - uClipPlane2.w / uClipPlane2.y;        \n";
    r+= "   }                                                   \n";
    r+= "   if (position.z == " + this.depth_half.toFixed(2) + ") {         \n";
    r+= "       newPosition.z = - uClipPlane3.w / uClipPlane3.z;        \n";
    r+= "   }                                                   \n";
    r+= "   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );\n";
    r+= "   vPos = newPosition; \n";
    r+= "}\n";

    return r;
}

Perhaps not the most efficient method, but it does get the job done...

The only reason for embedding a shader in the DOM is like this example:

<script type="something-not-javascript" id="someId">
shader code goes here
</script>

You can then access it using

var shaderSource = document.getElementById("someId").text

The advantage of placing it in the DOM is that you can easily modify it without having to add quotes to each line...

Alternatively, if you prefer to include it in JavaScript, you can use a format similar to this:

THREE.SlicedBoxGeometry.prototype.GetVertexShader = function()  {
  return [  
    "uniform vec4 uClipPlane1;              ",
    "uniform vec4 uClipPlane2;              ",
    "uniform vec4 uClipPlane3;              ",
    "varying vec3 vPos;                     ",
    "",
    "",
    "void main()                                                ",
    "{                                                  ",
    "   vec3 newPosition = position;                            ",

    "   if (position.x == " + this.width_half.toFixed(2) + " ) {            ",
    "       newPosition.x = - uClipPlane1.w / uClipPlane1.x;        ",
    "   }                                                   ",
    "   if (position.y == " + this.height_half.toFixed(2) + ") {            ",
    "       newPosition.y = - uClipPlane2.w / uClipPlane2.y;        ",
    "   }                                                   ",
    "   if (position.z == " + this.depth_half.toFixed(2) + ") {         ",
    "       newPosition.z = - uClipPlane3.w / uClipPlane3.z;        ",
    "   }                                                   ",
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );",
    "   vPos = newPosition; ",
    "}",
  ].join("¥n");
};

There was an issue compiling the dynamically generated shader in THREE.JS

Answer №1

Answer №2

Similar questions

Exploring the Angular Checkbox n-Change - is it really all about 'this'?

Vue JS ensures that it has all the necessary data before proceeding with the

arrow function implemented in a React hook for handling onClick event

Storing information in a PHP database

Best practice for spreading computed values in Angular 2

Steps for clearing a set of checkboxes when a different checkbox is selected

Issue with data entry: unable to enter the letter 'S' in search field

Implementing state management in ReactJS

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

The mesh takes on a more defined geometric shape once it has been processed using ThreeCSG

Is there a way to showcase AJAX responses in the exact sequence they were dispatched, all without relying on queuing or synchronous requests?

The challenge of mocking methods/hooks remains when utilizing `jest.spyOn` in Jest

Activate a jQuery collapsible feature through an external hyperlink

What is the process for creating a custom Javascript function that can seamlessly integrate with other Javascript libraries?

Error message: "Module not found" encountered while executing test case

Detecting incorrect serialized data entries based on data types

Regular expressions are effective tools, but they may not be as functional within an

What strategies can be employed to generate new subpages when there are modifications to the API (in JSON format

Every key must be a string or number; received a function instead

Creating dynamic and interactive web pages can be achieved by utilizing either $_POST or $_GET with Modal,