Clouds marred by a unpleasant visual presentation

I've been following the instructions on this specific tutorial, but I'm attempting to scale it up significantly (increasing the radius to 100000 units).

It seems like the size may be affecting the outcome, as the clouds in my earth render are appearing distorted. Similar to the tutorial, I am using two spheres and three textures (earth map, bump map, clouds).

Here is the flawed result (which becomes more pronounced as the clouds get closer):

The glitch becomes more noticeable as the clouds approach the planet's surface. When the clouds are positioned further away (although not realistic), the issue disappears entirely.

Any suggestions on how to tackle this issue?

javascriptthree.jswebglzbuffer

Answer №1

To improve performance, consider utilizing a logarithmic depth buffer instead of the standard linear one. It's a straightforward adjustment - simply enable logarithmicDepthBuffer when initializing your THREE.WebGLRenderer, like this:

var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true});

For a visual example and further reference, check out:

While using polygonOffset as recommended by LJ_1102 is an option, it should generally not be required.

Answer №2

The issue you are facing is known as z-fighting, which occurs due to inadequate depth buffer resolution.

There are three possible solutions to address this problem:

  1. Create or utilize a multi-texture shader that displays all three textures on a single sphere.

  2. Adjust the distance between the faces of the sphere or tweak the near and far clipping planes distances.

  3. Implement polygonOffset along with the POLYGON_OFFSET_FILL renderstate to alter depth values written by the outer sphere. For further information on polygonOffset, refer to this resource.

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

Determine the frequency of occurrences for each item within an array

Here is the code snippet I created: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link href="app.css" rel="stylesheet" type="text/css"/& ...

javascriptangularjsarraysdomweb-applications

What is the best way to implement rotation functionality for mobile devices when dragging on a 3D globe using D3.js and an HTML canvas?

I have been experimenting with the techniques demonstrated in Learning D3.js 5 mapping to create a 3D globe and incorporate zoom and rotation functionalities for map navigation. Here is the function that handles both zooming and dragging on devices equipp ...

javascripthtmld3.jscanvas

Tips for sending multiple identical POST parameters

Currently, I'm in the process of developing a new user interface for a website that I frequently use. My approach involves utilizing Node.js along with request and cheerio to scrape data from various web pages. However, I've encountered an issue ...

javascriptnode.jspostrequest

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

javascriptjqueryhtmlnode.jsmongodb

How can I iterate through a variable length using AngularJS templates?

I'm currently working on a project where the car.images_length variable holds a specific number, let's say it's "4". My goal is to iterate through this variable and create 4 <li> elements based on its value. Through logging with JavaS ...

javascriptangularjs

Processing the retrieved object from Dropbox API using Node.js and Express

I've been attempting to carry out a simple task like uploading a file to Dropbox. The file uploads successfully, but I'm in need of the response that contains details such as the file name, size, and path. I understand that I'm getting lost ...

javascriptnode.jsexpressdropbox-api

A solution to replace Object.entries() for Internet Explorer compatibility in ReactJS

After spending several weeks developing a web application, everything was going smoothly until I reached the testing phase in Internet Explorer. To my surprise, one issue remained unresolved - the lack of support for Object.entries(). Despite my attempts t ...

javascriptreactjsecmascript-6

Getting the iframe onload event in an ASP.NET application

I have integrated ReportViewer to display SSRS reports on my .aspx page. However, since the ReportViewer is rendered as an iframe in the browser, I am looking for a way to trigger a JavaScript function every time the iframe loads. Using window.onload w ...

javascriptasp.netreportviewer2008

Utilizing jQuery to select an attribute containing a special character

There is a special div with a unique data-id: <div data-id=""> </div> I tried to target this div using jQuery, but it didn't work as expected: jQuery("[data-id='']").text('hello'); Can anyone help me on how to ...

javascriptjquery

What is causing the issue with updating the user in MongoDB using this code?

Currently, I am working on fetching a team's schedule from an excel file and then adding those shifts to the user's shifts in MongoDB. I have tried adding them to an object first and then to the user's shifts field, but nothing seems to be h ...

javascriptnode.jsmongodbexpress

Utilizing ReactJS: Expanding my knowledge of updating array object indexes dynamically when removing elements

Currently, I am in the process of creating a to-do list application to improve my skills in working with ReactJS. This is how my initial state looks like: const [listx, setlistx] = useState( [ {id: 0, flavor: 'strawberry', ...

javascriptarraysreactjs

Replace all existing content on the webpage with an exciting Unity game upon clicking

In an interesting experiment, I am trying to hide a secret href that, once clicked, has the power to wipe out everything on the page, leaving it temporarily blank before replacing it with a captivating Unity game that takes over the entire page. Let me sh ...

javascripthtmljqueryfunctionunity-game-engine

issue in jquery: ajax promise not returning any value

My code snippet: var testApp = (function($){ var info = [{ "layout": "getSample", "view": "conversations", "format": "json", }]; var Data = 'default'; function fetchInfo(opt) { return new Promis ...

javascriptjqueryajax

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

javascriptjquerytypescriptpopover

After activating the rewrite feature on Tomcat valve, JavaScript is loading twice

I've implemented the Tomcat rewrite valve in my single-page application to direct all requests, except for static resources, to my index.html file. Here is what my rewrite.config looks like: RewriteCond %{REQUEST_URI} (?!.*\.(?:jpg|png|css|js|js ...

javascriptjquerytomcaturl-rewritingtomcat-valve

Frontend is refusing to remove items from the shopping cart, while the backend is functioning properly in doing so

I've been working on a shopping cart project using Vanilla JS. The interface handles DOM logic, while the backend deals with array manipulation. The issue I'm facing is with a button that's supposed to remove items from the cart. Despite pa ...

javascriptarrays

What is the best method for me to filter the values in my array?

I need to add a value to an array based on certain conditions. My code looks something like this: var newEmployee = []; $scope.employees = [{'id':1, 'new':true},{'id':2, 'new':false}{'id':3, 'new&apo ...

javascriptarraysangularjs

Errors have been observed when using JavaScript variables that begin with the symbol $

For the longest time, I've used JavaScript variable names that begin with $ to signify that they hold jQuery values. For example: $buttons = $( 'button' ); However, a couple of nights ago, I encountered an issue when loading the page in the ...

javascriptjqueryvariablesnaming-conventions

I am unable to achieve negative X degree rotation of the image while using mousemove to rotate it

I need assistance with moving a picture in 3D. I want the offsetX of the mouse to be positive when it's past half of the picture, and negative otherwise. How can I achieve this effect for rotation degrees? This is what I have tried: $('#img ...

javascriptjquery

Express server encounters a 404 error while processing a POST request

Recently, I encountered an issue while trying to post data to my express server using a function that is triggered by clicking a button. Here's the code snippet of the function: const fetchData = async () => { const response = await fetch(&apos ...

javascriptnode.jsexpresscors