Certain GPUs running Three.js ShaderMaterial may experience compatibility issues

Recently, I incorporated a radiant glow effect into a 3D aircraft tracker:

https://i.sstatic.net/9SnSv.jpg

The brilliance is generated through the implementation of a THREE.ShaderMaterial. Strangely, the glow effect seems to function properly on certain PCs but remains invisible on others without any error messages. After conducting tests on multiple machines and operating systems, it appears that the issue may be hardware-related rather than related to the OS.

Below is an excerpt of the code responsible for the dazzling glow effect:

private _createGlow(radius: number, segments: number) {

    let material = new THREE.ShaderMaterial({
        uniforms: {
            "c":   { type: "f", value: 0.01 },
            "p":   { type: "f", value: 6 },
            glowColor: { type: "c", value: new THREE.Color(0x002296) },
            viewVector: { type: "v3", value: this._camera.position }
        },
        vertexShader: `
        uniform vec3 viewVector;
        uniform float c;
        uniform float p;
        varying float intensity;
        void main() 
        {
            vec3 vNormal = normalize( normalMatrix * normal );
            vec3 vNormel = normalize( normalMatrix * viewVector );
            intensity = pow( c - dot(vNormal, vNormel), p );

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }`,
        fragmentShader: `
        uniform vec3 glowColor;
        varying float intensity;
        void main() 
        {
            vec3 glow = glowColor * intensity;
            gl_FragColor = vec4( glow, 1.0 );
        }`,
        side: THREE.FrontSide,
        blending: THREE.AdditiveBlending,
        transparent: true
    });

    let geometry = new THREE.SphereGeometry(radius, segments, segments);
    let mesh = new THREE.Mesh(geometry, material);
    mesh.scale.multiplyScalar(1.2);
    return mesh;
}

The setup of the scene involves the following lines of code:

this._scene = new THREE.Scene();
this._scene.add(this._universe);
this._scene.add(this._glow);
this._scene.add(this._atmosphere1);
this._scene.add(this._atmosphere2);
this._scene.add(this._earth);
this._scene.add(this._light);
this._scene.add(new THREE.AmbientLight(0x333333, 0.9));

Could this discrepancy in rendering the effect be attributed to GPU drivers or similar issues? Any suggestions on how to rectify this problem would be greatly appreciated. Thank you!

Answer №1

There are numerous uncertainties present in your inquiry. Since we do not have access to all the systems where you've executed the code, it's challenging to simply correct your code and provide a functional snippet in return.

However, a universally beneficial approach in 3D programming is differential debugging - dividing and conquering the issue.

The shaders utilize functions supported by hardware manufactured within the last decade at least, so I recommend investigating broader issues. Initially, I suspect several potential culprits:

  • Culling - the mesh may be improperly culled during rendering
  • Depth fail - the mesh could be failing the depth test (reason unclear from the code provided)
  • Possible improper initialization of ambient uniforms (normalMatrix, etc.)

In such cases, start with the most basic shader and gradually escalate until isolating the statement causing the faulty behavior.

Begin with a shader outputting white color or glowColor, disable culling, and observe if the sphere is visible.

  • If yes - depth check is functioning correctly;
  • If no - depth check error likely exists.

Enable culling and verify sphere visibility.

  • If visible - culling is adequate (may involve back faces);
  • If not visible - incorrect face culling.

Proceed with debugging normal vectors, pass them to the pixel shader, and output as fragment colors using (n * 0.5) + 0.5 for a world-space "normal map." Confirm its appearance.

  • If fine - ambient uniforms speculated to be accurate;
  • If not fine - potential three.js bug.
  • Introduce intensity calculation and assess functionality. Expectedly, complete glow effect reconstruction might reveal anomalies. Why might this occur?

    Consider implications if GPU encounters division by zero:

    • No immediate error notification;
    • Avoidance suggested due to possible NaN output leading to nonsensical results.

    A probable reason for code malfunctioning could be

    pow( c - dot(vNormal, vNormel), p )
    yielding NaN when the base is negative, inducing varied responses depending on GPUs' handling of NaNs.

To summarize: Comprehensive understanding is essential. The methodology surpasses the outcome in significance.

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

Firestore data displaying as null values

Recently, I encountered CORS errors while polling the weather every 30 seconds in my program. Upon investigating, I discovered that the city and country were being interpreted as undefined. To fetch user data from my users' table, I utilize an Axios ...

Unable to locate a differ supporting element '[object Object]' that is categorized as 'object'

My goal is to display the name property, but store it as the value of _id for the mat-select control. I also want to save the selected option in the selectedIngridient variable. However, I encountered the following error message: "Cannot find a differ ...

Creating an id automatically using MYSQL with sequelize and typescript is not possible

I recently started using typescript and I am currently following a tutorial. Most tutorials I have come across use a package to automatically generate an id for the table. My query is: Is there a way to configure sequelize to create the table id with auto- ...

Tips for synchronizing object updates between parent and child components in React applications

I have a dilemma with my 2 components: The parent component looks like this: @Component({ selector: 'parent', template: ` <child [obj]="obj"> </child> `, styleUrls: [''], }) export class ParentComponent impleme ...

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring

My current setup involves a class based component that looks like this class ArInput extends React.Component { render() { const { shadowless, success, error } = this.props; const inputStyles = [ styles.input, !shadowless && s ...

I am facing issues with my filtering functionality on the Angular Typescript mat-table component

I am facing issues while trying to filter my table, the reaction is not correct and I can't seem to find where I went wrong. Here is the HTML part : <mat-form-field appearance="outline"> <mat-label>Search</mat-label> & ...

Error: The specified updateTag type in the Angular SEO service is not compatible

I am in the process of developing an SEO service using Angular's Meta service (https://angular.io/api/platform-browser/Meta) Within the service, there is a method for managing social media tags that seems to be encountering issues and producing the f ...

Oops! Looks like you forgot to provide a value for the form control named <name>. Make sure to fill

I have encountered an issue with a nested operation. The process involves removing an offer and then saving it again as a repeating one. However, the problem arises when I try to use patchValue() on the item in offerList[index] after saving the repeating ...

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

I am currently facing an issue with a function that takes a constructor as a parameter and creates an instance based on that constructor. When attempting to check the type of the constructor, I encountered an error. Below are some snippets of code that I ...

Guide on executing .ts script file and building angular 5 with NPM

I am facing an issue with running a file that has a .ts extension before executing npm run build to build my Angular 5 project. package.json "scripts": { "ng": "ng", "start": "ng serve", "compile": "npm-run-all myts build", "myts": "ts-no ...

Setting an expiry date for Firestore documents

Is it feasible to set a future date and time in a firestore document and trigger a function when that deadline is reached? Let's say, today I create a document and specify a date for the published field to be set to false fifteen days later. Can this ...

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

I seem to be struggling with understanding how TSyringe handles classes with dependencies. To illustrate my issue, I have created a simple example. In my index.tsx file, following the documentation, I import reflect-metadata. When injecting a singleton cl ...

The component is no longer able to locate the imported element when it is being shared

Recently, I imported a component into the shared module in order to use it across 2 different modules. However, upon recompiling the app, an error message appeared stating that the jodit-editor, which is utilized by the shared component, is not recognized ...

Ways to access the properties of a component in React

I am working on a component that is designed to accept another component as a prop. In addition to passing down the child component, it also passes down any other props that it receives. Here is an example of what I am trying to achieve: interface FormGro ...

React-pdf has encountered a situation where more hooks were rendered compared to the last render cycle

I am currently integrating react-pdf to display a PDF document in a web view. The React application is built with TypeScript and Next.js. This is the code I have written so far: const MyPage: NextPage = () => { // some code here const [numPages, setN ...

Declaring properties for an interface

I've recently started using Typescript and I'm facing a problem with some interface props. There is an error message that says "Property 'services' does not exist on type 'IntrinsicAttributes & AkkordionProps[]", I'm confu ...

Testing the receiveMessage function in SQS using Jest unit tests

Struggling to find the right approach for unit testing this function. I almost have it, but can't quite nail it down. Take a look at the function below: receiveMessage(callback: Function): any { this.sqs.receiveMessage( this.params, ...

Troubleshooting issues with glTF 2.0 animation functionality

Recently, I decided to delve into the world of glTF 2.0 models with animation for a project I'm working on. As I attempted to update the THREE.animationMixer, I encountered a warning that read: THREE.Matrix3: .getInverse() can't invert matrix, d ...

Learn how to resubscribe and reconnect to a WebSocket using TypeScript

In my Ionic3 app, there is a specific view where I connect to a websocket observable/observer service upon entering the view: subscribtion: Subscription; ionViewDidEnter() { this.subscribtion = this.socket.message.subscribe(msg => { let confi ...

Removing undefined elements from an array

Could somebody clarify why, in this particular scenario: const dataValues: ValueRange[] = res.data.valueRanges.filter((range: ValueRange) => range.values); const formattedValues: Array<SheetData | undefined> = dataValues.map(this.formatSheetRang ...