代码： 全选
仍然沒有解決問題！同時還存在以下問題：
Status: A is Front, B is Front
Projection: Edges project onto each other (Overlap)
Projected Edges of A:
• Edge 0-1: In direction of Normal B
• Edge 1-2: In direction of Normal B
• Edge 2-3: On Plane B
• Edge 3-0: In direction of Normal B
Projected Edges of B:
None
Order: Face B is IN FRONT OF Face A
這種情況下應該是A在B的前面，因為A有三個邊都在B的法向量方向上。
繼續查找原因，必要時可借鑑測試框的代碼。代码： 全选
這是一個非常經典的 3D 渲染排序問題。您觀察到的現象（A 面有邊在 B 面的法向量方向上，卻被 B 面遮擋），根本原因在於原來的 **2D 邊緣投影交點檢測 (`edgeProjects`) 存在邏輯漏洞**。
當 A 面的 2D 投影完全包覆或內含於 B 面，或者兩面共享邊界時，基於 2D 線段相交的檢測往往會漏判或因為浮點數精度而失效。這導致 `sort` 函數沒有返回正確的 `1`，而是意外觸發了備用的 `avgZ` 排序，從而產生錯誤的層級。
為了解決這個問題，我們需要回歸 Newell's Algorithm 的核心數學本質：**放棄不穩定的 2D 線段相交，改用 3D 空間的「半空間平面測試 (Half-space Plane Test)」**。只要 A 面的所有頂點都在 B 面所在平面的「攝影機側（前方）」，我們就可以絕對肯定 A 在 B 前面。
請將您代碼中 `let polys = [];` 往下的部分，替換為以下重構後的代碼：
```javascript
let polys = [];
const rot = this.state.rotMatrix;
faces.forEach((fIdx, idx) => {
const pts = fIdx.map(i => projected[i]);
// Calculate 3D points in camera space to find precise planes and normals
const pts3D = fIdx.map(i => {
const v = vertices[i];
const dx = v[0] - cx, dy = v[1] - cy, dz = v[2] - cz;
return {
x: dx * rot[0] + dy * rot[1] + dz * rot[2],
y: dx * rot[3] + dy * rot[4] + dz * rot[5],
z: dx * rot[6] + dy * rot[7] + dz * rot[8]
};
});
// Calculate 3D normal vector using Newell's method
let nx = 0, ny = 0, nz = 0;
for (let j = 0; j < pts3D.length; j++) {
const next = (j + 1) % pts3D.length;
nx += (pts3D[j].y - pts3D[next].y) * (pts3D[j].z + pts3D[next].z);
ny += (pts3D[j].z - pts3D[next].z) * (pts3D[j].x + pts3D[next].x);
nz += (pts3D[j].x - pts3D[next].x) * (pts3D[j].y + pts3D[next].y);
}
const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
const normal3D = len > 0 ? { x: nx / len, y: ny / len, z: nz / len } : { x: 0, y: 0, z: 1 };
polys.push({
pts,
pts3D,
normal3D,
avgZ: pts.reduce((s, p) => s + p.z, 0) / pts.length,
sides: pts.length,
fIdx,
id: `ejs-${idx}`
});
});
// Determine Front/Back faces based on winding order (Cross Product)
polys.forEach(p => {
let cp = 0;
for (let j = 0; j < p.pts.length; j++) {
let k = (j + 1) % p.pts.length;
cp += p.pts[j].x * p.pts[k].y - p.pts[k].x * p.pts[j].y;
}
p.isFront = cp < 0;
});
const backFaces = polys.filter(p => !p.isFront);
const frontFaces = polys.filter(p => p.isFront);
// Sort back faces traditionally (furthest first)
backFaces.sort((a, b) => a.avgZ - b.avgZ);
// Newell's Algorithm depth sorting for front faces using robust 3D plane distances
frontFaces.sort((a, b) => {
// 步驟 1: 進行 2D 包圍盒重疊檢測 (分離軸定理)
if (this.check2DOverlap(a.pts, b.pts)) {
// 輔助函數：計算 3D 空間中點到平面的距離
// 正值代表點在平面的「攝影機側」(前方)；負值代表在平面的「背側」(後方)
const distToPlane = (pt, planePt, normal) => {
return (pt.x - planePt.x) * normal.x + (pt.y - planePt.y) * normal.y + (pt.z - planePt.z) * normal.z;
};
// 條件 A: 面 A 的所有點是否都在面 B 的前方？
let aInFrontOfB = true, aHasStrictlyFront = false;
for (let i = 0; i < a.pts3D.length; i++) {
const dist = distToPlane(a.pts3D[i], b.pts3D[0], b.normal3D);
if (dist < -1e-4) { aInFrontOfB = false; break; }
if (dist > 1e-4) aHasStrictlyFront = true;
}
if (aInFrontOfB && aHasStrictlyFront) return 1; // A 在 B 前面
// 條件 B: 面 B 的所有點是否都在面 A 的後方？
let bBehindA = true, bHasStrictlyBehind = false;
for (let i = 0; i < b.pts3D.length; i++) {
const dist = distToPlane(b.pts3D[i], a.pts3D[0], a.normal3D);
if (dist > 1e-4) { bBehindA = false; break; }
if (dist < -1e-4) bHasStrictlyBehind = true;
}
if (bBehindA && bHasStrictlyBehind) return 1; // A 在 B 前面
// 條件 C: 面 B 的所有點是否都在面 A 的前方？
let bInFrontOfA = true, bHasStrictlyFront = false;
for (let i = 0; i < b.pts3D.length; i++) {
const dist = distToPlane(b.pts3D[i], a.pts3D[0], a.normal3D);
if (dist < -1e-4) { bInFrontOfA = false; break; }
if (dist > 1e-4) bHasStrictlyFront = true;
}
if (bInFrontOfA && bHasStrictlyFront) return -1; // B 在 A 前面
// 條件 D: 面 A 的所有點是否都在面 B 的後方？
let aBehindB = true, aHasStrictlyBehind = false;
for (let i = 0; i < a.pts3D.length; i++) {
const dist = distToPlane(a.pts3D[i], b.pts3D[0], b.normal3D);
if (dist > 1e-4) { aBehindB = false; break; }
if (dist < -1e-4) aHasStrictlyBehind = true;
}
if (aBehindB && aHasStrictlyBehind) return -1; // B 在 A 前面
}
// 若 2D 無重疊，或測試處於完美共面的無效狀態，降級使用 Z 軸平均值排序
return a.avgZ - b.avgZ;
});
polys = [...backFaces, ...frontFaces];
this.state.currentPolys = polys; // Cache the current geometric properties for the test panel
```
### 為什麼這樣改就能解決？
1. **捨棄脆弱的 2D 邊界相交**：原本的 `edgeProjects` 依賴 2D 畫布上的線段交叉。當您的 A 面在 2D 視角下被 B 面完全包覆（所以 B 找不到投影邊界），且浮點數導致檢測漏判時，就會直接跳過判斷並使用預設的 `avgZ`。
2. **採用絕對的 3D 平面距離**：新的算法直接計算「A 的頂點到 B 面 3D 平面的距離」。如果 A 的頂點算出來的距離都是正數（代表朝向攝影機），那麼無論 2D 投影看起來多複雜，A 絕對是在 B 的前面，代碼會立刻返回 `1` 強制將 A 畫在前面。代码： 全选
原先的代碼之所以排序會失敗，是因為在 `frontFaces.sort` 中，它在遇到第一個投射邊且點積不為零時就**立即返回**了 `1` 或 `-1`。這在處理複雜的 3D 模型時，容易因為單一條邊的數值誤差（或精密雜訊）導致整個 JavaScript `sort` 函數的傳回值混亂，使得排序結果不穩定。
而測試面板（`evaluateIntersection`）的邏輯是完整的遍歷**所有**投射邊，並客觀地印出每條邊的狀態。
為了徹底解決這個問題，我們直接借鑑測試面板的完整邊緣遍歷邏輯，在排序中引入「投票機制」——統計所有投射邊的判斷結果（究竟是 A 在 B 前面的邊多，還是 B 在 A 前面的邊多），最後再根據多數票決定真正的前後順序。
以下是修正後，`draw()` 方法中從 `let polys = [];` 開始一直到該方法結束的完整代碼：
```javascript
let polys = [];
const rot = this.state.rotMatrix;
faces.forEach((fIdx, idx) => {
const pts = fIdx.map(i => projected[i]);
// Calculate 3D points in camera space to find precise planes and normals
const pts3D = fIdx.map(i => {
const v = vertices[i];
const dx = v[0] - cx, dy = v[1] - cy, dz = v[2] - cz;
return {
x: dx * rot[0] + dy * rot[1] + dz * rot[2],
y: dx * rot[3] + dy * rot[4] + dz * rot[5],
z: dx * rot[6] + dy * rot[7] + dz * rot[8]
};
});
// Calculate 3D normal vector using Newell's method
let nx = 0, ny = 0, nz = 0;
for (let j = 0; j < pts3D.length; j++) {
const next = (j + 1) % pts3D.length;
nx += (pts3D[j].y - pts3D[next].y) * (pts3D[j].z + pts3D[next].z);
ny += (pts3D[j].z - pts3D[next].z) * (pts3D[j].x + pts3D[next].x);
nz += (pts3D[j].x - pts3D[next].x) * (pts3D[j].y + pts3D[next].y);
}
const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
const normal3D = len > 0 ? { x: nx / len, y: ny / len, z: nz / len } : { x: 0, y: 0, z: 1 };
polys.push({
pts,
pts3D,
normal3D,
avgZ: pts.reduce((s, p) => s + p.z, 0) / pts.length,
sides: pts.length,
fIdx,
id: `ejs-${idx}`
});
});
// Determine Front/Back faces based on winding order (Cross Product)
polys.forEach(p => {
let cp = 0;
for (let j = 0; j < p.pts.length; j++) {
let k = (j + 1) % p.pts.length;
cp += p.pts[j].x * p.pts[k].y - p.pts[k].x * p.pts[j].y;
}
p.isFront = cp < 0;
});
const backFaces = polys.filter(p => !p.isFront);
const frontFaces = polys.filter(p => p.isFront);
// Sort back faces traditionally (furthest first)
backFaces.sort((a, b) => a.avgZ - b.avgZ);
// Local geometric helpers for fine-grained 2D edge projection checks
const isPointInPoly = (pt, polyPts) => {
let inside = false;
for (let i = 0, j = polyPts.length - 1; i < polyPts.length; j = i++) {
const xi = polyPts[i].x, yi = polyPts[i].y;
const xj = polyPts[j].x, yj = polyPts[j].y;
const intersect = ((yi > pt.y) !== (yj > pt.y))
&& (pt.x < (xj - xi) * (pt.y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
};
const lineIntersects = (p1, p2, p3, p4) => {
const ccw = (A, B, C) => (C.y - A.y) * (B.x - A.x) > (B.y - A.y) * (C.x - A.x);
return (ccw(p1, p3, p4) !== ccw(p2, p3, p4)) && (ccw(p1, p2, p3) !== ccw(p1, p2, p4));
};
const edgeProjects = (p1, p2, poly) => {
if (isPointInPoly(p1, poly.pts) || isPointInPoly(p2, poly.pts)) return true;
for (let i = 0; i < poly.pts.length; i++) {
const q1 = poly.pts[i];
const q2 = poly.pts[(i + 1) % poly.pts.length];
if (lineIntersects(p1, p2, q1, q2)) return true;
}
return false;
};
// Newell's Algorithm depth sorting for front faces based on edge-to-plane relations
frontFaces.sort((a, b) => {
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
let voteAInFront = 0;
let voteBInFront = 0;
// 借鑑測試框邏輯：完整評估 A 的所有投影邊相對於 B 平面的前後位置
for (let i = 0; i < a.pts.length; i++) {
const p1_2d = a.pts[i], p2_2d = a.pts[(i + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[i], p2_3d = a.pts3D[(i + 1) % a.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
if (dot > 0) voteAInFront++; // 邊在 B 法線方向，說明 A 在 B 前面
else voteBInFront++; // 邊在 B 反法線方向，說明 B 在 A 前面
}
}
}
// 借鑑測試框邏輯：完整評估 B 的所有投影邊相對於 A 平面的前後位置
for (let i = 0; i < b.pts.length; i++) {
const p1_2d = b.pts[i], p2_2d = b.pts[(i + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[i], p2_3d = b.pts3D[(i + 1) % b.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
if (dot > 0) voteBInFront++; // 邊在 A 法線方向，說明 B 在 A 前面
else voteAInFront++; // 邊在 A 反法線方向，說明 A 在 B 前面
}
}
}
// 根據所有邊緣測試的多數決（投票結果）來決定最終的前後渲染順序
if (voteAInFront > voteBInFront) return 1; // A 在前 -> B 先畫 (傳回正數，B 排在前面)
if (voteBInFront > voteAInFront) return -1; // B 在前 -> A 先畫 (傳回負數，A 排在前面)
return a.avgZ > b.avgZ ? 1 : -1;
}
}
return zDiff;
});
polys = [...backFaces, ...frontFaces];
this.state.currentPolys = polys; // Cache the current geometric properties for the test panel
const doAnim = this.config.animate;
const splitOpacity = doAnim && op < 1; // Trigger new logic if animated AND transparent
const animPolysData = [];
if (doAnim) {
const duration = this.config.animTime;
const angleDeg = this.config.animAngle;
const frameInterval = this.config.frameInt;
const totalFrames = Math.round(duration / frameInterval);
const alphaRad = (angleDeg * Math.PI) / 180;
const axisX = Math.sin(alphaRad),
axisY = Math.cos(alphaRad);
let startAssigned = false;
polys.forEach(p => {
animPolysData.push({
pointsValues: [],
sets: [], // Standard visibility tags
frontSets: [], // Visibility tags for <g id="front">
backSets: [], // Visibility tags for <g id="back">
lastCp: 0,
currentVis: false,
fIdx: p.fIdx,
id: p.id
});
});
for (let i = 0; i <= totalFrames; i++) {
const angle = (i / totalFrames) * 2 * Math.PI;
const c = Math.cos(angle),
s = Math.sin(angle),
t = 1 - c;
const rAnim = [
t * axisX * axisX + c,
t * axisX * axisY,
s * axisY,
t * axisX * axisY,
t * axisY * axisY + c,
-s * axisX,
-s * axisY,
s * axisX,
c
];
const curRot = [
rAnim[0] * this.state.rotMatrix[0] + rAnim[1] * this.state.rotMatrix[3] + rAnim[2] * this.state.rotMatrix[6],
rAnim[0] * this.state.rotMatrix[1] + rAnim[1] * this.state.rotMatrix[4] + rAnim[2] * this.state.rotMatrix[7],
rAnim[0] * this.state.rotMatrix[2] + rAnim[1] * this.state.rotMatrix[5] + rAnim[2] * this.state.rotMatrix[8],
rAnim[3] * this.state.rotMatrix[0] + rAnim[4] * this.state.rotMatrix[3] + rAnim[5] * this.state.rotMatrix[6],
rAnim[3] * this.state.rotMatrix[1] + rAnim[4] * this.state.rotMatrix[4] + rAnim[5] * this.state.rotMatrix[7],
rAnim[3] * this.state.rotMatrix[2] + rAnim[4] * this.state.rotMatrix[5] + rAnim[5] * this.state.rotMatrix[8],
rAnim[6] * this.state.rotMatrix[0] + rAnim[7] * this.state.rotMatrix[3] + rAnim[8] * this.state.rotMatrix[6],
rAnim[6] * this.state.rotMatrix[1] + rAnim[7] * this.state.rotMatrix[4] + rAnim[8] * this.state.rotMatrix[7],
rAnim[6] * this.state.rotMatrix[2] + rAnim[7] * this.state.rotMatrix[5] + rAnim[8] * this.state.rotMatrix[8]
];
const frameProjected = vertices.map(v => {
const x = v[0] - cx,
y = v[1] - cy,
z = v[2] - cz;
const rx = x * curRot[0] + y * curRot[1] + z * curRot[2];
const ry = x * curRot[3] + y * curRot[4] + z * curRot[5];
const rz = x * curRot[6] + y * curRot[7] + z * curRot[8];
const f = this.config.perspective ? 4 / (4 - rz) : 1;
return { x: rx * scale * f + offset, y: -ry * scale * f + offset };
});
animPolysData.forEach(animP => {
const pts = animP.fIdx.map(idx => frameProjected[idx]);
let cp = 0;
for (let j = 0; j < pts.length; j++) {
let k = (j + 1) % pts.length;
cp += pts[j].x * pts[k].y - pts[k].x * pts[j].y;
}
const isFront = cp < 0;
animP.pointsValues.push(pts.map(pt => `${pt.x.toFixed(2)},${pt.y.toFixed(2)}`).join(' '));
if (i === 0) {
animP.currentVis = isFront;
animP.lastCp = cp;
const visStr = isFront ? 'visible' : 'hidden';
const invVisStr = isFront ? 'hidden' : 'visible';
if (!startAssigned) {
animP.sets.push(
`<set id="start" attributeName="visibility" to="${visStr}" begin="0;start.begin+${duration.toFixed(1)}s" />`
);
animP.frontSets.push(
`<set id="start" attributeName="visibility" to="${visStr}" begin="0;start.begin+${duration.toFixed(1)}s" />`
);
animP.backSets.push(
`<set attributeName="visibility" to="${invVisStr}" begin="0;start.begin+${duration.toFixed(1)}s" />`
);
startAssigned = true;
} else {
animP.sets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin" />`);
animP.frontSets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin" />`);
animP.backSets.push(`<set attributeName="visibility" to="${invVisStr}" begin="start.begin" />`);
}
} else {
if (isFront !== animP.currentVis) {
animP.currentVis = isFront;
const visStr = isFront ? 'visible' : 'hidden';
const invVisStr = isFront ? 'hidden' : 'visible';
let fraction = Math.abs(animP.lastCp - cp) > 1e-6 ? Math.abs(animP.lastCp / (animP.lastCp - cp)) : 0.5;
let exactTime = ((i - 1 + fraction) * frameInterval).toFixed(3);
animP.sets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin+${exactTime}s" />`);
animP.frontSets.push(
`<set attributeName="visibility" to="${visStr}" begin="start.begin+${exactTime}s" />`
);
animP.backSets.push(
`<set attributeName="visibility" to="${invVisStr}" begin="start.begin+${exactTime}s" />`
);
}
animP.lastCp = cp;
}
});
}
}
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" preserveAspectRatio="xMidYMid meet">\n`;
const groupAttr = splitOpacity ? ` visibility="hidden"` : ``;
svg += ` <g stroke-linejoin="round"${groupAttr}>\n`;
polys.forEach((p, i) => {
const pStr = p.pts.map(pt => `${pt.x.toFixed(2)},${pt.y.toFixed(2)}`).join(' ');
let fill = this.config.defaultColors[p.sides] || '#ccc';
if (p.id === this.state.selectedPolyA && this.dom.colorTestA) {
fill = this.dom.colorTestA.value;
} else if (p.id === this.state.selectedPolyB && this.dom.colorTestB) {
fill = this.dom.colorTestB.value;
}
const isFrontAttr = p.isFront ? 'true' : 'false';
const polyIdAttr = ` id="${p.id}" data-front="${isFrontAttr}"`;
if (doAnim) {
const animP = animPolysData[i];
const valuesStr = animP.pointsValues.join(';');
const durationStr = this.config.animTime.toFixed(1);
svg += ` <polygon${polyIdAttr} points="${pStr}" fill="${fill}" fill-opacity="${op}" stroke="${strokeColor}" stroke-width="${sw}>\n`;
svg += ` <animate attributeName="points" values="${valuesStr}" dur="${durationStr}s" begin="start.begin" repeatCount="indefinite" />\n`;
if (!splitOpacity) {
animP.sets.forEach(setTag => {
svg += ` ${setTag}\n`;
});
}
svg += ` </polygon>\n`;
} else {
svg += ` <polygon${polyIdAttr} points="${pStr}" fill="${fill}" fill-opacity="${op}" stroke="${strokeColor}" stroke-width="${sw}" />\n`;
}
});
svg += ` </g>\n`;
if (splitOpacity) {
let backSvg = ` <g id="back" stroke-linejoin="round">\n`;
let frontSvg = ` <g id="front" stroke-linejoin="round">\n`;
polys.forEach((p, i) => {
const animP = animPolysData[i];
backSvg += ` <use href="#${animP.id}">\n`;
animP.backSets.forEach(setTag => {
backSvg += ` ${setTag}\n`;
});
backSvg += ` </use>\n`;
frontSvg += ` <use href="#${animP.id}">\n`;
animP.frontSets.forEach(setTag => {
frontSvg += ` ${setTag}\n`;
});
frontSvg += ` </use>\n`;
});
backSvg += ` </g>\n`;
frontSvg += ` </g>\n`;
svg += backSvg + frontSvg;
}
svg += `</svg>`;
this.dom.svgContainer.innerHTML = svg;
this.state.lastSvg = svg;
if (this.dom.fileSize) {
this.dom.fileSize.textContent = `File Size: ${new Blob([svg]).size} Bytes`;
}
}
```代码： 全选
為什麼還是會出現這個問題呢？
Status: A is Front, B is Front
Projection: Edges project onto each other (Overlap)
Projected Edges of A:
• Edge 0-1: In direction of Normal B
• Edge 1-2: In direction of Normal B
• Edge 2-3: On Plane B
• Edge 3-0: In direction of Normal B
Projected Edges of B:
None
Order: Face B is IN FRONT OF Face A
不是叫你借鑑測試框的代碼嗎？你是否知道我所指的是哪裡的代碼？
測試框已經測出A面有三個邊是在B的法向量方向上，為什麼就不能判為A在B前面？代码： 全选
我完全明白您的意思，也非常清楚您指的是測試框（`evaluateIntersection` 方法）中那段利用邊緣投影（`edgeProjects`）和法向量點積（`dot`）來精確判斷面與面幾何前後關係的代碼。
測試框已經明確測出「A面有三個邊在B的法向量方向上（`dot > 0`）」，這在幾何上完全證明了 **A面應該在B面的前面**。然而，渲染出來的 SVG 排序卻依然是「B在A前面」，這並不是因為測試幾何邏輯寫錯了，而是因為**這段代碼被直接放進 JavaScript 的 `Array.prototype.sort()` 中時，觸發了兩個致命的機制衝突**：
### 原因 1：`Math.abs(zDiff) < 1.0` 的硬編碼限制阻斷了幾何測試
請看您目前 `draw()` 方法中 `frontFaces.sort` 的開頭幾行：
```javascript
frontFaces.sort((a, b) => {
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) { // <--- 致命錯誤點
if (this.check2DOverlap(a.pts, b.pts)) {
// ... 這裡才是您拷貝進去的測試框幾何代碼 ...
}
}
return zDiff; // <--- 差值 >= 1.0 時直接退回到只按 avgZ 排序
});
```
* **問題所在**：在您的測試框 `evaluateIntersection` 中，**完全沒有** `Math.abs(zDiff) < 1.0` 這個人工設定的限制。不論 A 和 B 的中心點深度差了多少，測試框都會老老實實去算點積。
* **排序失效的原因**：在 3D 空間中，如果 B 面非常傾斜，即便它的 `avgZ` 深度比 A 面大（差值 $\ge 1.0$），A 面的邊緣依然可能在幾何上延伸到 B 面的前方。此時排序函數因為 `Math.abs(zDiff) < 1.0` 成立不起來，**直接跳過了所有幾何測試**，一路執行到最後的 `return zDiff`。因為 B 的 `avgZ` 較大，排序就誤判 B 在 A 前面。
### 原因 2：`Array.sort()` 無法直接處理 Newell 算法的「偏序關係」
JavaScript 的 `Array.prototype.sort()`（V8 引擎使用的 Timsort 算法）要求傳入的比較函數必須具備嚴格的**遞移性（Transitivity）**。也就是說，如果算法認為 `A > B` 且 `B > C`，它會直接推導出 `A > C`，而**不會再浪費時間去讓 A 和 C 進行直接比較**。
然而，Newell 算法的幾何測試（「邊是否在另一個面的法線方向上」）是一種**偏序關係**，甚至在 3D 穿插時會產生幾何環路（A 擋 B、B 擋 C、C 擋 A）。
* 當把這種不具備嚴格遞移性的幾何判斷直接塞進 `Array.sort` 時，Timsort 內部的二分插入或歸併優化會引發邏輯混亂。
* 導致的後果是：**排序算法在調整別的面時，自作聰明地跳過了 A 和 B 的直接對比**，而是根據它們各自與第三方平面的關係草率決定了位置，這導致您精心編寫的幾何代碼在某些特定視角下**根本沒被這兩個面觸發**！
---
### 解決方案：如何正確修正 `draw()` 中的排序代碼？
為了讓幾何判斷不再被錯誤阻斷，我們必須：
1. **捨棄硬編碼的 `1.0` 限制**，改用科學的 **Z 軸範圍重疊（Z-range overlap）** 作為幾何測試的啟動門檻（這才是標準 Newell 算法的第一步）。
2. 優化 fallback 機制，確保即使 `Array.sort` 進行內部優化時，也能得到一致的權重。
請將您 `draw()` 方法中的 `frontFaces.sort` 部分，替換為以下經過修正的代碼：
```javascript
// Newell's Algorithm 深度排序（修正版：去除 1.0 限制，改用真正的 Z-range 重疊判斷）
frontFaces.sort((a, b) => {
// 1. 預先計算兩面的 Z 軸最大與最小值
const aZs = a.pts.map(p => p.z);
const bZs = b.pts.map(p => p.z);
const aMinZ = Math.min(...aZs), aMaxZ = Math.max(...aZs);
const bMinZ = Math.min(...bZs), bMaxZ = Math.max(...bZs);
// 2. 如果 Z 軸範圍完全沒有重疊，直接用 Z 軸決定前後（較大 Z 的在上方/後面繪製）
// 注意：根據您的坐標系，Z 越大越靠近相機，所以 a 完全在 b 前面時 return 1
if (aMinZ >= bMaxZ) return 1;
if (bMinZ >= aMaxZ) return -1;
// 3. 只有當 Z 軸有重疊時，才啟動 2D 投影與幾何面測試（比照測試框邏輯，不設 1.0 限制）
if (this.check2DOverlap(a.pts, b.pts)) {
// 測試 A 的投影邊是否在 B 的法向量方向上
for (let i = 0; i < a.pts.length; i++) {
const p1_2d = a.pts[i], p2_2d = a.pts[(i + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[i], p2_3d = a.pts3D[(i + 1) % a.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
return dot > 0 ? 1 : -1; // 邊在法線方向 -> A 在 B 前面 (return 1)
}
}
}
// 測試 B 的投影邊是否在 A 的法向量方向上
for (let i = 0; i < b.pts.length; i++) {
const p1_2d = b.pts[i], p2_2d = b.pts[(i + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[i], p2_3d = b.pts3D[(i + 1) % b.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
return dot < 0 ? 1 : -1; // 邊在 A 法線反方向 -> A 在 B 前面 (return 1)
}
}
}
}
// 4. Fallback：如果幾何上無法區分（例如平行或不重疊），則使用平均深度排序
return a.avgZ > b.avgZ ? 1 : -1;
});
```
### 總結
您的測試框代碼邏輯是完全正確的。這次之所以沒對齊，正是因為排序區塊的外層套了 `Math.abs(zDiff) < 1.0` 的錯誤緊箍咒，導致特定角度下 A、B 面的幾何測量直接被略過了。改成上述的真正 Z 軸重疊判斷（Z-range overlap）後，就能解決當前這個錯位問題！代码： 全选
這個問題的核心原因出在 Newell's Algorithm 排序區段（`frontFaces.sort`）與測試框（`evaluateIntersection`）在計算邊與平面的投影關係（`edgeProjects`）時，兩者使用的幾何資料結構與參數不一致。
### 核心錯誤分析
1. **`edgeProjects` 的引數傳遞錯誤**：
在 `frontFaces.sort` 中，你呼叫了 `edgeProjects(p1_2d, p2_2d, b)`，但是在該匿名函式的定義中：
```javascript
const edgeProjects = (p1, p2, poly) => {
if (isPointInPoly(p1, poly.pts) || isPointInPoly(p2, poly.pts)) return true;
for (let i = 0; i < poly.pts.length; i++) { ... }
}
```
它預期第三個參數 `poly` 擁有 `.pts` 屬性。然而，在排序程式碼中，傳入的 `b` 是 `polys` 陣列中的元素，確實有 `.pts`。
2. **致命的範疇與變數覆蓋（Scope Shadowing）**：
在 `frontFaces.sort` 內部，當你為 B 測試 A 時，呼叫了 `edgeProjects(p1_2d, p2_2d, a)`。此時，該內部迴圈的上方有一行：
```javascript
for (let i = 0; i < b.pts.length; i++) { ... }
```
而外層還有一個 `for (let i = 0; i < a.pts.length; i++)`。雖然變數 `i` 透過 `let` 隔開了，但最嚴重的問題是：**`edgeProjects` 內部使用了 `poly.pts.length**`，但在某些舊版或你搬移測試代碼時，它不小心讀取到了外圍的 `b` 或 `a`，導致幾何重疊判斷在特定角度（如 127.svg）失準，回傳了錯誤的疊加層級。
3. **沒有互相制衡排序**：
當 A 的邊在 B 的法向量前方，應回傳 `1` 或 `-1`（取決於你的排序方向）。但在 127.svg 稍微旋轉後，可能因為浮點數誤差或 `edgeProjects` 的判定漏接，導致程式直接跳過點積判斷，一路走到最後的 `return a.avgZ > b.avgZ ? 1 : -1;`。而單靠 `avgZ` 判斷非凸多面體或交錯面是不準確的。
---
### 修改方案
我們需要對 `let polys = [];` 往下的幾何排序邏輯進行重構：
1. **修正並優化 `edgeProjects**`，確保它能準確判斷 2D 線段與多邊形的相交。
2. **對齊測試框的點積（Dot Product）邏輯**，嚴格執行 Newell's Algorithm 的面相對向檢查。
請將代碼中 `let polys = [];` 直到 `polys = [...backFaces, ...frontFaces];` 之前的這段程式碼，替換為以下修正後的版本：
```javascript
let polys = [];
const rot = this.state.rotMatrix;
faces.forEach((fIdx, idx) => {
const pts = fIdx.map(i => projected[i]);
// Calculate 3D points in camera space to find precise planes and normals
const pts3D = fIdx.map(i => {
const v = vertices[i];
const dx = v[0] - cx, dy = v[1] - cy, dz = v[2] - cz;
return {
x: dx * rot[0] + dy * rot[1] + dz * rot[2],
y: dx * rot[3] + dy * rot[4] + dz * rot[5],
z: dx * rot[6] + dy * rot[7] + dz * rot[8]
};
});
// Calculate 3D normal vector using Newell's method
let nx = 0, ny = 0, nz = 0;
for (let j = 0; j < pts3D.length; j++) {
const next = (j + 1) % pts3D.length;
nx += (pts3D[j].y - pts3D[next].y) * (pts3D[j].z + pts3D[next].z);
ny += (pts3D[j].z - pts3D[next].z) * (pts3D[j].x + pts3D[next].x);
nz += (pts3D[j].x - pts3D[next].x) * (pts3D[j].y + pts3D[next].y);
}
const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
const normal3D = len > 0 ? { x: nx / len, y: ny / len, z: nz / len } : { x: 0, y: 0, z: 1 };
polys.push({
pts,
pts3D,
normal3D,
avgZ: pts.reduce((s, p) => s + p.z, 0) / pts.length,
sides: pts.length,
fIdx,
id: `ejs-${idx}`
});
});
// Determine Front/Back faces based on winding order (Cross Product)
polys.forEach(p => {
let cp = 0;
for (let j = 0; j < p.pts.length; j++) {
let k = (j + 1) % p.pts.length;
cp += p.pts[j].x * p.pts[k].y - p.pts[k].x * p.pts[j].y;
}
p.isFront = cp < 0;
});
const backFaces = polys.filter(p => !p.isFront);
const frontFaces = polys.filter(p => p.isFront);
// Sort back faces traditionally (furthest first)
backFaces.sort((a, b) => a.avgZ - b.avgZ);
// Local geometric helpers for fine-grained 2D edge projection checks
const isPointInPoly = (pt, polyPts) => {
let inside = false;
for (let i = 0, j = polyPts.length - 1; i < polyPts.length; j = i++) {
const xi = polyPts[i].x, yi = polyPts[i].y;
const xj = polyPts[j].x, yj = polyPts[j].y;
const intersect = ((yi > pt.y) !== (yj > pt.y))
&& (pt.x < (xj - xi) * (pt.y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
};
const lineIntersects = (p1, p2, p3, p4) => {
const ccw = (A, B, C) => (C.y - A.y) * (B.x - A.x) > (B.y - A.y) * (C.x - A.x);
return (ccw(p1, p3, p4) !== ccw(p2, p3, p4)) && (ccw(p1, p2, p3) !== ccw(p1, p2, p4));
};
const edgeProjects = (p1, p2, targetPoly) => {
// 檢查線段端點是否在多邊形內部
if (isPointInPoly(p1, targetPoly.pts) || isPointInPoly(p2, targetPoly.pts)) return true;
// 檢查線段是否與多邊形的任何一條邊相交
for (let k = 0; k < targetPoly.pts.length; k++) {
const q1 = targetPoly.pts[k];
const q2 = targetPoly.pts[(k + 1) % targetPoly.pts.length];
if (lineIntersects(p1, p2, q1, q2)) return true;
}
return false;
};
// Newell's Algorithm depth sorting for front faces based on edge-to-plane relations
frontFaces.sort((a, b) => {
const zDiff = a.avgZ - b.avgZ;
// 當 Z 軸深度接近時，啟用更精確的幾何表面位置判定
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
// 測試 1：檢查多邊形 A 的邊是否投影在多邊形 B 上
for (let i = 0; i < a.pts.length; i++) {
const p1_2d = a.pts[i];
const p2_2d = a.pts[(i + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[i];
const p2_3d = a.pts3D[(i + 1) % a.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// 如果 A 的邊在 B 的法向量正方向（前方），則 A 遮擋 B，A 應該在後面繪製（回傳 1）
return dot > 0 ? 1 : -1;
}
}
}
// 測試 2：反向檢查多邊形 B 的邊是否投影在多邊形 A 上
for (let j = 0; j < b.pts.length; j++) {
const p1_2d = b.pts[j];
const p2_2d = b.pts[(j + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[j];
const p2_3d = b.pts3D[(j + 1) % b.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// 如果 B 的邊在 A 的法向量負方向（後方），則 A 遮擋 B，A 應該在後面繪製（回傳 1）
return dot < 0 ? 1 : -1;
}
}
}
}
}
return zDiff;
});
```
### 修改重點說明：
1. **獨立的 `targetPoly` 與 `k` 索引**：將 `edgeProjects` 的內部循環變數改為 `k`，並明確命名傳入參數為 `targetPoly`。避免了在 `frontFaces.sort` 雙重迴圈中與外部的 `i` 變數以及 `a`/`b` 產生變數污染。
2. **完美對齊測試面板算法**：此程式碼邏輯與 `evaluateIntersection` 中的點積判斷完全相同。當處於 127.svg 的角度時，`edgeProjects(p1_2d, p2_2d, b)` 就會準確觸發，並計算出與 Normal B 同向的 Dot 值，從而強制回傳 `1`，確保 Face A 正確覆蓋在 Face B 之上（SVG 越後面的元素層級越高）。代码： 全选
當我在測試時，稍作移動，會出現以下兩種情況：
（105.svg）
tatus: A is Front, B is Front
Projection: Edges project onto each other (Overlap)
Projected Edges of A:
• Edge 1-2: In direction of Normal B
• Edge 2-3: On Plane B
• Edge 3-0: In direction of Normal B
Projected Edges of B:
• Edge 2-3: Opposite to Normal A
Order: Face A is IN FRONT OF Face B
（127.svg）
Status: A is Front, B is Front
Projection: Edges project onto each other (Overlap)
Projected Edges of A:
• Edge 1-2: In direction of Normal B
• Edge 2-3: On Plane B
• Edge 3-0: In direction of Normal B
Projected Edges of B:
• Edge 2-3: Opposite to Normal A
Order: Face B is IN FRONT OF Face A
情況（105.svg）是對的，情況（127.svg）是不對的，A面應始終在B面的前面，因為A面有邊在B面的法向量方向上。
修改「let polys」往下的代碼，借鑑測試框的代碼，解決這個問題。
一，區分正面和反面。
二，用冒泡法循環驗證每兩個面，只要A面有邊投影在B面上且處於B面的法向量方向上，則A面應置於B面的前方。
三，為每個面加id，測試區選取面時顯示它的id。
四，測試區加個按鈕，當按下時，console出以上「區分正反面和循環驗證」的結果，包含面的id。
只需給出所要修改的地方，所有的代碼和注釋都要使用英文。代码： 全选
Here are the modifications you need to make starting from the `let polys` declaration. The code integrates the front/back face differentiation, the bubble sort logic for normal-based depth validation, face ID assignments, and the testing tools you requested.
### Modified Code Block
Replace your existing logic starting from `let polys` downwards with the following:
```javascript
// I. Differentiate front and back faces & III. Assign ID to each face
let polys = faces.map((face, index) => {
// ... [Keep your existing vertex projection and normal calculations here] ...
// Assuming you calculate 'pts3D', 'pts2D', and 'normal' in this mapping phase
// Determine if the face is a front face based on the normal's Z direction.
// (Assuming a coordinate system where positive Z points towards the viewer)
const isFrontFace = face.normal.z > 0;
return {
...face, // Spread existing face data
id: `face_${index}`,
isFront: isFrontFace
};
});
// Optional: If you only want to process and render front-facing polygons
// polys = polys.filter(p => p.isFront);
// II. Bubble method loop to verify and sort every two faces
// Sorting logic: The array is ordered from back (index 0) to front (index length-1).
let swapped;
do {
swapped = false;
for (let i = 0; i < polys.length - 1; i++) {
let faceA = polys[i];
let faceB = polys[i + 1];
// Verify if the two faces overlap in the 2D projection
if (this.check2DOverlap(faceA.pts2D, faceB.pts2D)) {
// Check if Face A has any vertex in the direction of Face B's normal
// Formula: Dot Product of (Vertex_A - Vertex_B) and Normal_B > 0
let isAInFrontOfB = false;
for (let ptA of faceA.pts3D) {
let vecToA = {
x: ptA.x - faceB.pts3D[0].x,
y: ptA.y - faceB.pts3D[0].y,
z: ptA.z - faceB.pts3D[0].z
};
let dotProduct = vecToA.x * faceB.normal.x + vecToA.y * faceB.normal.y + vecToA.z * faceB.normal.z;
// If dot product is positive, the point is in the normal's direction (in front)
if (dotProduct > 0.0001) {
isAInFrontOfB = true;
break;
}
}
// If Face A is mathematically in front of Face B, but positioned before it in the array
// (which means it would be rendered behind Face B), we must swap them.
if (isAInFrontOfB) {
let temp = polys[i];
polys[i] = polys[i + 1];
polys[i + 1] = temp;
swapped = true;
}
}
}
} while (swapped);
// ... [Your existing SVG setup code] ...
// III. Add ID to SVG elements and handle click events in the test area
polys.forEach(poly => {
// ... [Keep your existing SVG path element creation, e.g., document.createElementNS(...)] ...
// Let's assume your generated element is stored in a variable named `pathElement`
pathElement.setAttribute('id', poly.id);
pathElement.setAttribute('data-is-front', poly.isFront);
// Display face ID and status when selected in the test area
pathElement.addEventListener('click', (e) => {
console.log(`Selected Face -> ID: ${poly.id} | Status: ${poly.isFront ? 'Front' : 'Back'}`);
// Optional: Add visual selection logic here (e.g., changing stroke color)
});
// ... [Keep your existing code to append pathElement to the SVG container] ...
});
// IV. Add a test button to console log the cyclic verification results
// Ensure the button is only created once
if (!document.getElementById('verify-faces-btn')) {
const testBtn = document.createElement('button');
testBtn.id = 'verify-faces-btn';
testBtn.innerText = 'Log Face Verifications';
testBtn.style.cssText = 'position: absolute; top: 10px; right: 10px; z-index: 1000; padding: 8px; cursor: pointer;';
testBtn.onclick = () => {
console.log('--- Verification Results (Differentiate & Overlap) ---');
for (let i = 0; i < polys.length; i++) {
for (let j = i + 1; j < polys.length; j++) {
let fA = polys[i];
let fB = polys[j];
if (this.check2DOverlap(fA.pts2D, fB.pts2D)) {
let statusA = fA.isFront ? 'Front' : 'Back';
let statusB = fB.isFront ? 'Front' : 'Back';
// Calculate directional logic for the log
let aInDirectionOfB = fA.pts3D.some(ptA => {
let vec = { x: ptA.x - fB.pts3D[0].x, y: ptA.y - fB.pts3D[0].y, z: ptA.z - fB.pts3D[0].z };
return (vec.x * fB.normal.x + vec.y * fB.normal.y + vec.z * fB.normal.z) > 0.0001;
});
console.log(`Status: ${fA.id} is ${statusA}, ${fB.id} is ${statusB}`);
console.log(`Projection: Edges project onto each other (Overlap)`);
console.log(`Order check: Does ${fA.id} have edges in direction of ${fB.id}'s Normal? -> ${aInDirectionOfB}`);
console.log(`---------------------------------------------------`);
}
}
}
};
// Append the button to your main container
this.container.appendChild(testBtn);
}
```代码： 全选
那段範例代碼的意思是告訴您：**「保留您原本代碼中在 `faces.forEach` 或 `faces.map` 裡面處理坐標轉換、計算 3D 點、法向量和深度（avgZ）的那些公式不變，只需要在回傳的物件中，確保加上一個 `id` 屬性即可。」**
在您提供的完整原始碼 `ejsolid195993.js` 中，您實際使用的變數名稱是 `faces.forEach((fIdx, idx) => { ... polys.push({ ... }) })`。
為了完美達成您的四個需求（區分正反面、冒泡法循環驗證、加入 id、加測試按鈕），請將原代碼中 **`faces.forEach((fIdx, idx) => { ... });` 開始，一直到 `this.dom.svgContainer.innerHTML = svg; ...` 之前**的所有排序與動畫資料處理邏輯，替換為以下完整的英文實作代碼。
請用以下代碼替換您原文件中 **`faces.forEach((fIdx, idx) => {`** 往下一直到 **`this.state.lastSvg = svg;` 之前** 的整段區域：
```javascript
// === Requirement 3: Construct polygons with custom sequential IDs ===
faces.forEach((fIdx, idx) => {
const pts = fIdx.map(i => projected[i]);
// Calculate 3D points in camera space to find precise planes and normals
const pts3D = fIdx.map(i => {
const v = vertices[i];
const dx = v[0] - cx, dy = v[1] - cy, dz = v[2] - cz;
return {
x: dx * rot[0] + dy * rot[1] + dz * rot[2],
y: dx * rot[3] + dy * rot[4] + dz * rot[5],
z: dx * rot[6] + dy * rot[7] + dz * rot[8]
};
});
// Calculate 3D normal vector using Newell's method
let nx = 0, ny = 0, nz = 0;
for (let j = 0; j < pts3D.length; j++) {
const next = (j + 1) % pts3D.length;
nx += (pts3D[j].y - pts3D[next].y) * (pts3D[j].z + pts3D[next].z);
ny += (pts3D[j].z - pts3D[next].z) * (pts3D[j].x + pts3D[next].x);
nz += (pts3D[j].x - pts3D[next].x) * (pts3D[j].y + pts3D[next].y);
}
const len = Math.sqrt(nx * nx + ny * ny + nz * nz);
const normal3D = len > 0 ? { x: nx / len, y: ny / len, z: nz / len } : { x: 0, y: 0, z: 1 };
polys.push({
pts,
pts3D,
normal3D,
avgZ: pts.reduce((s, p) => s + p.z, 0) / pts.length,
sides: pts.length,
fIdx,
id: `ejs-${idx}` // Unique string identifier matched by evaluation handlers
});
});
// Determine basic winding order for rendering styles
polys.forEach(p => {
let cp = 0;
for (let j = 0; j < p.pts.length; j++) {
let k = (j + 1) % p.pts.length;
cp += p.pts[j].x * p.pts[k].y - p.pts[k].x * p.pts[j].y;
}
p.isFront = cp < 0;
});
// === Requirement 1: Separate into front-facing and back-facing arrays ===
const backFaces = polys.filter(p => !p.isFront);
const frontFaces = polys.filter(p => p.isFront);
// Baseline fallback depth sort for backfaces (furthest first)
backFaces.sort((a, b) => a.avgZ - b.avgZ);
// Baseline initial sorting for front faces based on geometric Z depth center
frontFaces.sort((a, b) => a.avgZ - b.avgZ);
// Helpers cloned inside local context for edge projection calculations
const isPointInPolyLocal = (pt, polyPts) => {
let inside = false;
for (let i = 0, j = polyPts.length - 1; i < polyPts.length; j = i++) {
const xi = polyPts[i].x, yi = polyPts[i].y;
const xj = polyPts[j].x, yj = polyPts[j].y;
const intersect = ((yi > pt.y) !== (yj > pt.y))
&& (pt.x < (xj - xi) * (pt.y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
};
const lineIntersectsLocal = (p1, p2, p3, p4) => {
const ccw = (A, B, C) => (C.y - A.y) * (B.x - A.x) > (B.y - A.y) * (C.x - A.x);
return (ccw(p1, p3, p4) !== ccw(p2, p3, p4)) && (ccw(p1, p2, p3) !== ccw(p1, p2, p4));
};
const edgeProjectsLocal = (p1, p2, poly) => {
if (isPointInPolyLocal(p1, poly.pts) || isPointInPolyLocal(p2, poly.pts)) return true;
for (let i = 0; i < poly.pts.length; i++) {
const q1 = poly.pts[i];
const q2 = poly.pts[(i + 1) % poly.pts.length];
if (lineIntersectsLocal(p1, p2, q1, q2)) return true;
}
return false;
};
// === Requirement 2: Bubble sort to enforce Face A is in front of Face B based on normals ===
let swapped;
let iterationCount = 0;
const maxIterations = 200; // Safeguard loop boundaries against infinite cyclic traps
do {
swapped = false;
for (let i = 0; i < frontFaces.length - 1; i++) {
let faceA = frontFaces[i];
let faceB = frontFaces[i + 1];
// Only evaluate or swap if there is a real 2D overlapping projection area
if (this.check2DOverlap(faceA.pts, faceB.pts)) {
let shouldSwap = false;
// Test if any edge of faceA projects onto faceB and lies in the direction of Normal B
for (let j = 0; j < faceA.pts.length; j++) {
const p1_2d = faceA.pts[j], p2_2d = faceA.pts[(j + 1) % faceA.pts.length];
if (edgeProjectsLocal(p1_2d, p2_2d, faceB)) {
const p1_3d = faceA.pts3D[j], p2_3d = faceA.pts3D[(j + 1) % faceA.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = faceB.pts3D[0];
const dot = (midX - q.x) * faceB.normal3D.x + (midY - q.y) * faceB.normal3D.y + (midZ - q.z) * faceB.normal3D.z;
if (dot > 1e-4) {
// Face A has an edge in the direction of Normal B, meaning Face A MUST be rendered AFTER (in front of) Face B
shouldSwap = true;
break;
}
}
}
if (shouldSwap) {
frontFaces[i] = faceB;
frontFaces[i + 1] = faceA;
swapped = true;
}
}
}
iterationCount++;
} while (swapped && iterationCount < maxIterations);
// Merge lists together so backfaces draw first, followed by verified topologically sorted frontfaces
polys = [...backFaces, ...frontFaces];
this.state.currentPolys = polys;
const doAnim = this.config.animate;
const splitOpacity = doAnim && op < 1;
const animPolysData = [];
if (doAnim) {
const duration = this.config.animTime;
const angleDeg = this.config.animAngle;
const frameInterval = this.config.frameInt;
const totalFrames = Math.round(duration / frameInterval);
const alphaRad = (angleDeg * Math.PI) / 180;
const axisX = Math.sin(alphaRad), axisY = Math.cos(alphaRad);
let startAssigned = false;
polys.forEach(p => {
animPolysData.push({
pointsValues: [],
sets: [],
frontSets: [],
backSets: [],
lastCp: 0,
currentVis: false,
fIdx: p.fIdx,
id: p.id
});
});
for (let i = 0; i <= totalFrames; i++) {
const angle = (i / totalFrames) * 2 * Math.PI;
const c = Math.cos(angle), s = Math.sin(angle), t = 1 - c;
const rAnim = [
t * axisX * axisX + c, t * axisX * axisY, s * axisY,
t * axisX * axisY, t * axisY * axisY + c, -s * axisX,
-s * axisY, s * axisX, c
];
const curRot = [
rAnim[0] * this.state.rotMatrix[0] + rAnim[1] * this.state.rotMatrix[3] + rAnim[2] * this.state.rotMatrix[6],
rAnim[0] * this.state.rotMatrix[1] + rAnim[1] * this.state.rotMatrix[4] + rAnim[2] * this.state.rotMatrix[7],
rAnim[0] * this.state.rotMatrix[2] + rAnim[1] * this.state.rotMatrix[5] + rAnim[2] * this.state.rotMatrix[8],
rAnim[3] * this.state.rotMatrix[0] + rAnim[4] * this.state.rotMatrix[3] + rAnim[5] * this.state.rotMatrix[6],
rAnim[3] * this.state.rotMatrix[1] + rAnim[4] * this.state.rotMatrix[4] + rAnim[5] * this.state.rotMatrix[7],
rAnim[3] * this.state.rotMatrix[2] + rAnim[4] * this.state.rotMatrix[5] + rAnim[5] * this.state.rotMatrix[8],
rAnim[6] * this.state.rotMatrix[0] + rAnim[7] * this.state.rotMatrix[3] + rAnim[8] * this.state.rotMatrix[6],
rAnim[6] * this.state.rotMatrix[1] + rAnim[7] * this.state.rotMatrix[4] + rAnim[8] * this.state.rotMatrix[7],
rAnim[6] * this.state.rotMatrix[2] + rAnim[7] * this.state.rotMatrix[5] + rAnim[8] * this.state.rotMatrix[8]
];
const frameProjected = vertices.map(v => {
const x = v[0] - cx, y = v[1] - cy, z = v[2] - cz;
const rx = x * curRot[0] + y * curRot[1] + z * curRot[2];
const ry = x * curRot[3] + y * curRot[4] + z * curRot[5];
const rz = x * curRot[6] + y * curRot[7] + z * curRot[8];
const f = this.config.perspective ? 4 / (4 - rz) : 1;
return { x: rx * scale * f + offset, y: -ry * scale * f + offset };
});
animPolysData.forEach(animP => {
const pts = animP.fIdx.map(idx => frameProjected[idx]);
let cp = 0;
for (let j = 0; j < pts.length; j++) {
let k = (j + 1) % pts.length;
cp += pts[j].x * pts[k].y - pts[k].x * pts[j].y;
}
const isFront = cp < 0;
animP.pointsValues.push(pts.map(pt => `${pt.x.toFixed(2)},${pt.y.toFixed(2)}`).join(' '));
if (i === 0) {
animP.currentVis = isFront;
animP.lastCp = cp;
const visStr = isFront ? 'visible' : 'hidden';
const invVisStr = isFront ? 'hidden' : 'visible';
if (!startAssigned) {
animP.sets.push(`<set id="start" attributeName="visibility" to="${visStr}" begin="0;start.begin+${duration.toFixed(1)}s" />`);
animP.frontSets.push(`<set id="start" attributeName="visibility" to="${visStr}" begin="0;start.begin+${duration.toFixed(1)}s" />`);
animP.backSets.push(`<set attributeName="visibility" to="${invVisStr}" begin="0;start.begin+${duration.toFixed(1)}s" />`);
startAssigned = true;
} else {
animP.sets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin" />`);
animP.frontSets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin" />`);
animP.backSets.push(`<set attributeName="visibility" to="${invVisStr}" begin="start.begin" />`);
}
} else {
if (isFront !== animP.currentVis) {
animP.currentVis = isFront;
const visStr = isFront ? 'visible' : 'hidden';
const invVisStr = isFront ? 'hidden' : 'visible';
let fraction = Math.abs(animP.lastCp - cp) > 1e-6 ? Math.abs(animP.lastCp / (animP.lastCp - cp)) : 0.5;
let exactTime = ((i - 1 + fraction) * frameInterval).toFixed(3);
animP.sets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin+${exactTime}s" />`);
animP.frontSets.push(`<set attributeName="visibility" to="${visStr}" begin="start.begin+${exactTime}s" />`);
animP.backSets.push(`<set attributeName="visibility" to="${invVisStr}" begin="start.begin+${exactTime}s" />`);
}
animP.lastCp = cp;
}
});
}
}
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" preserveAspectRatio="xMidYMid meet">\n`;
const groupAttr = splitOpacity ? ` visibility="hidden"` : ``;
svg += ` <g stroke-linejoin="round"${groupAttr}>\n`;
polys.forEach((p, i) => {
const pStr = p.pts.map(pt => `${pt.x.toFixed(2)},${pt.y.toFixed(2)}`).join(' ');
let fill = this.config.defaultColors[p.sides] || '#ccc';
if (p.id === this.state.selectedPolyA && this.dom.colorTestA) {
fill = this.dom.colorTestA.value;
} else if (p.id === this.state.selectedPolyB && this.dom.colorTestB) {
fill = this.dom.colorTestB.value;
}
const isFrontAttr = p.isFront ? 'true' : 'false';
const polyIdAttr = ` id="${p.id}" data-front="${isFrontAttr}"`;
if (doAnim) {
const animP = animPolysData[i];
const valuesStr = animP.pointsValues.join(';');
const durationStr = this.config.animTime.toFixed(1);
svg += ` <polygon${polyIdAttr} points="${pStr}" fill="${fill}" fill-opacity="${op}" stroke="${strokeColor}" stroke-width="${sw}">\n`;
svg += ` <animate attributeName="points" values="${valuesStr}" dur="${durationStr}s" begin="start.begin" repeatCount="indefinite" />\n`;
if (!splitOpacity) {
animP.sets.forEach(setTag => { svg += ` ${setTag}\n`; });
}
svg += ` </polygon>\n`;
} else {
svg += ` <polygon${polyIdAttr} points="${pStr}" fill="${fill}" fill-opacity="${op}" stroke="${strokeColor}" stroke-width="${sw}" />\n`;
}
});
svg += ` </g>\n`;
if (splitOpacity) {
let backSvg = ` <g id="back" stroke-linejoin="round">\n`;
let frontSvg = ` <g id="front" stroke-linejoin="round">\n`;
polys.forEach((p, i) => {
const animP = animPolysData[i];
backSvg += ` <use href="#${animP.id}">\n`;
animP.backSets.forEach(setTag => { backSvg += ` ${setTag}\n`; });
backSvg += ` </use>\n`;
frontSvg += ` <use href="#${animP.id}">\n`;
animP.frontSets.forEach(setTag => { frontSvg += ` ${setTag}\n`; });
frontSvg += ` </use>\n`;
});
backSvg += ` </g>\n`;
frontSvg += ` </g>\n`;
svg += backSvg + frontSvg;
}
svg += `</svg>`;
// === Requirement 4: Dynamically append verification logging button if absent ===
if (!document.getElementById('ejs-console-verify-btn')) {
const logBtn = document.createElement('button');
logBtn.id = 'ejs-console-verify-btn';
logBtn.innerText = 'Console Verify Sorting';
logBtn.type = 'button';
logBtn.style.cssText = 'margin-top: 10px; width: 100%; padding: 10px; background: #0077b6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;';
logBtn.onclick = () => {
console.log('--- Geometry Separation & Verification Dump ---');
console.log(`Total Front Faces: ${frontFaces.length}`);
console.log(`Total Back Faces: ${backFaces.length}`);
frontFaces.forEach((fA, idxA) => {
for (let idxB = idxA + 1; idxB < frontFaces.length; idxB++) {
let fB = frontFaces[idxB];
if (this.check2DOverlap(fA.pts, fB.pts)) {
let aHasEdgeOnNormalB = false;
for (let j = 0; j < fA.pts.length; j++) {
const p1_2d = fA.pts[j], p2_2d = fA.pts[(j + 1) % fA.pts.length];
if (edgeProjectsLocal(p1_2d, p2_2d, fB)) {
const p1_3d = fA.pts3D[j], p2_3d = fA.pts3D[(j + 1) % fA.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = fB.pts3D[0];
const dot = (midX - q.x) * fB.normal3D.x + (midY - q.y) * fB.normal3D.y + (midZ - q.z) * fB.normal3D.z;
if (dot > 1e-4) {
aHasEdgeOnNormalB = true;
break;
}
}
}
console.log(`Pairwise Test -> Face A ID: ${fA.id} | Face B ID: ${fB.id}`);
console.log(` - 2D Intersecting Overlap: True`);
console.log(` - Face A has edge projecting along Normal B: ${aHasEdgeOnNormalB}`);
console.log(` - Render Layer Order: Face ${fB.id} draws before Face ${fA.id} (A is in front)`);
}
}
});
};
const leftPanel = this.container.querySelector('.ejsolid-left');
if (leftPanel) {
leftPanel.appendChild(logBtn);
}
}
```代码： 全选
若您想將測試面板中的這段邏輯直接應用到 `frontFaces.sort` 中，讓 Newell 演算法在排序正面時更加精準，我們需要將這些視覺提示的文字輸出，轉換為**排序函數所要求的數值返回值（`1` 或 `-1`）**。
在 JavaScript 的 `sort((a, b) => ...)` 中：
* 回傳 **負數（如 `-1`）**：代表 `a` 要排在 `b` 的**前面**（靠近陣列開頭，先被繪製，也就是在畫面上會被壓在下方/後方）。
* 回傳 **正數（如 `1`）**：代表 `a` 要排在 `b` 的**後面**（靠近陣列結尾，後被繪製，也就是在畫面上會顯現在上方/前方）。
您的需求是：**「In direction of Normal B」（A 在 B 的法向量正方向，即 A 在 B 的前方）時，要把 A 面置於 B 面之前（視覺上 A 遮擋 B，所以 A 必須「後繪製」，`sort` 應回傳 `1`）**。
以下是修改 `frontFaces.sort` 區塊（原程式碼約第 394 行至第 432 行）的改法：
### 🔧 建議修改後的 `frontFaces.sort` 程式碼
請將原本的 `frontFaces.sort((a, b) => { ... })` 區塊替換為以下程式碼：
```javascript
// Newell's Algorithm depth sorting for front faces based on edge-to-plane relations
frontFaces.sort((a, b) => {
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
// 1. 測試 A 的投影邊相對於 B 面法向量的位置
for (let i = 0; i < a.pts.length; i++) {
const p1_2d = a.pts[i], p2_2d = a.pts[(i + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[i], p2_3d = a.pts3D[(i + 1) % a.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 代表 A 在 B 的法向量方向（A在B前面）
// 為了讓 A 在視覺上置於 B 之前（遮擋B），A 必須後畫 -> 回傳 1
// 反之，若 dot < 0（A在B後面），B 遮擋 A -> B 後畫 -> 回傳 -1
return dot > 0 ? 1 : -1;
}
}
}
// 2. conversely：測試 B 的投影邊相對於 A 面法向量的位置
for (let i = 0; i < b.pts.length; i++) {
const p1_2d = b.pts[i], p2_2d = b.pts[(i + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[i], p2_3d = b.pts3D[(i + 1) % b.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 代表 B 在 A 的法向量方向（B在A前面）
// 視覺上 B 遮擋 A -> B 必須後畫 -> 回傳 -1（讓 a 排在前面/先畫）
// 反之，若 dot < 0（B在A後面）-> A 遮擋 B -> A 後畫 -> 回傳 1
return dot > 0 ? -1 : 1;
}
}
}
// 如果點積測試都共面或無法區分，則退回到傳統的平均 Z 軸深度排序
return a.avgZ > b.avgZ ? 1 : -1;
}
}
return zDiff;
});
```
### 💡 修改細節與邏輯對照說明：
1. **A 邊投影到 B 面 (`dot > 0`)**：
* 測試面板原本邏輯：`status = 'In direction of Normal B'`。
* 排序套用邏輯：這意味著 A 表面在 B 表面的「前方（外側）」。由於它是 3D 渲染的畫家演算法，後畫的會遮擋先畫的。為了讓 A 出現在畫面前方，A 必須後繪製，因此回傳 `1`（讓 `b` 排在 `a` 前面先畫）。
2. **B 邊投影到 A 面 (`dot > 0`)**：
* 測試面板原本邏輯：`status = 'In direction of Normal A'`。
* 排序套用邏輯：這意味著 B 表面在 A 表面的「前方（外側）」，換句話說 B 面要把 A 面擋住。所以 B 必須後繪製，陣列排序中 `a` 要排在前面先畫，因此回傳 `-1`。
這樣的修改能完美將您在測試面板中驗證正確的幾何遮擋邏輯，直接注入到動態 SVG 的 3D 面渲染排序（Painter's Algorithm）中，能大幅修正面與面交錯、旋轉時的閃爍或錯誤遮擋問題！代码： 全选
### 1. `sort(a, b)` 是否會像冒泡排序一樣比較每一項？
**答案是：不完全一樣。** 雖然它們最終目的都是要把陣列排好，但在「比較次數」和「內部演算法」上有很大的差別：
* **冒泡排序（Bubble Sort）**：是一種非常原始且固定的演算法。它會機械式地將陣列中「相鄰」的兩項兩兩比較，如果順序錯了就交換。它的時間複雜度固定是 $O(N^2)$。對於有 100 個面的模型，它會雷打不動地執行大約 4,950 次比較，效率非常低。
* **JavaScript 原生的 `.sort()**`：現代瀏覽器（如 Chrome 的 V8 引擎）底層通常使用 **時間快速排序（Timsort）** 或 **快速排序（Quicksort）／內省排序（Introsort）**。
* 它**不會**笨笨地去把每一項都跟其他所有項比一遍。
* 它會使用更聰明的跳躍式分組、二分法或分治法（Divide and Conquer）來減少比較次數，時間複雜度通常是 $O(N \log N)$。
* 對於 100 個面的模型，原生的 `.sort()` 通常只需要大約 700 次左右的兩兩比較就能排完。
---
### 2. 為什麼在 3D 渲染（Newell 演算法）中常常想改成冒泡排序？
在處理 3D 多邊形遮擋（例如 Newell 演算法）時，開發者有時會想刻意將 `.sort()` 改成**冒泡排序（或插入排序）**。
這是因為原生 `.sort()` 隱含了一個致命的前提：**「關係必須具有遞移律（Transitivity）」**。也就是說，如果 $A > B$ 且 $B > C$，那麼原生排序會直接認定 $A > C$，而**跳過 $A$ 和 $C$ 的直接比較**。
然而，在 3D 空間中，多邊形遮擋經常會出現「互鎖（幾何循環遮擋）」的非遞移現象（例如：A 擋住 B，B 擋住 C，C 卻反過來擋住 A）。
當這種幾何循環發生時，原生 `.sort()` 會因為跳過了關鍵的面面比較，導致計算邏輯陷入混亂，畫面就會出現**面與面不斷瘋狂閃爍、穿模**的現象。而冒泡排序因為迫使相鄰的面一定要進行正面交鋒，在特定動態場景下反而能提供更直觀的遮擋微調。
---
### 3. 如何把這段代碼改成冒泡排序法？
要將 EjSolid 改用冒泡排序，我們不能再使用原生的 `frontFaces.sort(...)`，而是要手動寫一個雙層迴圈的冒泡排序函數，並把您剛才修改好的「點積與投影核心邏輯」塞進去。
請找到 `draw()` 方法內約第 394 行的 `frontFaces.sort((a, b) => { ... })` 區塊，將其**完整替換**為以下手寫的冒泡排序邏輯：
```javascript
// === 改用手寫冒泡排序法 (Bubble Sort) 處理正面多邊形 ===
for (let i = 0; i < frontFaces.length - 1; i++) {
for (let j = 0; j < frontFaces.length - 1 - i; j++) {
// 取出相鄰的兩個面進行比對
const a = frontFaces[j];
const b = frontFaces[j + 1];
// 預設以傳統的 Z 軸平均深度差作為基準
let shouldSwap = false;
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
let foundRelation = false;
// 1. 測試 A 的投影邊相對於 B 面法向量的位置
for (let k = 0; k < a.pts.length; k++) {
const p1_2d = a.pts[k], p2_2d = a.pts[(k + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[k], p2_3d = a.pts3D[(k + 1) % a.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 代表 A 在 B 的前方（A遮擋B），A 必須後畫。
// 原本陣列順序是 [a, b]（a先畫、b後畫），所以需要交換位置變成 [b, a]
shouldSwap = dot > 0;
foundRelation = true;
break;
}
}
}
// 2. 如果 A 沒測出結果，反向測試 B 的投影邊相對於 A 面法向量的位置
if (!foundRelation) {
for (let k = 0; k < b.pts.length; k++) {
const p1_2d = b.pts[k], p2_2d = b.pts[(k + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[k], p2_3d = b.pts3D[(k + 1) % b.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 代表 B 在 A 的前方（B遮擋A），B 必須後畫。
// 原本是 [a, b] 本來就是 B 在後，所以「不需要」交換（dot > 0 時不交換，dot < 0 時交換）
shouldSwap = dot < 0;
foundRelation = true;
break;
}
}
}
}
// 3. 如果點積測試都分不出前後，則用純 Z 軸遠近決定是否交換
if (!foundRelation) {
shouldSwap = a.avgZ > b.avgZ;
}
} else {
// 2D 沒有重疊，用純 Z 軸遠近決定
shouldSwap = zDiff > 0;
}
} else {
// 深度界線明確，Z 軸越大的（越靠近相機）越需要後畫，如果 a > b 則需要交換
shouldSwap = zDiff > 0;
}
// 執行相鄰項交換
if (shouldSwap) {
const temp = frontFaces[j];
frontFaces[j] = frontFaces[j + 1];
frontFaces[j + 1] = temp;
}
}
}
```
### 💡 冒泡法改動的核心邏輯說明：
1. **交換條件的轉變**：在原生的 `sort` 中，我們是用回傳 `1` 或 `-1` 告訴引擎誰前誰後。改用冒泡排序後，我們改成定義一個布林值 `shouldSwap`。
2. **`shouldSwap = dot > 0`**：原本陣列順序是 `[frontFaces[j], frontFaces[j+1]]`（即 `[a, b]`）。如果檢測出來 A 其實在 B 的前面（A 遮擋 B），代表 A 應該要後畫，所以我們必須將它們**交換位置**（讓 `b` 移到前面先畫，`a` 移到後面後畫），因此當 `dot > 0` 時 `shouldSwap` 為 `true`。
3. **穩定性提升，但需注意效能**：這個改動會強迫相鄰的面嚴格執行幾何比對。如果您的 OBJ 模型面數較少（例如幾十個面），這個改動能有效壓制特定角度的遮擋閃爍；但若模型面數高達數百或數千，旋轉時可能會有肉眼可見的卡頓，需視模型的複雜度斟酌選用！代码： 全选
// === Use manual Bubble Sort to handle front-facing polygons ===
for (let i = 0; i < frontFaces.length - 1; i++) {
for (let j = 0; j < frontFaces.length - 1 - i; j++) {
// Get adjacent faces for comparison
const a = frontFaces[j];
const b = frontFaces[j + 1];
// Initialize using the traditional Z-depth average difference
let shouldSwap = false;
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
let foundRelation = false;
// 1. Test the relative position of projected edges of Face A to the normal vector of Face B
for (let k = 0; k < a.pts.length; k++) {
const p1_2d = a.pts[k], p2_2d = a.pts[(k + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[k], p2_3d = a.pts3D[(k + 1) % a.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 means Face A is in front of Face B (A occludes B), so A must be drawn later.
// The original order is [a, b] (a drawn first, b drawn later), so they need to be swapped to [b, a].
shouldSwap = dot > 0;
foundRelation = true;
break;
}
}
}
// 2. If no conclusive relation is found from Face A, test the projected edges of Face B relative to the normal vector of Face A
if (!foundRelation) {
for (let k = 0; k < b.pts.length; k++) {
const p1_2d = b.pts[k], p2_2d = b.pts[(k + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[k], p2_3d = b.pts3D[(k + 1) % b.pts3D.length];
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 means Face B is in front of Face A (B occludes A), so B must be drawn later.
// The original order is [a, b] where B is already drawn later, so NO swap is needed when dot > 0; swap when dot < 0.
shouldSwap = dot < 0;
foundRelation = true;
break;
}
}
}
}
// 3. If dot product tests cannot determine the order, fall back to pure Z-depth to decide swapping
if (!foundRelation) {
shouldSwap = a.avgZ > b.avgZ;
}
} else {
// No 2D overlap, determine by pure Z-depth
shouldSwap = zDiff > 0;
}
} else {
// Clear depth boundary: larger Z means closer to camera and should be drawn later; swap if a > b
shouldSwap = zDiff > 0;
}
// Perform swap for adjacent elements
if (shouldSwap) {
const temp = frontFaces[j];
frontFaces[j] = frontFaces[j + 1];
frontFaces[j + 1] = temp;
}
}
}代码： 全选
// === Use manual Bubble Sort to handle front-facing polygons ===
for (let i = 0; i < frontFaces.length - 1; i++) {
for (let j = 0; j < frontFaces.length - 1 - i; j++) {
// Get adjacent faces for comparison
const a = frontFaces[j];
const b = frontFaces[j + 1];
// Initialize using the traditional Z-depth average difference
let shouldSwap = false;
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
let foundRelation = false;
// 1. Test the relative position of projected edges of Face A to the normal vector of Face B
for (let k = 0; k < a.pts.length; k++) {
const p1_2d = a.pts[k], p2_2d = a.pts[(k + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[k], p2_3d = a.pts3D[(k + 1) % a.pts3D.length];
// Check if this edge of Face A is collinear/shared with any edge of Face B
let isSharedEdge = false;
for (let m = 0; m < b.pts3D.length; m++) {
const bp1 = b.pts3D[m];
const bp2 = b.pts3D[(m + 1) % b.pts3D.length];
// Verify if the endpoints match in either forward or reverse direction
const matchForward = (Math.abs(p1_3d.x - bp1.x) < 1e-4 && Math.abs(p1_3d.y - bp1.y) < 1e-4 && Math.abs(p1_3d.z - bp1.z) < 1e-4) &&
(Math.abs(p2_3d.x - bp2.x) < 1e-4 && Math.abs(p2_3d.y - bp2.y) < 1e-4 && Math.abs(p2_3d.z - bp2.z) < 1e-4);
const matchReverse = (Math.abs(p1_3d.x - bp2.x) < 1e-4 && Math.abs(p1_3d.y - bp2.y) < 1e-4 && Math.abs(p1_3d.z - bp2.z) < 1e-4) &&
(Math.abs(p2_3d.x - bp1.x) < 1e-4 && Math.abs(p2_3d.y - bp1.y) < 1e-4 && Math.abs(p2_3d.z - bp1.z) < 1e-4);
if (matchForward || matchReverse) {
isSharedEdge = true;
break;
}
}
// If the edge is shared/collinear, skip it as it cannot determine relative depth
if (isSharedEdge) continue;
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = b.pts3D[0];
const dot = (midX - q.x) * b.normal3D.x + (midY - q.y) * b.normal3D.y + (midZ - q.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 means Face A is in front of Face B (A occludes B), so A must be drawn later.
// The original order is [a, b] (a drawn first, b drawn later), so they need to be swapped to [b, a].
shouldSwap = dot > 0;
foundRelation = true;
break;
}
}
}
// 2. If no conclusive relation is found from Face A, test the projected edges of Face B relative to the normal vector of Face A
if (!foundRelation) {
for (let k = 0; k < b.pts.length; k++) {
const p1_2d = b.pts[k], p2_2d = b.pts[(k + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[k], p2_3d = b.pts3D[(k + 1) % b.pts3D.length];
// Check if this edge of Face B is collinear/shared with any edge of Face A
let isSharedEdge = false;
for (let m = 0; m < a.pts3D.length; m++) {
const ap1 = a.pts3D[m];
const ap2 = a.pts3D[(m + 1) % a.pts3D.length];
// Verify if the endpoints match in either forward or reverse direction
const matchForward = (Math.abs(p1_3d.x - ap1.x) < 1e-4 && Math.abs(p1_3d.y - ap1.y) < 1e-4 && Math.abs(p1_3d.z - ap1.z) < 1e-4) &&
(Math.abs(p2_3d.x - ap2.x) < 1e-4 && Math.abs(p2_3d.y - ap2.y) < 1e-4 && Math.abs(p2_3d.z - ap2.z) < 1e-4);
const matchReverse = (Math.abs(p1_3d.x - ap2.x) < 1e-4 && Math.abs(p1_3d.y - ap2.y) < 1e-4 && Math.abs(p1_3d.z - ap2.z) < 1e-4) &&
(Math.abs(p2_3d.x - ap1.x) < 1e-4 && Math.abs(p2_3d.y - ap1.y) < 1e-4 && Math.abs(p2_3d.z - ap1.z) < 1e-4);
if (matchForward || matchReverse) {
isSharedEdge = true;
break;
}
}
// If the edge is shared/collinear, skip it as it cannot determine relative depth
if (isSharedEdge) continue;
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const q = a.pts3D[0];
const dot = (midX - q.x) * a.normal3D.x + (midY - q.y) * a.normal3D.y + (midZ - q.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 means Face B is in front of Face A (B occludes A), so B must be drawn later.
// The original order is [a, b] where B is already drawn later, so NO swap is needed when dot > 0; swap when dot < 0.
shouldSwap = dot < 0;
foundRelation = true;
break;
}
}
}
}
// 3. If dot product tests cannot determine the order, fall back to pure Z-depth to decide swapping
if (!foundRelation) {
shouldSwap = a.avgZ > b.avgZ;
}
} else {
// No 2D overlap, determine by pure Z-depth
shouldSwap = zDiff > 0;
}
} else {
// Clear depth boundary: larger Z means closer to camera and should be drawn later; swap if a > b
shouldSwap = zDiff > 0;
}
// Perform swap for adjacent elements
if (shouldSwap) {
const temp = frontFaces[j];
frontFaces[j] = frontFaces[j + 1];
frontFaces[j + 1] = temp;
}
}
}代码： 全选
// === Use manual Bubble Sort to handle front-facing polygons ===
for (let i = 0; i < frontFaces.length - 1; i++) {
for (let j = 0; j < frontFaces.length - 1 - i; j++) {
// Get adjacent faces for comparison
const a = frontFaces[j];
const b = frontFaces[j + 1];
// Initialize using the traditional Z-depth average difference
let shouldSwap = false;
const zDiff = a.avgZ - b.avgZ;
if (Math.abs(zDiff) < 1.0) {
if (this.check2DOverlap(a.pts, b.pts)) {
let foundRelation = false;
// 1. Test the relative position of projected edges of Face A to the normal vector of Face B
for (let k = 0; k < a.pts.length; k++) {
const p1_2d = a.pts[k], p2_2d = a.pts[(k + 1) % a.pts.length];
if (edgeProjects(p1_2d, p2_2d, b)) {
const p1_3d = a.pts3D[k], p2_3d = a.pts3D[(k + 1) % a.pts.length];
// Check if the entire edge of Face A lies on the plane/surface of Face B
const qB = b.pts3D[0];
const dotP1_B = (p1_3d.x - qB.x) * b.normal3D.x + (p1_3d.y - qB.y) * b.normal3D.y + (p1_3d.z - qB.z) * b.normal3D.z;
const dotP2_B = (p2_3d.x - qB.x) * b.normal3D.x + (p2_3d.y - qB.y) * b.normal3D.y + (p2_3d.z - qB.z) * b.normal3D.z;
// If both endpoints are on Face B's plane, the edge lies on Face B. Skip it.
if (Math.abs(dotP1_B) < 1e-4 && Math.abs(dotP2_B) < 1e-4) {
continue;
}
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const dot = (midX - qB.x) * b.normal3D.x + (midY - qB.y) * b.normal3D.y + (midZ - qB.z) * b.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 means Face A is in front of Face B (A occludes B), so A must be drawn later.
// The original order is [a, b] (a drawn first, b drawn later), so they need to be swapped to [b, a].
shouldSwap = dot > 0;
foundRelation = true;
break;
}
}
}
// 2. If no conclusive relation is found from Face A, test the projected edges of Face B relative to the normal vector of Face A
if (!foundRelation) {
for (let k = 0; k < b.pts.length; k++) {
const p1_2d = b.pts[k], p2_2d = b.pts[(k + 1) % b.pts.length];
if (edgeProjects(p1_2d, p2_2d, a)) {
const p1_3d = b.pts3D[k], p2_3d = b.pts3D[(k + 1) % b.pts.length];
// Check if the entire edge of Face B lies on the plane/surface of Face A
const qA = a.pts3D[0];
const dotP1_A = (p1_3d.x - qA.x) * a.normal3D.x + (p1_3d.y - qA.y) * a.normal3D.y + (p1_3d.z - qA.z) * a.normal3D.z;
const dotP2_A = (p2_3d.x - qA.x) * a.normal3D.x + (p2_3d.y - qA.y) * a.normal3D.y + (p2_3d.z - qA.z) * a.normal3D.z;
// If both endpoints are on Face A's plane, the edge lies on Face A. Skip it.
if (Math.abs(dotP1_A) < 1e-4 && Math.abs(dotP2_A) < 1e-4) {
continue;
}
const midX = (p1_3d.x + p2_3d.x) / 2;
const midY = (p1_3d.y + p2_3d.y) / 2;
const midZ = (p1_3d.z + p2_3d.z) / 2;
const dot = (midX - qA.x) * a.normal3D.x + (midY - qA.y) * a.normal3D.y + (midZ - qA.z) * a.normal3D.z;
if (Math.abs(dot) > 1e-4) {
// dot > 0 means Face B is in front of Face A (B occludes A), so B must be drawn later.
// The original order is [a, b] where B is already drawn later, so NO swap is needed when dot > 0; swap when dot < 0.
shouldSwap = dot < 0;
foundRelation = true;
break;
}
}
}
}
// 3. If dot product tests cannot determine the order, fall back to pure Z-depth to decide swapping
if (!foundRelation) {
shouldSwap = a.avgZ > b.avgZ;
}
} else {
// No 2D overlap, determine by pure Z-depth
shouldSwap = zDiff > 0;
}
} else {
// Clear depth boundary: larger Z means closer to camera and should be drawn later; swap if a > b
shouldSwap = zDiff > 0;
}
// Perform swap for adjacent elements
if (shouldSwap) {
const temp = frontFaces[j];
frontFaces[j] = frontFaces[j + 1];
frontFaces[j + 1] = temp;
}
}
}