1242 lines
50 KiB
JavaScript
1242 lines
50 KiB
JavaScript
import * as THREE from 'https://esm.sh/three@0.165.0';
|
|
|
|
const canvas = document.getElementById('scene');
|
|
canvas.style.cursor = 'grab';
|
|
const tableDebugModes = {
|
|
none: 0,
|
|
shadow: 1,
|
|
dust: 2,
|
|
normal: 3,
|
|
room: 4,
|
|
scene: 5,
|
|
mask: 6,
|
|
ao: 7
|
|
};
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const tableDebugName = urlParams.get('tableDebug') || 'none';
|
|
const tableDebugMode = tableDebugModes[tableDebugName] ?? tableDebugModes.none;
|
|
const labStatus = document.getElementById('lab_status');
|
|
if (labStatus && tableDebugMode !== tableDebugModes.none) {
|
|
labStatus.textContent = `table debug: ${tableDebugName}`;
|
|
}
|
|
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false });
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
|
|
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
renderer.toneMappingExposure = 1.12;
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.type = THREE.VSMShadowMap;
|
|
|
|
const generatedTextureCanvases = {};
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x080604);
|
|
scene.fog = new THREE.FogExp2(0x080604, 0.035);
|
|
let candleBounceLight = null;
|
|
let tableMesh = null;
|
|
let tableShader = null;
|
|
let tableRoomReflectionTexture = createRoomReflectionTexture();
|
|
let tableDustTexture = null;
|
|
const tableTopY = -0.02;
|
|
const tableReflectionTarget = new THREE.WebGLRenderTarget(1024, 576, {
|
|
colorSpace: THREE.SRGBColorSpace,
|
|
depthBuffer: true,
|
|
stencilBuffer: false
|
|
});
|
|
tableReflectionTarget.texture.colorSpace = THREE.SRGBColorSpace;
|
|
tableReflectionTarget.texture.minFilter = THREE.LinearFilter;
|
|
tableReflectionTarget.texture.magFilter = THREE.LinearFilter;
|
|
const tableReflectionCamera = new THREE.PerspectiveCamera();
|
|
const tableReflectionMatrix = new THREE.Matrix4();
|
|
const tableReflectionBiasMatrix = new THREE.Matrix4().set(
|
|
0.5, 0, 0, 0.5,
|
|
0, 0.5, 0, 0.5,
|
|
0, 0, 0.5, 0.5,
|
|
0, 0, 0, 1
|
|
);
|
|
const reflectionForward = new THREE.Vector3();
|
|
const reflectionTarget = new THREE.Vector3();
|
|
const reflectionUp = new THREE.Vector3();
|
|
const candleShadowSources = [];
|
|
const candleWorldPosition = new THREE.Vector3();
|
|
const flameWorldPosition = new THREE.Vector3();
|
|
|
|
const camera = new THREE.PerspectiveCamera(28, 1, 0.1, 80);
|
|
const cameraRig = {
|
|
target: new THREE.Vector3(0, 0.16, -0.04),
|
|
yaw: 0,
|
|
pitch: 1.06,
|
|
radius: 5.54,
|
|
minPitch: 0.28,
|
|
maxPitch: 1.34,
|
|
minRadius: 2.4,
|
|
maxRadius: 9.0,
|
|
dragging: false,
|
|
pointerX: 0,
|
|
pointerY: 0,
|
|
keys: new Set()
|
|
};
|
|
if (urlParams.get('view') === 'wide') {
|
|
cameraRig.target.set(0, 0.05, 0);
|
|
cameraRig.pitch = 0.96;
|
|
cameraRig.radius = 7.8;
|
|
}
|
|
updateCameraRig(0);
|
|
|
|
const clock = new THREE.Clock();
|
|
const book = new THREE.Group();
|
|
scene.add(book);
|
|
|
|
const paperColor = new THREE.Color(0xf3dfad);
|
|
const inkColor = '#1a1009';
|
|
|
|
const leftCanvas = createPageCanvas('left');
|
|
const rightCanvas = createPageCanvas('right');
|
|
const leftTexture = new THREE.CanvasTexture(leftCanvas);
|
|
const rightTexture = new THREE.CanvasTexture(rightCanvas);
|
|
[leftTexture, rightTexture].forEach((texture) => {
|
|
texture.colorSpace = THREE.SRGBColorSpace;
|
|
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
|
|
texture.minFilter = THREE.LinearMipmapLinearFilter;
|
|
texture.magFilter = THREE.LinearFilter;
|
|
texture.generateMipmaps = true;
|
|
});
|
|
|
|
const materials = {
|
|
leather: new THREE.MeshStandardMaterial({
|
|
color: 0x25130b,
|
|
roughness: 0.58,
|
|
metalness: 0.02,
|
|
envMapIntensity: 0.18
|
|
}),
|
|
coverEdge: new THREE.MeshStandardMaterial({
|
|
color: 0x6f4b25,
|
|
roughness: 0.52,
|
|
metalness: 0.04,
|
|
envMapIntensity: 0.22
|
|
}),
|
|
pageBlock: new THREE.MeshStandardMaterial({
|
|
color: 0xe3c98f,
|
|
roughness: 0.82,
|
|
metalness: 0,
|
|
envMapIntensity: 0.08
|
|
}),
|
|
pageEdge: new THREE.MeshStandardMaterial({
|
|
color: 0xc69f64,
|
|
roughness: 0.92,
|
|
metalness: 0,
|
|
envMapIntensity: 0.08
|
|
}),
|
|
leftPage: new THREE.MeshStandardMaterial({
|
|
color: 0xffffff,
|
|
map: leftTexture,
|
|
roughness: 0.74,
|
|
metalness: 0,
|
|
emissive: 0x2d1e12,
|
|
emissiveIntensity: 0.18,
|
|
side: THREE.DoubleSide
|
|
}),
|
|
rightPage: new THREE.MeshStandardMaterial({
|
|
color: 0xffffff,
|
|
map: rightTexture,
|
|
roughness: 0.74,
|
|
metalness: 0,
|
|
emissive: 0x2d1e12,
|
|
emissiveIntensity: 0.18,
|
|
side: THREE.DoubleSide
|
|
})
|
|
};
|
|
|
|
buildTable();
|
|
buildLighting();
|
|
buildBook();
|
|
loadAiRoomReflection();
|
|
window.BookLabDebug = {
|
|
textures: generatedTextureCanvases,
|
|
exportTexture(name) {
|
|
return generatedTextureCanvases[name]?.toDataURL('image/png') || null;
|
|
}
|
|
};
|
|
|
|
window.addEventListener('resize', resize);
|
|
installCameraControls();
|
|
resize();
|
|
animate();
|
|
|
|
function buildTable() {
|
|
const tableTexture = new THREE.TextureLoader().load('/assets/webgl/wood_table_diff_1k.jpg');
|
|
tableTexture.colorSpace = THREE.SRGBColorSpace;
|
|
tableTexture.wrapS = THREE.RepeatWrapping;
|
|
tableTexture.wrapT = THREE.RepeatWrapping;
|
|
tableTexture.repeat.set(2.15, 1.45);
|
|
tableTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
|
|
const tableNormal = createTableNormalTexture();
|
|
tableNormal.wrapS = THREE.RepeatWrapping;
|
|
tableNormal.wrapT = THREE.RepeatWrapping;
|
|
tableNormal.repeat.set(2.15, 1.45);
|
|
tableNormal.anisotropy = renderer.capabilities.getMaxAnisotropy();
|
|
tableDustTexture = createTableDustTexture();
|
|
tableDustTexture.wrapS = THREE.ClampToEdgeWrapping;
|
|
tableDustTexture.wrapT = THREE.ClampToEdgeWrapping;
|
|
tableDustTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
|
|
|
|
const tableMaterial = new THREE.MeshPhysicalMaterial({
|
|
color: 0x8a4c22,
|
|
map: tableTexture,
|
|
normalMap: tableNormal,
|
|
normalScale: new THREE.Vector2(0.22, 0.18),
|
|
roughness: 0.38,
|
|
metalness: 0,
|
|
clearcoat: 0.54,
|
|
clearcoatRoughness: 0.48,
|
|
reflectivity: 0.34,
|
|
envMapIntensity: 0
|
|
});
|
|
configureTableShader(tableMaterial);
|
|
tableMesh = new THREE.Mesh(new THREE.BoxGeometry(9.8, 0.28, 6.6, 1, 1, 1), tableMaterial);
|
|
tableMesh.position.y = -0.16;
|
|
tableMesh.receiveShadow = true;
|
|
scene.add(tableMesh);
|
|
}
|
|
|
|
function buildLighting() {
|
|
scene.add(new THREE.AmbientLight(0x120b06, 0.22));
|
|
|
|
candleBounceLight = new THREE.HemisphereLight(0x4a2a14, 0x080403, 0.3);
|
|
scene.add(candleBounceLight);
|
|
|
|
addCandle(-2.38, 0.0, -0.55, 2.35, 0.62);
|
|
addCandle(2.2, 0.0, -1.34, 1.85, 0.38);
|
|
addCandle(2.36, 0.0, 0.62, 1.5, 0.48);
|
|
}
|
|
|
|
function addCandle(x, y, z, intensity, height) {
|
|
const candle = new THREE.Group();
|
|
candle.position.set(x, y, z);
|
|
|
|
const waxMaterial = createWaxMaterial(height);
|
|
const wax = new THREE.Mesh(
|
|
new THREE.CylinderGeometry(0.12, 0.12, height, 32),
|
|
waxMaterial
|
|
);
|
|
wax.position.y = height / 2 - 0.05;
|
|
wax.castShadow = false;
|
|
wax.receiveShadow = false;
|
|
candle.add(wax);
|
|
|
|
const waxGlow = new THREE.Mesh(
|
|
new THREE.CylinderGeometry(0.126, 0.126, height * 0.98, 32),
|
|
new THREE.MeshBasicMaterial({
|
|
color: 0xffc579,
|
|
transparent: true,
|
|
opacity: 0.045,
|
|
depthWrite: false
|
|
})
|
|
);
|
|
waxGlow.position.copy(wax.position);
|
|
waxGlow.castShadow = false;
|
|
waxGlow.receiveShadow = false;
|
|
candle.add(waxGlow);
|
|
|
|
const wickTopY = height + 0.075;
|
|
const wick = new THREE.Mesh(
|
|
new THREE.CylinderGeometry(0.012, 0.009, 0.16, 10),
|
|
new THREE.MeshStandardMaterial({
|
|
color: 0x1a0f08,
|
|
roughness: 0.92,
|
|
metalness: 0,
|
|
emissive: 0x2a1206,
|
|
emissiveIntensity: 0.24
|
|
})
|
|
);
|
|
wick.position.y = height + 0.015;
|
|
wick.rotation.x = 0.16;
|
|
candle.add(wick);
|
|
|
|
const flame = createFlame();
|
|
flame.position.y = wickTopY + 0.055;
|
|
candle.add(flame);
|
|
|
|
const baseLightIntensity = intensity * 7.4;
|
|
const light = new THREE.PointLight(0xff9f45, baseLightIntensity, 4.35, 1.86);
|
|
light.position.copy(flame.position);
|
|
light.castShadow = true;
|
|
light.shadow.mapSize.set(1024, 1024);
|
|
light.shadow.bias = -0.00004;
|
|
light.shadow.normalBias = 0.018;
|
|
light.shadow.radius = 5;
|
|
light.shadow.blurSamples = 12;
|
|
light.shadow.camera.near = 0.04;
|
|
light.shadow.camera.far = 5.0;
|
|
candle.add(light);
|
|
|
|
candle.userData = {
|
|
light,
|
|
flame,
|
|
wax,
|
|
waxMaterial,
|
|
waxGlow,
|
|
bodyRadius: 0.12,
|
|
bodyHeight: height,
|
|
baseIntensity: baseLightIntensity,
|
|
seed: Math.random() * 100
|
|
};
|
|
candleShadowSources.push(candle);
|
|
scene.add(candle);
|
|
}
|
|
|
|
function createFlame() {
|
|
const flame = new THREE.Group();
|
|
const outer = new THREE.Mesh(
|
|
createFlameGeometry(0.07, 0.2, 28, 18),
|
|
createFlameMaterial({
|
|
base: new THREE.Color(0x342100),
|
|
middle: new THREE.Color(0xff9a20),
|
|
tip: new THREE.Color(0xffd271),
|
|
opacity: 0.58,
|
|
noiseScale: 16,
|
|
displacement: 0.015
|
|
})
|
|
);
|
|
const core = new THREE.Mesh(
|
|
createFlameGeometry(0.034, 0.145, 24, 14),
|
|
createFlameMaterial({
|
|
base: new THREE.Color(0x203258),
|
|
middle: new THREE.Color(0xfff2a8),
|
|
tip: new THREE.Color(0xffb54a),
|
|
opacity: 0.82,
|
|
noiseScale: 21,
|
|
displacement: 0.008
|
|
})
|
|
);
|
|
outer.renderOrder = 4;
|
|
core.renderOrder = 5;
|
|
flame.add(outer, core);
|
|
return flame;
|
|
}
|
|
|
|
function createFlameGeometry(radius, height, radialSegments, heightSegments) {
|
|
const positions = [];
|
|
const normals = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
|
|
for (let y = 0; y <= heightSegments; y += 1) {
|
|
const v = y / heightSegments;
|
|
const taper = Math.sin(Math.PI * Math.pow(v, 0.72));
|
|
const point = Math.pow(v, 3.2);
|
|
const ringRadius = radius * taper * (1 - point * 0.82) * (0.72 + v * 0.5);
|
|
const yPos = (v - 0.18) * height;
|
|
for (let x = 0; x <= radialSegments; x += 1) {
|
|
const u = x / radialSegments;
|
|
const angle = u * Math.PI * 2;
|
|
const lean = v * v * 0.018;
|
|
positions.push(
|
|
Math.cos(angle) * ringRadius + lean,
|
|
yPos,
|
|
Math.sin(angle) * ringRadius
|
|
);
|
|
normals.push(Math.cos(angle), 0.35, Math.sin(angle));
|
|
uvs.push(u, v);
|
|
}
|
|
}
|
|
|
|
for (let y = 0; y < heightSegments; y += 1) {
|
|
for (let x = 0; x < radialSegments; x += 1) {
|
|
const a = y * (radialSegments + 1) + x;
|
|
const b = a + 1;
|
|
const c = a + radialSegments + 1;
|
|
const d = c + 1;
|
|
indices.push(a, c, b, b, c, d);
|
|
}
|
|
}
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setIndex(indices);
|
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
|
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
|
|
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
|
|
geometry.computeVertexNormals();
|
|
return geometry;
|
|
}
|
|
|
|
function createFlameMaterial({ base, middle, tip, opacity, noiseScale, displacement }) {
|
|
return new THREE.ShaderMaterial({
|
|
transparent: true,
|
|
depthWrite: false,
|
|
depthTest: true,
|
|
blending: THREE.AdditiveBlending,
|
|
uniforms: {
|
|
time: { value: 0 },
|
|
baseColor: { value: base },
|
|
middleColor: { value: middle },
|
|
tipColor: { value: tip },
|
|
flameOpacity: { value: opacity },
|
|
noiseScale: { value: noiseScale },
|
|
displacement: { value: displacement }
|
|
},
|
|
vertexShader: `
|
|
uniform float time;
|
|
uniform float noiseScale;
|
|
uniform float displacement;
|
|
varying vec2 vUv;
|
|
varying float vHeight;
|
|
|
|
float wave(vec3 p) {
|
|
return sin(p.x * noiseScale + time * 7.1) * 0.5 +
|
|
sin((p.z + p.y) * noiseScale * 0.73 - time * 5.4) * 0.5;
|
|
}
|
|
|
|
void main() {
|
|
vUv = uv;
|
|
vHeight = uv.y;
|
|
vec3 transformed = position;
|
|
float flutter = wave(position) * displacement * smoothstep(0.08, 1.0, uv.y);
|
|
transformed.x += flutter;
|
|
transformed.z += sin(time * 4.9 + position.y * 23.0) * displacement * 0.35 * uv.y;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);
|
|
}
|
|
`,
|
|
fragmentShader: `
|
|
uniform float time;
|
|
uniform vec3 baseColor;
|
|
uniform vec3 middleColor;
|
|
uniform vec3 tipColor;
|
|
uniform float flameOpacity;
|
|
varying vec2 vUv;
|
|
varying float vHeight;
|
|
|
|
float hash(vec2 p) {
|
|
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
|
}
|
|
|
|
void main() {
|
|
float alphaShape = smoothstep(0.0, 0.18, vHeight) * smoothstep(1.0, 0.58, vHeight);
|
|
float flicker = 0.88 + sin(time * 9.0 + hash(vUv) * 6.2831) * 0.08;
|
|
vec3 lower = mix(baseColor, middleColor, smoothstep(0.08, 0.5, vHeight));
|
|
vec3 color = mix(lower, tipColor, smoothstep(0.54, 1.0, vHeight));
|
|
gl_FragColor = vec4(color * flicker, alphaShape * flameOpacity);
|
|
}
|
|
`
|
|
});
|
|
}
|
|
|
|
function createWaxMaterial(height) {
|
|
const material = new THREE.MeshPhysicalMaterial({
|
|
color: 0xffdfaa,
|
|
roughness: 0.52,
|
|
metalness: 0,
|
|
transmission: 0.46,
|
|
thickness: 0.42,
|
|
attenuationColor: 0xffb76a,
|
|
attenuationDistance: 0.62,
|
|
ior: 1.42,
|
|
emissive: 0xffb56a,
|
|
emissiveIntensity: 0.055,
|
|
envMapIntensity: 0
|
|
});
|
|
|
|
material.customProgramCacheKey = () => `book-lab-wax-flame-aware-sss-${height.toFixed(3)}`;
|
|
material.onBeforeCompile = (shader) => {
|
|
material.userData.shader = shader;
|
|
shader.uniforms.waxHeight = { value: height };
|
|
shader.uniforms.waxFlameWorldPosition = { value: new THREE.Vector3(0, height + 0.12, 0) };
|
|
shader.uniforms.waxBodyWorldPosition = { value: new THREE.Vector3() };
|
|
shader.uniforms.waxLightPower = { value: 1 };
|
|
shader.vertexShader = shader.vertexShader
|
|
.replace(
|
|
'#include <common>',
|
|
'#include <common>\nvarying float vWaxLocalY;\nvarying vec3 vWaxWorldPosition;\nvarying vec3 vWaxWorldNormal;'
|
|
)
|
|
.replace(
|
|
'#include <begin_vertex>',
|
|
'#include <begin_vertex>\nvWaxLocalY = position.y;'
|
|
)
|
|
.replace(
|
|
'#include <defaultnormal_vertex>',
|
|
'#include <defaultnormal_vertex>\nvWaxWorldNormal = normalize(mat3(modelMatrix) * objectNormal);'
|
|
)
|
|
.replace(
|
|
'#include <project_vertex>',
|
|
'vWaxWorldPosition = (modelMatrix * vec4(transformed, 1.0)).xyz;\n#include <project_vertex>'
|
|
);
|
|
shader.fragmentShader = shader.fragmentShader
|
|
.replace(
|
|
'#include <common>',
|
|
`#include <common>
|
|
uniform float waxHeight;
|
|
uniform vec3 waxFlameWorldPosition;
|
|
uniform vec3 waxBodyWorldPosition;
|
|
uniform float waxLightPower;
|
|
varying float vWaxLocalY;
|
|
varying vec3 vWaxWorldPosition;
|
|
varying vec3 vWaxWorldNormal;`
|
|
)
|
|
.replace(
|
|
'#include <opaque_fragment>',
|
|
`float waxTop = smoothstep(waxHeight * 0.08, waxHeight * 0.5, vWaxLocalY);
|
|
float waxRim = pow(1.0 - abs(dot(normalize(normal), normalize(geometryViewDir))), 2.2);
|
|
float waxCore = smoothstep(-waxHeight * 0.45, waxHeight * 0.3, vWaxLocalY);
|
|
float waxFlameCup = smoothstep(waxHeight * 0.28, waxHeight * 0.52, vWaxLocalY);
|
|
vec3 waxToFlame = waxFlameWorldPosition - vWaxWorldPosition;
|
|
float waxFlameDistance = length(waxToFlame);
|
|
vec3 waxLightDir = normalize(waxToFlame);
|
|
vec3 waxWorldNormal = normalize(vWaxWorldNormal);
|
|
float waxNearFlame = 1.0 - smoothstep(0.06, 0.58, waxFlameDistance);
|
|
float waxUpperBody = smoothstep(waxBodyWorldPosition.y + waxHeight * 0.38, waxBodyWorldPosition.y + waxHeight * 0.92, vWaxWorldPosition.y);
|
|
float waxForwardScatter = pow(max(dot(waxWorldNormal, waxLightDir), 0.0), 0.62);
|
|
float waxBackScatter = pow(max(dot(-waxWorldNormal, waxLightDir), 0.0), 1.5);
|
|
float waxSideGlow = pow(max(1.0 - abs(dot(waxWorldNormal, waxLightDir)), 0.0), 1.15);
|
|
float waxSubsurface = (waxNearFlame * (0.56 + waxForwardScatter * 0.42) + waxBackScatter * 0.25 + waxSideGlow * 0.18) * waxUpperBody * waxLightPower;
|
|
float waxCavityGlow = waxFlameCup * waxNearFlame * waxLightPower * 0.75;
|
|
vec3 waxScatter = vec3(1.0, 0.48, 0.19) * (waxTop * 0.11 + waxRim * waxCore * 0.09 + waxFlameCup * 0.08 + waxSubsurface * 0.46 + waxCavityGlow * 0.36);
|
|
outgoingLight += waxScatter;
|
|
#include <opaque_fragment>`
|
|
);
|
|
};
|
|
|
|
return material;
|
|
}
|
|
|
|
function configureTableShader(material) {
|
|
material.customProgramCacheKey = () => 'book-lab-table-planar-environment-reflection-v2';
|
|
material.onBeforeCompile = (shader) => {
|
|
tableShader = shader;
|
|
shader.uniforms.roomReflectionMap = { value: tableRoomReflectionTexture };
|
|
shader.uniforms.sceneReflectionMap = { value: tableReflectionTarget.texture };
|
|
shader.uniforms.sceneReflectionMatrix = { value: tableReflectionMatrix };
|
|
shader.uniforms.tableDustMap = { value: tableDustTexture };
|
|
shader.uniforms.candleBodyPositions = {
|
|
value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()]
|
|
};
|
|
shader.uniforms.candleFlamePositions = {
|
|
value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()]
|
|
};
|
|
shader.uniforms.candleBodyData = {
|
|
value: [new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()]
|
|
};
|
|
shader.uniforms.tableDebugMode = { value: tableDebugMode };
|
|
|
|
shader.vertexShader = shader.vertexShader
|
|
.replace(
|
|
'#include <common>',
|
|
'#include <common>\nuniform mat4 sceneReflectionMatrix;\nvarying vec3 vTableWorldPosition;\nvarying vec4 vSceneReflectionCoord;'
|
|
)
|
|
.replace(
|
|
'#include <project_vertex>',
|
|
'vec4 tableWorldPosition = modelMatrix * vec4(transformed, 1.0);\nvTableWorldPosition = tableWorldPosition.xyz;\nvSceneReflectionCoord = sceneReflectionMatrix * tableWorldPosition;\n#include <project_vertex>'
|
|
);
|
|
|
|
shader.fragmentShader = shader.fragmentShader
|
|
.replace(
|
|
'#include <common>',
|
|
`#include <common>
|
|
uniform sampler2D roomReflectionMap;
|
|
uniform sampler2D sceneReflectionMap;
|
|
uniform sampler2D tableDustMap;
|
|
uniform mat4 sceneReflectionMatrix;
|
|
uniform vec3 candleBodyPositions[3];
|
|
uniform vec3 candleFlamePositions[3];
|
|
uniform vec2 candleBodyData[3];
|
|
uniform int tableDebugMode;
|
|
varying vec3 vTableWorldPosition;
|
|
varying vec4 vSceneReflectionCoord;
|
|
|
|
vec3 rotateRoomReflection(vec3 dir) {
|
|
const float yaw = 0.42;
|
|
float s = sin(yaw);
|
|
float c = cos(yaw);
|
|
return normalize(vec3(c * dir.x - s * dir.z, dir.y, s * dir.x + c * dir.z));
|
|
}
|
|
|
|
vec3 sampleRoomReflection(vec3 dir) {
|
|
dir = rotateRoomReflection(normalize(dir));
|
|
float u = 0.5 + atan(dir.z, dir.x) / 6.28318530718;
|
|
float v = 0.5 + asin(clamp(dir.y, -1.0, 1.0)) / 3.14159265359;
|
|
return texture2D(roomReflectionMap, vec2(u, v)).rgb;
|
|
}
|
|
|
|
vec3 sampleRoughRoomReflection(vec3 dir) {
|
|
vec3 tangent = normalize(cross(vec3(0.0, 1.0, 0.0), dir));
|
|
if (length(tangent) < 0.01) tangent = vec3(1.0, 0.0, 0.0);
|
|
vec3 bitangent = normalize(cross(dir, tangent));
|
|
return sampleRoomReflection(dir) * 0.42 +
|
|
sampleRoomReflection(dir + tangent * 0.035) * 0.18 +
|
|
sampleRoomReflection(dir - tangent * 0.035) * 0.18 +
|
|
sampleRoomReflection(dir + bitangent * 0.026) * 0.11 +
|
|
sampleRoomReflection(dir - bitangent * 0.026) * 0.11;
|
|
}
|
|
|
|
float candleBodyOcclusion(vec3 point, vec3 flame, vec3 body, vec2 bodyData, float selfLight) {
|
|
vec3 segment = point - flame;
|
|
vec2 segmentXZ = segment.xz;
|
|
vec2 flameToBody = flame.xz - body.xz;
|
|
float radius = bodyData.x;
|
|
float a = max(dot(segmentXZ, segmentXZ), 0.000001);
|
|
float b = 2.0 * dot(flameToBody, segmentXZ);
|
|
float c = dot(flameToBody, flameToBody) - radius * radius;
|
|
float discriminant = b * b - 4.0 * a * c;
|
|
float nearestT = clamp(-dot(flameToBody, segmentXZ) / a, 0.0, 1.0);
|
|
vec2 nearestXZ = flameToBody + segmentXZ * nearestT;
|
|
float nearestDistance = length(nearestXZ);
|
|
float hitT = nearestT;
|
|
float cylinderHit = 0.0;
|
|
if (discriminant > 0.0) {
|
|
float sqrtDisc = sqrt(discriminant);
|
|
float t0 = (-b - sqrtDisc) / (2.0 * a);
|
|
float t1 = (-b + sqrtDisc) / (2.0 * a);
|
|
float validT0 = step(0.0, t0) * step(t0, 1.0);
|
|
float validT1 = step(0.0, t1) * step(t1, 1.0);
|
|
hitT = mix(hitT, t0, validT0);
|
|
hitT = mix(hitT, t1, (1.0 - validT0) * validT1);
|
|
cylinderHit = max(validT0, validT1);
|
|
}
|
|
float closestY = flame.y + segment.y * hitT;
|
|
float bodyTop = body.y + bodyData.y;
|
|
float vertical = smoothstep(body.y - 0.045, body.y + 0.08, closestY) *
|
|
(1.0 - smoothstep(bodyTop - 0.08, bodyTop + 0.045, closestY));
|
|
float segmentLength = length(segment);
|
|
float penumbraWidth = radius * (0.45 + segmentLength * 0.12);
|
|
float exactHit = cylinderHit;
|
|
float softHit = 1.0 - smoothstep(radius, radius + penumbraWidth, nearestDistance);
|
|
float selfShadowLimiter = mix(1.0, 0.06, selfLight);
|
|
float waxExitHeight = smoothstep(body.y, bodyTop, closestY);
|
|
float waxTransmission = 0.48 + 0.34 * waxExitHeight;
|
|
float bodyOpacity = 1.0 - waxTransmission * mix(0.62, 0.86, selfLight);
|
|
return clamp(max(exactHit, softHit * 0.72) * vertical * selfShadowLimiter * bodyOpacity, 0.0, 0.42);
|
|
}
|
|
|
|
float candleContactOcclusion(vec3 point, vec3 body, vec2 bodyData) {
|
|
vec2 delta = point.xz - body.xz;
|
|
float base = 1.0 - smoothstep(bodyData.x * 0.72, bodyData.x * 2.55, length(delta));
|
|
return base * 0.32;
|
|
}
|
|
|
|
float candleContactField(vec3 point) {
|
|
float contact = 0.0;
|
|
for (int bodyIndex = 0; bodyIndex < 3; bodyIndex++) {
|
|
contact = max(contact, candleContactOcclusion(point, candleBodyPositions[bodyIndex], candleBodyData[bodyIndex]));
|
|
}
|
|
return clamp(contact, 0.0, 0.36);
|
|
}
|
|
|
|
float candleProjectedShadowField(vec3 point) {
|
|
float projectedShadow = 0.0;
|
|
for (int bodyIndex = 0; bodyIndex < 3; bodyIndex++) {
|
|
for (int flameIndex = 0; flameIndex < 3; flameIndex++) {
|
|
float selfLight = bodyIndex == flameIndex ? 1.0 : 0.0;
|
|
projectedShadow = max(projectedShadow, candleBodyOcclusion(point, candleFlamePositions[flameIndex], candleBodyPositions[bodyIndex], candleBodyData[bodyIndex], selfLight));
|
|
}
|
|
}
|
|
return clamp(projectedShadow, 0.0, 0.46);
|
|
}`
|
|
)
|
|
.replace(
|
|
'#include <opaque_fragment>',
|
|
`vec3 viewDirWorld = normalize(cameraPosition - vTableWorldPosition);
|
|
vec3 tableNormalWorld = normalize(vec3(normal.x * 0.18, 1.0, normal.z * 0.18));
|
|
vec3 reflectedDir = reflect(-viewDirWorld, tableNormalWorld);
|
|
vec3 roomReflection = sampleRoughRoomReflection(reflectedDir);
|
|
roomReflection = pow(max(roomReflection, vec3(0.0)), vec3(0.78));
|
|
roomReflection *= vec3(0.88, 0.7, 0.5);
|
|
vec2 sceneReflectionUv = vSceneReflectionCoord.xy / max(vSceneReflectionCoord.w, 0.0001);
|
|
float sceneReflectionInBounds = step(0.0, sceneReflectionUv.x) * step(0.0, sceneReflectionUv.y) *
|
|
step(sceneReflectionUv.x, 1.0) * step(sceneReflectionUv.y, 1.0);
|
|
float sceneReflectionEdge = smoothstep(0.0, 0.08, sceneReflectionUv.x) *
|
|
smoothstep(0.0, 0.08, sceneReflectionUv.y) *
|
|
smoothstep(0.0, 0.08, 1.0 - sceneReflectionUv.x) *
|
|
smoothstep(0.0, 0.08, 1.0 - sceneReflectionUv.y);
|
|
vec2 roughReflectionUv = sceneReflectionUv + normal.xz * 0.024;
|
|
vec3 sceneReflection = texture2D(sceneReflectionMap, roughReflectionUv).rgb;
|
|
sceneReflection = pow(max(sceneReflection, vec3(0.0)), vec3(0.88)) * sceneReflectionInBounds * sceneReflectionEdge;
|
|
vec2 tableDustUv = clamp(vec2(vTableWorldPosition.x / 9.8 + 0.5, 0.5 - vTableWorldPosition.z / 6.6), vec2(0.0), vec2(1.0));
|
|
float dust = texture2D(tableDustMap, tableDustUv).r;
|
|
float reflectionCleanliness = 1.0 - dust * 0.62;
|
|
vec3 combinedReflection = (roomReflection * 0.18 + sceneReflection * 0.5) * reflectionCleanliness;
|
|
float fresnel = pow(1.0 - max(dot(viewDirWorld, tableNormalWorld), 0.0), 1.85);
|
|
float tableReflectionMask = smoothstep(-0.095, -0.025, vTableWorldPosition.y);
|
|
vec3 reflectedSurface = combinedReflection * (0.56 + fresnel * 0.44);
|
|
float contactAo = 1.0 - smoothstep(0.0, 0.9, length(vTableWorldPosition.xz * vec2(0.34, 0.58))) * 0.16;
|
|
float dustDulling = dust * tableReflectionMask;
|
|
float candleContact = candleContactField(vTableWorldPosition) * tableReflectionMask;
|
|
float candleProjectedShadow = candleProjectedShadowField(vTableWorldPosition) * tableReflectionMask;
|
|
float candleOcclusion = clamp(candleContact + candleProjectedShadow * 0.42, 0.0, 0.48);
|
|
vec3 normalDebug = normalize(normal) * 0.5 + 0.5;
|
|
outgoingLight *= mix(1.0, contactAo, tableReflectionMask * 0.55);
|
|
outgoingLight = mix(outgoingLight, reflectedSurface, tableReflectionMask * (0.07 + fresnel * 0.14) * reflectionCleanliness);
|
|
outgoingLight += tableReflectionMask * roomReflection * 0.008 * reflectionCleanliness;
|
|
outgoingLight = mix(outgoingLight, outgoingLight * vec3(0.72, 0.68, 0.6) + vec3(0.045, 0.036, 0.025), dustDulling * 0.32);
|
|
outgoingLight *= mix(vec3(1.0), vec3(0.5, 0.4, 0.31), candleOcclusion);
|
|
if (tableDebugMode == 1) outgoingLight = vec3(candleProjectedShadow);
|
|
if (tableDebugMode == 2) outgoingLight = vec3(dust);
|
|
if (tableDebugMode == 3) outgoingLight = normalDebug;
|
|
if (tableDebugMode == 4) outgoingLight = roomReflection;
|
|
if (tableDebugMode == 5) outgoingLight = sceneReflection;
|
|
if (tableDebugMode == 6) outgoingLight = vec3(tableReflectionMask);
|
|
if (tableDebugMode == 7) outgoingLight = vec3(candleContact);
|
|
#include <opaque_fragment>`
|
|
);
|
|
};
|
|
}
|
|
|
|
function buildBook() {
|
|
book.position.set(0, 0.03, 0);
|
|
book.rotation.y = 0;
|
|
|
|
const coverW = 1.76;
|
|
const coverH = 2.42;
|
|
const coverT = 0.09;
|
|
const pageW = 1.56;
|
|
const pageH = 2.22;
|
|
const stackT = 0.22;
|
|
|
|
const spine = new THREE.Mesh(new THREE.BoxGeometry(0.28, 0.24, coverH), materials.leather);
|
|
spine.position.set(0, -0.015, 0);
|
|
spine.castShadow = true;
|
|
spine.receiveShadow = true;
|
|
book.add(spine);
|
|
|
|
const leftCover = makeBox(coverW, coverT, coverH, materials.leather);
|
|
leftCover.position.set(-coverW / 2 - 0.08, -0.055, 0);
|
|
leftCover.rotation.z = 0.035;
|
|
book.add(leftCover);
|
|
|
|
const rightCover = makeBox(coverW, coverT, coverH, materials.leather);
|
|
rightCover.position.set(coverW / 2 + 0.08, -0.055, 0);
|
|
rightCover.rotation.z = -0.035;
|
|
book.add(rightCover);
|
|
|
|
const leftStack = makeBox(pageW, stackT, pageH, materials.pageBlock);
|
|
leftStack.position.set(-pageW / 2 - 0.075, 0.045, 0);
|
|
leftStack.rotation.z = 0.018;
|
|
book.add(leftStack);
|
|
|
|
const rightStack = makeBox(pageW, stackT, pageH, materials.pageBlock);
|
|
rightStack.position.set(pageW / 2 + 0.075, 0.045, 0);
|
|
rightStack.rotation.z = -0.018;
|
|
book.add(rightStack);
|
|
|
|
addPageEdgeLines(leftStack.position.x, -1, pageW, pageH, stackT);
|
|
addPageEdgeLines(rightStack.position.x, 1, pageW, pageH, stackT);
|
|
|
|
const leftPage = new THREE.Mesh(createPageGeometry(-1, pageW, pageH), materials.leftPage);
|
|
leftPage.position.y = 0.2;
|
|
leftPage.castShadow = true;
|
|
leftPage.receiveShadow = false;
|
|
book.add(leftPage);
|
|
|
|
const rightPage = new THREE.Mesh(createPageGeometry(1, pageW, pageH), materials.rightPage);
|
|
rightPage.position.y = 0.2;
|
|
rightPage.castShadow = true;
|
|
rightPage.receiveShadow = false;
|
|
book.add(rightPage);
|
|
|
|
const gutterShadow = new THREE.Mesh(
|
|
new THREE.BoxGeometry(0.045, 0.028, pageH * 0.96),
|
|
new THREE.MeshStandardMaterial({ color: 0x5f3d20, roughness: 0.98 })
|
|
);
|
|
gutterShadow.position.set(0, 0.205, 0);
|
|
book.add(gutterShadow);
|
|
}
|
|
|
|
function makeBox(width, height, depth, material) {
|
|
const mesh = new THREE.Mesh(new THREE.BoxGeometry(width, height, depth), material);
|
|
mesh.castShadow = true;
|
|
mesh.receiveShadow = true;
|
|
return mesh;
|
|
}
|
|
|
|
function addPageEdgeLines(centerX, side, pageW, pageH, stackT) {
|
|
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x8e6840, transparent: true, opacity: 0.34 });
|
|
const edgeX = centerX + side * pageW * 0.5;
|
|
for (let i = 0; i < 22; i += 1) {
|
|
const y = -0.06 + (i / 21) * stackT;
|
|
const zInset = 0.04 + (i % 3) * 0.006;
|
|
const points = [
|
|
new THREE.Vector3(edgeX, y, -pageH / 2 + zInset),
|
|
new THREE.Vector3(edgeX + side * 0.012, y + 0.002, pageH / 2 - zInset)
|
|
];
|
|
book.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), lineMaterial));
|
|
}
|
|
}
|
|
|
|
function createPageGeometry(side, width, height) {
|
|
const columns = 36;
|
|
const rows = 42;
|
|
const positions = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
for (let y = 0; y <= rows; y += 1) {
|
|
const v = y / rows;
|
|
const z = (v - 0.5) * height;
|
|
for (let x = 0; x <= columns; x += 1) {
|
|
const u = x / columns;
|
|
const outward = u * width;
|
|
const pageX = side * (0.055 + outward);
|
|
const gutterLift = 0.055 * Math.pow(1 - u, 2.1);
|
|
const edgeFall = -0.012 * Math.pow(u, 1.7);
|
|
const centerSag = -0.014 * Math.sin(Math.PI * v) * Math.sin(Math.PI * u);
|
|
const ripple = 0.004 * Math.sin(v * Math.PI * 4 + side * 0.7) * (1 - Math.abs(u - 0.5));
|
|
positions.push(pageX, gutterLift + edgeFall + centerSag, z + ripple);
|
|
uvs.push(side < 0 ? 1 - u : u, 1 - v);
|
|
}
|
|
}
|
|
for (let y = 0; y < rows; y += 1) {
|
|
for (let x = 0; x < columns; x += 1) {
|
|
const a = y * (columns + 1) + x;
|
|
const b = a + 1;
|
|
const c = a + columns + 1;
|
|
const d = c + 1;
|
|
indices.push(a, c, b, b, c, d);
|
|
}
|
|
}
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setIndex(indices);
|
|
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
|
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
|
|
geometry.computeVertexNormals();
|
|
return geometry;
|
|
}
|
|
|
|
function createPageCanvas(side) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 1800;
|
|
canvas.height = 2500;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = '#f5dfab';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const grain = ctx.createImageData(canvas.width, canvas.height);
|
|
for (let i = 0; i < grain.data.length; i += 4) {
|
|
const n = 234 + Math.floor(Math.random() * 24);
|
|
grain.data[i] = n;
|
|
grain.data[i + 1] = Math.min(255, n - 8);
|
|
grain.data[i + 2] = Math.max(0, n - 45);
|
|
grain.data[i + 3] = 18;
|
|
}
|
|
ctx.putImageData(grain, 0, 0);
|
|
|
|
const shade = ctx.createLinearGradient(0, 0, canvas.width, 0);
|
|
shade.addColorStop(0, 'rgba(93, 55, 24, 0.18)');
|
|
shade.addColorStop(side === 'left' ? 0.85 : 0.15, 'rgba(255, 255, 255, 0)');
|
|
shade.addColorStop(1, 'rgba(85, 49, 21, 0.12)');
|
|
ctx.fillStyle = shade;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.strokeStyle = 'rgba(92, 63, 31, 0.18)';
|
|
ctx.lineWidth = 2;
|
|
for (let y = 290; y < canvas.height - 190; y += 88) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(170, y);
|
|
ctx.lineTo(canvas.width - 160, y + Math.sin(y * 0.02) * 4);
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.fillStyle = inkColor;
|
|
ctx.textBaseline = 'top';
|
|
if (side === 'left') {
|
|
drawCentered(ctx, 'Georg Tomitsch', 255, 44);
|
|
drawCentered(ctx, 'Eibenreith', 330, 92);
|
|
drawCentered(ctx, 'Ein Kaiserpunk Abenteuer', 455, 54);
|
|
drawCentered(ctx, 'speech | autoplay | speed | new game | save | load | options', 610, 34);
|
|
drawCentered(ctx, 'click on page or press spacebar to fast forward text animation', 720, 34);
|
|
} else {
|
|
drawParagraph(ctx, 'Click on new game or load to start the game', 210, 310, canvas.width - 420, 74, 1.35);
|
|
}
|
|
return canvas;
|
|
}
|
|
|
|
function createRoomReflectionTexture() {
|
|
const canvas = document.createElement('canvas');
|
|
generatedTextureCanvases.roomReflection = canvas;
|
|
canvas.width = 2048;
|
|
canvas.height = 1024;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const wall = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
|
wall.addColorStop(0, '#050302');
|
|
wall.addColorStop(0.36, '#140906');
|
|
wall.addColorStop(0.72, '#2b150b');
|
|
wall.addColorStop(1, '#060302');
|
|
ctx.fillStyle = wall;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.globalAlpha = 0.28;
|
|
for (let i = 0; i < 7; i += 1) {
|
|
const x = 170 + i * 285;
|
|
const glow = ctx.createRadialGradient(x, 520, 0, x, 520, 300);
|
|
glow.addColorStop(0, 'rgba(255, 157, 64, 0.55)');
|
|
glow.addColorStop(0.2, 'rgba(144, 68, 27, 0.28)');
|
|
glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
|
ctx.fillStyle = glow;
|
|
ctx.fillRect(x - 330, 190, 660, 660);
|
|
}
|
|
|
|
ctx.globalAlpha = 0.16;
|
|
ctx.fillStyle = '#c99655';
|
|
for (let i = 0; i < 10; i += 1) {
|
|
ctx.fillRect(120 + i * 190, 230, 52, 390);
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
|
|
const texture = new THREE.CanvasTexture(canvas);
|
|
texture.colorSpace = THREE.SRGBColorSpace;
|
|
texture.mapping = THREE.EquirectangularReflectionMapping;
|
|
texture.needsUpdate = true;
|
|
return texture;
|
|
}
|
|
|
|
function loadAiRoomReflection() {
|
|
new THREE.TextureLoader().load('/assets/webgl/room_reflection_candlelit_study_equirect_4k.png', (texture) => {
|
|
texture.colorSpace = THREE.SRGBColorSpace;
|
|
texture.mapping = THREE.EquirectangularReflectionMapping;
|
|
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
|
|
texture.minFilter = THREE.LinearMipmapLinearFilter;
|
|
texture.magFilter = THREE.LinearFilter;
|
|
texture.generateMipmaps = true;
|
|
texture.needsUpdate = true;
|
|
tableRoomReflectionTexture = texture;
|
|
if (tableShader) {
|
|
tableShader.uniforms.roomReflectionMap.value = texture;
|
|
}
|
|
|
|
const image = texture.image;
|
|
if (!image) return;
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = image.naturalWidth || image.width;
|
|
canvas.height = image.naturalHeight || image.height;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
generatedTextureCanvases.aiRoomReflection = canvas;
|
|
tintAmbientFromCanvas(canvas);
|
|
}, undefined, () => {
|
|
tintAmbientFromCanvas(generatedTextureCanvases.roomReflection);
|
|
});
|
|
}
|
|
|
|
function tintAmbientFromCanvas(canvas) {
|
|
if (!canvas || !candleBounceLight) return;
|
|
const ctx = canvas.getContext('2d');
|
|
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
|
|
let r = 0;
|
|
let g = 0;
|
|
let b = 0;
|
|
let count = 0;
|
|
for (let i = 0; i < data.length; i += 256) {
|
|
r += data[i];
|
|
g += data[i + 1];
|
|
b += data[i + 2];
|
|
count += 1;
|
|
}
|
|
const color = new THREE.Color(r / count / 255, g / count / 255, b / count / 255);
|
|
color.offsetHSL(0, 0.08, 0.04);
|
|
candleBounceLight.color.copy(color);
|
|
candleBounceLight.intensity = 0.28;
|
|
}
|
|
|
|
function createTableNormalTexture() {
|
|
const canvas = document.createElement('canvas');
|
|
generatedTextureCanvases.tableNormal = canvas;
|
|
canvas.width = 2048;
|
|
canvas.height = 2048;
|
|
const ctx = canvas.getContext('2d');
|
|
const image = ctx.createImageData(canvas.width, canvas.height);
|
|
for (let y = 0; y < canvas.height; y += 1) {
|
|
for (let x = 0; x < canvas.width; x += 1) {
|
|
const i = (y * canvas.width + x) * 4;
|
|
const grain = Math.sin(x * 0.028) * 8 + Math.sin((x + y) * 0.011) * 5 + Math.sin(x * 0.11 + y * 0.007) * 2;
|
|
const pore = Math.sin(y * 0.12 + Math.sin(x * 0.016) * 2.1) * 3 + (Math.random() - 0.5) * 6;
|
|
image.data[i] = 128 + grain;
|
|
image.data[i + 1] = 128 + pore;
|
|
image.data[i + 2] = 255;
|
|
image.data[i + 3] = 255;
|
|
}
|
|
}
|
|
ctx.putImageData(image, 0, 0);
|
|
const texture = new THREE.CanvasTexture(canvas);
|
|
texture.colorSpace = THREE.NoColorSpace;
|
|
texture.needsUpdate = true;
|
|
return texture;
|
|
}
|
|
|
|
function createTableDustTexture() {
|
|
const canvas = document.createElement('canvas');
|
|
generatedTextureCanvases.tableDust = canvas;
|
|
canvas.width = 2048;
|
|
canvas.height = 2048;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.fillStyle = 'rgb(10, 10, 10)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
for (let y = 0; y < canvas.height; y += 1) {
|
|
for (let x = 0; x < canvas.width; x += 1) {
|
|
const i = (y * canvas.width + x) * 4;
|
|
const nx = x / canvas.width;
|
|
const ny = y / canvas.height;
|
|
const edgeDust = Math.max(0, 1 - Math.min(nx, ny, 1 - nx, 1 - ny) * 9);
|
|
const grain = Math.random() < 0.018 ? 110 + Math.random() * 85 : Math.random() * 18;
|
|
const sweep = Math.max(0, Math.sin(nx * 32 + Math.sin(ny * 15) * 2.5) - 0.84) * 55;
|
|
const pageDust = Math.exp(-Math.pow((nx - 0.5) * 2.2, 2) - Math.pow((ny - 0.5) * 1.4, 2)) * 16;
|
|
const value = Math.min(255, 10 + edgeDust * 36 + grain + sweep + pageDust);
|
|
image.data[i] = value;
|
|
image.data[i + 1] = value;
|
|
image.data[i + 2] = value;
|
|
image.data[i + 3] = 255;
|
|
}
|
|
}
|
|
ctx.putImageData(image, 0, 0);
|
|
|
|
const smudge = (x, y, rx, ry, alpha) => {
|
|
const gradient = ctx.createRadialGradient(x, y, 0, x, y, Math.max(rx, ry));
|
|
gradient.addColorStop(0, `rgba(220, 220, 220, ${alpha})`);
|
|
gradient.addColorStop(0.42, `rgba(150, 150, 150, ${alpha * 0.32})`);
|
|
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
ctx.scale(rx / Math.max(rx, ry), ry / Math.max(rx, ry));
|
|
ctx.fillStyle = gradient;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, Math.max(rx, ry), 0, Math.PI * 2);
|
|
ctx.fill();
|
|
ctx.restore();
|
|
};
|
|
|
|
smudge(canvas.width * 0.17, canvas.height * 0.38, 170, 70, 0.12);
|
|
smudge(canvas.width * 0.83, canvas.height * 0.24, 120, 58, 0.1);
|
|
smudge(canvas.width * 0.73, canvas.height * 0.76, 155, 64, 0.09);
|
|
smudge(canvas.width * 0.5, canvas.height * 0.52, 260, 110, 0.055);
|
|
|
|
const texture = new THREE.CanvasTexture(canvas);
|
|
texture.colorSpace = THREE.NoColorSpace;
|
|
texture.minFilter = THREE.LinearMipmapLinearFilter;
|
|
texture.magFilter = THREE.LinearFilter;
|
|
texture.generateMipmaps = true;
|
|
texture.needsUpdate = true;
|
|
return texture;
|
|
}
|
|
|
|
function drawCentered(ctx, text, y, size) {
|
|
ctx.font = `${size}px Georgia, "Times New Roman", serif`;
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(text, ctx.canvas.width / 2, y);
|
|
}
|
|
|
|
function drawParagraph(ctx, text, x, y, width, size, lineHeight) {
|
|
ctx.font = `${size}px Georgia, "Times New Roman", serif`;
|
|
ctx.textAlign = 'left';
|
|
const words = text.split(/\s+/);
|
|
let line = '';
|
|
words.forEach((word) => {
|
|
const test = line ? `${line} ${word}` : word;
|
|
if (ctx.measureText(test).width > width && line) {
|
|
ctx.fillText(line, x, y);
|
|
line = word;
|
|
y += size * lineHeight;
|
|
} else {
|
|
line = test;
|
|
}
|
|
});
|
|
if (line) ctx.fillText(line, x, y);
|
|
}
|
|
|
|
function resize() {
|
|
const width = Math.max(1, window.innerWidth);
|
|
const height = Math.max(1, window.innerHeight);
|
|
renderer.setSize(width, height, false);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
const pixelRatio = renderer.getPixelRatio();
|
|
tableReflectionTarget.setSize(
|
|
Math.max(320, Math.min(1280, Math.floor(width * pixelRatio * 0.75))),
|
|
Math.max(180, Math.min(720, Math.floor(height * pixelRatio * 0.75)))
|
|
);
|
|
}
|
|
|
|
function installCameraControls() {
|
|
canvas.addEventListener('pointerdown', (event) => {
|
|
cameraRig.dragging = true;
|
|
canvas.style.cursor = 'grabbing';
|
|
cameraRig.pointerX = event.clientX;
|
|
cameraRig.pointerY = event.clientY;
|
|
canvas.setPointerCapture(event.pointerId);
|
|
});
|
|
|
|
canvas.addEventListener('pointermove', (event) => {
|
|
if (!cameraRig.dragging) return;
|
|
const dx = event.clientX - cameraRig.pointerX;
|
|
const dy = event.clientY - cameraRig.pointerY;
|
|
cameraRig.pointerX = event.clientX;
|
|
cameraRig.pointerY = event.clientY;
|
|
cameraRig.yaw -= dx * 0.006;
|
|
cameraRig.pitch = THREE.MathUtils.clamp(
|
|
cameraRig.pitch + dy * 0.004,
|
|
cameraRig.minPitch,
|
|
cameraRig.maxPitch
|
|
);
|
|
updateCameraRig(0);
|
|
});
|
|
|
|
canvas.addEventListener('pointerup', (event) => {
|
|
cameraRig.dragging = false;
|
|
canvas.style.cursor = 'grab';
|
|
canvas.releasePointerCapture(event.pointerId);
|
|
});
|
|
|
|
canvas.addEventListener('pointercancel', () => {
|
|
cameraRig.dragging = false;
|
|
canvas.style.cursor = 'grab';
|
|
});
|
|
|
|
canvas.addEventListener('wheel', (event) => {
|
|
event.preventDefault();
|
|
const zoom = Math.exp(event.deltaY * 0.001);
|
|
cameraRig.radius = THREE.MathUtils.clamp(
|
|
cameraRig.radius * zoom,
|
|
cameraRig.minRadius,
|
|
cameraRig.maxRadius
|
|
);
|
|
updateCameraRig(0);
|
|
}, { passive: false });
|
|
|
|
window.addEventListener('keydown', (event) => {
|
|
if (['KeyW', 'KeyA', 'KeyS', 'KeyD'].includes(event.code)) {
|
|
cameraRig.keys.add(event.code);
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('keyup', (event) => {
|
|
cameraRig.keys.delete(event.code);
|
|
});
|
|
}
|
|
|
|
function updateCameraRig(deltaSeconds) {
|
|
if (deltaSeconds > 0 && cameraRig.keys.size) {
|
|
const forward = new THREE.Vector3();
|
|
camera.getWorldDirection(forward);
|
|
forward.y = 0;
|
|
forward.normalize();
|
|
const right = new THREE.Vector3().crossVectors(forward, camera.up).normalize();
|
|
const move = new THREE.Vector3();
|
|
if (cameraRig.keys.has('KeyW')) move.add(forward);
|
|
if (cameraRig.keys.has('KeyS')) move.sub(forward);
|
|
if (cameraRig.keys.has('KeyD')) move.add(right);
|
|
if (cameraRig.keys.has('KeyA')) move.sub(right);
|
|
if (move.lengthSq() > 0) {
|
|
move.normalize().multiplyScalar(deltaSeconds * cameraRig.radius * 0.72);
|
|
cameraRig.target.add(move);
|
|
cameraRig.target.x = THREE.MathUtils.clamp(cameraRig.target.x, -2.6, 2.6);
|
|
cameraRig.target.z = THREE.MathUtils.clamp(cameraRig.target.z, -1.9, 1.9);
|
|
}
|
|
}
|
|
|
|
const horizontalRadius = Math.sin(cameraRig.pitch) * cameraRig.radius;
|
|
camera.position.set(
|
|
cameraRig.target.x + Math.sin(cameraRig.yaw) * horizontalRadius,
|
|
cameraRig.target.y + Math.cos(cameraRig.pitch) * cameraRig.radius,
|
|
cameraRig.target.z + Math.cos(cameraRig.yaw) * horizontalRadius
|
|
);
|
|
camera.lookAt(cameraRig.target);
|
|
}
|
|
|
|
function updateCandleShadowUniforms() {
|
|
if (!tableShader) return;
|
|
candleShadowSources.forEach((candle, index) => {
|
|
if (index >= 3) return;
|
|
candle.getWorldPosition(candleWorldPosition);
|
|
candle.userData.flame.getWorldPosition(flameWorldPosition);
|
|
tableShader.uniforms.candleBodyPositions.value[index].set(
|
|
candleWorldPosition.x,
|
|
candleWorldPosition.y - 0.05,
|
|
candleWorldPosition.z
|
|
);
|
|
tableShader.uniforms.candleFlamePositions.value[index].copy(flameWorldPosition);
|
|
tableShader.uniforms.candleBodyData.value[index].set(
|
|
candle.userData.bodyRadius,
|
|
candle.userData.bodyHeight
|
|
);
|
|
});
|
|
}
|
|
|
|
function updateTableReflection() {
|
|
if (!tableMesh || !tableShader) return;
|
|
|
|
tableReflectionCamera.copy(camera);
|
|
tableReflectionCamera.position.set(
|
|
camera.position.x,
|
|
tableTopY - (camera.position.y - tableTopY),
|
|
camera.position.z
|
|
);
|
|
|
|
camera.getWorldDirection(reflectionForward);
|
|
reflectionTarget.copy(camera.position).add(reflectionForward);
|
|
reflectionTarget.y = tableTopY - (reflectionTarget.y - tableTopY);
|
|
reflectionUp.set(0, 1, 0).applyQuaternion(camera.quaternion);
|
|
reflectionUp.y *= -1;
|
|
tableReflectionCamera.up.copy(reflectionUp);
|
|
tableReflectionCamera.lookAt(reflectionTarget);
|
|
tableReflectionCamera.updateProjectionMatrix();
|
|
tableReflectionCamera.updateMatrixWorld();
|
|
tableReflectionCamera.matrixWorldInverse.copy(tableReflectionCamera.matrixWorld).invert();
|
|
tableReflectionMatrix
|
|
.copy(tableReflectionBiasMatrix)
|
|
.multiply(tableReflectionCamera.projectionMatrix)
|
|
.multiply(tableReflectionCamera.matrixWorldInverse);
|
|
|
|
const previousRenderTarget = renderer.getRenderTarget();
|
|
const previousXrEnabled = renderer.xr.enabled;
|
|
const previousShadowAutoUpdate = renderer.shadowMap.autoUpdate;
|
|
const previousToneMappingExposure = renderer.toneMappingExposure;
|
|
|
|
tableMesh.visible = false;
|
|
renderer.xr.enabled = false;
|
|
renderer.shadowMap.autoUpdate = false;
|
|
renderer.toneMappingExposure = 0.92;
|
|
renderer.setRenderTarget(tableReflectionTarget);
|
|
renderer.clear();
|
|
renderer.render(scene, tableReflectionCamera);
|
|
renderer.setRenderTarget(previousRenderTarget);
|
|
renderer.toneMappingExposure = previousToneMappingExposure;
|
|
renderer.shadowMap.autoUpdate = previousShadowAutoUpdate;
|
|
renderer.xr.enabled = previousXrEnabled;
|
|
tableMesh.visible = true;
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
const delta = clock.getDelta();
|
|
const t = clock.elapsedTime;
|
|
updateCameraRig(delta);
|
|
scene.traverse((object) => {
|
|
if (!object.userData?.light) return;
|
|
const swayX = Math.sin(t * 5.7 + object.userData.seed) * 0.012;
|
|
const swayZ = Math.cos(t * 4.9 + object.userData.seed * 0.7) * 0.01;
|
|
const pulse = 0.9 + Math.sin(t * 7.3 + object.userData.seed) * 0.09 + Math.sin(t * 13.1) * 0.045;
|
|
object.userData.light.intensity = object.userData.baseIntensity * pulse * (object.position.x < 0 ? 1.08 : 0.92);
|
|
object.userData.flame.scale.y = 1.65 + Math.sin(t * 9.2 + object.userData.seed) * 0.18;
|
|
object.userData.flame.position.x = swayX * 0.75;
|
|
object.userData.flame.position.z = swayZ * 0.75;
|
|
object.userData.flame.traverse((child) => {
|
|
if (child.material?.uniforms?.time) child.material.uniforms.time.value = t + object.userData.seed;
|
|
});
|
|
object.userData.light.position.copy(object.userData.flame.position);
|
|
object.userData.waxGlow.material.opacity = 0.07 + Math.max(0, pulse - 0.9) * 0.08;
|
|
const waxShader = object.userData.waxMaterial.userData.shader;
|
|
if (waxShader) {
|
|
object.getWorldPosition(candleWorldPosition);
|
|
object.userData.flame.getWorldPosition(flameWorldPosition);
|
|
waxShader.uniforms.waxFlameWorldPosition.value.copy(flameWorldPosition);
|
|
waxShader.uniforms.waxBodyWorldPosition.value.set(
|
|
candleWorldPosition.x,
|
|
candleWorldPosition.y - 0.05,
|
|
candleWorldPosition.z
|
|
);
|
|
waxShader.uniforms.waxLightPower.value = THREE.MathUtils.clamp(pulse * object.userData.baseIntensity * 0.42, 0.35, 1.6);
|
|
}
|
|
});
|
|
updateCandleShadowUniforms();
|
|
updateTableReflection();
|
|
renderer.render(scene, camera);
|
|
}
|