/* Padmavilla 3D viewer engine — WebGL2, tanpa library eksternal */ (function () { 'use strict'; const U = window.UNIT; // ---------------- math ---------------- const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; const add = (a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]]; const scl = (a, s) => [a[0] * s, a[1] * s, a[2] * s]; const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; const len = a => Math.hypot(a[0], a[1], a[2]); const norm = a => { const l = len(a) || 1; return [a[0] / l, a[1] / l, a[2] / l]; }; const lerp = (a, b, t) => a + (b - a) * t; const lerp3 = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)]; const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const D2R = Math.PI / 180; function persp(fovy, a, n, f) { const t = 1 / Math.tan(fovy / 2), nf = 1 / (n - f); return [t / a, 0, 0, 0, 0, t, 0, 0, 0, 0, (f + n) * nf, -1, 0, 0, 2 * f * n * nf, 0]; } function ortho(l, r, b, t, n, f) { const lr = 1 / (l - r), bt = 1 / (b - t), nf = 1 / (n - f); return [-2 * lr, 0, 0, 0, 0, -2 * bt, 0, 0, 0, 0, 2 * nf, 0, (l + r) * lr, (t + b) * bt, (f + n) * nf, 1]; } function lookAt(e, c, u) { const z = norm(sub(e, c)), x = norm(cross(u, z)), y = cross(z, x); return [x[0], y[0], z[0], 0, x[1], y[1], z[1], 0, x[2], y[2], z[2], 0, -dot(x, e), -dot(y, e), -dot(z, e), 1]; } function mul(a, b) { const o = new Array(16); for (let i = 0; i < 4; i++) for (let j = 0; j < 4; j++) { let s = 0; for (let k = 0; k < 4; k++) s += a[k * 4 + j] * b[i * 4 + k]; o[i * 4 + j] = s; } return o; } function hex(h) { h = h.replace('#', ''); if (h.length === 3) h = h.split('').map(c => c + c).join(''); const n = parseInt(h, 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } const C = c => (typeof c === 'string' ? hex(c) : c); // ---------------- materials ---------------- const MAT = { plain: 0, tile: 1, bath: 2, wood: 3, grass: 4, pave: 5, shingle: 6, stone: 7, asphalt: 8, fabric: 9, terrace: 10, soil: 11, grain: 12, metal: 13, glass: 20, paint: 21, screen: 22, lamp: 23, leaf: 24 }; const COL = { wall: '#f4f3ef', wallTop: '#3b4250', trim: '#2a2d33', alu: '#3a3d43', floor: '#ddd6c8', bath: '#8fb1cf', wood: '#8a6240', woodDark: '#4a3326', grass: '#6f9a45', pave: '#9a9c9d', asphalt: '#55595e', terrace: '#a9a49b', shingle: '#3d4148', ceil: '#fbfaf7', glass: '#bcd6e6', stone: '#545454', soil: '#7a6248' }; // ---------------- geometry buffers ---------------- class Buf { constructor() { this.v = []; } vert(p, n, c, m) { this.v.push(p[0], p[1], p[2], n[0], n[1], n[2], c[0], c[1], c[2], m); } tri(a, b, c, col, m, n) { n = n || norm(cross(sub(b, a), sub(c, a))); this.vert(a, n, col, m); this.vert(b, n, col, m); this.vert(c, n, col, m); } quad(a, b, c, d, col, m, n) { n = n || norm(cross(sub(b, a), sub(c, a))); this.tri(a, b, c, col, m, n); this.tri(a, c, d, col, m, n); } } // plan coords (x right, y toward street, z up) -> world [x, z, y] const W = (x, y, z) => [x, z, y]; const groups = new Map(); function G(lv, cat) { const k = lv + '|' + cat; if (!groups.has(k)) groups.set(k, { lv, cat, o: new Buf(), g: new Buf() }); return groups.get(k); } // axis aligned box in plan coords function box(g, x0, y0, z0, x1, y1, z1, col, mat, opt) { opt = opt || {}; col = C(col); const m = mat == null ? 0 : mat; const B = m === MAT.glass ? g.g : g.o; if (x0 > x1) [x0, x1] = [x1, x0]; if (y0 > y1) [y0, y1] = [y1, y0]; if (z0 > z1) [z0, z1] = [z1, z0]; const top = opt.top ? C(opt.top) : col; const P = (x, y, z) => W(x, y, z); // top if (!opt.noTop) B.quad(P(x0, y0, z1), P(x0, y1, z1), P(x1, y1, z1), P(x1, y0, z1), top, opt.topMat != null ? opt.topMat : m, [0, 1, 0]); if (!opt.noBottom) B.quad(P(x0, y0, z0), P(x1, y0, z0), P(x1, y1, z0), P(x0, y1, z0), opt.bottom ? C(opt.bottom) : col, opt.bottomMat != null ? opt.bottomMat : m, [0, -1, 0]); B.quad(P(x0, y1, z0), P(x1, y1, z0), P(x1, y1, z1), P(x0, y1, z1), col, m, [0, 0, 1]); // +y (front) B.quad(P(x1, y0, z0), P(x0, y0, z0), P(x0, y0, z1), P(x1, y0, z1), col, m, [0, 0, -1]); B.quad(P(x1, y1, z0), P(x1, y0, z0), P(x1, y0, z1), P(x1, y1, z1), col, m, [1, 0, 0]); B.quad(P(x0, y0, z0), P(x0, y1, z0), P(x0, y1, z1), P(x0, y0, z1), col, m, [-1, 0, 0]); } function cyl(g, cx, cy, z0, z1, r, col, mat, seg, r2) { seg = seg || 18; col = C(col); r2 = r2 == null ? r : r2; const B = g.o; const m = mat || 0; for (let i = 0; i < seg; i++) { const a0 = i / seg * Math.PI * 2, a1 = (i + 1) / seg * Math.PI * 2; const c0 = Math.cos(a0), s0 = Math.sin(a0), c1 = Math.cos(a1), s1 = Math.sin(a1); const p0 = W(cx + c0 * r, cy + s0 * r, z0), p1 = W(cx + c1 * r, cy + s1 * r, z0), p2 = W(cx + c1 * r2, cy + s1 * r2, z1), p3 = W(cx + c0 * r2, cy + s0 * r2, z1); const n0 = norm([c0, (r - r2) / (z1 - z0 || 1), s0]), n1 = norm([c1, (r - r2) / (z1 - z0 || 1), s1]); B.vert(p0, n0, col, m); B.vert(p1, n1, col, m); B.vert(p2, n1, col, m); B.vert(p0, n0, col, m); B.vert(p2, n1, col, m); B.vert(p3, n0, col, m); if (r2 > 0) B.tri(W(cx, cy, z1), p3, p2, col, m, [0, 1, 0]); B.tri(W(cx, cy, z0), p1, p0, col, m, [0, -1, 0]); } } function blob(g, cx, cy, cz, rx, rz, col, mat, seed) { col = C(col); const B = g.o, m = mat == null ? MAT.leaf : mat; const st = 7, sl = 10; seed = seed || 1; const P = (i, j) => { const th = i / st * Math.PI, ph = j / sl * Math.PI * 2; const k = 1 + 0.12 * Math.sin(seed * 3.1 + i * 2.3 + j * 1.7); return [Math.sin(th) * Math.cos(ph) * k, Math.cos(th) * k, Math.sin(th) * Math.sin(ph) * k]; }; for (let i = 0; i < st; i++) for (let j = 0; j < sl; j++) { const a = P(i, j), b = P(i + 1, j), c = P(i + 1, j + 1), d = P(i, j + 1); const T = q => W(cx + q[0] * rx, cy + q[2] * rx, cz + q[1] * rz); const shade = 0.85 + 0.15 * ((i * 7 + j * 3) % 5) / 4; const cc = [col[0] * shade, col[1] * shade, col[2] * shade]; B.vert(T(a), norm(a), cc, m); B.vert(T(b), norm(b), cc, m); B.vert(T(c), norm(c), cc, m); B.vert(T(a), norm(a), cc, m); B.vert(T(c), norm(c), cc, m); B.vert(T(d), norm(d), cc, m); } } function hipRoof(g, x0, y0, x1, y1, z, pitch, col, over) { over = over == null ? 0.45 : over; x0 -= over; y0 -= over; x1 += over; y1 += over; col = C(col); const w = x1 - x0, d = y1 - y0, t = Math.tan(pitch * D2R); const B = g.o, m = MAT.shingle; if (w <= d) { const h = w / 2 * t, xm = (x0 + x1) / 2; const r0 = y0 + w / 2, r1 = y1 - w / 2; const A = W(x0, y0, z), Bb = W(x1, y0, z), Cc = W(x1, y1, z), Dd = W(x0, y1, z), R0 = W(xm, r0, z + h), R1 = W(xm, r1, z + h); B.quad(Dd, A, R0, R1, col, m); B.quad(Bb, Cc, R1, R0, col, m); B.tri(A, Bb, R0, col, m); B.tri(Cc, Dd, R1, col, m); } else { const h = d / 2 * t, ym = (y0 + y1) / 2; const r0 = x0 + d / 2, r1 = x1 - d / 2; const A = W(x0, y0, z), Bb = W(x1, y0, z), Cc = W(x1, y1, z), Dd = W(x0, y1, z), R0 = W(r0, ym, z + h), R1 = W(r1, ym, z + h); B.quad(A, Bb, R1, R0, col, m); B.quad(Cc, Dd, R0, R1, col, m); B.tri(Dd, A, R0, col, m); B.tri(Bb, Cc, R1, col, m); } // fascia + soffit box(g, x0, y0, z - 0.18, x1, y0 + 0.04, z, COL.wall, 0); box(g, x0, y1 - 0.04, z - 0.18, x1, y1, z, COL.wall, 0); box(g, x0, y0, z - 0.18, x0 + 0.04, y1, z, COL.wall, 0); box(g, x1 - 0.04, y0, z - 0.18, x1, y1, z, COL.wall, 0); g.o.quad(W(x0, y0, z - 0.02), W(x1, y0, z - 0.02), W(x1, y1, z - 0.02), W(x0, y1, z - 0.02), hex(COL.ceil), 0, [0, -1, 0]); } function shedRoof(g, x0, y0, x1, y1, zLow, zHigh, highSide, col) { col = C(col); const B = g.o, m = MAT.shingle; let p; const z = (x, y) => { if (highSide === 'N') return lerp(zHigh, zLow, (y - y0) / (y1 - y0)); if (highSide === 'S') return lerp(zLow, zHigh, (y - y0) / (y1 - y0)); if (highSide === 'W') return lerp(zHigh, zLow, (x - x0) / (x1 - x0)); return lerp(zLow, zHigh, (x - x0) / (x1 - x0)); }; p = [W(x0, y0, z(x0, y0)), W(x1, y0, z(x1, y0)), W(x1, y1, z(x1, y1)), W(x0, y1, z(x0, y1))]; let n = norm(cross(sub(p[1], p[0]), sub(p[2], p[0]))); if (n[1] < 0) { p.reverse(); n = scl(n, -1); } B.quad(p[0], p[1], p[2], p[3], col, m, n); const q = p.map(v => [v[0], v[1] - 0.12, v[2]]); B.quad(q[0], q[1], q[2], q[3], hex(COL.ceil), 0, [0, -1, 0]); for (let i = 0; i < 4; i++) { const a = p[i], b = p[(i + 1) % 4]; B.quad(a, b, q[(i + 1) % 4], q[i], hex(COL.wall), 0); } } // ---------------- scene from UNIT data ---------------- const LV = {}; U.levels.forEach((l, i) => { l.i = i; l.ceil = l.ceil || (l.h - 0.25); LV[l.id] = l; }); const SLAB = 0.2; const colliders = {}; // lv -> segments [x0,y0,x1,y1] const blocks = {}; // lv -> rects not walkable U.levels.forEach(l => { colliders[l.id] = []; blocks[l.id] = []; }); const rooms = U.rooms.map(r => Object.assign({}, r, { z: (LV[r.lv].z + (r.dz || 0)) })); const isIndoor = r => !['grass', 'pave', 'terrace', 'void', 'soil', 'asphalt'].includes(r.mat) || r.indoor; // floors rooms.forEach(r => { if (r.mat === 'void' || r.ghost) return; const g = G(r.lv, 'floor'); const [x0, y0, x1, y1] = r.r; const mat = { tile: MAT.tile, bath: MAT.bath, wood: MAT.wood, grass: MAT.grass, pave: MAT.pave, terrace: MAT.terrace, soil: MAT.soil, service: MAT.terrace, asphalt: MAT.asphalt }[r.mat] || MAT.tile; const col = r.col || { tile: COL.floor, bath: COL.bath, wood: '#b48a5e', grass: COL.grass, pave: COL.pave, terrace: COL.terrace, service: '#8f8a83', soil: COL.soil, asphalt: COL.asphalt }[r.mat] || COL.floor; const th = r.th != null ? r.th : SLAB; box(g, x0, y0, r.z - th, x1, y1, r.z, col, mat, { bottom: COL.ceil, bottomMat: 0, top: col }); if (isIndoor(r) && r.ceil !== false) { const zc = r.z + (r.ch || LV[r.lv].ceil); G(r.lv, 'ceil').o.quad(W(x0, y0, zc), W(x1, y0, zc), W(x1, y1, zc), W(x0, y1, zc), hex(COL.ceil), 0, [0, -1, 0]); // downlight discs const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2; const nx = Math.max(1, Math.round((x1 - x0) / 1.8)), ny = Math.max(1, Math.round((y1 - y0) / 1.8)); for (let i = 0; i < nx; i++) for (let j = 0; j < ny; j++) { const lx = x0 + (i + 0.5) * (x1 - x0) / nx, ly = y0 + (j + 0.5) * (y1 - y0) / ny; cyl(G(r.lv, 'ceil'), lx, ly, zc - 0.01, zc - 0.005, 0.07, '#fffbe8', MAT.lamp, 10); } } }); // walls with openings const OPEN = { d: { s: 0, h: 2.15 }, o: { s: 0, h: 2.15 }, w: { s: 0.9, h: 2.15 }, wh: { s: 1.55, h: 2.15 }, g: { s: 0, h: 2.4 }, s: { s: 0, h: 2.2 }, x: { s: 0, h: 99 }, wt: { s: 0.4, h: 2.4 } }; function wall(w) { const lv = LV[w.lv]; let [x0, y0, x1, y1] = w.r; const horiz = (x1 - x0) >= (y1 - y0); const zb = (w.z0 != null ? w.z0 : lv.z - SLAB); const zt = lv.z + (w.h != null ? w.h : lv.h); const g = G(w.lv, 'wall'); const col = w.col || COL.wall; const ops = (w.op || []).map(o => ({ a: o[0], b: o[1], t: o[2], opt: o[3] || '' })).sort((a, b) => a.a - b.a); const s0 = horiz ? x0 : y0, s1 = horiz ? x1 : y1; const seg = (a, b, za, zb2, c) => { if (b - a < 1e-3 || zb2 - za < 1e-3) return; if (horiz) box(g, a, y0, za, b, y1, zb2, c || col, w.mat || 0, { top: COL.wallTop }); else box(g, x0, a, za, x1, b, zb2, c || col, w.mat || 0, { top: COL.wallTop }); }; const addCol = (a, b) => { if (b - a < 0.02) return; if (horiz) colliders[w.lv].push([a, (y0 + y1) / 2, b, (y0 + y1) / 2]); else colliders[w.lv].push([(x0 + x1) / 2, a, (x0 + x1) / 2, b]); }; let cur = s0; ops.forEach(o => { seg(cur, o.a, zb, zt); if (!w.noCollide) addCol(cur, o.a); const spec = OPEN[o.t] || OPEN.d; const zs = lv.z + (o.opt.sill != null ? o.opt.sill : spec.s), zh = Math.min(zt, lv.z + (o.opt.head || spec.h)); if (o.t !== 'x') { seg(o.a, o.b, zh, zt); if (zs > zb + 0.01) seg(o.a, o.b, zb, zs); } if (o.t === 'w' || o.t === 'wh' || o.t === 'g' || o.t === 'wt') { if (!w.noCollide) addCol(o.a, o.b); } opening(w, horiz, o, zs, zh, lv); cur = o.b; }); seg(cur, s1, zb, zt); if (!w.noCollide) addCol(cur, s1); } function opening(w, horiz, o, zs, zh, lv) { const g = G(w.lv, 'wall'); const [x0, y0, x1, y1] = w.r; const T = 0.05; const mid = horiz ? (y0 + y1) / 2 : (x0 + x1) / 2; const A = o.a, Bp = o.b; const bx = (a, b, za, zb, t0, t1, c, m) => { if (horiz) box(g, a, mid + t0, za, b, mid + t1, zb, c, m); else box(g, mid + t0, a, za, mid + t1, b, zb, c, m); }; const fc = COL.alu, ft = 0.04; if (o.t === 'w' || o.t === 'wh' || o.t === 'g' || o.t === 'wt' || o.t === 's') { // frame bx(A, A + ft, zs, zh, -T, T, fc, MAT.metal); bx(Bp - ft, Bp, zs, zh, -T, T, fc, MAT.metal); bx(A, Bp, zh - ft, zh, -T, T, fc, MAT.metal); bx(A, Bp, zs, zs + ft, -T, T, fc, MAT.metal); const n = Math.max(1, Math.round((Bp - A) / 0.9)); for (let i = 1; i < n; i++) { const p = A + (Bp - A) * i / n; bx(p - ft / 2, p + ft / 2, zs, zh, -T, T, fc, MAT.metal); } if (o.t !== 'g' && o.t !== 's' && zh - zs > 0.8) { /* transom */ bx(A, Bp, zh - 0.42, zh - 0.38, -T, T, fc, MAT.metal); } if (o.t === 's') { // sliding: one panel pushed aside -> leave half open const half = (A + Bp) / 2; bx(A + ft, half, zs + ft, zh - ft, -0.008, 0.008, COL.glass, MAT.glass); bx(half, Bp - ft, zs + ft, zh - ft, 0.03, 0.046, COL.glass, MAT.glass); bx(half - ft / 2, half + ft / 2, zs, zh, 0.02, 0.06, fc, MAT.metal); // glass panes block walking only on the closed half const c = horiz ? [A, mid, half, mid] : [mid, A, mid, half]; colliders[w.lv].push(c); } else bx(A + ft, Bp - ft, zs + ft, zh - ft, -0.008, 0.008, COL.glass, MAT.glass); if (o.t === 'w' || o.t === 'wh') { // sill bx(A - 0.03, Bp + 0.03, zs - 0.03, zs, -(Math.abs(horiz ? y1 - y0 : x1 - x0) / 2 + 0.03), (Math.abs(horiz ? y1 - y0 : x1 - x0) / 2 + 0.03), '#e9e6df', 0); } } else if (o.t === 'd') { // door frame + leaf opened 90deg const th = Math.abs(horiz ? y1 - y0 : x1 - x0) / 2 + 0.01; bx(A, A + 0.05, lv.z, zh, -th, th, COL.woodDark, MAT.grain); bx(Bp - 0.05, Bp, lv.z, zh, -th, th, COL.woodDark, MAT.grain); bx(A, Bp, zh - 0.05, zh, -th, th, COL.woodDark, MAT.grain); if (o.opt.leaf !== false) { const hingeB = /b/.test(o.opt.hinge || ''), side = /-/.test(o.opt.hinge || '') ? -1 : 1; const wl = Bp - A - 0.1; const hp = hingeB ? Bp - 0.06 : A + 0.06; const s = side * th; const lc = o.opt.col || '#9b7653'; if (horiz) box(g, hp - 0.02, mid + s, lv.z + 0.01, hp + 0.02, mid + s + side * wl, zh - 0.06, lc, MAT.grain); else box(g, mid + s, hp - 0.02, lv.z + 0.01, mid + s + side * wl, hp + 0.02, zh - 0.06, lc, MAT.grain); } } } U.walls.forEach(wall); // generic rail function rail(lv, a, b, z, h, cat) { const g = G(lv, cat || 'ext'); const L = Math.hypot(b[0] - a[0], b[1] - a[1]); const n = Math.max(2, Math.round(L / 0.12)); const dx = (b[0] - a[0]) / L, dy = (b[1] - a[1]) / L; for (let i = 0; i <= n; i++) { const t = i / n * L; const x = a[0] + dx * t, y = a[1] + dy * t; box(g, x - 0.012, y - 0.012, z, x + 0.012, y + 0.012, z + h, '#1f2226', MAT.metal); } const x0 = Math.min(a[0], b[0]), x1 = Math.max(a[0], b[0]), y0 = Math.min(a[1], b[1]), y1 = Math.max(a[1], b[1]); box(g, x0 - 0.025, y0 - 0.025, z + h - 0.04, x1 + 0.025, y1 + 0.025, z + h, '#1f2226', MAT.metal); box(g, x0 - 0.015, y0 - 0.015, z + 0.08, x1 + 0.015, y1 + 0.015, z + 0.11, '#1f2226', MAT.metal); colliders[lv].push([a[0], a[1], b[0], b[1]]); } // ---------------- furniture ---------------- const F = {}; function rot(r, dir) { return r; } F.bed = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const h = f.head || 'W'; const bc = f.col || '#7d7a5a'; box(g, x0, y0, z, x1, y1, z + 0.32, '#6b5443', MAT.grain); box(g, x0 + 0.03, y0 + 0.03, z + 0.32, x1 - 0.03, y1 - 0.03, z + 0.55, '#f2f0ea', MAT.fabric); const hb = 0.08, ph = 1.05; // headboard + pillows + blanket if (h === 'W' || h === 'E') { const hx = h === 'W' ? x0 : x1, s = h === 'W' ? 1 : -1; box(g, hx, y0 - 0.02, z, hx + s * hb, y1 + 0.02, z + ph, '#5c5f63', MAT.fabric); const np = (y1 - y0) > 1.3 ? 2 : 1; for (let i = 0; i < np; i++) { const a = y0 + 0.08 + i * (y1 - y0 - 0.16) / np, b = y0 + 0.08 + (i + 1) * (y1 - y0 - 0.16) / np - 0.06; box(g, hx + s * 0.12, a, z + 0.55, hx + s * 0.55, b, z + 0.7, '#fbfaf6', MAT.fabric); } const bx0 = h === 'W' ? x0 + (x1 - x0) * 0.42 : x0, bx1 = h === 'W' ? x1 : x1 - (x1 - x0) * 0.42; box(g, bx0, y0 + 0.01, z + 0.36, bx1, y1 - 0.01, z + 0.6, bc, MAT.fabric); } else { const hy = h === 'N' ? y0 : y1, s = h === 'N' ? 1 : -1; box(g, x0 - 0.02, hy, z, x1 + 0.02, hy + s * hb, z + ph, '#5c5f63', MAT.fabric); const np = (x1 - x0) > 1.3 ? 2 : 1; for (let i = 0; i < np; i++) { const a = x0 + 0.08 + i * (x1 - x0 - 0.16) / np, b = x0 + 0.08 + (i + 1) * (x1 - x0 - 0.16) / np - 0.06; box(g, a, hy + s * 0.12, z + 0.55, b, hy + s * 0.55, z + 0.7, '#fbfaf6', MAT.fabric); } const by0 = h === 'N' ? y0 + (y1 - y0) * 0.42 : y0, by1 = h === 'N' ? y1 : y1 - (y1 - y0) * 0.42; box(g, x0 + 0.01, by0, z + 0.36, x1 - 0.01, by1, z + 0.6, bc, MAT.fabric); } block(f, 0.0); }; F.ns = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z, x1, y1, z + 0.5, '#7b5a3f', MAT.grain); cyl(g, (x0 + x1) / 2, (y0 + y1) / 2, z + 0.5, z + 0.55, 0.06, '#d8d2c4', 0, 10); cyl(g, (x0 + x1) / 2, (y0 + y1) / 2, z + 0.55, z + 0.78, 0.13, '#efe6cf', MAT.lamp, 12, 0.09); }; F.ward = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const h = f.h || 2.3; box(g, x0, y0, z, x1, y1, z + h, f.col || '#8b6646', MAT.grain); const fc = f.face || 'E'; const n = Math.max(1, Math.round((fc === 'E' || fc === 'W' ? y1 - y0 : x1 - x0) / 0.5)); for (let i = 1; i < n; i++) { if (fc === 'E' || fc === 'W') { const yy = y0 + (y1 - y0) * i / n, xx = fc === 'E' ? x1 : x0; box(g, xx - 0.006, yy - 0.006, z + 0.05, xx + 0.006, yy + 0.006, z + h - 0.05, '#3a2a1e', 0); } else { const xx = x0 + (x1 - x0) * i / n, yy = fc === 'S' ? y1 : y0; box(g, xx - 0.006, yy - 0.006, z + 0.05, xx + 0.006, yy + 0.006, z + h - 0.05, '#3a2a1e', 0); } } block(f); }; F.sofa = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const b = f.back || 'E'; const c = f.col || '#9ea3a6'; const arm = 0.18, bt = 0.22; box(g, x0, y0, z, x1, y1, z + 0.42, c, MAT.fabric); if (b === 'E' || b === 'W') { const bx = b === 'E' ? x1 - bt : x0; box(g, bx, y0, z, bx + bt, y1, z + 0.85, c, MAT.fabric); box(g, x0, y0, z, x1, y0 + arm, z + 0.62, c, MAT.fabric); box(g, x0, y1 - arm, z, x1, y1, z + 0.62, c, MAT.fabric); const cx0 = b === 'E' ? x0 + 0.05 : x0 + bt, cx1 = b === 'E' ? x1 - bt : x1 - 0.05; const n = Math.max(1, Math.round((y1 - y0 - 2 * arm) / 0.7)); for (let i = 0; i < n; i++) { const a = y0 + arm + i * (y1 - y0 - 2 * arm) / n + 0.02, e = y0 + arm + (i + 1) * (y1 - y0 - 2 * arm) / n - 0.02; box(g, cx0, a, z + 0.42, cx1, e, z + 0.5, c, MAT.fabric); } if (f.pillow !== false) box(g, b === 'E' ? x1 - bt - 0.14 : x0 + bt + 0.02, y0 + arm + 0.1, z + 0.48, b === 'E' ? x1 - bt - 0.02 : x0 + bt + 0.14, y0 + arm + 0.5, z + 0.8, '#f1ece2', MAT.fabric); } else { const by = b === 'S' ? y1 - bt : y0; box(g, x0, by, z, x1, by + bt, z + 0.85, c, MAT.fabric); box(g, x0, y0, z, x0 + arm, y1, z + 0.62, c, MAT.fabric); box(g, x1 - arm, y0, z, x1, y1, z + 0.62, c, MAT.fabric); const cy0 = b === 'S' ? y0 + 0.05 : y0 + bt, cy1 = b === 'S' ? y1 - bt : y1 - 0.05; const n = Math.max(1, Math.round((x1 - x0 - 2 * arm) / 0.7)); for (let i = 0; i < n; i++) { const a = x0 + arm + i * (x1 - x0 - 2 * arm) / n + 0.02, e = x0 + arm + (i + 1) * (x1 - x0 - 2 * arm) / n - 0.02; box(g, a, cy0, z + 0.42, e, cy1, z + 0.5, c, MAT.fabric); } } block(f); }; F.arm = (g, f, z) => { F.sofa(g, Object.assign({}, f, { pillow: false }), z); }; F.ctable = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z + 0.36, x1, y1, z + 0.42, f.col || '#a07a55', MAT.grain); box(g, x0 + 0.05, y0 + 0.05, z, x1 - 0.05, y1 - 0.05, z + 0.36, '#3b3b3b', MAT.metal); }; F.rtable = (g, f, z) => { cyl(g, f.c[0], f.c[1], z + 0.4, z + 0.45, f.rad || 0.35, f.col || '#b98a5e', MAT.grain, 20); cyl(g, f.c[0], f.c[1], z, z + 0.4, 0.05, '#2c2c2c', MAT.metal, 8); }; F.rug = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z, x1, y1, z + 0.012, f.col || '#a99b8c', MAT.fabric); }; F.dtable = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const tc = f.col || '#c49a6c'; box(g, x0, y0, z + 0.72, x1, y1, z + 0.76, tc, MAT.grain); [[x0 + 0.06, y0 + 0.06], [x1 - 0.06, y0 + 0.06], [x0 + 0.06, y1 - 0.06], [x1 - 0.06, y1 - 0.06]].forEach(p => box(g, p[0] - 0.03, p[1] - 0.03, z, p[0] + 0.03, p[1] + 0.03, z + 0.72, '#6f5039', MAT.grain)); const along = (x1 - x0) >= (y1 - y0); const n = f.n || Math.max(1, Math.round(((along ? x1 - x0 : y1 - y0)) / 0.6)); const chair = (cx, cy, face) => { const s = 0.21; box(g, cx - s, cy - s, z + 0.43, cx + s, cy + s, z + 0.48, '#d9cfbf', MAT.fabric); box(g, cx - s + 0.02, cy - s + 0.02, z, cx + s - 0.02, cy + s - 0.02, z + 0.43, '#7a5a3e', MAT.grain, { noTop: true }); const t = 0.05; if (face === 'S') box(g, cx - s, cy - s, z + 0.43, cx + s, cy - s + t, z + 0.92, '#a07a55', MAT.grain); if (face === 'N') box(g, cx - s, cy + s - t, z + 0.43, cx + s, cy + s, z + 0.92, '#a07a55', MAT.grain); if (face === 'E') box(g, cx - s, cy - s, z + 0.43, cx - s + t, cy + s, z + 0.92, '#a07a55', MAT.grain); if (face === 'W') box(g, cx + s - t, cy - s, z + 0.43, cx + s, cy + s, z + 0.92, '#a07a55', MAT.grain); }; for (let i = 0; i < n; i++) { if (along) { const cx = x0 + (i + 0.5) * (x1 - x0) / n; chair(cx, y0 - 0.22, 'S'); chair(cx, y1 + 0.22, 'N'); } else { const cy = y0 + (i + 0.5) * (y1 - y0) / n; chair(x0 - 0.22, cy, 'E'); chair(x1 + 0.22, cy, 'W'); } } if (f.ends) { if (along) { chair(x0 - 0.25, (y0 + y1) / 2, 'E'); chair(x1 + 0.25, (y0 + y1) / 2, 'W'); } else { chair((x0 + x1) / 2, y0 - 0.25, 'S'); chair((x0 + x1) / 2, y1 + 0.25, 'N'); } } cyl(g, (x0 + x1) / 2, (y0 + y1) / 2, z + 0.76, z + 0.9, 0.06, '#e8e2d6', 0, 10); blob(g, (x0 + x1) / 2, (y0 + y1) / 2, z + 0.95, 0.09, 0.08, '#4f7a3a', MAT.leaf, 3); block({ r: [x0, y0, x1, y1], lv: f.lv }); }; F.tv = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const fc = f.face || 'E'; box(g, x0, y0, z, x1, y1, z + 0.45, f.col || '#3d2b20', MAT.grain); const L = (fc === 'E' || fc === 'W') ? y1 - y0 : x1 - x0; const tw = Math.min(1.45, L * 0.75), th = tw * 0.56; const zc = z + 1.05; if (fc === 'E' || fc === 'W') { const xx = fc === 'E' ? x0 + 0.02 : x1 - 0.06; const cy = (y0 + y1) / 2; box(g, xx, cy - tw / 2, zc - th / 2, xx + 0.04, cy + tw / 2, zc + th / 2, '#111318', MAT.screen); } else { const yy = fc === 'S' ? y0 + 0.02 : y1 - 0.06; const cx = (x0 + x1) / 2; box(g, cx - tw / 2, yy, zc - th / 2, cx + tw / 2, yy + 0.04, zc + th / 2, '#111318', MAT.screen); } block(f); }; F.kitchen = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const wall = f.wall || 'W'; box(g, x0, y0, z, x1, y1, z + 0.86, f.col || '#3f4246', MAT.grain, { top: '#2b2c2e', topMat: MAT.stone }); box(g, x0, y0, z + 0.86, x1, y1, z + 0.9, '#2f3033', MAT.stone); const long = (wall === 'W' || wall === 'E'); if (f.upper !== false) { if (long) { const ux0 = wall === 'W' ? x0 : x1 - 0.35, ux1 = wall === 'W' ? x0 + 0.35 : x1; box(g, ux0, y0, z + 1.5, ux1, y1, z + 2.2, '#e8e3da', MAT.grain); } else { const uy0 = wall === 'N' ? y0 : y1 - 0.35, uy1 = wall === 'N' ? y0 + 0.35 : y1; box(g, x0, uy0, z + 1.5, x1, uy1, z + 2.2, '#e8e3da', MAT.grain); } } (f.sink ? [f.sink] : []).forEach(p => box(g, p[0] - 0.22, p[1] - 0.2, z + 0.8, p[0] + 0.22, p[1] + 0.2, z + 0.905, '#c8ccd0', MAT.metal)); (f.stove ? [f.stove] : []).forEach(p => { box(g, p[0] - 0.3, p[1] - 0.25, z + 0.9, p[0] + 0.3, p[1] + 0.25, z + 0.915, '#141414', MAT.screen); }); block(f); }; F.counter = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z, x1, y1, z + (f.h || 0.86), f.col || '#e7e3dc', MAT.grain, { top: f.top || '#d8d4cc' }); block(f); }; F.wc = (g, f, z) => { const [cx, cy] = f.c; const fc = f.face || 'S'; const d = { N: [0, -1], S: [0, 1], E: [1, 0], W: [-1, 0] }[fc]; const bx = cx - d[0] * 0.18, by = cy - d[1] * 0.18; // tank toward back const tw = 0.2, tl = 0.09; if (d[0] === 0) box(g, bx - tw, by - tl, z + 0.35, bx + tw, by + tl, z + 0.8, '#fbfbfb', 0); else box(g, bx - tl, by - tw, z + 0.35, bx + tl, by + tw, z + 0.8, '#fbfbfb', 0); cyl(g, cx + d[0] * 0.05, cy + d[1] * 0.05, z, z + 0.4, 0.19, '#fdfdfd', 0, 16, 0.2); cyl(g, cx + d[0] * 0.05, cy + d[1] * 0.05, z + 0.4, z + 0.43, 0.2, '#f0f0f0', 0, 16); block({ lv: f.lv, r: [cx - 0.2, cy - 0.2, cx + 0.2, cy + 0.2] }); }; F.basin = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z + 0.3, x1, y1, z + 0.85, f.col || '#6e5440', MAT.grain); const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2; cyl(g, cx, cy, z + 0.85, z + 0.97, 0.19, '#fbfbfb', 0, 16, 0.21); const m = f.mirror; if (m) { const [a, b, c2, d] = m; box(g, a, b, z + 1.15, c2, d, z + 1.85, '#cfdbe3', MAT.screen); } }; F.shower = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z, x1, y1, z + 0.04, '#e6eef2', 0); const s = f.glass || 'S'; if (s === 'S') box(g, x0, y1 - 0.01, z, x1, y1 + 0.01, z + 2.0, COL.glass, MAT.glass); if (s === 'E') box(g, x1 - 0.01, y0, z, x1 + 0.01, y1, z + 2.0, COL.glass, MAT.glass); if (s === 'N') box(g, x0, y0 - 0.01, z, x1, y0 + 0.01, z + 2.0, COL.glass, MAT.glass); if (s === 'W') box(g, x0 - 0.01, y0, z, x0 + 0.01, y1, z + 2.0, COL.glass, MAT.glass); cyl(g, (x0 + x1) / 2, (y0 + y1) / 2, z + 2.05, z + 2.07, 0.11, '#c9cdd1', MAT.metal, 12); }; F.washer = (g, f, z) => { const [cx, cy] = f.c; box(g, cx - 0.3, cy - 0.3, z, cx + 0.3, cy + 0.3, z + 0.85, '#e9eaec', 0); const fc = f.face || 'S'; const d = { N: [0, -1], S: [0, 1], E: [1, 0], W: [-1, 0] }[fc]; const px = cx + d[0] * 0.305, py = cy + d[1] * 0.305; if (d[0] === 0) box(g, px - 0.18, py - 0.01, z + 0.25, px + 0.18, py + 0.01, z + 0.6, '#3c4148', MAT.screen); else box(g, px - 0.01, py - 0.18, z + 0.25, px + 0.01, py + 0.18, z + 0.6, '#3c4148', MAT.screen); block({ lv: f.lv, r: [cx - 0.3, cy - 0.3, cx + 0.3, cy + 0.3] }); }; F.plant = (g, f, z) => { const [cx, cy] = f.c; const s = f.s || 1; cyl(g, cx, cy, z, z + 0.45 * s, 0.2 * s, '#cfc8bb', 0, 12, 0.24 * s); blob(g, cx, cy, z + 0.85 * s, 0.32 * s, 0.45 * s, f.col || '#4c7a37', MAT.leaf, cx * 7 + cy); }; F.palm = (g, f, z) => { const [cx, cy] = f.c; const h = f.h || 4.2; cyl(g, cx, cy, z, z + h, 0.11, '#8b7a63', 0, 8, 0.075); const top = [cx, cy, z + h]; const lc = hex('#4b7a33'); for (let i = 0; i < 11; i++) { const a = i / 11 * Math.PI * 2 + 0.3; const ca = Math.cos(a), sa = Math.sin(a); let prev = top; const segs = 4; for (let k = 1; k <= segs; k++) { const t = k / segs; const r = 1.35 * t, dz = 0.35 * t - 1.0 * t * t; const p = [cx + ca * r, cy + sa * r, z + h + dz]; const wdt = 0.16 * Math.sin(Math.PI * Math.min(0.95, t)) + 0.02; const s0 = [-sa * wdt, ca * wdt]; const pw = k === 1 ? 0.02 : 0.16 * Math.sin(Math.PI * Math.min(0.95, (k - 1) / segs)) + 0.02; const s1 = [-sa * pw, ca * pw]; g.o.quad(W(prev[0] + s1[0], prev[1] + s1[1], prev[2]), W(prev[0] - s1[0], prev[1] - s1[1], prev[2]), W(p[0] - s0[0], p[1] - s0[1], p[2]), W(p[0] + s0[0], p[1] + s0[1], p[2]), lc, MAT.leaf, [0, 1, 0]); prev = p; } } }; F.tree = (g, f, z) => { const [cx, cy] = f.c; const s = f.s || 1; cyl(g, cx, cy, z, z + 1.6 * s, 0.09 * s, '#6d5a44', 0, 8, 0.07 * s); blob(g, cx, cy, z + 2.3 * s, 1.0 * s, 1.0 * s, f.col || '#557f3a', MAT.leaf, cx + cy * 3); blob(g, cx + 0.4 * s, cy + 0.2 * s, z + 2.8 * s, 0.7 * s, 0.7 * s, '#628c43', MAT.leaf, cx * 2 + cy); }; F.shrub = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const n = Math.max(1, Math.round(Math.max(x1 - x0, y1 - y0) / 0.6)); for (let i = 0; i < n; i++) { const t = (i + 0.5) / n; const cx = (x1 - x0) > (y1 - y0) ? lerp(x0, x1, t) : (x0 + x1) / 2, cy = (x1 - x0) > (y1 - y0) ? (y0 + y1) / 2 : lerp(y0, y1, t); const r = Math.min(x1 - x0, y1 - y0) / 2; blob(g, cx, cy, z + r * 0.8, r * 1.1, r * 0.9, i % 2 ? '#5a8a3d' : '#4d7c34', MAT.leaf, i * 13 + cx); } }; F.planter = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z, x1, y1, z + (f.h || 0.55), f.col || '#7a5a3c', MAT.grain, { top: COL.soil, topMat: MAT.soil }); F.shrub(g, { r: [x0 + 0.08, y0 + 0.08, x1 - 0.08, y1 - 0.08] }, z + (f.h || 0.55) - 0.1); }; function prism(g, pts, x0, x1, col, mat) { // convex profile in (y,z) extruded along x col = C(col); const B = mat === MAT.glass ? g.g : g.o; const m = mat || 0; const n = pts.length; for (let i = 1; i < n - 1; i++) { B.tri(W(x0, pts[0][0], pts[0][1]), W(x0, pts[i][0], pts[i][1]), W(x0, pts[i + 1][0], pts[i + 1][1]), col, m, [-1, 0, 0]); B.tri(W(x1, pts[0][0], pts[0][1]), W(x1, pts[i + 1][0], pts[i + 1][1]), W(x1, pts[i][0], pts[i][1]), col, m, [1, 0, 0]); } let cy = 0, cz = 0; pts.forEach(p => { cy += p[0]; cz += p[1]; }); cy /= n; cz /= n; for (let i = 0; i < n; i++) { const a = pts[i], b = pts[(i + 1) % n]; let ny = b[1] - a[1], nz = -(b[0] - a[0]); const mid = [(a[0] + b[0]) / 2 - cy, (a[1] + b[1]) / 2 - cz]; if (ny * mid[0] + nz * mid[1] < 0) { ny = -ny; nz = -nz; } const l = Math.hypot(ny, nz) || 1; B.quad(W(x0, a[0], a[1]), W(x1, a[0], a[1]), W(x1, b[0], b[1]), W(x0, b[0], b[1]), col, m, [0, nz / l, ny / l]); } } F.car = (g, f, z) => { const [x0, y0, x1, y1] = f.r; const c = C(f.col || '#c9ccd0'); const L = y1 - y0; const fr = f.front || 'N'; const Y = u => fr === 'N' ? y0 + u : y1 - u; const P = arr => arr.map(q => [Y(q[0]), z + q[1]]); prism(g, P([[0, 0.3], [0, 0.6], [0.12, 0.7], [1.0, 0.8], [L - 0.4, 0.86], [L, 0.74], [L, 0.3]]), x0 + 0.02, x1 - 0.02, c, MAT.paint); prism(g, P([[1.1, 0.8], [1.85, 1.36], [L - 1.45, 1.38], [L - 0.7, 0.86]]), x0 + 0.13, x1 - 0.13, '#1e252c', MAT.screen); prism(g, P([[1.95, 1.36], [L - 1.5, 1.38], [L - 1.5, 1.43], [1.95, 1.41]]), x0 + 0.15, x1 - 0.15, c, MAT.paint); [[x0 + 0.14, 0.78], [x1 - 0.14, 0.78], [x0 + 0.14, L - 0.78], [x1 - 0.14, L - 0.78]].forEach(p => cyl2(g, p[0], Y(p[1]), z + 0.32, 0.32, 0.22, 'x')); const fy = Y(0); box(g, x0 + 0.15, fy - 0.015, z + 0.55, x0 + 0.48, fy + 0.015, z + 0.64, '#f4f0dd', MAT.lamp); box(g, x1 - 0.48, fy - 0.015, z + 0.55, x1 - 0.15, fy + 0.015, z + 0.64, '#f4f0dd', MAT.lamp); const ry = Y(L); box(g, x0 + 0.12, ry - 0.015, z + 0.6, x0 + 0.42, ry + 0.015, z + 0.68, '#a8231d', MAT.lamp); box(g, x1 - 0.42, ry - 0.015, z + 0.6, x1 - 0.12, ry + 0.015, z + 0.68, '#a8231d', MAT.lamp); block(f); }; function cyl2(g, cx, cy, cz, r, w, ax) { // wheel: cylinder along x or y axis const seg = 14, col = hex('#1b1c1e'); const B = g.o; for (let i = 0; i < seg; i++) { const a0 = i / seg * Math.PI * 2, a1 = (i + 1) / seg * Math.PI * 2; const P = (a, s) => ax === 'x' ? W(cx + s * w / 2, cy + Math.cos(a) * r, cz + Math.sin(a) * r) : W(cx + Math.cos(a) * r, cy + s * w / 2, cz + Math.sin(a) * r); const N = a => ax === 'x' ? [0, Math.sin(a), Math.cos(a)] : [Math.cos(a), Math.sin(a), 0]; B.vert(P(a0, -1), N(a0), col, 0); B.vert(P(a1, -1), N(a1), col, 0); B.vert(P(a1, 1), N(a1), col, 0); B.vert(P(a0, -1), N(a0), col, 0); B.vert(P(a1, 1), N(a1), col, 0); B.vert(P(a0, 1), N(a0), col, 0); } } F.desk = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z + 0.72, x1, y1, z + 0.76, f.col || '#b48a5e', MAT.grain); box(g, x0, y0, z, x0 + 0.04, y1, z + 0.72, '#555', MAT.metal); box(g, x1 - 0.04, y0, z, x1, y1, z + 0.72, '#555', MAT.metal); block(f); }; F.box = (g, f, z) => { const [x0, y0, x1, y1] = f.r; box(g, x0, y0, z + (f.z0 || 0), x1, y1, z + (f.h || 0.5), f.col || '#999', f.mat || 0); if (f.solid) block(f); }; F.lamp = (g, f, z) => { const [cx, cy] = f.c; cyl(g, cx, cy, z, z + 0.03, 0.16, '#2b2b2b', MAT.metal, 12); cyl(g, cx, cy, z + 0.03, z + 1.45, 0.015, '#2b2b2b', MAT.metal, 6); cyl(g, cx, cy, z + 1.35, z + 1.65, 0.2, '#efe3c6', MAT.lamp, 14, 0.14); }; function block(f, pad) { if (!f.lv || f.walk) return; const p = pad == null ? 0.02 : pad; const [x0, y0, x1, y1] = f.r; blocks[f.lv].push([Math.min(x0, x1) - p, Math.min(y0, y1) - p, Math.max(x0, x1) + p, Math.max(y0, y1) + p]); } const GREEN = { tree: 1, palm: 1, shrub: 1, plant: 1, planter: 1 }; (U.furn || []).forEach(f => { const lv = LV[f.lv]; const z = lv.z + (f.dz || 0); const fn = F[f.k]; if (!fn) return; fn(G(f.lv, f.cat || (GREEN[f.k] ? 'green' : 'furn')), f, z); }); // ---------------- stairs ---------------- (U.stairs || []).forEach(s => { const g = G(s.lv, 'stair'); const base = LV[s.lv].z; const col = s.col || '#d9d2c4'; s.treads.forEach(t => { const [x0, y0, x1, y1] = t.r; box(g, x0, y0, base + t.z - 0.22, x1, y1, base + t.z, col, MAT.tile, { top: col, bottom: '#efece6' }); box(g, x0, y0, base + t.z - 0.02, x1, y1, base + t.z, '#cfc6b5', MAT.tile, { noBottom: true }); }); (s.rails || []).forEach(r => { const za = base + r[4], zb = base + r[5]; railSloped(g, r[0], r[1], r[2], r[3], za, zb); }); if (s.block) s.block.forEach(b => blocks[b[4] || s.lv].push(b.slice(0, 4))); }); function railSloped(g, x0, y0, x1, y1, za, zb) { const L = Math.hypot(x1 - x0, y1 - y0); const n = Math.max(2, Math.round(L / 0.12)); const H = 0.9; for (let i = 0; i <= n; i++) { const t = i / n; const x = lerp(x0, x1, t), y = lerp(y0, y1, t), z = lerp(za, zb, t); box(g, x - 0.01, y - 0.01, z, x + 0.01, y + 0.01, z + H, '#22262b', MAT.metal); } // top rail as thin quad strip const p0 = W(x0, y0, za + H), p1 = W(x1, y1, zb + H); const sd = norm(cross(sub(p1, p0), [0, 1, 0])); const up = [0, 0.045, 0]; const s = scl(sd, 0.03); g.o.quad(add(p0, s), add(p1, s), add(add(p1, s), up), add(add(p0, s), up), hex('#22262b'), MAT.metal, sd); g.o.quad(sub(p1, s), sub(p0, s), add(sub(p0, s), up), add(sub(p1, s), up), hex('#22262b'), MAT.metal, scl(sd, -1)); g.o.quad(add(add(p0, s), up), add(add(p1, s), up), add(sub(p1, s), up), add(sub(p0, s), up), hex('#22262b'), MAT.metal, [0, 1, 0]); } // ---------------- extras (facade, rails, roofs) ---------------- (U.extras || []).forEach(e => { const lv = LV[e.lv]; const g = G(e.lv, e.cat || 'ext'); const z = lv.z; if (e.k === 'box') box(g, e.b[0], e.b[1], z + e.b[2], e.b[3], e.b[4], z + e.b[5], e.col || COL.wall, e.mat == null ? 0 : MAT[e.mat] != null ? MAT[e.mat] : e.mat, e.top ? { top: e.top } : null); if (e.k === 'rail') rail(e.lv, e.a, e.b, z + (e.z || 0), e.h || 1.0, e.cat); if (e.k === 'glassrail') { box(g, Math.min(e.a[0], e.b[0]) - 0.01, Math.min(e.a[1], e.b[1]) - 0.01, z + (e.z || 0), Math.max(e.a[0], e.b[0]) + 0.01, Math.max(e.a[1], e.b[1]) + 0.01, z + (e.z || 0) + (e.h || 1.0), COL.glass, MAT.glass); box(g, Math.min(e.a[0], e.b[0]) - 0.02, Math.min(e.a[1], e.b[1]) - 0.02, z + (e.z || 0) + (e.h || 1.0), Math.max(e.a[0], e.b[0]) + 0.02, Math.max(e.a[1], e.b[1]) + 0.02, z + (e.z || 0) + (e.h || 1.0) + 0.04, '#22262b', MAT.metal); colliders[e.lv].push([e.a[0], e.a[1], e.b[0], e.b[1]]); } if (e.k === 'hip') hipRoof(G(e.lv, 'roof'), e.r[0], e.r[1], e.r[2], e.r[3], z + e.z, e.pitch || 38, e.col || COL.shingle, e.over); if (e.k === 'shed') shedRoof(G(e.lv, e.cat || 'roof'), e.r[0], e.r[1], e.r[2], e.r[3], z + e.z0, z + e.z1, e.high || 'N', e.col || COL.shingle); if (e.k === 'flat') { box(G(e.lv, e.cat || 'roof'), e.r[0], e.r[1], z + e.z - 0.15, e.r[2], e.r[3], z + e.z, e.col || '#c9c6bf', 0, { bottom: COL.ceil }); } if (e.k === 'awning') { // black fabric awning sloping toward street const [x0, , x1] = e.r; const y0 = e.r[1], y1 = e.r[3]; shedRoof(g, x0, y0, x1, y1, z + e.z - 0.35, z + e.z, 'N', '#24272b'); box(g, x0, y1 - 0.02, z + e.z - 0.55, x1, y1, z + e.z - 0.33, '#24272b', MAT.fabric); } if (e.k === 'lamp') { box(g, e.c[0] - 0.06, e.c[1], z + e.z - 0.12, e.c[0] + 0.06, e.c[1] + 0.12, z + e.z + 0.12, '#1d1f22', MAT.metal); box(g, e.c[0] - 0.04, e.c[1] + 0.02, z + e.z - 0.08, e.c[0] + 0.04, e.c[1] + 0.1, z + e.z + 0.06, '#ffe9b0', MAT.lamp); } }); // ---------------- site ---------------- (function site() { const [LW, LD] = U.lot; const g = G('_site', 'site'); const z0 = U.ground || 0; const R = U.road || 6; const m = 34; const hole = U.groundHole; const gg = G('_site', 'ground'); if (hole) { const gb = (a, b, c, d) => { if (c - a > 0.01 && d - b > 0.01) box(gg, a, b, z0 - 0.4, c, d, z0 - 0.06, '#9db08a', MAT.grass, { noBottom: true }); }; gb(-m, -m, LW + m, hole[1]); gb(-m, hole[3], LW + m, LD); gb(-m, hole[1], hole[0], hole[3]); gb(hole[2], hole[1], LW + m, hole[3]); } else box(gg, -m, -m, z0 - 0.4, LW + m, LD, z0 - 0.06, '#9db08a', MAT.grass, { noBottom: true }); box(g, -m, LD, z0 - 0.4, LW + m, LD + 1.2, z0 + 0.0, '#b8b5ae', MAT.pave, { noBottom: true }); // sidewalk/drain edge box(g, -m, LD + 1.2, z0 - 0.4, LW + m, LD + 1.2 + R, z0 - 0.04, COL.asphalt, MAT.asphalt, { noBottom: true }); box(g, -m, LD + 1.2 + R, z0 - 0.4, LW + m, LD + 1.2 + R + m, z0 - 0.06, '#9db08a', MAT.grass, { noBottom: true }); // road marking for (let x = -m; x < LW + m; x += 3) box(g, x, LD + 1.2 + R / 2 - 0.05, z0 - 0.04, x + 1.5, LD + 1.2 + R / 2 + 0.05, z0 - 0.035, '#e8e6df', 0); // boundary walls (pagar) around back & sides of lot const fh = U.fenceH || 2.0; const ft = 0.1; const fz = z0 - 0.05; (U.fence || [[-ft, 0, 0, LD], [LW, 0, LW + ft, LD], [-ft, -ft, LW + ft, 0]]).forEach(r => box(gg, r[0], r[1], r[4] != null ? r[4] : fz, r[2], r[3], (r[5] != null ? r[5] : fz + fh), '#ecebe6', 0, { top: '#cfcdc6' })); // neighbour massing (simple, light) if (U.neighbors !== false) { const nb = U.nbBox || [0, U.nbY0 || 4, LW, U.nbY1 || LD - 4.8, 6.6]; const gn = G('_site', 'nb'); [-1, 1].forEach(s => { const ox = s * (LW + 0.12); box(gn, nb[0] + ox + 0.02, nb[1], z0 - 0.05, nb[2] + ox - 0.02, nb[3], z0 + nb[4], '#e9e8e3', 0, { top: '#d5d3cc' }); hipRoof(gn, nb[0] + ox + 0.25, nb[1] + 0.2, nb[2] + ox - 0.25, nb[3] - 0.2, z0 + nb[4], 40, '#8d9097', 0.3); }); } (U.siteTrees || []).forEach((t, i) => F[t.k || 'tree'](g, t, z0)); })(); // ---------------- WebGL ---------------- const cv = document.getElementById('cv'); const gl = cv.getContext('webgl2', { antialias: true, preserveDrawingBuffer: false, powerPreference: 'high-performance' }); if (!gl) { document.getElementById('nogl').hidden = false; return; } const VS = `#version 300 es layout(location=0) in vec3 aP; layout(location=1) in vec3 aN; layout(location=2) in vec4 aC; uniform mat4 uVP; uniform mat4 uSVP; uniform vec3 uOff; out vec3 vP; out vec3 vW; out vec3 vN; out vec3 vC; flat out int vM; out vec4 vS; void main(){ vec3 p=aP+uOff; vP=aP; vW=p; vN=aN; vC=aC.rgb; vM=int(aC.a+0.5); vS=uSVP*vec4(p+aN*0.03,1.0); gl_Position=uVP*vec4(p,1.0); }`; const FS = `#version 300 es precision highp float; precision highp sampler2DShadow; in vec3 vP; in vec3 vW; in vec3 vN; in vec3 vC; flat in int vM; in vec4 vS; uniform float uClip; uniform float uTone; uniform vec3 uSun; uniform vec3 uSunC; uniform vec3 uSky; uniform vec3 uGnd; uniform float uAmb; uniform sampler2DShadow uSh; uniform float uShOn; uniform vec3 uEye; uniform float uInterior; uniform float uAlpha; uniform float uDim; out vec4 o; float h21(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); } float vn(vec2 p){ vec2 i=floor(p), f=fract(p); f=f*f*(3.0-2.0*f); return mix(mix(h21(i),h21(i+vec2(1,0)),f.x),mix(h21(i+vec2(0,1)),h21(i+vec2(1,1)),f.x),f.y); } float fbm(vec2 p){ float s=0.0,a=0.5; for(int i=0;i<4;i++){ s+=a*vn(p); p*=2.03; a*=0.5;} return s; } float grid(vec2 p, vec2 s, float w){ vec2 q=abs(fract(p/s+0.5)-0.5)*s; return 1.0-smoothstep(0.0,w,min(q.x,q.y)); } vec2 uvOf(vec3 p, vec3 n){ vec3 a=abs(n); if(a.y>0.5) return p.xz; if(a.x>0.5) return vec2(p.z,p.y); return vec2(p.x,p.y); } float shadow(){ if(uShOn<0.5) return 1.0; vec3 c=vS.xyz/vS.w*0.5+0.5; if(c.x<0.0||c.x>1.0||c.y<0.0||c.y>1.0||c.z>1.0) return 1.0; float s=0.0; vec2 t=vec2(1.0/2048.0); for(int i=-1;i<=1;i++) for(int j=-1;j<=1;j++) s+=texture(uSh, vec3(c.xy+vec2(i,j)*t*1.2, c.z-0.0015)); return s/9.0; } void main(){ if(uClip>0.0 && vP.y>uClip) discard; vec3 n=normalize(vN); vec3 col=vC; if(uClip>0.0 && dot(n,uEye-vW)<0.0){ o=vec4(vec3(0.24,0.27,0.33),uAlpha); return; } vec2 uv=uvOf(vP,n); float spec=0.0; float emis=0.0; float a=1.0; if(vM==1){ float g=grid(uv+vec2(0.0,0.3), vec2(0.6,1.2), 0.004); float sp=fbm(uv*38.0); col*=0.92+0.12*sp; col*=0.95+0.07*h21(floor(uv/vec2(0.6,1.2))); col=mix(col,col*0.78,g); spec=0.25; } else if(vM==2){ float g=grid(uv, vec2(0.3,0.3), 0.004); col*=0.93+0.1*h21(floor(uv/0.3)); col=mix(col,vec3(0.92),g*0.8); spec=0.3; } else if(vM==3){ float pl=floor(uv.x/0.15); col*=0.85+0.2*h21(vec2(pl,1.0)); col*=0.92+0.12*fbm(vec2(uv.x*6.0,uv.y*0.7+pl*3.0)); col=mix(col,col*0.6,grid(vec2(uv.x,0.0),vec2(0.15,1.0),0.004)); spec=0.15; } else if(vM==4){ float t=fbm(uv*3.0)*0.6+fbm(uv*22.0)*0.4; col*=0.78+0.4*t; } else if(vM==5){ col*=0.9+0.14*fbm(uv*9.0); col=mix(col,col*0.8,grid(uv,vec2(0.5,0.5),0.006)); } else if(vM==6){ float row=floor(uv.y/0.11 + (abs(n.y)>0.5?uv.x*0.0:0.0)); vec2 q=vec2(uv.x+row*0.17, uv.y); vec2 r=vec2(dot(normalize(vec2(n.x,n.z)+1e-4),vec2(1.0)),0.0); float g2=grid(vec2(q.x, (vP.y)*1.3), vec2(0.34,0.14), 0.006); col*=0.85+0.25*h21(floor(vec2(q.x/0.34, vP.y*1.3/0.14))); col=mix(col,col*0.55,g2); } else if(vM==7){ float g=grid(uv, vec2(0.6,0.3), 0.006); col*=0.8+0.35*fbm(uv*6.0); col=mix(col,col*0.6,g); } else if(vM==8){ col*=0.85+0.2*fbm(uv*14.0); } else if(vM==9){ col*=0.94+0.08*vn(uv*60.0); } else if(vM==10){ float g=grid(uv, vec2(0.4,0.4), 0.004); col*=0.9+0.12*fbm(uv*12.0); col=mix(col,col*0.8,g); } else if(vM==11){ col*=0.75+0.45*fbm(uv*7.0); } else if(vM==12){ col*=0.88+0.18*fbm(vec2(uv.x*2.0+uv.y*0.3,uv.y*18.0)); spec=0.1; } else if(vM==13){ spec=0.6; } else if(vM==20){ a=0.22; spec=0.9; } else if(vM==21){ spec=0.9; } else if(vM==22){ spec=0.7; } else if(vM==23){ emis=1.0; } else if(vM==24){ col*=0.8+0.35*fbm(vP.xz*4.0+vP.y*3.0); } float sh=shadow(); float ndl=max(dot(n,uSun),0.0); vec3 hemi=mix(uGnd,uSky,n.y*0.5+0.5); vec3 L=col*(hemi*uAmb + uSunC*ndl*sh); // interior fill: soft light from above + front L+=col*uInterior*(0.42+0.20*max(n.y,0.0)+0.30*max(-n.y,0.0)+0.06*abs(n.x)+0.08*abs(n.z)); vec3 v=normalize(uEye-vW); vec3 hv=normalize(v+uSun); L+=uSunC*spec*0.35*pow(max(dot(n,hv),0.0),40.0)*sh; if(vM==20){ float fr=pow(1.0-max(dot(n,v),0.0),3.0); L=mix(vec3(0.70,0.80,0.86),vec3(0.95,0.97,1.0),fr)*0.9; a=0.18+0.45*fr; } if(emis>0.5) L=col*1.05; L=mix(L, vec3(0.86,0.89,0.93), uDim); // tone if(uTone>0.5){ L=1.0-exp(-L*1.75); } else { L=L/(1.0+L*0.12); L=pow(L,vec3(1.0/1.08)); } o=vec4(L, a*uAlpha); }`; const SVS = `#version 300 es layout(location=0) in vec3 aP; uniform mat4 uSVP; uniform vec3 uOff; out float vY; void main(){ vY=aP.y; gl_Position=uSVP*vec4(aP+uOff,1.0); }`; const SFS = `#version 300 es precision highp float; in float vY; uniform float uClip; out vec4 o; void main(){ if(uClip>0.0 && vY>uClip) discard; o=vec4(1.0); }`; function prog(vs, fs) { const p = gl.createProgram(); [[gl.VERTEX_SHADER, vs], [gl.FRAGMENT_SHADER, fs]].forEach(([t, s]) => { const sh = gl.createShader(t); gl.shaderSource(sh, s); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(sh)); gl.attachShader(p, sh); }); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p)); return p; } const P = prog(VS, FS), SP = prog(SVS, SFS); const loc = {}; ['uVP', 'uSVP', 'uOff', 'uClip', 'uTone', 'uSun', 'uSunC', 'uSky', 'uGnd', 'uAmb', 'uSh', 'uShOn', 'uEye', 'uInterior', 'uAlpha', 'uDim'].forEach(k => loc[k] = gl.getUniformLocation(P, k)); const sloc = { uSVP: gl.getUniformLocation(SP, 'uSVP'), uOff: gl.getUniformLocation(SP, 'uOff'), uClip: gl.getUniformLocation(SP, 'uClip') }; function upload(buf) { if (!buf.v.length) return null; const data = new Float32Array(buf.v); const vao = gl.createVertexArray(); gl.bindVertexArray(vao); const vb = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vb); gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 40, 0); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 40, 12); gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 40, 24); gl.bindVertexArray(null); return { vao, n: data.length / 10 }; } const GL = []; let bmin = [1e9, 1e9, 1e9], bmax = [-1e9, -1e9, -1e9]; groups.forEach(gr => { gr.O = upload(gr.o); gr.Gl = upload(gr.g); if (gr.lv !== '_site') for (let i = 0; i < gr.o.v.length; i += 10) for (let k = 0; k < 3; k++) { bmin[k] = Math.min(bmin[k], gr.o.v[i + k]); bmax[k] = Math.max(bmax[k], gr.o.v[i + k]); } gr.o = gr.g = null; GL.push(gr); }); // shadow map const SMS = 2048; const shTex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, shTex); gl.texStorage2D(gl.TEXTURE_2D, 1, gl.DEPTH_COMPONENT24, SMS, SMS); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_COMPARE_FUNC, gl.LEQUAL); const shFB = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, shFB); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, shTex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // ---------------- state ---------------- const [LW, LD] = U.lot; const center = [LW / 2, (bmin[1] + bmax[1]) / 2, (bmin[2] + bmax[2]) / 2]; const S = { mode: 'doll', sel: U.levels[U.levels.length - 1].id, explode: 0, explodeT: 0, roof: false, labels: true, cut: true, orbit: { yaw: (U.view && U.view.yaw != null ? U.view.yaw : 24) * D2R, pitch: (U.view && U.view.pitch || 50) * D2R, dist: (U.view && U.view.dist) || Math.max(LW, LD) * 1.38, tgt: [LW / 2, (LV[U.levels[U.levels.length - 1].id].z) * 0.5 + 0.5, (bmin[2] + bmax[2]) / 2 + 0.6] }, walk: { lv: U.walkStart ? U.walkStart[0] : U.levels[0].id, x: 0, y: 0, yaw: 0, pitch: -4 * D2R }, plan: { cx: LW / 2, cy: (bmin[2] + bmax[2]) / 2, zoom: 1 }, cam: null, from: null, t: 1, dirty: true, keys: {} }; const TOUR = (window.TOUR || []).map((p, i) => Object.assign({ i }, p)); S.tour = { i: 0, yaw: 0, pitch: -2 * D2R, fov: 75 }; const fp = () => S.mode === 'walk' || S.mode === 'tour'; // level index for "visible" logic: show levels <= selected const levelVisible = lv => { if (lv === '_site') return true; if (fp()) return true; if (S.mode === 'plan') return lv === S.sel; return LV[lv].i <= LV[S.sel].i; }; const exOf = lv => (LV[lv].ex != null ? LV[lv].ex : LV[lv].i); const levelOffset = lv => (lv === '_site' ? 0 : exOf(lv) * S.explodeT * (U.explodeGap || 2.6)); // ---------------- camera ---------------- function camOrbit() { const o = S.orbit; const dir = [Math.sin(o.yaw) * Math.cos(o.pitch), Math.sin(o.pitch), Math.cos(o.yaw) * Math.cos(o.pitch)]; return { eye: add(o.tgt, scl(dir, o.dist)), tgt: o.tgt.slice(), fov: 38, ortho: 0 }; } function camWalk() { const w = S.walk; const z = LV[w.lv].z + floorDz(w.lv, w.x, w.y) + 1.58; const eye = [w.x, z, w.y]; const f = [Math.sin(w.yaw) * Math.cos(w.pitch), Math.sin(w.pitch), Math.cos(w.yaw) * Math.cos(w.pitch)]; return { eye, tgt: add(eye, f), fov: 72, ortho: 0 }; } function camPlan() { const p = S.plan; const lz = LV[S.sel].z; const asp = cv.clientWidth / Math.max(1, cv.clientHeight); const need = Math.max((bmax[2] - bmin[2]) * 0.56, (bmax[0] - bmin[0]) * 0.56 / Math.min(1, asp)); return { eye: [p.cx, lz + 40, p.cy + 0.001], tgt: [p.cx, lz, p.cy], fov: 38, ortho: 1, span: need / p.zoom }; } function camTour() { const p = TOUR[S.tour.i]; const t = S.tour; const eye = [p.x, p.z, p.y]; const f = [Math.sin(t.yaw) * Math.cos(t.pitch), Math.sin(t.pitch), Math.cos(t.yaw) * Math.cos(t.pitch)]; return { eye, tgt: add(eye, f), fov: t.fov, ortho: 0 }; } function targetCam() { return S.mode === 'walk' ? camWalk() : S.mode === 'tour' ? camTour() : S.mode === 'plan' ? camPlan() : camOrbit(); } function floorDz(lv, x, y) { let dz = 0; for (const r of rooms) { if (r.lv !== lv || r.mat === 'void' || r.walk === false) continue; const [x0, y0, x1, y1] = r.r; if (x >= x0 - 0.1 && x <= x1 + 0.1 && y >= y0 - 0.1 && y <= y1 + 0.1) { dz = r.dz || 0; if (x >= x0 && x <= x1 && y >= y0 && y <= y1) return dz; } } return dz; } function setMode(m, opt) { S.from = S.cam ? Object.assign({}, S.cam) : null; S.t = 0; S.mode = m; opt = opt || {}; document.body.dataset.mode = m; ui.sync(); S.dirty = true; } // ---------------- render ---------------- function resize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = cv.clientWidth, h = cv.clientHeight; if (cv.width !== Math.round(w * dpr) || cv.height !== Math.round(h * dpr)) { cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr); S.dirty = true; } } const sunDir = norm([-0.45, 0.82, 0.55]); function frame(cam) { resize(); const w = cv.width, h = cv.height, asp = w / h; let proj, view; if (cam.ortho) { const s = cam.span; const sx = asp >= 1 ? s * asp : s, sy = asp >= 1 ? s : s / asp; proj = ortho(-sx, sx, -sy, sy, 0.1, 200); view = lookAt(cam.eye, cam.tgt, [0, 0, -1]); } else { proj = persp(cam.fov * D2R, asp, fp() ? 0.05 : 0.3, 400); view = lookAt(cam.eye, cam.tgt, [0, 1, 0]); } const VP = mul(proj, view); S.VP = VP; S.camNow = cam; // shadow pass const ext = Math.max(bmax[0] - bmin[0], bmax[2] - bmin[2], (bmax[1] - bmin[1]) + S.explodeT * 8) * 0.75 + 4; const sc = [(bmin[0] + bmax[0]) / 2, (bmin[1] + bmax[1]) / 2 + S.explodeT * 3, (bmin[2] + bmax[2]) / 2]; const sView = lookAt(add(sc, scl(sunDir, 60)), sc, [0, 1, 0]); const sProj = ortho(-ext, ext, -ext, ext, 1, 140); const SVP = mul(sProj, sView); gl.bindFramebuffer(gl.FRAMEBUFFER, shFB); gl.viewport(0, 0, SMS, SMS); gl.clear(gl.DEPTH_BUFFER_BIT); gl.enable(gl.DEPTH_TEST); gl.disable(gl.BLEND); gl.enable(gl.POLYGON_OFFSET_FILL); gl.polygonOffset(2.0, 4.0); gl.useProgram(SP); gl.uniformMatrix4fv(sloc.uSVP, false, SVP); GL.forEach(gr => { if (!gr.O || !visible(gr)) return; if (!casts(gr)) return; gl.uniform1f(sloc.uClip, clipOf(gr)); gl.uniform3fv(sloc.uOff, [0, levelOffset(gr.lv), 0]); gl.bindVertexArray(gr.O.vao); gl.drawArrays(gl.TRIANGLES, 0, gr.O.n); }); gl.disable(gl.POLYGON_OFFSET_FILL); // main pass gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, w, h); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.useProgram(P); gl.uniformMatrix4fv(loc.uVP, false, VP); gl.uniformMatrix4fv(loc.uSVP, false, SVP); gl.uniform3fv(loc.uSun, sunDir); gl.uniform3fv(loc.uSunC, fp() ? [0.95, 0.88, 0.76] : [0.92, 0.86, 0.76]); gl.uniform3fv(loc.uSky, [0.78, 0.84, 0.92]); gl.uniform3fv(loc.uGnd, [0.55, 0.52, 0.47]); gl.uniform1f(loc.uAmb, fp() ? 0.85 : 0.66); gl.uniform1f(loc.uTone, fp() ? 1 : 0); gl.uniform1f(loc.uInterior, fp() ? 0.62 : 0.12); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, shTex); gl.uniform1i(loc.uSh, 0); gl.uniform1f(loc.uShOn, 1); gl.uniform3fv(loc.uEye, cam.eye); gl.uniform1f(loc.uAlpha, 1); gl.enable(gl.DEPTH_TEST); gl.disable(gl.BLEND); GL.forEach(gr => { if (!gr.O || !visible(gr)) return; gl.uniform1f(loc.uDim, dimOf(gr)); gl.uniform1f(loc.uClip, clipOf(gr)); gl.uniform3fv(loc.uOff, [0, levelOffset(gr.lv), 0]); gl.bindVertexArray(gr.O.vao); gl.drawArrays(gl.TRIANGLES, 0, gr.O.n); }); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.depthMask(false); GL.forEach(gr => { if (!gr.Gl || !visible(gr)) return; gl.uniform1f(loc.uDim, 0); gl.uniform1f(loc.uClip, clipOf(gr)); gl.uniform3fv(loc.uOff, [0, levelOffset(gr.lv), 0]); gl.bindVertexArray(gr.Gl.vao); gl.drawArrays(gl.TRIANGLES, 0, gr.Gl.n); }); gl.depthMask(true); gl.disable(gl.BLEND); labels.update(VP, w / (window.devicePixelRatio > 2 ? 2 : (window.devicePixelRatio || 1)), h / (window.devicePixelRatio > 2 ? 2 : (window.devicePixelRatio || 1))); tour.update(VP); } function visible(gr) { if (!levelVisible(gr.lv)) return false; if (gr.cat === 'ceil') return fp(); if (gr.cat === 'nb') return fp(); if (gr.cat === 'ground' && !fp() && LV[S.sel].z < -1 && !(S.mode === 'doll' && S.explodeT > 0.5)) return false; if (gr.cat === 'roof') return fp() || (S.mode === 'doll' && S.roof && S.sel === U.levels[U.levels.length - 1].id); return true; } function casts(gr) { if (gr.cat === 'floor' || gr.cat === 'ceil') return fp() && gr.cat === 'floor'; if (gr.cat === 'roof') return fp() || S.roof; return true; } function dimOf(gr) { return 0; } function clipOf(gr) { if (fp() || !S.cut || gr.lv === '_site' || S.roof) return 0; const c = LV[gr.lv].z + (LV[gr.lv].cut || U.cutH || 1.45); if (gr.cat === 'wall' || gr.cat === 'ext') return c; if (gr.cat === 'furn') return c + 0.55; return 0; } // ---------------- labels ---------------- const labels = (function () { const host = document.getElementById('labels'); const items = []; rooms.forEach(r => { if (!r.name || r.nolabel) return; const el = document.createElement('div'); el.className = 'lbl' + (isIndoor(r) ? '' : ' out'); el.textContent = r.name; host.appendChild(el); items.push({ r, el, x: (r.r[0] + r.r[2]) / 2 + (r.lx || 0), y: (r.r[1] + r.r[3]) / 2 + (r.ly || 0) }); }); return { update(VP, w, h) { const show = S.labels && !fp() && !(S.mode === 'doll' && S.roof); const topLv = S.sel; items.forEach(it => { const lv = it.r.lv; let vis = show && levelVisible(lv); if (vis && S.mode === 'doll' && S.explodeT < 0.5 && lv !== topLv && !(it.r.showWith && it.r.showWith.includes(topLv))) vis = false; if (!vis) { it.el.hidden = true; return; } const p = W(it.x, it.y, it.r.z + 0.3); p[1] += levelOffset(lv); const x = VP[0] * p[0] + VP[4] * p[1] + VP[8] * p[2] + VP[12], y = VP[1] * p[0] + VP[5] * p[1] + VP[9] * p[2] + VP[13], ww = VP[3] * p[0] + VP[7] * p[1] + VP[11] * p[2] + VP[15]; if (ww <= 0) { it.el.hidden = true; return; } it.el.hidden = false; it.el.style.transform = `translate(${((x / ww) * 0.5 + 0.5) * cv.clientWidth}px,${((1 - ((y / ww) * 0.5 + 0.5))) * cv.clientHeight}px) translate(-50%,-50%)`; }); } }; })(); // ---------------- loop ---------------- let last = performance.now(); function tick(now) { const dt = Math.min(0.05, (now - last) / 1000); last = now; // explode anim const ex = S.mode === 'doll' ? S.explode : 0; if (Math.abs(S.explodeT - ex) > 0.001) { S.explodeT += (ex - S.explodeT) * Math.min(1, dt * 7); S.dirty = true; } else S.explodeT = ex; if (S.mode === 'walk') walkStep(dt); if (S.mode === 'tour') tour.keys(dt); if (S.autoSpin && S.mode === 'doll') { S.orbit.yaw += dt * 0.12; S.dirty = true; } const tc = targetCam(); if (S.t < 1 && S.from) { S.t = Math.min(1, S.t + dt / 0.9); const k = S.t < 0.5 ? 4 * S.t * S.t * S.t : 1 - Math.pow(-2 * S.t + 2, 3) / 2; const f = S.from; const cam = { eye: lerp3(f.eye, tc.eye, k), tgt: lerp3(f.tgt, tc.tgt, k), fov: lerp(f.fov, tc.fov, k), ortho: k > 0.85 ? tc.ortho : 0, span: tc.span }; if (tc.ortho && k <= 0.85) { cam.fov = lerp(f.fov, 38, k); } S.cam = cam; S.dirty = true; } else S.cam = tc; if (S.dirty || (S.t < 1)) { frame(S.cam); S.dirty = false; ui.hud(); } requestAnimationFrame(tick); } // ---------------- walk / collision ---------------- function walkable(lv, x, y) { for (const r of rooms) { if (r.lv !== lv || r.mat === 'void' || r.walk === false) continue; const [x0, y0, x1, y1] = r.r; if (x > x0 - 0.12 && x < x1 + 0.12 && y > y0 - 0.12 && y < y1 + 0.12) { for (const b of blocks[lv]) if (x > b[0] - 0.12 && x < b[2] + 0.12 && y > b[1] - 0.12 && y < b[3] + 0.12) return false; return true; } } return false; } function collide(lv, x, y, rad) { for (let it = 0; it < 3; it++) for (const s of colliders[lv]) { const dx = s[2] - s[0], dy = s[3] - s[1]; const L2 = dx * dx + dy * dy || 1e-9; let t = ((x - s[0]) * dx + (y - s[1]) * dy) / L2; t = clamp(t, 0, 1); const px = s[0] + dx * t, py = s[1] + dy * t; const ddx = x - px, ddy = y - py; const d = Math.hypot(ddx, ddy); if (d < rad) { if (d < 1e-6) { x += rad; continue; } x = px + ddx / d * rad; y = py + ddy / d * rad; } } return [x, y]; } function tryMove(nx, ny) { const w = S.walk; const [cx, cy] = collide(w.lv, nx, ny, 0.22); if (walkable(w.lv, cx, cy)) { w.x = cx; w.y = cy; return true; } // slide along axes const [ax, ay] = collide(w.lv, nx, w.y, 0.22); if (walkable(w.lv, ax, ay)) { w.x = ax; w.y = ay; return true; } const [bx2, by2] = collide(w.lv, w.x, ny, 0.22); if (walkable(w.lv, bx2, by2)) { w.x = bx2; w.y = by2; return true; } return false; } let goal = null; function walkStep(dt) { const w = S.walk; const k = S.keys; let f = 0, s = 0, turn = 0; if (k.KeyW || k.ArrowUp) f += 1; if (k.KeyS || k.ArrowDown) f -= 1; if (k.KeyA) s -= 1; if (k.KeyD) s += 1; if (k.ArrowLeft || k.KeyQ) turn += 1; if (k.ArrowRight || k.KeyE) turn -= 1; if (joy.active) { f += -joy.y; s += joy.x; } if (turn) { w.yaw += turn * dt * 1.6; S.dirty = true; } const sp = 1.5; if (f || s) { goal = null; const fx = Math.sin(w.yaw), fy = Math.cos(w.yaw); const rx = -Math.cos(w.yaw), ry = Math.sin(w.yaw); tryMove(w.x + (fx * f - rx * s) * sp * dt, w.y + (fy * f - ry * s) * sp * dt); S.dirty = true; } else if (goal) { const dx = goal[0] - w.x, dy = goal[1] - w.y; const d = Math.hypot(dx, dy); if (d < 0.05) goal = null; else { const st = Math.min(d, sp * 1.4 * dt); const ok = tryMove(w.x + dx / d * st, w.y + dy / d * st); if (!ok) goal = null; S.dirty = true; } } } function placeWalk(lv, x, y, yawDeg, snap) { S.walk.lv = lv; S.walk.x = x; S.walk.y = y; S.walk.yaw = yawDeg * D2R; S.walk.pitch = -6 * D2R; goal = null; if (S.mode !== 'walk') setMode('walk'); else { S.from = Object.assign({}, S.cam); S.t = snap ? 1 : 0; } ui.sync(); S.dirty = true; } function currentRoom() { const w = S.walk; let best = null; for (const r of rooms) { if (r.lv !== w.lv || !r.name) continue; const [x0, y0, x1, y1] = r.r; if (w.x >= x0 - 0.08 && w.x <= x1 + 0.08 && w.y >= y0 - 0.08 && w.y <= y1 + 0.08) { if (!best || (x1 - x0) * (y1 - y0) < (best.r[2] - best.r[0]) * (best.r[3] - best.r[1])) best = r; } } return best; } function activeStair() { const w = S.walk; return (U.links || []).filter(l => l.lv === w.lv && w.x >= l.r[0] && w.x <= l.r[2] && w.y >= l.r[1] && w.y <= l.r[3]); } function roomView(r) { if (r.view) return r.view; const [x0, y0, x1, y1] = r.r; const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2; // stand near the side with most space, look across if ((x1 - x0) > (y1 - y0)) return [x0 + Math.min(0.6, (x1 - x0) * 0.2), cy, 90]; return [cx, y1 - Math.min(0.6, (y1 - y0) * 0.2), 180]; } // ---------------- input ---------------- const ptrs = new Map(); let drag = null; let tapStart = null; const joy = { active: false, x: 0, y: 0, id: null }; cv.addEventListener('pointerdown', e => { cv.setPointerCapture(e.pointerId); ptrs.set(e.pointerId, { x: e.clientX, y: e.clientY }); tapStart = { x: e.clientX, y: e.clientY, t: performance.now(), n: ptrs.size }; S.autoSpin = false; }); cv.addEventListener('pointermove', e => { if (!ptrs.has(e.pointerId)) return; const p = ptrs.get(e.pointerId); const dx = e.clientX - p.x, dy = e.clientY - p.y; if (ptrs.size === 1) { if (S.mode === 'doll') { if (e.buttons === 2 || e.shiftKey) pan(dx, dy); else { S.orbit.yaw -= dx * 0.006; S.orbit.pitch = clamp(S.orbit.pitch + dy * 0.005, 0.08, 1.45); } } else if (S.mode === 'tour') { const k = (e.pointerType === 'touch' ? 0.0062 : 0.0048) * S.tour.fov / 75; S.tour.yaw += dx * k; S.tour.pitch = clamp(S.tour.pitch + dy * k, -1.45, 1.45); } else if (S.mode === 'walk') { S.walk.yaw -= dx * 0.0042 * (e.pointerType === 'touch' ? 1.3 : 1); S.walk.pitch = clamp(S.walk.pitch - dy * 0.0035, -1.2, 1.0); } else if (S.mode === 'plan') { const s = camPlan().span * 2 / cv.clientHeight; S.plan.cx -= dx * s; S.plan.cy -= dy * s; } } else if (ptrs.size === 2) { const ids = [...ptrs.keys()]; const a = ptrs.get(ids[0]), b = ptrs.get(ids[1]); const d0 = Math.hypot(a.x - b.x, a.y - b.y); p.x = e.clientX; p.y = e.clientY; const a2 = ptrs.get(ids[0]), b2 = ptrs.get(ids[1]); const d1 = Math.hypot(a2.x - b2.x, a2.y - b2.y); zoomBy(d0 / (d1 || 1)); if (S.mode === 'doll') pan(dx / 2, dy / 2); S.dirty = true; return; } p.x = e.clientX; p.y = e.clientY; S.dirty = true; }); const endPtr = e => { if (!ptrs.has(e.pointerId)) return; ptrs.delete(e.pointerId); if (tapStart && tapStart.n === 1 && ptrs.size === 0 && Math.hypot(e.clientX - tapStart.x, e.clientY - tapStart.y) < 6 && performance.now() - tapStart.t < 400) onTap(e.clientX, e.clientY); tapStart = null; }; cv.addEventListener('pointerup', endPtr); cv.addEventListener('pointercancel', endPtr); cv.addEventListener('contextmenu', e => e.preventDefault()); cv.addEventListener('wheel', e => { e.preventDefault(); if (S.mode === 'tour') { S.tour.fov = clamp(S.tour.fov * Math.exp(e.deltaY * 0.0011), 35, 100); } else if (S.mode === 'walk') { const st = -Math.sign(e.deltaY) * 0.4; tryMove(S.walk.x + Math.sin(S.walk.yaw) * st, S.walk.y + Math.cos(S.walk.yaw) * st); } else zoomBy(Math.exp(e.deltaY * 0.0012)); S.dirty = true; }, { passive: false }); function zoomBy(f) { if (S.mode === 'tour') S.tour.fov = clamp(S.tour.fov * f, 35, 100); else if (S.mode === 'doll') S.orbit.dist = clamp(S.orbit.dist * f, 4, 70); else if (S.mode === 'plan') S.plan.zoom = clamp(S.plan.zoom / f, 0.5, 5); } function pan(dx, dy) { const o = S.orbit; const r = [Math.cos(o.yaw), 0, -Math.sin(o.yaw)]; const fw = [-Math.sin(o.yaw), 0, -Math.cos(o.yaw)]; const s = o.dist * 0.0016; o.tgt = add(o.tgt, add(scl(r, -dx * s), scl(fw, dy * s))); } window.addEventListener('keydown', e => { if (e.target && /INPUT|TEXTAREA|SELECT/.test(e.target.tagName)) return; S.keys[e.code] = true; if (fp() && /Arrow|KeyW|KeyA|KeyS|KeyD/.test(e.code)) e.preventDefault(); }); window.addEventListener('keyup', e => { S.keys[e.code] = false; }); window.addEventListener('blur', () => { S.keys = {}; }); function ray(cx, cy) { const rect = cv.getBoundingClientRect(); const nx = ((cx - rect.left) / rect.width) * 2 - 1, ny = 1 - ((cy - rect.top) / rect.height) * 2; const cam = S.camNow; const asp = rect.width / rect.height; const f = norm(sub(cam.tgt, cam.eye)); const up0 = cam.ortho ? [0, 0, -1] : [0, 1, 0]; const r = norm(cross(f, up0)); const u = cross(r, f); if (cam.ortho) { const s = cam.span; const sx = asp >= 1 ? s * asp : s, sy = asp >= 1 ? s : s / asp; return { o: add(cam.eye, add(scl(r, nx * sx), scl(u, ny * sy))), d: f }; } const t = Math.tan(cam.fov * D2R / 2); return { o: cam.eye, d: norm(add(f, add(scl(r, nx * t * asp), scl(u, ny * t)))) }; } function hitLevelRoom(cx, cy, lv) { const R = ray(cx, cy); let best = null; for (const r of rooms) { if (r.lv !== lv || r.mat === 'void' || r.walk === false) continue; const zz = r.z + levelOffset(r.lv); if (Math.abs(R.d[1]) < 1e-5) continue; const t = (zz - R.o[1]) / R.d[1]; if (t <= 0) continue; const x = R.o[0] + R.d[0] * t, y = R.o[2] + R.d[2] * t; const [x0, y0, x1, y1] = r.r; if (x >= x0 && x <= x1 && y >= y0 && y <= y1 && (!best || t < best.t)) best = { r, x, y, t }; } return best; } function onTap(cx, cy) { if (S.mode === 'tour') return; if (S.mode === 'walk') { const h = hitLevelRoom(cx, cy, S.walk.lv); if (h) { goal = [h.x, h.y]; S.dirty = true; } return; } // dollhouse/plan: tap on a room -> walk into it const order = S.mode === 'plan' ? [S.sel] : U.levels.filter(l => levelVisible(l.id)).map(l => l.id).reverse(); for (const lv of order) { const h = hitLevelRoom(cx, cy, lv); if (h && h.r.name) { enterRoom(h.r); return; } if (S.mode === 'doll' && S.explodeT < 0.5) break; } } function enterRoom(r) { const v = roomView(r); placeWalk(r.lv, v[0], v[1], v[2]); } // joystick const jEl = document.getElementById('joy'), jKnob = document.getElementById('joyk'); if (jEl) { jEl.addEventListener('pointerdown', e => { e.stopPropagation(); joy.active = true; joy.id = e.pointerId; jEl.setPointerCapture(e.pointerId); joyMove(e); }); jEl.addEventListener('pointermove', e => { if (joy.active && e.pointerId === joy.id) joyMove(e); }); const jEnd = e => { if (e.pointerId !== joy.id) return; joy.active = false; joy.x = joy.y = 0; jKnob.style.transform = ''; }; jEl.addEventListener('pointerup', jEnd); jEl.addEventListener('pointercancel', jEnd); } function joyMove(e) { const r = jEl.getBoundingClientRect(); const cx = r.left + r.width / 2, cy = r.top + r.height / 2; let dx = (e.clientX - cx) / (r.width / 2), dy = (e.clientY - cy) / (r.height / 2); const d = Math.hypot(dx, dy); if (d > 1) { dx /= d; dy /= d; } joy.x = dx; joy.y = dy; jKnob.style.transform = `translate(${dx * 28}px,${dy * 28}px)`; S.dirty = true; } // ---------------- tur 360 (titik kamera = scene SKP VR360) ---------------- const tour = (function () { const host = document.getElementById('hots'); const chipsT = document.getElementById('tourChips'); const mini = document.getElementById('mini'); if (!TOUR.length) { const b = document.querySelector('[data-m="tour"]'); if (b) b.hidden = true; return { update() {}, keys() {}, go() {}, sync() {} }; } const segX = (a, b, s) => { const d1x = b[0] - a[0], d1y = b[1] - a[1], d2x = s[2] - s[0], d2y = s[3] - s[1]; const den = d1x * d2y - d1y * d2x; if (Math.abs(den) < 1e-9) return false; const ex = s[0] - a[0], ey = s[1] - a[1]; const t = (ex * d2y - ey * d2x) / den, u = (ex * d1y - ey * d1x) / den; return t > 0.02 && t < 0.98 && u > 0 && u < 1; }; const los = (lv, a, b) => !colliders[lv].some(s => segX(a, b, s)); // hotspots per titik: titik lain di lantai sama yang terlihat langsung, + tangga TOUR.forEach(p => { p.hot = []; TOUR.forEach(q => { if (q === p || q.lv !== p.lv) return; const d = Math.hypot(q.x - p.x, q.y - p.y); if (d > 9.5 || !los(p.lv, [p.x, p.y], [q.x, q.y])) return; p.hot.push({ to: q.i, x: q.x, y: q.y, z: q.fz + 0.03, label: q.name, d }); }); (U.links || []).forEach(l => { if (l.lv !== p.lv) return; const c = [(l.r[0] + l.r[2]) / 2, (l.r[1] + l.r[3]) / 2]; const d = Math.hypot(c[0] - p.x, c[1] - p.y); if (d > 7 || !los(p.lv, [p.x, p.y], c)) return; let best = null; TOUR.forEach(q => { if (q.lv !== l.to) return; const dd = Math.hypot(q.x - l.at[0], q.y - l.at[1]); if (!best || dd < best.dd) best = { q, dd }; }); if (!best || p.hot.some(h => h.to === best.q.i)) return; p.hot.push({ to: best.q.i, x: c[0], y: c[1], z: p.fz + 0.03, label: l.label, stair: true, d }); }); }); const els = []; let shownFor = -1; function buildHots() { host.innerHTML = ''; els.length = 0; const p = TOUR[S.tour.i]; p.hot.forEach(h => { const b = document.createElement('button'); b.type = 'button'; b.className = 'hot' + (h.stair ? ' stair' : ''); b.innerHTML = ''; b.querySelector('.txt').textContent = h.label; b.setAttribute('aria-label', 'Pindah ke ' + h.label); b.addEventListener('click', ev => { ev.stopPropagation(); go(h.to, 'hot'); }); host.appendChild(b); els.push({ h, b }); }); shownFor = S.tour.i; } function update(VP) { const on = S.mode === 'tour' && S.t >= 1; host.hidden = !on; if (!on) { drawMini(); return; } if (shownFor !== S.tour.i) buildHots(); const W2 = cv.clientWidth, H2 = cv.clientHeight; const cam = S.camNow; els.forEach(({ h, b }) => { const p = [h.x, h.z, h.y]; const x = VP[0] * p[0] + VP[4] * p[1] + VP[8] * p[2] + VP[12], y = VP[1] * p[0] + VP[5] * p[1] + VP[9] * p[2] + VP[13], ww = VP[3] * p[0] + VP[7] * p[1] + VP[11] * p[2] + VP[15]; if (ww <= 0.05) { b.hidden = true; return; } const sx = ((x / ww) * 0.5 + 0.5) * W2, sy = (1 - ((y / ww) * 0.5 + 0.5)) * H2; if (sx < -40 || sx > W2 + 40 || sy < -40 || sy > H2 + 40) { b.hidden = true; return; } const dist = Math.hypot(p[0] - cam.eye[0], p[1] - cam.eye[1], p[2] - cam.eye[2]); const k = clamp(2.6 / dist, 0.55, 1.15); b.hidden = false; b.style.transform = `translate(${sx}px,${sy}px) translate(-50%,-50%)`; b.style.setProperty('--k', k.toFixed(3)); b.style.zIndex = String(1000 - Math.round(dist * 10)); }); drawMini(); } function keys(dt) { const k = S.keys; let yw = 0, pt = 0; if (k.ArrowLeft || k.KeyA || k.KeyQ) yw -= 1; if (k.ArrowRight || k.KeyD || k.KeyE) yw += 1; if (k.ArrowUp || k.KeyW) pt += 1; if (k.ArrowDown || k.KeyS) pt -= 1; if (yw || pt) { S.tour.yaw += yw * dt * 1.4; S.tour.pitch = clamp(S.tour.pitch + pt * dt * 1.0, -1.45, 1.45); S.dirty = true; } } function go(i, how) { const prev = TOUR[S.tour.i], p = TOUR[i]; if (!p) return; if (how === 'hot' && prev && prev.lv === p.lv && prev !== p) S.tour.yaw = Math.atan2(p.x - prev.x, p.y - prev.y); else if (how !== 'keep') S.tour.yaw = p.yaw * D2R; S.tour.pitch = -2 * D2R; S.tour.fov = 75; S.tour.i = i; if (S.mode !== 'tour') setMode('tour'); else { S.from = Object.assign({}, S.cam); S.t = 0; } host.hidden = true; sync(); ui.sync(); S.dirty = true; } // daftar titik per lantai const chipEls = []; U.levels.forEach(l => { const ps = TOUR.filter(p => p.lv === l.id); if (!ps.length) return; const grp = document.createElement('div'); grp.className = 'chipgrp'; const h = document.createElement('span'); h.className = 'chiph'; h.textContent = l.short || l.name; grp.appendChild(h); ps.forEach(p => { const b = document.createElement('button'); b.type = 'button'; b.className = 'chip'; b.textContent = p.name; b.title = 'Scene SKP: ' + p.id; b.addEventListener('click', () => go(p.i, 'list')); grp.appendChild(b); chipEls.push({ p, b }); }); chipsT.appendChild(grp); }); // denah mini let miniLv = null; let cone = null, dots = []; const NS = 'http://www.w3.org/2000/svg'; const mk = (t, a) => { const e = document.createElementNS(NS, t); for (const k in a) e.setAttribute(k, a[k]); return e; }; function buildMini(lv) { mini.innerHTML = ''; dots = []; miniLv = lv; const rs = rooms.filter(r => r.lv === lv && !r.ghost && r.mat !== 'void'); const ps = TOUR.filter(p => p.lv === lv); let x0 = 0, y0 = 0, x1 = LW, y1 = LD; rs.forEach(r => { x0 = Math.min(x0, r.r[0]); y0 = Math.min(y0, r.r[1]); x1 = Math.max(x1, r.r[2]); y1 = Math.max(y1, r.r[3]); }); ps.forEach(p => { y1 = Math.max(y1, p.y + 0.4); }); const pad = 0.35; const svg = mk('svg', { viewBox: `${x0 - pad} ${y0 - pad} ${x1 - x0 + 2 * pad} ${y1 - y0 + 2 * pad}`, role: 'img', 'aria-label': 'Denah mini ' + LV[lv].name }); svg.appendChild(mk('rect', { x: 0, y: 0, width: LW, height: LD, class: 'lot' })); rs.forEach(r => svg.appendChild(mk('rect', { x: r.r[0], y: r.r[1], width: r.r[2] - r.r[0], height: r.r[3] - r.r[1], class: isIndoor(r) ? 'rm' : 'rm out' }))); cone = mk('path', { class: 'cone' }); svg.appendChild(cone); ps.forEach(p => { const c = mk('circle', { cx: p.x, cy: p.y, r: 0.32, class: 'dot' }); const t = mk('title', {}); t.textContent = p.name; c.appendChild(t); c.addEventListener('click', () => go(p.i, 'list')); svg.appendChild(c); dots.push({ p, c }); }); const cap = document.createElement('div'); cap.className = 'minicap'; cap.textContent = LV[lv].short || LV[lv].name; mini.appendChild(cap); mini.appendChild(svg); } function drawMini() { if (S.mode !== 'tour') return; const p = TOUR[S.tour.i]; if (miniLv !== p.lv) buildMini(p.lv); dots.forEach(d => d.c.classList.toggle('cur', d.p === p)); const asp = cv.clientWidth / Math.max(1, cv.clientHeight); const hf = Math.min(1.35, Math.atan(Math.tan(S.tour.fov * D2R / 2) * asp)); const R = 2.2; const a0 = S.tour.yaw - hf, a1 = S.tour.yaw + hf; cone.setAttribute('d', `M${p.x} ${p.y} L${p.x + Math.sin(a0) * R} ${p.y + Math.cos(a0) * R} A${R} ${R} 0 0 ${hf * 2 > Math.PI ? 1 : 0} ${p.x + Math.sin(a1) * R} ${p.y + Math.cos(a1) * R} Z`); } function sync() { chipEls.forEach(({ p, b }) => { if (p.i === S.tour.i) b.setAttribute('aria-current', 'true'); else b.removeAttribute('aria-current'); }); const cur = chipEls.find(c => c.p.i === S.tour.i); if (cur && S.mode === 'tour') cur.b.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } return { update, keys, go, sync }; })(); // ---------------- UI ---------------- const ui = (function () { const $ = id => document.getElementById(id); const modeBtns = document.querySelectorAll('[data-m]'); modeBtns.forEach(b => b.addEventListener('click', () => { const m = b.dataset.m; if (m === 'tour') { if (S.mode !== 'tour') tour.go(S.tour.i, 'enter'); return; } if (m === 'walk' && S.mode === 'tour') { const p = TOUR[S.tour.i]; placeWalk(p.lv, p.x, p.y, S.tour.yaw / D2R); return; } if (m === 'walk') { const st = U.walkStart || [(U.rooms.find(r => r.start) || U.rooms[0]).lv, LW / 2, LD - 1, 180]; if (S.mode !== 'walk') { const lvPick = S.mode === 'plan' ? S.sel : ((U.rooms.find(r => r.start) || {}).lv || st[0]); const r0 = U.rooms.find(r => r.lv === lvPick && r.start) || null; if (r0) enterRoom(Object.assign({}, r0, { z: LV[r0.lv].z })); else placeWalk(st[0], st[1], st[2], st[3]); } return; } if (m === 'plan' && S.mode === 'walk') S.sel = S.walk.lv; if (m === 'plan' && S.mode === 'tour') S.sel = TOUR[S.tour.i].lv; setMode(m); })); const lvBox = $('levels'); U.levels.forEach(l => { const b = document.createElement('button'); b.type = 'button'; b.className = 'pill'; b.dataset.lv = l.id; b.textContent = l.short || l.name; b.title = l.name; b.addEventListener('click', () => { if (S.mode === 'tour') { const p = TOUR.find(q => q.lv === l.id); if (p) tour.go(p.i, 'list'); return; } if (S.mode === 'walk') { const r0 = U.rooms.find(r => r.lv === l.id && r.start) || U.rooms.find(r => r.lv === l.id && r.name && r.walk !== false && isIndoor(r)); if (r0) enterRoom(r0); return; } S.sel = l.id; if (S.mode === 'doll') { const o = S.orbit; S.from = Object.assign({}, S.cam); S.t = 0; o.tgt = [o.tgt[0], LV[l.id].z + 0.8, o.tgt[2]]; if (l.pitch) o.pitch = Math.max(o.pitch, l.pitch * D2R); } sync(); S.dirty = true; }); lvBox.appendChild(b); }); $('tExplode').addEventListener('click', () => { S.explode = S.explode ? 0 : 1; const o = S.orbit; S.from = Object.assign({}, S.cam); S.t = 0; if (S.explode) { S.sel = U.levels[U.levels.length - 1].id; S.roof = false; S.cut = true; S._ov = { p: o.pitch, d: o.dist, ty: o.tgt[1] }; o.pitch = Math.min(o.pitch, (U.explodePitch || 40) * D2R); const gap = U.explodeGap || 2.6; const lo = U.levels[0], hi = U.levels[U.levels.length - 1]; const zlo = lo.z + exOf(lo.id) * gap, zhi = hi.z + hi.h + exOf(hi.id) * gap; o.dist = Math.max(o.dist * 1.25, (zhi - zlo) * 1.9); o.tgt = [o.tgt[0], (zlo + zhi) / 2, o.tgt[2]]; } else if (S._ov) { o.pitch = S._ov.p; o.dist = S._ov.d; o.tgt = [o.tgt[0], S._ov.ty, o.tgt[2]]; } sync(); S.dirty = true; }); $('tRoof').addEventListener('click', () => { S.roof = !S.roof; if (S.roof) { S.explode = 0; S.cut = false; S.sel = U.levels[U.levels.length - 1].id; } else S.cut = true; sync(); S.dirty = true; }); $('tLabel').addEventListener('click', () => { S.labels = !S.labels; sync(); S.dirty = true; }); $('tCut').addEventListener('click', () => { S.cut = !S.cut; if (S.cut) S.roof = false; sync(); S.dirty = true; }); $('tSpin').addEventListener('click', () => { S.autoSpin = !S.autoSpin; sync(); }); // room chips const chips = $('rooms'); function buildChips() { chips.innerHTML = ''; const lvs = U.levels.map(l => l.id); lvs.forEach(lv => { const rs = U.rooms.filter(r => r.lv === lv && r.name && r.chip !== false && r.walk !== false); if (!rs.length) return; const grp = document.createElement('div'); grp.className = 'chipgrp'; const h = document.createElement('span'); h.className = 'chiph'; h.textContent = LV[lv].short || LV[lv].name; grp.appendChild(h); rs.forEach(r => { const b = document.createElement('button'); b.type = 'button'; b.className = 'chip'; b.textContent = r.name; b.addEventListener('click', () => enterRoom(Object.assign({}, r, { z: LV[r.lv].z + (r.dz || 0) }))); grp.appendChild(b); }); chips.appendChild(grp); }); } buildChips(); function sync() { modeBtns.forEach(b => b.setAttribute('aria-pressed', b.dataset.m === S.mode ? 'true' : 'false')); const cur = S.mode === 'walk' ? S.walk.lv : S.mode === 'tour' ? TOUR[S.tour.i].lv : S.sel; lvBox.querySelectorAll('.pill').forEach(b => b.setAttribute('aria-pressed', b.dataset.lv === cur ? 'true' : 'false')); $('tExplode').setAttribute('aria-pressed', S.explode ? 'true' : 'false'); $('tRoof').setAttribute('aria-pressed', S.roof ? 'true' : 'false'); $('tLabel').setAttribute('aria-pressed', S.labels ? 'true' : 'false'); $('tCut').setAttribute('aria-pressed', S.cut && !S.roof ? 'true' : 'false'); $('tSpin').setAttribute('aria-pressed', S.autoSpin ? 'true' : 'false'); document.body.dataset.mode = S.mode; } let lastRoom = null, lastStair = null; function hud() { if (S.mode === 'tour') { $('stairs').hidden = true; lastStair = null; const p = TOUR[S.tour.i]; const key = 't' + p.i; if (key !== lastRoom) { $('roomName').textContent = p.name; $('roomLv').textContent = LV[p.lv].name; const rc = $('roomCode'); if (rc) rc.textContent = 'Scene SKP: ' + p.id; lastRoom = key; } lvBox.querySelectorAll('.pill').forEach(b => b.setAttribute('aria-pressed', b.dataset.lv === p.lv ? 'true' : 'false')); return; } if (S.mode !== 'walk') { $('stairs').hidden = true; lastStair = null; return; } const r = currentRoom(); const nm = r ? r.name : (LV[S.walk.lv].name); if (nm !== lastRoom) { $('roomName').textContent = nm; $('roomLv').textContent = LV[S.walk.lv].name; const rc = $('roomCode'); if (rc) rc.textContent = ''; lastRoom = nm; } const st = activeStair(); const key = st.map(l => l.label).join('|'); if (key !== lastStair) { lastStair = key; const box = $('stairs'); box.innerHTML = ''; st.forEach(l => { const b = document.createElement('button'); b.type = 'button'; b.className = 'stairBtn'; b.textContent = l.label; b.addEventListener('click', () => placeWalk(l.to, l.at[0], l.at[1], l.at[2])); box.appendChild(b); }); box.hidden = !st.length; } lvBox.querySelectorAll('.pill').forEach(b => b.setAttribute('aria-pressed', b.dataset.lv === S.walk.lv ? 'true' : 'false')); } return { sync, hud }; })(); ui.sync(); // hash routing: #walk, #denah, #dollhouse function fromHash() { const h = (location.hash || '').slice(1); if (h === 'tur360' || h === '360') { tour.go(0, 'enter'); return; } if (h === 'walk' || h === 'jalan') document.querySelector('[data-m="walk"]').click(); else if (h === 'denah') { S.sel = U.levels[0].id; setMode('plan'); } } window.addEventListener('hashchange', fromHash); if (cv.clientWidth < 640) { const sp = document.getElementById('spec'); if (sp) sp.open = false; } if (cv.clientWidth / Math.max(1, cv.clientHeight) < 0.9) S.orbit.dist *= 1.45; S.cam = targetCam(); fromHash(); if (window.matchMedia && !window.matchMedia('(prefers-reduced-motion: reduce)').matches && !location.hash) S.autoSpin = false; requestAnimationFrame(tick); window.__pv = { tour, TOUR, walkable, roomView, LV, walkStep, snap: () => { S.t = 1; S.explodeT = S.mode === 'doll' ? S.explode : 0; S.dirty = true; }, S, setMode, placeWalk, enterRoom, rooms, U, frame: () => { S.dirty = true; } }; })();

PadmavillaCilandak