Georg/ai.interactive.fiction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint WebGL page and mirror debug fixes

Browse Source
This commit is contained in:
Georg Tomitsch
2026-06-06 00:54:42 +02:00
parent ca38f9ce92
commit 83b30000da
2 changed files with 90 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/procedural-book-model.js
+17 -21
View File
@@ -329,15 +329,14 @@ function addSimulatedStackBodies(group, context, model) {
const sideLines = model.lines.filter((line) => line.side === side);
if (!sideLines.length) return;
const isSinglePage = sideLines.length === 1;
const isHairOnlyPage = isSinglePage && sideLines[0].isHairPage === true;
const bodyLines = isSinglePage ? createSinglePageBodyLines(context, model, sideLines[0]) : sideLines;
const mesh = new THREE.Mesh(createLoftedLineBody(model, bodyLines, model.pageDepth), createStackBodyMaterials(context, model, side, isSinglePage, isHairOnlyPage));
const mesh = new THREE.Mesh(createLoftedLineBody(model, bodyLines, model.pageDepth), createStackBodyMaterials(context, model, side, isSinglePage));
mesh.userData.bookPart = side < 0 ? 'leftPages' : 'rightPages';
group.add(mesh);
});
}
function createStackBodyMaterials(context, model, side, isSinglePage = false, isHairOnlyPage = false) {
function createStackBodyMaterials(context, model, side, isSinglePage = false) {
const baseColor = side < 0 ? '#d8c7a4' : '#e7d6b4';
const lineColor = '#9a8058';
const layerTexture = createStackLayerTexture(context, model.bundleCount, baseColor, lineColor);
@@ -351,9 +350,7 @@ function createStackBodyMaterials(context, model, side, isSinglePage = false, is
const edge = surface.clone();
edge.map = layerTexture;
const bottom = context.materials.pageTop.clone();
const top = isHairOnlyPage
? context.materials.pageTop.clone()
: side < 0 && context.materials.leftPage
const top = side < 0 && context.materials.leftPage
? context.materials.leftPage
: side > 0 && context.materials.rightPage
? context.materials.rightPage
@@ -406,7 +403,6 @@ function createLoftedLineBody(model, lines, depth) {
const indices = [];
const smoothLines = lines.map((line) => line.points);
const bundleCount = model.bundleCount;
const allPagesOnOneSide = lines.length === model.bundleCount && lines.every((line) => line.isHairPage !== true);
const push = (point, z, uv) => {
const index = positions.length / 3;
positions.push(point.x, point.y, z);
@@ -434,13 +430,10 @@ function createLoftedLineBody(model, lines, depth) {
});
const topCapUv = (point, z, col, row) => {
const side = lines[row]?.side ?? 1;
const originalU = smoothLines[row].length <= 1 ? 0.5 : col / (smoothLines[row].length - 1);
const pageDistance = side > 0
? point.x - model.spineHalf
: -model.spineHalf - point.x;
const pageU = allPagesOnOneSide
? THREE.MathUtils.clamp(pageDistance / model.pageWidth, 0, 1)
: originalU;
const pageU = THREE.MathUtils.clamp(pageDistance / model.pageWidth, 0, 1);
return {
u: side < 0 ? 1 - pageU : pageU,
v: 1 - ((z + depth * 0.5) / depth)
@@ -476,8 +469,8 @@ function createLoftedLineBody(model, lines, depth) {
indices.push(frontA, backA, frontB);
indices.push(frontB, backA, backB);
}
const bottomRow = allPagesOnOneSide ? smoothLines.length - 1 : 0;
const topRow = allPagesOnOneSide ? 0 : smoothLines.length - 1;
const bottomRow = 0;
const topRow = smoothLines.length - 1;
const bottomStart = indices.length;
const bottomFront = smoothLines[bottomRow].map((point, col) => push(point, depth * 0.5, capUv(point, depth * 0.5, col, bottomRow)));
const bottomBack = smoothLines[bottomRow].map((point, col) => push(point, -depth * 0.5, capUv(point, -depth * 0.5, col, bottomRow)));
@@ -513,14 +506,10 @@ function createLoftedLineBody(model, lines, depth) {
indices.push(frontA, backA, frontB);
indices.push(frontB, backA, backB);
}
const pointA = smoothLines[topRow][col];
const pointB = smoothLines[topRow][col + 1];
const middleX = (pointA.x + pointB.x) * 0.5;
const isSpineArc = Math.abs(middleX) < model.spineHalf;
topGroups.push({
start: groupStart,
count: indices.length - groupStart,
materialIndex: allPagesOnOneSide && isSpineArc ? 4 : 3
materialIndex: 3
});
}
const geometry = new THREE.BufferGeometry();
@@ -537,13 +526,20 @@ function createLoftedLineBody(model, lines, depth) {
}
function createSinglePageBodyLines(context, model, line) {
const supportPoints = line.points.map((point) => ({
const topPoints = line.points.map((point) => ({
x: point.x,
y: Math.max(
coverTopYAtX(context, point.x) + coverClearance(model.bundleCount) + PROCEDURAL_BOOK.PROFILE.singlePageCoverGap + model.bundleSpacing,
point.y
)
}));
const supportPoints = topPoints.map((point) => ({
x: point.x,
y: Math.max(coverTopYAtX(context, point.x) + coverClearance(model.bundleCount) + PROCEDURAL_BOOK.PROFILE.singlePageCoverGap, point.y - model.bundleSpacing)
}));
return [
{ ...line, points: supportPoints, endpoint: supportPoints[supportPoints.length - 1] },
line
{ ...line, points: topPoints, endpoint: topPoints[topPoints.length - 1] }
];
}
@@ -756,7 +752,7 @@ function calculateBundleSpacing(bundleCount, spineWidth, leftCount) {
}
function calculateLeftBundleCount(context, bundleCount) {
return THREE.MathUtils.clamp(Math.round(bundleCount * context.readingProgress), 0, bundleCount);
return THREE.MathUtils.clamp(Math.round(bundleCount * context.readingProgress), 1, bundleCount - 1);
}
function buildSpineArcSamples(spineWidth) {