Objects in Three.js Sparkling from Afar

Question

Objects in Three.js Sparkling from Afar

Currently, I am tackling a project that involves working with scenes containing objects ranging from 10 to 1000000 in size. A recurring issue I have encountered is that when dealing with the larger end of this size spectrum, the objects seem to 'shimmer'. This shimmering effect only occurs when objects intersect, and it becomes more pronounced as the camera moves away from the object.

An image showcasing the problem can be viewed here: https://i.sstatic.net/wu1lz.jpg

While I am unsure of the root cause of this problem, I have come up with a couple of possible explanations:

Firstly, it is possible that I am working with sizes that are too large for three.js / webgl to handle efficiently.

The second potential issue could be related to the camera controls that I have implemented:

    if(mouseIsDown == true){
        if(this.movementSpeed < this.maxSpeed){
            this.movementSpeed += this.acceleration
        }else{
            this.movementSpeed = this.maxSpeed
        }

    }else{
        if(this.movementSpeed > this.minSpeed){
            this.movementSpeed = this.movementSpeed/this.deceleration
        }else{
            this.movementSpeed = this.minSpeed  
        }

    }

Here, this.minSpeed is set to 0, and the camera movement is controlled by this.movementSpeed through the following actions:

var actualSpeed = delta * this.movementSpeed;
this.object.translateZ( -actualSpeed * forwardOrAuto );
this.object.translateX( actualSpeed * sideSpeed );
this.object.translateY( actualSpeed * upSpeed );

Although I initially dismissed this as the cause, it is worth noting that the shimmering persists even when the movement speed is at extremely low values like 10^-20 or -30.

Additionally, it should be mentioned that I am using r.55 version.

javascript three.js webgl

Answer 1

Answer №1

It seems like the issue you're facing is related to precision problems. Rounding errors can be exacerbated by movement, especially when working on a model of the solar system (measured in meters) with three.js. I encountered similar problems with "flickering" textures/models in my own work. As gaitat rightly pointed out, it's likely due to z-buffer depth precision issues. My partner and I found a few ways to address this challenge.

The z-buffer is non-linear, as sjbaker's website referenced by gaitat illustrates. Most z-buffer precision is concentrated in the near range. If your objects are reaching sizes of up to 1000000 units, they and the space between them are already beyond the effective precision range. One common solution, used in many video games, is to move the world instead of the player (camera). This can help increase precision as objects approach the camera. This technique is crucial for avoiding texture flickering on large distant objects or for small meshes far from the origin, where rounding errors can cause meshes to jump out of view. Implementing this strategy can be challenging, as it requires real-time calculations to move everything relative to the player and manage rounding errors effectively.

Adjusting the near and far camera settings can also impact z-buffer precision. Setting a higher far number can minimize near precision loss and enhance mid-range precision. Even if the meshes are relatively small, setting a near camera value of 10 or 100 could provide some flexibility. Camera settings are not the sole solution to z-buffer issues.

polygonOffset - This feature dictates the z-buffer hierarchy, determining which material on a mesh should be rendered on top. While it can solve some problems, it may create others and require fine-tuning. Think of it as a z-index in CSS, but more nuanced. Adjusting the offset for one material to render over a distant object may inadvertently render it over a nearby object. This may necessitate setting offsets for multiple objects, with values typically ranging between -1.0 and 1.0 and requiring careful adjustment.

depthWrite=false - This directive instructs the renderer not to write to the depth buffer, useful for materials that should always appear behind other elements, such as skyboxes and backgrounds.

Despite utilizing the aforementioned methods in our project, which involved measurements as large as 40 Astronomical Units in meters (Pluto), we still encountered mediocre results.

This phenomenon is often referred to as "z-fighting," so persevere in addressing it!

Answer 2

It seems like the issue you're facing is related to precision problems. Rounding errors can be exacerbated by movement, especially when working on a model of the solar system (measured in meters) with three.js. I encountered similar problems with "flickering" textures/models in my own work. As gaitat rightly pointed out, it's likely due to z-buffer depth precision issues. My partner and I found a few ways to address this challenge.

The z-buffer is non-linear, as sjbaker's website referenced by gaitat illustrates. Most z-buffer precision is concentrated in the near range. If your objects are reaching sizes of up to 1000000 units, they and the space between them are already beyond the effective precision range. One common solution, used in many video games, is to move the world instead of the player (camera). This can help increase precision as objects approach the camera. This technique is crucial for avoiding texture flickering on large distant objects or for small meshes far from the origin, where rounding errors can cause meshes to jump out of view. Implementing this strategy can be challenging, as it requires real-time calculations to move everything relative to the player and manage rounding errors effectively.

Adjusting the near and far camera settings can also impact z-buffer precision. Setting a higher far number can minimize near precision loss and enhance mid-range precision. Even if the meshes are relatively small, setting a near camera value of 10 or 100 could provide some flexibility. Camera settings are not the sole solution to z-buffer issues.

polygonOffset - This feature dictates the z-buffer hierarchy, determining which material on a mesh should be rendered on top. While it can solve some problems, it may create others and require fine-tuning. Think of it as a z-index in CSS, but more nuanced. Adjusting the offset for one material to render over a distant object may inadvertently render it over a nearby object. This may necessitate setting offsets for multiple objects, with values typically ranging between -1.0 and 1.0 and requiring careful adjustment.

depthWrite=false - This directive instructs the renderer not to write to the depth buffer, useful for materials that should always appear behind other elements, such as skyboxes and backgrounds.

Despite utilizing the aforementioned methods in our project, which involved measurements as large as 40 Astronomical Units in meters (Pluto), we still encountered mediocre results.

This phenomenon is often referred to as "z-fighting," so persevere in addressing it!

Answer 3

Answer №2

If your ranges are significantly large, it may be due to setting your camera's near plane close to 0 and your far plane close to 1000000. However, this can result in not having enough z-resolution. For more information on this topic, check out .

Answer 4

If your ranges are significantly large, it may be due to setting your camera's near plane close to 0 and your far plane close to 1000000. However, this can result in not having enough z-resolution. For more information on this topic, check out .

Answer 5

Answer №3

One innovative approach that has the potential to be effective is utilizing two separate scenes along with two cameras.

The first scene could be designated for close-range objects, while the second scene could cater to distant elements. Each scene would be rendered using a camera configured with zNear and zFar values tailored to the specific requirements. For instance, the close scene could have a camera with zNear set to 0.1 and zFar set to 10,000, whereas the far scene could utilize a camera with zNear of 10,000 and zFar of 6,000,000.

However, the challenge arises when attempting to synchronize the scenes by integrating TrackballControls with both cameras.

Answer 6

One innovative approach that has the potential to be effective is utilizing two separate scenes along with two cameras.

The first scene could be designated for close-range objects, while the second scene could cater to distant elements. Each scene would be rendered using a camera configured with zNear and zFar values tailored to the specific requirements. For instance, the close scene could have a camera with zNear set to 0.1 and zFar set to 10,000, whereas the far scene could utilize a camera with zNear of 10,000 and zFar of 6,000,000.

However, the challenge arises when attempting to synchronize the scenes by integrating TrackballControls with both cameras.

Objects in Three.js Sparkling from Afar

Answer №1

Answer №2

Answer №3

Similar questions

What steps can I take to rearrange my return statement within an asynchronous function?

Top method for individually choosing multiple selections from a foreach loop output

Interactive rotating display with constantly updating information

What is the total amount within a specified date range when retrieved as JSON?

Error! Unable to Inject ComponentFactoryResolver

Rendering with node.js express inside nested JS files

Elegant method for politely asking individuals utilizing IE7 and earlier versions to leave?

Steps for obtaining images using lazy loading: <img loading="lazy"

How to automatically close the menu on a Wordpress theme after clicking a link

React does not allow for images to be used as background elements

Making a single variable object as opposed to using multiple variables

Transmit console log data to a PHP webpage

Deciding the optimal time to start a new JavaScript file and effectively organizing source code

Tips on harnessing the power of PhantomJS and node.js for web scraping

How can I write the code to enable dragging the button for navigating to the next page?

Creating a function in Angular to locate each object based on its ID

Exploring the capabilities of multiple nested controllers in AngularJS

Update issue with Three.js mixer not responding to 'setTime' command

There appears to be a malfunction with WebRupee

HTML Element Split in Two by a Line in the Middle