feat: add axis-aligned 3d camera views
This commit is contained in:
@@ -9,11 +9,26 @@ import {
|
||||
niceGridStep,
|
||||
projectArrayPosition3d,
|
||||
} from "/apps/array-builder/canvas-view.js";
|
||||
import {
|
||||
ORBIT_VIEW_DIRECTIONS,
|
||||
orbitForViewDirection,
|
||||
} from "/apps/array-builder/orbit-view.js";
|
||||
|
||||
function assertNear(actual, expected, tolerance, label) {
|
||||
assert(Math.abs(actual - expected) <= tolerance, label + ": expected " + expected + ", received " + actual);
|
||||
}
|
||||
|
||||
function projectionViewport(orbit) {
|
||||
return {
|
||||
...orbit,
|
||||
centerPixelX: 200,
|
||||
centerPixelY: 120,
|
||||
centerHorizontal: 0,
|
||||
centerVertical: 0,
|
||||
scale: 100,
|
||||
};
|
||||
}
|
||||
|
||||
function fixture() {
|
||||
return {
|
||||
aperture: { width: 0.4, height: 0.2 },
|
||||
@@ -141,8 +156,8 @@ test("Array canvas grid와 keyboard nudge의 순수 helper가 1/2/5 및 y-up 규
|
||||
assertEqual(keyboardNudgeForKey("Enter", 0.002), null, "non-arrow key ignored");
|
||||
});
|
||||
|
||||
test("Array canvas 3D projection은 +Z FRONT와 right-handed XYZ를 보존한다", () => {
|
||||
const frontView = {
|
||||
test("Array canvas yaw=0, pitch=0 projection은 -Y축 위치에서 원점을 본다", () => {
|
||||
const negativeYAxisView = {
|
||||
yaw: 0,
|
||||
pitch: 0,
|
||||
centerPixelX: 200,
|
||||
@@ -151,18 +166,126 @@ test("Array canvas 3D projection은 +Z FRONT와 right-handed XYZ를 보존한다
|
||||
centerVertical: 0,
|
||||
scale: 100,
|
||||
};
|
||||
const positiveX = projectArrayPosition3d([1, 0, 0], frontView);
|
||||
const positiveZ = projectArrayPosition3d([0, 0, 1], frontView);
|
||||
const positiveY = projectArrayPosition3d([0, 1, 0], frontView);
|
||||
const positiveX = projectArrayPosition3d([1, 0, 0], negativeYAxisView);
|
||||
const positiveZ = projectArrayPosition3d([0, 0, 1], negativeYAxisView);
|
||||
const positiveY = projectArrayPosition3d([0, 1, 0], negativeYAxisView);
|
||||
const negativeY = projectArrayPosition3d([0, -1, 0], negativeYAxisView);
|
||||
assertNear(positiveX.x, 300, 1e-12, "+X projects right");
|
||||
assertNear(positiveX.y, 120, 1e-12, "+X keeps screen height");
|
||||
assertNear(positiveZ.x, 200, 1e-12, "+Z stays centered horizontally");
|
||||
assertNear(positiveZ.y, 20, 1e-12, "+Z FRONT projects upward");
|
||||
assertNear(positiveY.depth, -1, 1e-12, "+Y supplies front-view depth");
|
||||
|
||||
const edgeView = { ...frontView, pitch: Math.PI / 2 };
|
||||
const edgeY = projectArrayPosition3d([0, 1, 0], edgeView);
|
||||
const edgeZ = projectArrayPosition3d([0, 0, 1], edgeView);
|
||||
assertNear(edgeY.y, 20, 1e-12, "orbiting exposes +Y vertically");
|
||||
assertNear(edgeZ.depth, 1, 1e-12, "orbiting moves +Z onto the depth axis");
|
||||
assertNear(positiveZ.y, 20, 1e-12, "+Z projects upward");
|
||||
assertNear(negativeY.depth, 1, 1e-12, "-Y is on the viewer side");
|
||||
assertNear(positiveY.depth, -1, 1e-12, "+Y is behind the origin");
|
||||
});
|
||||
|
||||
test("Array canvas의 여섯 axis preset은 해당 축 위치에서 원점을 본다", () => {
|
||||
assertEqual(
|
||||
ORBIT_VIEW_DIRECTIONS.join(","),
|
||||
"iso,+x,-x,+y,-y,+z,-z",
|
||||
"public preset order",
|
||||
);
|
||||
const axisVectors = {
|
||||
"+x": [1, 0, 0],
|
||||
"-x": [-1, 0, 0],
|
||||
"+y": [0, 1, 0],
|
||||
"-y": [0, -1, 0],
|
||||
"+z": [0, 0, 1],
|
||||
"-z": [0, 0, -1],
|
||||
};
|
||||
|
||||
for (const direction of ORBIT_VIEW_DIRECTIONS.slice(1)) {
|
||||
const viewport = projectionViewport(orbitForViewDirection(direction));
|
||||
const cameraSide = projectArrayPosition3d(axisVectors[direction], viewport);
|
||||
const farSide = projectArrayPosition3d(
|
||||
axisVectors[direction].map((coordinate) => -coordinate),
|
||||
viewport,
|
||||
);
|
||||
assertNear(cameraSide.x, 200, 1e-12, direction + " camera-side x");
|
||||
assertNear(cameraSide.y, 120, 1e-12, direction + " camera-side y");
|
||||
assertNear(cameraSide.depth, 1, 1e-12, direction + " camera-side depth");
|
||||
assertNear(farSide.x, 200, 1e-12, direction + " far-side x");
|
||||
assertNear(farSide.y, 120, 1e-12, direction + " far-side y");
|
||||
assertNear(farSide.depth, -1, 1e-12, direction + " far-side depth");
|
||||
}
|
||||
});
|
||||
|
||||
test("Array canvas +Z preset은 +X를 오른쪽, +Y를 위쪽으로 투영한다", () => {
|
||||
const positiveZView = projectionViewport(orbitForViewDirection("+z"));
|
||||
const positiveX = projectArrayPosition3d([1, 0, 0], positiveZView);
|
||||
const positiveY = projectArrayPosition3d([0, 1, 0], positiveZView);
|
||||
const positiveZ = projectArrayPosition3d([0, 0, 1], positiveZView);
|
||||
|
||||
assertNear(positiveX.x, 300, 1e-12, "+X projects right");
|
||||
assertNear(positiveX.y, 120, 1e-12, "+X stays vertically centered");
|
||||
assertNear(positiveY.x, 200, 1e-12, "+Y stays horizontally centered");
|
||||
assertNear(positiveY.y, 20, 1e-12, "+Y projects up");
|
||||
assertNear(positiveZ.x, 200, 1e-12, "+Z stays horizontally centered");
|
||||
assertNear(positiveZ.y, 120, 1e-12, "+Z stays vertically centered");
|
||||
assertNear(positiveZ.depth, 1, 1e-12, "+Z points toward the viewer");
|
||||
});
|
||||
|
||||
test("Array canvas iso preset은 유한하고 비퇴화된 orthographic view다", () => {
|
||||
const implicitIso = orbitForViewDirection();
|
||||
const explicitIso = orbitForViewDirection("iso");
|
||||
assert(Number.isFinite(explicitIso.yaw), "iso yaw is finite");
|
||||
assert(Number.isFinite(explicitIso.pitch), "iso pitch is finite");
|
||||
assert(Math.abs(explicitIso.pitch) < Math.PI / 2, "iso pitch avoids a pole");
|
||||
assertNear(explicitIso.yaw, -Math.PI / 4, 1e-12, "iso yaw is canonical");
|
||||
assertNear(
|
||||
explicitIso.pitch,
|
||||
Math.asin(1 / Math.sqrt(3)),
|
||||
1e-12,
|
||||
"iso pitch is equally inclined to XYZ",
|
||||
);
|
||||
assertNear(implicitIso.yaw, explicitIso.yaw, 1e-12, "default yaw is iso");
|
||||
assertNear(implicitIso.pitch, explicitIso.pitch, 1e-12, "default pitch is iso");
|
||||
|
||||
const viewport = projectionViewport(explicitIso);
|
||||
const basis = [
|
||||
projectArrayPosition3d([1, 0, 0], viewport),
|
||||
projectArrayPosition3d([0, 1, 0], viewport),
|
||||
projectArrayPosition3d([0, 0, 1], viewport),
|
||||
];
|
||||
for (const [index, point] of basis.entries()) {
|
||||
assert(
|
||||
[point.x, point.y, point.depth].every(Number.isFinite),
|
||||
"iso basis projection " + index + " is finite",
|
||||
);
|
||||
assert(
|
||||
Math.hypot(point.x - 200, point.y - 120) > 1,
|
||||
"iso basis projection " + index + " does not collapse to the origin",
|
||||
);
|
||||
}
|
||||
const xVector = [basis[0].x - 200, basis[0].y - 120];
|
||||
const yVector = [basis[1].x - 200, basis[1].y - 120];
|
||||
const zVector = [basis[2].x - 200, basis[2].y - 120];
|
||||
assertNear(
|
||||
Math.hypot(...xVector),
|
||||
Math.hypot(...yVector),
|
||||
1e-10,
|
||||
"iso X/Y projected unit lengths match",
|
||||
);
|
||||
assertNear(
|
||||
Math.hypot(...xVector),
|
||||
Math.hypot(...zVector),
|
||||
1e-10,
|
||||
"iso X/Z projected unit lengths match",
|
||||
);
|
||||
assert(
|
||||
Math.abs(xVector[0] * yVector[1] - xVector[1] * yVector[0]) > 1,
|
||||
"iso projected X/Y basis spans a plane",
|
||||
);
|
||||
});
|
||||
|
||||
test("Array canvas orbit preset은 알 수 없는 direction을 거부한다", () => {
|
||||
let error = null;
|
||||
try {
|
||||
orbitForViewDirection("front");
|
||||
} catch (caught) {
|
||||
error = caught;
|
||||
}
|
||||
|
||||
assert(error instanceof RangeError, "invalid direction throws RangeError");
|
||||
assert(error.message.includes("iso"), "error lists the supported directions");
|
||||
assert(error.message.includes("+z"), "error includes +Z");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user