Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

Question

Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

I am utilizing the rotationRate data obtained from the devicemotion eventListener to manipulate a three.js scene by tilting. The scene does respond to the data accurately in terms of angle adjustments, but it produces an unsmooth motion effect. Is there a technique to achieve a smoother motion effect?

Currently, I am assigning appropriate angles for the tilt of the three.js camera by mapping the event.beta and event.gamma data. However, since the rotation data is directly used for angle updates, the outcome lacks smoothness. Even after attempting to decrease the angle value, it failed to completely smooth out the motion.

function handleDeviceMotion(event) {
    rotateX = Math.clip(parseInt((event.rotationRate.beta*10).toFixed(0)), -rotationContain, rotationContain);
    rotateY = Math.clip(parseInt((event.rotationRate.alpha*10).toFixed(0)), -rotationContain, rotationContain);
    rotateXMapped = rotateX.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateYMapped = rotateY.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateXMapped += 0.3;
    rotateYMapped += 0.3;
}

The variables rotateXMap and rotateYMap are subsequently utilized in the orbitControls.js library provided by three.js. Is there any possible way to introduce a delay between the current angle and the updated one? As someone who isn't well-versed in mathematics, I have been struggling with this issue for quite some time.

Any assistance would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

It appears that the issue you are encountering is related to the jerky animation caused by utilizing the devicemotion event, which primarily detects changes in acceleration, rather than the recommended deviceorientation event designed for capturing orientation changes. In order to ensure smoother animation, it is advised to switch to the deviceorientation event used by Three.js in its DeviceOrientation controls. You can see this functionality in action at:

As a precautionary measure, have you attempted running your scene with a simplified setup? This may help identify if low frame rate issues originate from other performance limitations.

Answer 2

It appears that the issue you are encountering is related to the jerky animation caused by utilizing the devicemotion event, which primarily detects changes in acceleration, rather than the recommended deviceorientation event designed for capturing orientation changes. In order to ensure smoother animation, it is advised to switch to the deviceorientation event used by Three.js in its DeviceOrientation controls. You can see this functionality in action at:

As a precautionary measure, have you attempted running your scene with a simplified setup? This may help identify if low frame rate issues originate from other performance limitations.

Answer 3

Answer №2

It turns out I discovered the solution to my problem - implementing the concept of "lerp interpolation" to smoothen the motion of the tilt data. This involves utilizing a formula that takes into account the future and current points, subsequently averaging them, resulting in a much smoother animation.

To gain a better understanding of lerp interpolation, I came across an impressive demonstration on CodePen. You can check it out here.

Now, let me showcase how I've integrated this updated code:

function handleDeviceMotion(event) {
    // Implementing lerp interpolation to map rotationRate data to scene tilt angles for a visually pleasing effect
    rotateX = Math.clip(parseInt((event.rotationRate.beta*10).toFixed(0)), -rotationContain, rotationContain);
    rotateY = Math.clip(parseInt((event.rotationRate.alpha*10).toFixed(0)), -rotationContain, rotationContain);
    rotateXMapped = rotateX.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateYMapped = rotateY.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateXLerp = lerp(rotateXLerp, rotateXMapped, 0.15); // 0.1 = default
    rotateYLerp = lerp(rotateYLerp, rotateYMapped, 0.15); // 0.1 = default
}

function lerp(start, end, amt) {
    return (1-amt)*start+amt*end;
}

I hope this solution proves beneficial to anyone facing a similar challenge in the future!

Answer 4

It turns out I discovered the solution to my problem - implementing the concept of "lerp interpolation" to smoothen the motion of the tilt data. This involves utilizing a formula that takes into account the future and current points, subsequently averaging them, resulting in a much smoother animation.

To gain a better understanding of lerp interpolation, I came across an impressive demonstration on CodePen. You can check it out here.

Now, let me showcase how I've integrated this updated code:

function handleDeviceMotion(event) {
    // Implementing lerp interpolation to map rotationRate data to scene tilt angles for a visually pleasing effect
    rotateX = Math.clip(parseInt((event.rotationRate.beta*10).toFixed(0)), -rotationContain, rotationContain);
    rotateY = Math.clip(parseInt((event.rotationRate.alpha*10).toFixed(0)), -rotationContain, rotationContain);
    rotateXMapped = rotateX.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateYMapped = rotateY.map(-rotationContain, rotationContain, -paneAngleContain, paneAngleContain);
    rotateXLerp = lerp(rotateXLerp, rotateXMapped, 0.15); // 0.1 = default
    rotateYLerp = lerp(rotateYLerp, rotateYMapped, 0.15); // 0.1 = default
}

function lerp(start, end, amt) {
    return (1-amt)*start+amt*end;
}

I hope this solution proves beneficial to anyone facing a similar challenge in the future!

Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

Answer №1

Answer №2

Similar questions

Verify the presence of a GET parameter in the URL

Error: The $filter function in AngularJS is not recognized

Not enough test coverage with Jest

In JavaScript, unchecking a radio button results in all options becoming uncheckable

The initial return value of $(document).height may be inaccurate, but is accurate upon recalculation

How can we efficiently loop through all the icons in React Material-UI?

What is the process for converting a string literal into raw JSON and then storing it?

Is it necessary to specify a data type for the response when making an AJAX POST request?

Windows location does not change after an XMLHttpRequest is made

Verify whether an email is already registered in firestore authentication during the signup process using Angular

Start a timer in CodeIgniter when a button is clicked and show the time elapsed

Accessing the current clicked item in $scope using an Angular Directive within ng-repeat

The ajax client is encountering an undefined response, but it is correctly processed when accessed through the

Is a fresh connection established by the MongoDB Node driver for each query?

Why am I encountering http://localhost:3000/api/auth/error?error=AccessDenied when implementing Google signin in my Next.js application?

Transform the assurance into a JSON entity

utilizing javascript once form elements are dynamically inserted

Storing data from a form by utilizing AJAX with PHP

Dynamic TypeScript class constructor argument typing determined by user input

Unexpected JavaScript behavior triggers Safari's crash on iOS platforms