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

Correct WebGL book page projection

Browse Source
This commit is contained in:
Georg Tomitsch
2026-06-07 09:56:56 +02:00
parent 081cfa9902
commit 777e39a650
6 changed files with 179 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/procedural-book-model.js
+10 -8
View File
@@ -6,10 +6,10 @@ export const PROCEDURAL_BOOK = {
PAGE_COUNT_STEP: 10,
PAGE_LINE_SEGMENTS: 48,
PAGE_DEPTH: 2.24,
PAGE_WIDTH: 2.24 * 2 / 3,
PAGE_WIDTH: 2.24 * (4.25 / 6.87),
COVER_DEPTH: 2.30,
OPEN_SEAM_GAP: 0.003,
PAGE_TEXTURE_FORE_EDGE_INSET_RATIO: 0.12,
PAGE_TEXTURE_FORE_EDGE_INSET_RATIO: 0.105,
PROFILE: {
tableY: 0,
coverThickness: 0.03,
@@ -566,12 +566,14 @@ function createLoftedLineBody(model, lines, depth) {
v: (z + depth * 0.5) / depth
});
const topCapUv = (point, z, col, row) => {
const side = lines[row]?.side ?? 1;
const pageDistance = side > 0
? point.x - model.spineHalf
: -model.spineHalf - point.x;
const textureInset = model.pageWidth * PROCEDURAL_BOOK.PAGE_TEXTURE_FORE_EDGE_INSET_RATIO;
const pageU = THREE.MathUtils.clamp(pageDistance / Math.max(0.001, model.pageWidth - textureInset), 0, 1);
const line = lines[row] || {};
const side = line.side ?? 1;
const anchor = line.anchor || smoothLines[row][0] || { x: side * model.spineHalf };
const endpoint = line.endpoint || smoothLines[row].at(-1) || { x: side * model.foreEdgeX };
const pageDistance = side * (point.x - anchor.x);
const totalDistance = Math.max(0.001, side * (endpoint.x - anchor.x));
const textureInset = totalDistance * PROCEDURAL_BOOK.PAGE_TEXTURE_FORE_EDGE_INSET_RATIO;
const pageU = THREE.MathUtils.clamp(pageDistance / Math.max(0.001, totalDistance - textureInset), 0, 1);
return {
u: side < 0 ? 1 - pageU : pageU,
v: 1 - ((z + depth * 0.5) / depth)