Document WebGL page texture pipeline

public/js/webgl-book-lab.js

@@ -251,6 +251,15 @@ const materials = {
         envMapIntensity: 0.035,
         side: THREE.DoubleSide
     }),
+    flipPageSurface: new THREE.MeshStandardMaterial({
+        color: 0xfffcf2,
+        roughness: 0.92,
+        metalness: 0,
+        emissive: 0x100d08,
+        emissiveIntensity: 0.018,
+        envMapIntensity: 0.02,
+        side: THREE.DoubleSide
+    }),
     leftPage: new THREE.MeshStandardMaterial({
         color: 0xffffff,
         map: leftTexture,
@@ -312,6 +321,7 @@ configureBookShadowReceiver(materials.coverEdge, 0.28);
 configureBookShadowReceiver(materials.pageBlock, 0.46);
 configureBookShadowReceiver(materials.pageEdge, 0.34);
 configureBookShadowReceiver(materials.pageSurface, 0.34);
+configureBookShadowReceiver(materials.flipPageSurface, 0.32);
 configureBookShadowReceiver(materials.leftPage, 0.38);
 configureBookShadowReceiver(materials.rightPage, 0.38);
 configureBookShadowReceiver(materials.spineCloth, 0.48);
@@ -1586,7 +1596,7 @@ function lineYAtX(points, x) {
 function setActivePageGeometry(flip, surface) {
     const geometry = createFlippingPageGeometry(surface);
     if (!flip.mesh) {
-        flip.mesh = new THREE.Mesh(geometry, materials.pageSurface);
+        flip.mesh = new THREE.Mesh(geometry, materials.flipPageSurface);
         flip.mesh.castShadow = false;
         flip.mesh.receiveShadow = false;
         flip.mesh.userData.bookPart = 'flippingPage';