The issue of Three.js SkinnedMesh jittering arises when it is distant from the scene's root (0,0,0)

Question

The issue of Three.js SkinnedMesh jittering arises when it is distant from the scene's root (0,0,0)

In my current project, I am developing a third-person RPG style game using Three.js and Blender. The terrain in the game world is tiled and loops endlessly in all directions, triggered when the player object approaches defined edges along the z or x-axis. The FBX importer is being utilized, and the game runs smoothly on most platforms.

However, I have encountered an issue on IOS devices where, when the player object is moved a significant distance from the scene root, the surface materials start to jitter and break apart. This problem worsens the further the player object is from the root, likely due to how IOS devices handle floating point calculations. I have come across some references to similar issues in these threads:

GitHub Three.js
Related (from '04)
Related from '07

While I have tried multiple approaches to solve this problem, I have not found a successful solution yet. I am hesitant to move the world instead of the player object, as I have struggled with implementing object rotations on the y-axis and shifting pivot points. Matrix transforms of the mesh have also proven to be ineffective.

Is there a simpler way to reset the origin or scene root to the player's current position, similar to how it is done with cameras, lights, positions, and rotations? Any suggestions would be greatly appreciated as I aim to make this project compatible with IOS devices.

Thank you for your help in advance.

javascript ios three.js

Answer 1

Answer №1

Dealing with floating-point precision issues presents you with two possible solutions:

Adjust the scale of your virtual world. For instance, if your protagonist is a towering 1000 units tall, you may be encountering precision problems. Scaling down the character to 10 or even 1 unit in height, and proportionally scaling other elements, can help avoid these issues.
Alternatively, you can isolate your character from the environment and move the environment independently. Consider this approach:

scene = new THREE.Scene();

// Features of the environment are added to a separate group
environment = new THREE.Group();
environment.add(trees);
environment.add(streets);
environment.add(buildings);

character = new THREE.Mesh(geometry, material);

// Environment is added separately from the character
scene.add(environment);
scene.add(character);

// Instead of moving the character directly,
// move the environment in the opposite direction
environment.position.set(-x, -y, -z);

By keeping everything close to 0, 0, 0, visible elements are less likely to encounter precision issues. When applying rotations, follow the same principle but in the reverse direction for the environment.

Answer 2

Dealing with floating-point precision issues presents you with two possible solutions:

Adjust the scale of your virtual world. For instance, if your protagonist is a towering 1000 units tall, you may be encountering precision problems. Scaling down the character to 10 or even 1 unit in height, and proportionally scaling other elements, can help avoid these issues.
Alternatively, you can isolate your character from the environment and move the environment independently. Consider this approach:

scene = new THREE.Scene();

// Features of the environment are added to a separate group
environment = new THREE.Group();
environment.add(trees);
environment.add(streets);
environment.add(buildings);

character = new THREE.Mesh(geometry, material);

// Environment is added separately from the character
scene.add(environment);
scene.add(character);

// Instead of moving the character directly,
// move the environment in the opposite direction
environment.position.set(-x, -y, -z);

By keeping everything close to 0, 0, 0, visible elements are less likely to encounter precision issues. When applying rotations, follow the same principle but in the reverse direction for the environment.

The issue of Three.js SkinnedMesh jittering arises when it is distant from the scene's root (0,0,0)

Answer №1

Similar questions

Develop an onclick function with an href attribute

Determining the Percentage of a Bar Chart

Implementing specific CSS styles for different routes in Angular 5: Use Bootstrap CSS exclusively for admin routes

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

Performing an HTTP request response in JavaScript

Reposition the Column, Filter popover within the MUI Data Grid Pro

Creating methods in Vue that can alter elements created during the mounted lifecycle hook can be achieved by defining functions

What is the best way to set up TypeScript to utilize multiple node_modules directories in conjunction with the Webpack DLL plugin?

Strikeout list on click of a mouse

Exploring the DOM with jQuery to effectively select multiple elements

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Troubleshooting Axios Error while Sending Data in MERN Stack Application

In search of assistance with a persistent react.js error plaguing my work

Is there a way to programmatically display modal segues based on a button tap in iOS 6?

Is there a way to dynamically change the height in jQuery/JavaScript?

What is the best way to incorporate a custom event listener into my React Native component?

What is the best way to incorporate interactive columns in DataTables?

Exploring the capabilities of rowGroup within DataTables

"Resolving the problem of populating an empty array with JSON

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL