Discrepancies in rounding calculations between three.js on Chrome and Firefox

Question

Discrepancies in rounding calculations between three.js on Chrome and Firefox

In my three JS scene, I have a plane positioned and rotated in a certain way. When I send a raycast towards this plane and project an object onto it, everything works perfectly fine in chromium but gets turned upside down in firefox.

This discrepancy is causing significant issues for me, and it seems to be related to a rounding error when the mesh updates the matrix.

To illustrate the problem, consider the following example:

const test = new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial());
test.position.copy(new THREE.Vector3(-0.0800582263098657,0,-0.003907569688712309))
test.rotation.copy(new THREE.Euler(-1.5707963267948966,0,0, "XYZ"))
test.updateMatrix()
const asString = `[${test.matrix.elements.join(",")}]`
const chromeString = "[1,0,0,0,0,2.220446049250313e-16,-1,0,0,1,2.220446049250313e-16,0,-0.0800582263098657,0,-0.003907569688712309,1]"
console.log(`
${asString}
${chromeString}
${asString === chromeString ? "equal" : "not equal"}
`)

When running this code, you'll see that the output is equal for chromium but not for firefox. The difference lies in the sign change of the fifth element, which may seem small due to the 'e-16' value, but it causes the projection to flip in firefox.

I've experimented with manually setting the matrix to match the result in chromium (disabling matrixAutoUpdate), and that resolved the issue in firefox. Therefore, I believe the root cause lies within this calculation.

My question is: Is there a way to ensure consistent calculations across browsers by sacrificing some precision? I'm willing to make adjustments to achieve uniform behavior.

javascript three.js

Answer 1

Answer №1

After much effort, I was able to come up with a solution that may not be the most efficient or elegant.

function adjustMatrixPrecisionOnObject(object: THREE.Object3D) {
    const update = object.updateMatrix;
    object.updateMatrix = function updateMatrix() {
        const precision = 10000000
        const round = (num) => Math.round(num * precision) / precision;
        this.position.setX(round(this.position.x));
        this.position.setY(round(this.position.y));
        this.position.setZ(round(this.position.z));
        this.rotation.set(
            round(this.rotation.x),
            round(this.rotation.y),
            round(this.rotation.z),
            this.rotation.order
        )
        update.call(this, {});
    }
}

When using this method with my object, the values are rounded to ensure compatibility with both V8 and SpiderMonkey. While it gets the job done, there may be a more optimal solution waiting to be discovered.

Answer 2

After much effort, I was able to come up with a solution that may not be the most efficient or elegant.

function adjustMatrixPrecisionOnObject(object: THREE.Object3D) {
    const update = object.updateMatrix;
    object.updateMatrix = function updateMatrix() {
        const precision = 10000000
        const round = (num) => Math.round(num * precision) / precision;
        this.position.setX(round(this.position.x));
        this.position.setY(round(this.position.y));
        this.position.setZ(round(this.position.z));
        this.rotation.set(
            round(this.rotation.x),
            round(this.rotation.y),
            round(this.rotation.z),
            this.rotation.order
        )
        update.call(this, {});
    }
}

When using this method with my object, the values are rounded to ensure compatibility with both V8 and SpiderMonkey. While it gets the job done, there may be a more optimal solution waiting to be discovered.

Discrepancies in rounding calculations between three.js on Chrome and Firefox

Answer №1

Similar questions

Encountering an issue with the date pipe in Angular that prevents

X-ray Picker failing to retrieve a value

Having difficulty encapsulating three.js rendered particles within a single div

`an error occurs when trying to loop through an object and add a key``

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

Tips on implementing a script injected through the JS console to update form data in an Angular webpage and ensure that the changes are successfully saved

What is the best way to eliminate a count from an array when a button is deselected using JavaScript?

Creating cutting-edge Hololens apps with WebGL and Three.js

Dynamic css property implementation in Vue list rendering

What is the best way to retrieve a value from a JSON object using AngularJS?

Is it advisable to subscribe to the entire database upon startup in Meteor?

The jQuery menu is malfunctioning in Internet Explorer due to the Document Mode being set to Quirks

nodemon is launching an endless number of .node-xmlhttprequest-sync files

Utilizing JQuery for real-time total updates

Guide to locating and substituting two integer values within a string using JavaScript

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

Automatically update div content using AJAX in a different approach

Adding a list without a specific order into a paragraph with the help of jQuery

Striving to implement a dynamic dropdown menu using React's <select> element and rendering users from an array as selectable options

I am experiencing difficulties in accessing the DOM