Shaky xy positions while mapping a vector to NDC

Question

Shaky xy positions while mapping a vector to NDC

Exploring ThreeJS has been an intriguing experience for me, especially when projecting vectors in the world space onto normalized device coordinates (NDC). Surprisingly, everything works flawlessly without any hiccups.

However, a noticeable issue arises when swiftly panning the view, resulting in a significant amount of jitter in the x/y coordinate produced by the projection. While object #2, which orbits around the origin, shows less obvious jitter, object #1 positioned at the origin should remain stationary as the camera pans, only to orbit around the origin:

https://i.sstatic.net/PJO5j.gif

Initially, I suspected that the DOM updates might not be keeping pace with the rAF callback execution. However, upon inspecting the x/y coordinates of object #1, I observed the same jittering behavior. For instance, focusing solely on the x-coordinate, it fluctuates around the value of 323.50 while rotating the camera, despite pointing directly at the vector's center:

https://i.sstatic.net/22E1n.png

Take a look at the example provided below:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// Rest of the JavaScript code and example omitted for brevity

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  background-color: #555;
  width: 48px;
  height: 48px;
  border: 4px solid #fff;
  border-radius: 50px;
  transform: translate(calc(var(--x, 0) - 50%), calc(var(--y, 0) - 50%));
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.146.0/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dca8b4aeb9b99cecf2ede8eaf2ec">[email protected]</a>/examples/js/controls/OrbitControls.js"></script>

javascript three.js

Answer 1

Answer №1

To achieve the desired result, ensure that you call camera.updateMatrixWorld(); before executing project(camera) in order to utilize the current matrix for accurate calculations.

In a practical scenario where the overlayElement and the scene require full synchronization in each frame, it is recommended to first invoke controls.update() and renderer.render(scene, camera), and then proceed with updating the overlays as shown below.

controls.update();
renderer.render(scene, camera); // the renderer.render() function automatically includes camera.updateMatrixWorld()

// camera.updateMatrixWorld();

pointsToProject.forEach((vector, i) => {
  const {
    x,
    y
  } = vector.clone().project(camera);
  :
});

// controls.update();
// renderer.render(scene, camera);

Answer 2

To achieve the desired result, ensure that you call camera.updateMatrixWorld(); before executing project(camera) in order to utilize the current matrix for accurate calculations.

In a practical scenario where the overlayElement and the scene require full synchronization in each frame, it is recommended to first invoke controls.update() and renderer.render(scene, camera), and then proceed with updating the overlays as shown below.

controls.update();
renderer.render(scene, camera); // the renderer.render() function automatically includes camera.updateMatrixWorld()

// camera.updateMatrixWorld();

pointsToProject.forEach((vector, i) => {
  const {
    x,
    y
  } = vector.clone().project(camera);
  :
});

// controls.update();
// renderer.render(scene, camera);

Shaky xy positions while mapping a vector to NDC

Answer №1

Similar questions

Strange error message regarding ES6 promises that is difficult to interpret

When an import is included, a Typescript self-executing function will fail to run

Preventing an image from being repeated when using Canvas drawImage() without having to clear the entire canvas

Issue with Window.close() not working to close the current tab

When attempting to call the remove() function of an AFrame component, an error occurs stating that the property 'object3D' is undefined

"Despite the null date in Node.js, the validation for expiration dates less than Date.now() is still being enforced

Generate a novel item by organizing the key of an array of objects

What is the best way to automatically set today's date as the default in a datepicker using jQuery

javascript The onclick function works only for a single interaction

Utilizing AngularJS "controller as" syntax within templates

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Developing with Phonegap Build: A Guided Process

Unable to execute an Angular 2 application within Visual Studio 2015

Is there a way to prevent a background video from automatically playing whenever the user navigates back to the home page?

Utilizing lazy evaluation, multiple functions are triggered by ng-click in succession

Unable to access npm run build on localhost

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

What strategies can be utilized to condense code when needing to adjust a className based on various props?

Understanding the time complexity of Object.entries()

Modifying the background image of div elements with JQuery in a loop function is ineffective when using Google Chrome