зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1673097 [wpt PR 26268] - Cleanup quaternion operations for rotation transforms., a=testonly
Automatic update from web-platform-tests Cleanup quaternion operations for rotation transforms. The computation of quaternions during matrix decomposition appeared to be based off of the matrix transpose. Indexing in the quaternion calculation is consistent with row-major ordering; however, the "rows" variable is actually column major order (goes back to the original implementation of unmatrix in Graphics Gems II). The rotation matrix constructed from the quaternions also appeared to be assuming row-major ordering. These discrepancies were mostly corrected for by flipping the direction of the quaternion when extracting from the matrix. This patch cleans up the implementation to avoid implicit coordinate transformations and making the calculations consistent for column-major ordering in the rotation matrix. Additional comments in the code should help prevent similar errors in the future. Combining rotations without a common axis or rotation was needlessly complex, requiring a conversion to matrices, followed by matrix blending and rotation extraction from the resulting matrix. In addition to being computationally expensive, the extra steps reduce numerical stability and introduce orientation artifacts (the quaternions (x,y,z,w) and (-x,-y,-z,-w) are effectively equivalent transformations). The SLERP algorithm in blink::TransformationMatrix and blink::Rotation now directly call gfx::Quaternion::Slerp. The SLERP algorithm contained an error in that it always returned the counterclockwise rotation even if clockwise rotation was shorter. This problem was fixed by flipping the orientation of the first quaternion if the half angle is greater than 90 degrees. This ensures that we take the shortest path. Test expectation were updated for the rotation-composition test. These tests recorded expectations based on Blink's evaluations which where not consistent with the spec. In particular, Blink short-circuits the interpolation process at progress 0 and 1. This leads to boundaries begin left in a non-canonical form (e.g. "1 1 0 45deg" should be normalized to "0.707 0.707 0 45deg"). Furthermore, transforms to and from "none" should be converted to a neutral operator based on its counterpart (e.g none -> rotate 45deg at 0 should be rotate 0deg). One of the tests contained a degenerate case of a 180 degree rotation which is ill defined. This test was updated to avoid the problem. We have unit tests for edge cases to ensure no division-by-zero errors. One non-WPT test was affected. Manually confirmed that the SLERP algorithm was computing a negative value for the scalar component of the quaternion product. This component in fact is the cos of the half angle. Since the value was negative, it implies that the rotation angle was exceeding 180 degrees. We were rotating in the wrong direction. Design doc: https://docs.google.com/document/d/1RUd5Nt-ZUnKt-P6OZEDurx9g60TjfD0gx_iYAMbkAfE/edit?usp=sharing Access via chromium credentials Bug: 998175, 929841 Change-Id: Iaf057eb576aacfd2029342246ac314d783022997 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2489727 Reviewed-by: Ian Vollick <vollick@chromium.org> Reviewed-by: Alexander Cooper <alcooper@chromium.org> Commit-Queue: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/master@{#822771} -- wpt-commits: a4474491902bcbd62bc9437e0afc5b0a314c33aa wpt-pr: 26268
This commit is contained in:
Kevin Ellis
moz-wptsync-bot
Родитель
73bf53d4cc
Коммит
7a8341a112
|
|
@ -10,11 +10,59 @@
|
|||
|
||||
<body>
|
||||
<script>
|
||||
// Numerical precision may cause an axis aligned rotation to appear slightly
|
||||
// misaligned. Convert to (x, y, z, angle) form with rounding for comparison.
|
||||
function parseRotation(args) {
|
||||
const array = args.split(' ');
|
||||
if (array.length == 1) {
|
||||
// Angle or 'none'.
|
||||
return !!parseFloat(args) ? roundNumbers('0 0 1 ' + args) : args;
|
||||
}
|
||||
if (array.length == 2) {
|
||||
// Axis name + angle
|
||||
let axis = array[0];
|
||||
let angle = array[1];
|
||||
switch (array[0]) {
|
||||
case 'x':
|
||||
axis = '1 0 0 ';
|
||||
break;
|
||||
case 'y':
|
||||
axis = '0 1 0';
|
||||
break;
|
||||
case 'z':
|
||||
axis = '0 0 1';
|
||||
break;
|
||||
}
|
||||
return roundNumbers(axis + ' ' + angle);
|
||||
}
|
||||
if (array.length == 4) {
|
||||
// Axis as [x,y,z] triplet + angle.
|
||||
// Normalize the axis (if possible) for comparison.
|
||||
let x = parseFloat(array[0]);
|
||||
let y = parseFloat(array[1]);
|
||||
let z = parseFloat(array[2]);
|
||||
const angle = array[3];
|
||||
const length = Math.sqrt(x*x + y*y + z*z);
|
||||
if (length > 1e-4) {
|
||||
x /= length;
|
||||
y /= length;
|
||||
z /= length;
|
||||
}
|
||||
return roundNumbers(`${x} ${y} ${z} ${angle}`);
|
||||
}
|
||||
return args;
|
||||
}
|
||||
|
||||
function compareRotations(actual, expected) {
|
||||
assert_equals(parseRotation(actual), parseRotation(expected));
|
||||
}
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '100deg',
|
||||
addFrom: '10deg',
|
||||
addTo: '30deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '90deg'},
|
||||
{at: 0, expect: '110deg'},
|
||||
|
|
@ -29,6 +77,7 @@ test_composition({
|
|||
underlying: '1 0 0 200deg',
|
||||
addFrom: '1 0 0 -100deg',
|
||||
replaceTo: '1 0 0 40deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '1 0 0 160deg'},
|
||||
{at: 0, expect: '1 0 0 100deg'},
|
||||
|
|
@ -43,6 +92,7 @@ test_composition({
|
|||
underlying: '0 1 0 -40deg',
|
||||
replaceFrom: '0 1 0 50deg',
|
||||
addTo: '0 1 0 10deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '0 1 0 130deg'},
|
||||
{at: 0, expect: '0 1 0 50deg'},
|
||||
|
|
@ -57,13 +107,14 @@ test_composition({
|
|||
underlying: '1 2 3 40deg',
|
||||
addFrom: '2 4 6 10deg',
|
||||
addTo: '3 6 9 50deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '1 2 3 10deg'},
|
||||
{at: 0, expect: '1 2 3 50deg'},
|
||||
{at: 0.25, expect: '1 2 3 60deg'},
|
||||
{at: 0.75, expect: '1 2 3 80deg'},
|
||||
{at: 1, expect: '1 2 3 90deg'},
|
||||
{at: 2, expect: '1 2 3 130deg'},
|
||||
{at: -1, expect: '0.27 0.53 0.8 10deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 50deg'},
|
||||
{at: 0.25, expect: '0.27 0.53 0.8 60deg'},
|
||||
{at: 0.75, expect: '0.27 0.53 0.8 80deg'},
|
||||
{at: 1, expect: '0.27 0.53 0.8 90deg'},
|
||||
{at: 2, expect: '0.27 0.53 0.8 130deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
|
|
@ -71,13 +122,15 @@ test_composition({
|
|||
underlying: '1 2 3 270deg',
|
||||
addFrom: '1 2 3 90deg',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
|
||||
{at: 0, expect: '1 2 3 360deg'},
|
||||
{at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
|
||||
{at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
|
||||
{at: -1, expect: '0 -1 0 100deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 360deg'},
|
||||
{at: 0.25, expect: 'y 25deg'},
|
||||
{at: 0.75, expect: 'y 75deg'},
|
||||
{at: 1, expect: 'y 100deg'},
|
||||
// Accept both the SLERP and the common axis solution, which are equivalent.
|
||||
{at: 2, expect: '0 -1 0 160deg', option: 'y 200deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
|
|
@ -85,27 +138,30 @@ test_composition({
|
|||
underlying: '1 2 3 90deg',
|
||||
addFrom: '2 4 6 270deg',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '-5.49276e-17 -1 -1.64783e-16 100deg'},
|
||||
{at: 0, expect: '1 2 3 360deg'},
|
||||
{at: 0.25, expect: '-1.20172e-16 1 -3.60516e-16 25deg'},
|
||||
{at: 0.75, expect: '-1.51909e-17 1 -4.55726e-17 75deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '-3.3235e-17 -1 -9.97049e-17 160deg'},
|
||||
{at: -1, expect: '0 -1 0 100deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 360deg'},
|
||||
{at: 0.25, expect: 'y 25deg'},
|
||||
{at: 0.75, expect: 'y 75deg'},
|
||||
{at: 1, expect: 'y 100deg'},
|
||||
// Accept both the SLERP and the common axis solution, which are equivalent.
|
||||
{at: 2, expect: '0 -1 0 160deg', option: 'y 200deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
property: 'rotate',
|
||||
underlying: '1 0 0 90deg',
|
||||
addFrom: '0 1 0 180deg',
|
||||
replaceTo: '0 0 1 90deg',
|
||||
underlying: '1 0 0 0deg',
|
||||
addFrom: '1 1 0 90deg',
|
||||
replaceTo: '0 1 1 135deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '-6.12323e-17 -1 1.57009e-16 90deg'},
|
||||
{at: 0, expect: '-4.32978e-17 -0.707107 -0.707107 180deg'},
|
||||
{at: 0.25, expect: '-1.48952e-16 -0.894427 -0.447214 131.81deg'},
|
||||
{at: 0.75, expect: '-2.94392e-17 -0.707107 0.707107 70.5288deg'},
|
||||
{at: 1, expect: '90deg'},
|
||||
{at: 2, expect: '-6.12323e-17 -1 -4.71028e-16 90deg'},
|
||||
{at: -1, expect: '0.67 -0.06 -0.74 124.97deg'},
|
||||
{at: 0, expect: '0.71 0.71 0 90deg'},
|
||||
{at: 0.25, expect: '0.54 0.8 0.26 94.83deg'},
|
||||
{at: 0.75, expect: '0.17 0.78 0.61 118.68deg'},
|
||||
{at: 1, expect: '0 0.71 0.71 135deg'},
|
||||
{at: 2, expect: '-0.52 0.29 0.81 208.96deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
|
|
@ -113,13 +169,14 @@ test_composition({
|
|||
underlying: 'none',
|
||||
addFrom: 'none',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '0 1 0 -100deg'},
|
||||
{at: 0, expect: 'none'},
|
||||
{at: 0.25, expect: '0 1 0 25deg'},
|
||||
{at: 0.75, expect: '0 1 0 75deg'},
|
||||
{at: 1, expect: '0 1 0 100deg'},
|
||||
{at: 2, expect: '0 1 0 200deg'},
|
||||
{at: -1, expect: 'y -100deg'},
|
||||
{at: 0, expect: 'y 0deg'},
|
||||
{at: 0.25, expect: 'y 25deg'},
|
||||
{at: 0.75, expect: 'y 75deg'},
|
||||
{at: 1, expect: 'y 100deg'},
|
||||
{at: 2, expect: 'y 200deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
|
|
@ -127,13 +184,14 @@ test_composition({
|
|||
underlying: 'none',
|
||||
addFrom: '2 4 6 270deg',
|
||||
replaceTo: 'none',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '2 4 6 540deg'},
|
||||
{at: 0, expect: '2 4 6 270deg'},
|
||||
{at: 0.25, expect: '2 4 6 202.5deg'},
|
||||
{at: 0.75, expect: '2 4 6 67.5deg'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '2 4 6 -270deg'},
|
||||
{at: -1, expect: '0.27 0.53 0.8 540deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 270deg'},
|
||||
{at: 0.25, expect: '0.27 0.53 0.8 202.5deg'},
|
||||
{at: 0.75, expect: '0.27 0.53 0.8 67.5deg'},
|
||||
{at: 1, expect: '0.27 0.53 0.8 0deg'},
|
||||
{at: 2, expect: '0.27 0.53 0.8 -270deg'},
|
||||
]);
|
||||
|
||||
test_composition({
|
||||
|
|
@ -141,6 +199,7 @@ test_composition({
|
|||
underlying: '1 2 3 90deg',
|
||||
addFrom: 'none',
|
||||
replaceTo: '0 1 0 100deg',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '0.31 -0.22 0.92 131.66deg'},
|
||||
{at: 0, expect: '1 2 3 90deg'},
|
||||
|
|
@ -155,13 +214,14 @@ test_composition({
|
|||
underlying: '1 2 3 90deg',
|
||||
addFrom: '2 4 6 270deg',
|
||||
replaceTo: 'none',
|
||||
comparisonFunction: compareRotations
|
||||
}, [
|
||||
{at: -1, expect: '1 2 3 720deg'},
|
||||
{at: 0, expect: '1 2 3 360deg'},
|
||||
{at: 0.25, expect: '1 2 3 270deg'},
|
||||
{at: 0.75, expect: '1 2 3 90deg'},
|
||||
{at: 1, expect: 'none'},
|
||||
{at: 2, expect: '1 2 3 -360deg'},
|
||||
{at: -1, expect: '0.27 0.53 0.8 720deg'},
|
||||
{at: 0, expect: '0.27 0.53 0.8 360deg'},
|
||||
{at: 0.25, expect: '0.27 0.53 0.8 270deg'},
|
||||
{at: 0.75, expect: '0.27 0.53 0.8 90deg'},
|
||||
{at: 1, expect: '0.27 0.53 0.8 0deg'},
|
||||
{at: 2, expect: '0.27 0.53 0.8 -360deg'},
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference for rotate transform equivalent</title>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.block {
|
||||
border: 2px solid white; /* Avoid anti-aliasing artifacts */
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: green;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="transform" class="block overlay"></div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
async function waitForNextFrame() {
|
||||
return new Promise(resolve => {
|
||||
window.requestAnimationFrame(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function createAnimation(elementName, keyframes) {
|
||||
const element = document.getElementById(elementName);
|
||||
const anim = element.animate(keyframes, 1000);
|
||||
anim.pause();
|
||||
anim.currentTime = 500;
|
||||
return anim.ready;
|
||||
}
|
||||
|
||||
onload = async function() {
|
||||
await waitForNextFrame();
|
||||
|
||||
await createAnimation('transform', [
|
||||
{transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'},
|
||||
{transform: 'matrix(0, 1, -1, 0, 0, 0)'}]);
|
||||
|
||||
await waitForNextFrame();
|
||||
takeScreenshot();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>Rotate transform equivalent</title>
|
||||
<link rel="match" href="rotate-transform-equivalent-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
.block {
|
||||
border: 2px solid white; /* Avoid anti-aliasing artifacts */
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.rotation {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: green;
|
||||
}
|
||||
|
||||
#rotateAdd {
|
||||
rotate: 1 0 0 45deg;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="rotateAdd" class="block rotation"></div>
|
||||
<div id="rotateReplace" class="block rotation"></div>
|
||||
<div id="transform" class="block overlay"></div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
async function waitForNextFrame() {
|
||||
return new Promise(resolve => {
|
||||
window.requestAnimationFrame(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function createAnimation(elementName, keyframes) {
|
||||
const element = document.getElementById(elementName);
|
||||
const anim = element.animate(keyframes, 1000);
|
||||
anim.pause();
|
||||
anim.currentTime = 500;
|
||||
return anim.ready;
|
||||
}
|
||||
|
||||
onload = async function() {
|
||||
await waitForNextFrame();
|
||||
|
||||
await createAnimation('rotateAdd', [
|
||||
{rotate: '1 0 0 45deg', composite: 'add'},
|
||||
{rotate: '0 0 1 90deg'}]);
|
||||
await createAnimation('rotateReplace', [
|
||||
{rotate: '1 0 0 90deg'},
|
||||
{rotate: '0 0 1 90deg'}]);
|
||||
|
||||
await createAnimation('transform', [
|
||||
{transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'},
|
||||
{transform: 'matrix(0, 1, -1, 0, 0, 0)'}]);
|
||||
|
||||
await waitForNextFrame();
|
||||
takeScreenshot();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
@ -421,4 +421,5 @@
|
|||
window.test_no_interpolation = test_no_interpolation;
|
||||
window.test_composition = test_composition;
|
||||
window.neutralKeyframe = neutralKeyframe;
|
||||
window.roundNumbers = roundNumbers;
|
||||
})();
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче