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

Refine WebGL paper and spine materials

Browse Source
This commit is contained in:
Georg Tomitsch
2026-06-06 08:53:29 +02:00
parent 67c0c4e7e3
commit 925caa57bb
2 changed files with 109 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/webgl-book-lab.js
+18 -17
View File
@@ -275,14 +275,14 @@ const materials = {
side: THREE.DoubleSide
}),
spineCloth: new THREE.MeshStandardMaterial({
color: 0x6f0808,
color: 0xa51d1d,
map: spineClothTextures.color,
normalMap: spineClothTextures.normal,
normalScale: new THREE.Vector2(0.075, 0.075),
normalScale: new THREE.Vector2(0.07, 0.07),
roughnessMap: spineClothTextures.roughness,
roughness: 0.9,
roughness: 0.86,
metalness: 0,
envMapIntensity: 0.045,
envMapIntensity: 0.075,
side: THREE.DoubleSide
})
};
@@ -536,8 +536,8 @@ function configureBookShadowReceiver(material, strength) {
sin((uv.y * 380.0 - uv.x * 33.0) * 6.28318530718);
float raisedThread = clamp(warp * 0.58 + weft * 0.44, 0.0, 1.0);
float valley = clamp((1.0 - warp) * (1.0 - weft), 0.0, 1.0);
vec3 threadTint = mix(vec3(0.55, 0.19, 0.16), vec3(1.18, 0.78, 0.58), raisedThread);
float fiberShade = 0.9 + fineFiber * 0.035 - valley * 0.18;
vec3 threadTint = mix(vec3(0.72, 0.24, 0.2), vec3(1.34, 0.86, 0.68), raisedThread);
float fiberShade = 0.96 + fineFiber * 0.03 - valley * 0.11;
return baseLight * threadTint * fiberShade;
}
@@ -547,12 +547,12 @@ function configureBookShadowReceiver(material, strength) {
}
vec3 hardcoverPaperLight(vec2 uv, vec3 baseLight) {
float laid = paperFiber(uv.y + sin(uv.x * 12.0) * 0.002, 88.0, 2.8);
float chain = paperFiber(uv.x + sin(uv.y * 8.0) * 0.0015, 18.0, 1.6);
float fleck = sin((uv.x * 241.0 + uv.y * 97.0) * 6.28318530718) *
sin((uv.y * 211.0 - uv.x * 53.0) * 6.28318530718);
float fiber = clamp(laid * 0.18 + chain * 0.1 + fleck * 0.025, -0.08, 0.24);
vec3 paperTint = mix(vec3(0.92, 0.9, 0.82), vec3(1.12, 1.08, 0.96), clamp(0.58 + fiber, 0.0, 1.0));
float cloud = sin((uv.x * 17.0 + uv.y * 11.0) * 6.28318530718) *
sin((uv.x * 29.0 - uv.y * 23.0) * 6.28318530718);
float fiber = clamp(fleck * 0.018 + cloud * 0.022, -0.04, 0.05);
vec3 paperTint = mix(vec3(0.96, 0.945, 0.89), vec3(1.08, 1.055, 0.98), clamp(0.62 + fiber, 0.0, 1.0));
return baseLight * paperTint;
}`
)
@@ -2049,9 +2049,9 @@ function createSpineClothTextures() {
const height = threadAt(x, y);
const wornFiber = 0.86 + 0.1 * Math.sin((x * 0.019 + y * 0.037)) + 0.04 * Math.sin((x * 0.083 - y * 0.011));
const threadGlow = THREE.MathUtils.clamp(0.58 + height * 0.46, 0, 1);
colorImage.data[index] = Math.round(95 * threadGlow * wornFiber);
colorImage.data[index + 1] = Math.round(10 * threadGlow * wornFiber);
colorImage.data[index + 2] = Math.round(9 * (0.84 + height * 0.12));
colorImage.data[index] = Math.round(128 * threadGlow * wornFiber);
colorImage.data[index + 1] = Math.round(22 * threadGlow * wornFiber);
colorImage.data[index + 2] = Math.round(18 * (0.86 + height * 0.12));
colorImage.data[index + 3] = 255;
const hLeft = threadAt((x - 1 + size) % size, y);
@@ -2116,12 +2116,12 @@ function createHardcoverPaperTextures() {
const fiberAt = (x, y) => {
const nx = x / size;
const ny = y / size;
const laid = Math.sin((ny * 92 + Math.sin(nx * 25.1327412287) * 0.12) * 6.28318530718);
const chain = Math.sin((nx * 18 + Math.sin(ny * 12.5663706144) * 0.06) * 6.28318530718);
const pulpA = Math.sin((nx * 173 + ny * 67) * 6.28318530718);
const pulpB = Math.sin((nx * 89 - ny * 131) * 6.28318530718);
const cloudA = Math.sin((nx * 19 + ny * 11) * 6.28318530718);
const cloudB = Math.sin((nx * 31 - ny * 27) * 6.28318530718);
const fleck = Math.max(0, 0.5 - Math.abs(pulpA * pulpB));
return laid * 0.08 + chain * 0.045 - fleck * 0.055;
return cloudA * cloudB * 0.026 - fleck * 0.035;
};
for (let y = 0; y < size; y += 1) {
@@ -2135,7 +2135,8 @@ function createHardcoverPaperTextures() {
colorImage.data[index + 2] = Math.round(235 * shade);
colorImage.data[index + 3] = 255;
const line = y % 34 === 0 ? 0.72 : y % 34 === 1 ? 0.82 : 1;
const linePhase = (y + Math.sin(x * 0.021) * 4) % 34;
const line = linePhase < 1.2 ? 0.72 : linePhase < 2.1 ? 0.82 : 1;
edgeImage.data[index] = Math.round(255 * shade * line);
edgeImage.data[index + 1] = Math.round(244 * shade * line);
edgeImage.data[index + 2] = Math.round(207 * shade * line);