Spaces:
Running
Running
| // CyberMax 3D stage: the shared Three.js (r170, ./vendor, MIT) look for CyberMax games, built from Soaklark 3D's | |
| // renderer patterns. Toon materials with a rim light, HDR scene target with MSAA, two-level bloom, ACES tone map, | |
| // colour grading, vignette, hit flash, chromatic kick on impacts, camera shake (trauma), a GPU-light particle pool, | |
| // gradient sky domes and adaptive resolution. Each game builds its own scene with it and keeps its rules in core.js; | |
| // the game's 2D canvas renderer stays as the no-WebGL2 fallback. Copied into each 3D game by scripts/games/sync_kit.py. | |
| // (c) 2026 CyberMax. All rights reserved. | |
| import * as THREE from 'three'; | |
| export { THREE }; | |
| export const col = (c) => new THREE.Color(c); | |
| export const clamp01 = (t) => Math.max(0, Math.min(1, t)); | |
| export const lerp = (a, b, t) => a + (b - a) * t; | |
| export const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2); | |
| export const damp = (a, b, k, dt) => b + (a - b) * Math.exp(-k * dt); | |
| /** True when this browser can run the 3D stage (WebGL2). `?2d=1` forces the 2D renderer. */ | |
| export function canRun3d() { | |
| try { | |
| if (/[?&]2d=1/.test(location.search)) return false; | |
| const c = document.createElement('canvas'); | |
| return !!c.getContext('webgl2'); | |
| } catch { return false; } | |
| } | |
| const NOISE = ` | |
| 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 vnoise(vec2 p){ vec2 i=floor(p); vec2 f=fract(p); f=f*f*(3.-2.*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); }`; | |
| const FSQ_V = 'varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0., 1.); }'; | |
| const BRIGHT_F = `uniform sampler2D t; uniform float uTh; uniform vec2 uPx; varying vec2 vUv; | |
| void main(){ vec3 c = vec3(0.); | |
| c += texture2D(t, vUv + uPx*vec2(-1.,-1.)).rgb; c += texture2D(t, vUv + uPx*vec2(1.,-1.)).rgb; | |
| c += texture2D(t, vUv + uPx*vec2(-1.,1.)).rgb; c += texture2D(t, vUv + uPx*vec2(1.,1.)).rgb; c *= 0.25; | |
| float l = max(c.r, max(c.g, c.b)); float k = smoothstep(uTh, uTh + 0.8, l); gl_FragColor = vec4(min(c * k, vec3(24.)), 1.); }`; | |
| const BLUR_F = `uniform sampler2D t; uniform vec2 uDir; varying vec2 vUv; | |
| void main(){ vec3 c = texture2D(t, vUv).rgb * 0.227027; | |
| c += texture2D(t, vUv + uDir*1.3846).rgb * 0.3162162; c += texture2D(t, vUv - uDir*1.3846).rgb * 0.3162162; | |
| c += texture2D(t, vUv + uDir*3.2308).rgb * 0.0702703; c += texture2D(t, vUv - uDir*3.2308).rgb * 0.0702703; | |
| gl_FragColor = vec4(c, 1.); }`; | |
| const COMP_F = `uniform sampler2D tScene, tB1, tB2; uniform float uBloom, uExp, uSat, uCon, uVig, uTime, uFlash, uLdr, uAb, uGrain; | |
| uniform vec3 uLift, uGain, uFlashCol; varying vec2 vUv; ${NOISE} | |
| vec3 aces(vec3 x){ return clamp((x*(2.51*x+0.03))/(x*(2.43*x+0.59)+0.14), 0., 1.); } | |
| void main(){ | |
| vec2 uv = vUv; vec2 d = uv - 0.5; | |
| vec3 c; | |
| if (uAb > 0.0005) { vec2 o = d * uAb; c = vec3(texture2D(tScene, uv + o).r, texture2D(tScene, uv).g, texture2D(tScene, uv - o).b); } | |
| else c = texture2D(tScene, uv).rgb; | |
| c += (texture2D(tB1, uv).rgb * 0.75 + texture2D(tB2, uv).rgb * 1.0) * uBloom; | |
| c *= uExp; | |
| c = mix(aces(c), clamp(c, 0., 1.), uLdr); | |
| c = pow(c, vec3(1./2.2)); | |
| float l = dot(c, vec3(0.299, 0.587, 0.114)); c = mix(vec3(l), c, uSat); | |
| c = (c - 0.5) * uCon + 0.5; c = c * uGain + uLift * (1. - c); | |
| c *= 1. - uVig * dot(d, d) * 1.7; | |
| c += (h21(uv * 913.7 + fract(uTime * 7.31)) - 0.5) * uGrain; | |
| c = mix(c, uFlashCol, uFlash); | |
| gl_FragColor = vec4(clamp(c, 0., 1.), 1.); | |
| }`; | |
| const SKY_V = 'varying vec3 vP; void main(){ vP = normalize(position); vec4 p = projectionMatrix * modelViewMatrix * vec4(position, 1.); gl_Position = p.xyww; }'; | |
| const SKY_F = `uniform vec3 uTop, uHor, uLow, uGlowCol; uniform vec3 uGlowDir; uniform float uStars, uTime, uGlow, uCurve; varying vec3 vP; ${NOISE} | |
| void main(){ vec3 p = normalize(vP); float y = p.y; | |
| vec3 c = y > 0. ? mix(uHor, uTop, pow(y, uCurve)) : mix(uHor, uLow, pow(-y, uCurve * 0.85)); | |
| float s = max(dot(p, normalize(uGlowDir)), 0.); c += uGlowCol * (pow(s, 8.) * 0.6 + pow(s, 90.) * 2.5) * uGlow; | |
| if (uStars > 0.) { vec2 g = vec2(atan(p.z, p.x) * 60., p.y * 80.); vec2 id = floor(g); float r = h21(id); | |
| float st = step(0.975, r) * smoothstep(0.45, 0., length(fract(g) - 0.5)); c += vec3(st) * (0.55 + 0.45 * sin(uTime * 2. + r * 40.)) * uStars * smoothstep(-0.1, 0.3, y) * 2.2; } | |
| gl_FragColor = vec4(c, 1.); }`; | |
| const PART_V = `attribute vec3 aCol; attribute float aSize; attribute float aA; varying vec3 vC; varying float vA; uniform float uScale; | |
| void main(){ vC = aCol; vA = aA; vec4 mv = modelViewMatrix * vec4(position, 1.); gl_Position = projectionMatrix * mv; gl_PointSize = aSize * uScale / max(-mv.z, 0.1); }`; | |
| const PART_F = `varying vec3 vC; varying float vA; void main(){ vec2 q = gl_PointCoord - 0.5; float d = length(q); if (d > 0.5) discard; | |
| float k = smoothstep(0.5, 0.0, d); gl_FragColor = vec4(vC * (0.6 + 1.6 * k * k), vA * k); }`; | |
| /** A pool of glowing particles (sparks, dust, confetti), updated on the CPU and drawn as one additive point cloud. */ | |
| class Particles { | |
| constructor(n = 1600) { | |
| this.n = n; this.i = 0; this.live = new Float32Array(n * 10); // x y z vx vy vz life max size drag | |
| this.cr = new Float32Array(n * 3); | |
| const g = new THREE.BufferGeometry(); | |
| this.pos = new THREE.Float32BufferAttribute(new Float32Array(n * 3), 3); this.pos.setUsage(THREE.DynamicDrawUsage); | |
| this.colA = new THREE.Float32BufferAttribute(new Float32Array(n * 3), 3); this.colA.setUsage(THREE.DynamicDrawUsage); | |
| this.size = new THREE.Float32BufferAttribute(new Float32Array(n), 1); this.size.setUsage(THREE.DynamicDrawUsage); | |
| this.al = new THREE.Float32BufferAttribute(new Float32Array(n), 1); this.al.setUsage(THREE.DynamicDrawUsage); | |
| g.setAttribute('position', this.pos); g.setAttribute('aCol', this.colA); g.setAttribute('aSize', this.size); g.setAttribute('aA', this.al); | |
| g.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 1e6); | |
| this.U = { uScale: { value: 300 } }; | |
| this.mesh = new THREE.Points(g, new THREE.ShaderMaterial({ vertexShader: PART_V, fragmentShader: PART_F, uniforms: this.U, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending })); | |
| this.mesh.frustumCulled = false; this.mesh.renderOrder = 10; | |
| this.grav = 0; | |
| } | |
| /** Burst `n` particles at (x,y,z). colors: CSS colours; speed in world units/s; life in s; up: extra upward kick. */ | |
| burst(x, y, z, { n = 30, colors = ['#FFFFFF'], speed = 30, life = 0.8, size = 3, drag = 2.2, up = 0, spread = 1, hdr = 2.2, dir = null } = {}) { | |
| const cs = colors.map((c) => col(c).multiplyScalar(hdr)); | |
| for (let k = 0; k < n; k++) { | |
| const i = this.i; this.i = (this.i + 1) % this.n; const o = i * 10; | |
| let vx = Math.random() * 2 - 1, vy = Math.random() * 2 - 1, vz = Math.random() * 2 - 1; const l = Math.hypot(vx, vy, vz) || 1; | |
| const s = speed * (0.35 + Math.random() * 0.65) * spread; | |
| vx = vx / l * s; vy = vy / l * s + up; vz = vz / l * s; | |
| if (dir) { vx += dir[0]; vy += dir[1]; vz += dir[2]; } | |
| const L = life * (0.6 + Math.random() * 0.6); | |
| this.live.set([x, y, z, vx, vy, vz, L, L, size * (0.6 + Math.random() * 0.8), drag], o); | |
| const c = cs[k % cs.length]; this.cr[i * 3] = c.r; this.cr[i * 3 + 1] = c.g; this.cr[i * 3 + 2] = c.b; | |
| } | |
| } | |
| update(dt) { | |
| const P = this.pos.array, C = this.colA.array, S = this.size.array, A = this.al.array, L = this.live; | |
| for (let i = 0; i < this.n; i++) { | |
| const o = i * 10; | |
| if (L[o + 6] <= 0) { A[i] = 0; S[i] = 0; continue; } | |
| L[o + 6] -= dt; const f = Math.exp(-L[o + 9] * dt); | |
| L[o + 3] *= f; L[o + 4] = L[o + 4] * f - this.grav * dt; L[o + 5] *= f; | |
| L[o] += L[o + 3] * dt; L[o + 1] += L[o + 4] * dt; L[o + 2] += L[o + 5] * dt; | |
| const t = Math.max(0, L[o + 6] / L[o + 7]); | |
| P[i * 3] = L[o]; P[i * 3 + 1] = L[o + 1]; P[i * 3 + 2] = L[o + 2]; | |
| C[i * 3] = this.cr[i * 3]; C[i * 3 + 1] = this.cr[i * 3 + 1]; C[i * 3 + 2] = this.cr[i * 3 + 2]; | |
| S[i] = L[o + 8] * (0.4 + 0.6 * t); A[i] = Math.min(1, t * 1.6); | |
| } | |
| this.pos.needsUpdate = this.colA.needsUpdate = this.size.needsUpdate = this.al.needsUpdate = true; | |
| } | |
| clear() { this.live.fill(0); } | |
| } | |
| // A tube bent along an arc in the vertex shader, so one geometry serves every blade/zone/progress length. | |
| export function arcGeo(seg = 72, around = 8, flat = false) { | |
| const pos = [], idx = []; | |
| for (let i = 0; i <= seg; i++) for (let j = 0; j <= around; j++) { | |
| const v = (j / around) * Math.PI * 2; | |
| pos.push(i / seg, flat ? (j / around) * 2 - 1 : Math.cos(v), flat ? 0 : Math.sin(v)); | |
| } | |
| for (let i = 0; i < seg; i++) for (let j = 0; j < around; j++) { | |
| const a = i * (around + 1) + j, b = a + around + 1; | |
| idx.push(a, b, a + 1, b, b + 1, a + 1); | |
| } | |
| const g = new THREE.BufferGeometry(); g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3)); g.setIndex(idx); | |
| g.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 20); | |
| return g; | |
| } | |
| export const TUBE = arcGeo(72, 8), RIBBON = arcGeo(72, 1, true); | |
| /** Unlit HDR material for TUBE/RIBBON (always transparent: arc materials share one program, and an opaque one would | |
| * force alpha 1 on every other one): setArc(mesh, startAngle, length, radius, thickness, y) bends it (XZ plane). */ | |
| export function arcMat(color, k = 2.5, { opacity = 1, additive = false, dash = 0 } = {}) { | |
| const U = { uA0: { value: 0 }, uLen: { value: 1 }, uR: { value: 1 }, uTube: { value: 0.05 }, uY: { value: 0 }, uDash: { value: dash }, uTime: { value: 0 } }; | |
| const m = new THREE.MeshBasicMaterial({ color: col(color).multiplyScalar(k), transparent: true, opacity, depthWrite: !(additive || opacity < 1), blending: additive ? THREE.AdditiveBlending : THREE.NormalBlending, side: THREE.DoubleSide }); | |
| m.onBeforeCompile = (s) => { | |
| Object.assign(s.uniforms, U); | |
| s.vertexShader = s.vertexShader.replace('#include <common>', '#include <common>\nuniform float uA0, uLen, uR, uTube, uY; varying float vS;') | |
| .replace('#include <begin_vertex>', 'float th = uA0 + position.x * uLen; float rr = uR + position.y * uTube; vec3 transformed = vec3(cos(th) * rr, uY + position.z * uTube, sin(th) * rr); vS = position.x * uLen;'); | |
| s.fragmentShader = s.fragmentShader.replace('#include <common>', '#include <common>\nuniform float uDash, uTime; varying float vS;') | |
| .replace('#include <opaque_fragment>', 'if (uDash > 0. && fract(vS * uDash - uTime * 2.) > 0.5) discard;\n#include <opaque_fragment>'); | |
| }; | |
| m.customProgramCacheKey = () => `arc${dash > 0 ? 'd' : ''}`; | |
| m.forceSinglePass = true; | |
| m.U = U; return m; | |
| } | |
| export function setArc(m, a0, len, r, tube, y = 0) { const U = m.material.U; U.uA0.value = a0; U.uLen.value = len; U.uR.value = r; U.uTube.value = tube; U.uY.value = y; } | |
| export class Stage { | |
| /** | |
| * canvas: the WebGL canvas. opts: { tier: 'high'|'low', record, bloom, threshold, exposure, sat, con, vig, lift, gain, grain, fov } | |
| */ | |
| constructor(canvas, opts = {}) { | |
| this.canvas = canvas; | |
| const gl = canvas.getContext('webgl2', { antialias: false, alpha: false, depth: true, stencil: false, powerPreference: 'high-performance', preserveDrawingBuffer: !!opts.record }); | |
| if (!gl) throw new Error('webgl2'); | |
| this.r = new THREE.WebGLRenderer({ canvas, context: gl, antialias: false }); | |
| this.r.outputColorSpace = THREE.LinearSRGBColorSpace; this.r.toneMapping = THREE.NoToneMapping; | |
| this.r.shadowMap.enabled = !!opts.shadows; this.r.shadowMap.type = THREE.PCFSoftShadowMap; | |
| this.r.setPixelRatio(1); | |
| const mobile = /Android|iPhone|iPad|Mobile/i.test(navigator.userAgent) && !opts.record; | |
| this.tier = opts.tier || (mobile ? 'low' : 'high'); | |
| this.hdr = this.r.extensions.has('EXT_color_buffer_float') || this.r.extensions.has('EXT_color_buffer_half_float'); | |
| this.q = { scale: 1, msaa: this.tier === 'high' ? 4 : 2, maxPr: this.tier === 'high' ? 2 : 1.75, bloom: true }; | |
| this.look = { bloom: 0.8, threshold: 0.9, exposure: 1, sat: 1.12, con: 1.05, vig: 0.55, lift: [0.01, 0.0, 0.03], gain: [1, 1, 1], grain: 0.025, ...opts }; | |
| this.scene = new THREE.Scene(); | |
| this.cam = new THREE.PerspectiveCamera(opts.fov || 50, 1, 0.1, 4000); | |
| this.camBase = new THREE.Vector3(); this.camLook = new THREE.Vector3(); | |
| this.gradient = (() => { const d = new Uint8Array([110, 110, 110, 255, 170, 170, 170, 255, 225, 225, 225, 255, 255, 255, 255, 255]); const t = new THREE.DataTexture(d, 4, 1, THREE.RGBAFormat); t.minFilter = t.magFilter = THREE.NearestFilter; t.needsUpdate = true; return t; })(); | |
| this.rimU = { value: col(opts.rim || '#8FA8FF').multiplyScalar(0.5) }; | |
| this.t = 0; this.trauma = 0; this.flashA = 0; this.flashCol = col('#FFFFFF'); this.kick = 0; | |
| this.parts = new Particles(opts.particles || 1600); this.scene.add(this.parts.mesh); | |
| this.post(); | |
| this.ft = 16; this.slow = 0; this.fast = 0; this.frames = 0; this.strikes = 0; this.tooSlow = false; | |
| this.auto = !opts.fixedQuality && !opts.record && !/[?&](fixedq|3d)=1/.test(location.search); | |
| } | |
| // ---------- materials | |
| /** Cel-shaded material with a rim light (Soaklark look). */ | |
| toon(opts = {}, rim = 1) { | |
| const m = new THREE.MeshToonMaterial({ gradientMap: this.gradient, ...opts }); | |
| const R = this.rimU; | |
| m.onBeforeCompile = (s) => { | |
| s.uniforms.uRim = R; | |
| s.fragmentShader = s.fragmentShader.replace('#include <common>', '#include <common>\nuniform vec3 uRim;') | |
| .replace('#include <opaque_fragment>', `float rimF = 1.0 - max(dot(normalize(vViewPosition), normal), 0.0);\noutgoingLight += uRim * ${rim.toFixed(2)} * smoothstep(0.6, 0.95, rimF);\n#include <opaque_fragment>`); | |
| }; | |
| return m; | |
| } | |
| /** Unlit HDR colour: anything brighter than ~1 blooms. */ | |
| glow(color, k = 2.5, o = {}) { return new THREE.MeshBasicMaterial({ color: col(color).multiplyScalar(k), toneMapped: false, ...o }); } | |
| /** Back-face outline shell for a mesh (inverted hull). */ | |
| outline(mesh, t = 0.06, color = '#0A0B14') { | |
| const m = new THREE.Mesh(mesh.geometry, new THREE.MeshBasicMaterial({ color, side: THREE.BackSide })); | |
| m.scale.setScalar(1 + t); mesh.add(m); return m; | |
| } | |
| /** Gradient sky dome (top / horizon / below), optional glow (sun or moon) and twinkling stars. */ | |
| sky({ top = '#0A0B2A', hor = '#3A1E6E', low = '#05060F', glow = '#FF8A5C', glowDir = [0.3, 0.25, -1], glowK = 1, stars = 0, curve = 0.6 } = {}) { | |
| if (this.skyMesh) { this.scene.remove(this.skyMesh); this.skyMesh.material.dispose(); } | |
| const U = { uTop: { value: col(top) }, uHor: { value: col(hor) }, uLow: { value: col(low) }, uGlowCol: { value: col(glow) }, uGlowDir: { value: new THREE.Vector3(...glowDir) }, uStars: { value: stars }, uTime: { value: 0 }, uGlow: { value: glowK }, uCurve: { value: curve } }; | |
| const m = new THREE.Mesh(new THREE.SphereGeometry(1000, 32, 16), new THREE.ShaderMaterial({ vertexShader: SKY_V, fragmentShader: SKY_F, uniforms: U, side: THREE.BackSide, depthWrite: false })); | |
| m.frustumCulled = false; m.renderOrder = -10; this.skyU = U; this.skyMesh = m; this.scene.add(m); | |
| return m; | |
| } | |
| // ---------- post-processing | |
| post() { | |
| const type = this.hdr ? THREE.HalfFloatType : THREE.UnsignedByteType; | |
| this.rtS = new THREE.WebGLRenderTarget(4, 4, { type, samples: this.q.msaa, depthBuffer: true }); | |
| this.rtB = [0, 1, 2, 3].map(() => new THREE.WebGLRenderTarget(4, 4, { type, depthBuffer: false })); | |
| const tri = new THREE.BufferGeometry(); | |
| tri.setAttribute('position', new THREE.Float32BufferAttribute([-1, -1, 0, 3, -1, 0, -1, 3, 0], 3)); | |
| tri.setAttribute('uv', new THREE.Float32BufferAttribute([0, 0, 2, 0, 0, 2], 2)); | |
| const mk = (f, u) => new THREE.ShaderMaterial({ vertexShader: FSQ_V, fragmentShader: f, uniforms: u, depthTest: false, depthWrite: false }); | |
| this.mBright = mk(BRIGHT_F, { t: { value: null }, uTh: { value: 1 }, uPx: { value: new THREE.Vector2() } }); | |
| this.mBlur = mk(BLUR_F, { t: { value: null }, uDir: { value: new THREE.Vector2() } }); | |
| this.mComp = mk(COMP_F, { tScene: { value: null }, tB1: { value: null }, tB2: { value: null }, uBloom: { value: 0.8 }, uExp: { value: 1 }, uSat: { value: 1.1 }, uCon: { value: 1.05 }, | |
| uVig: { value: 0.55 }, uTime: { value: 0 }, uFlash: { value: 0 }, uLdr: { value: this.hdr ? 0 : 1 }, uAb: { value: 0 }, uGrain: { value: 0.02 }, | |
| uLift: { value: new THREE.Vector3() }, uGain: { value: new THREE.Vector3(1, 1, 1) }, uFlashCol: { value: new THREE.Color() } }); | |
| this.fsq = new THREE.Mesh(tri, this.mComp); this.fsq.frustumCulled = false; | |
| this.fsScene = new THREE.Scene(); this.fsScene.add(this.fsq); this.fsCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); | |
| } | |
| resize(cssW, cssH, dpr = window.devicePixelRatio || 1) { | |
| this.cssW = cssW; this.cssH = cssH; this.dpr = dpr; | |
| const pr = Math.min(dpr, this.q.maxPr) * this.q.scale; | |
| const w = Math.max(2, Math.round(cssW * pr)), h = Math.max(2, Math.round(cssH * pr)); | |
| if (w === this.w && h === this.h) return; | |
| this.r.setSize(w, h, false); this.w = w; this.h = h; | |
| this.rtS.setSize(w, h); | |
| const bw = Math.max(2, w >> 2), bh = Math.max(2, h >> 2); | |
| this.rtB[0].setSize(bw, bh); this.rtB[1].setSize(bw, bh); this.rtB[2].setSize(Math.max(2, bw >> 1), Math.max(2, bh >> 1)); this.rtB[3].setSize(Math.max(2, bw >> 1), Math.max(2, bh >> 1)); | |
| this.cam.aspect = w / h; this.cam.updateProjectionMatrix(); | |
| this.parts.U.uScale.value = h * 0.9; | |
| } | |
| /** Keep the drawing buffer matched to the canvas's CSS box. */ | |
| fit() { const r = this.canvas.getBoundingClientRect(); if (r.width > 1 && r.height > 1) this.resize(r.width, r.height); } | |
| setQuality(scale) { this.q.scale = Math.max(0.5, Math.min(1, scale)); const w = this.cssW, h = this.cssH; this.w = 0; this.resize(w, h, this.dpr); } | |
| // ---------- juice | |
| shake(amount = 0.5) { this.trauma = Math.min(1, this.trauma + amount); } | |
| flash(color = '#FFFFFF', a = 0.5) { this.flashCol.set(color); this.flashA = Math.max(this.flashA, a); } | |
| punch(k = 0.006) { this.kick = Math.max(this.kick, k); } | |
| burst(v, o) { this.parts.burst(v.x, v.y, v.z, o); } | |
| /** | |
| * Draw one frame. dt in seconds (fixed when recording). Shake moves the camera a little around where the game put it | |
| * (call setCam(pos, look) each frame before render, or set stage.cam yourself and leave camBase empty). | |
| */ | |
| render(dt) { | |
| dt = Math.min(0.1, Math.max(0, dt)); | |
| this.t += dt; | |
| this.parts.update(dt); | |
| if (this.skyU) this.skyU.uTime.value = this.t; | |
| // camera shake (trauma^2 noise, decays) | |
| const tr = this.trauma * this.trauma; this.trauma = Math.max(0, this.trauma - dt * 1.6); | |
| const cam = this.cam; | |
| if (this.camSet) { cam.position.copy(this.camBase); cam.lookAt(this.camLook); } | |
| if (tr > 0.0001) { | |
| const n = (k) => Math.sin(this.t * (37 + k * 11) + k * 7) * 0.6 + Math.sin(this.t * (71 + k * 5) + k) * 0.4; | |
| const s = this.shakeScale || 1; | |
| cam.position.x += n(1) * tr * s; cam.position.y += n(2) * tr * s; cam.rotation.z += n(3) * tr * 0.04; | |
| } | |
| // adaptive quality from real frame times: lower the resolution, then bloom; a device that still can't keep up gets | |
| // tooSlow, and the game swaps back to its 2D renderer (same rules, same run) so it always stays playable. | |
| const nowR = performance.now(), real = this.lastR ? nowR - this.lastR : 16; this.lastR = nowR; | |
| if (this.auto && real < 1000 && ++this.frames > 8) { | |
| this.ft = this.ft * 0.85 + real * 0.15; | |
| if (this.ft > 34) { | |
| this.fast = 0; | |
| if (++this.slow > 12) { | |
| this.slow = 0; | |
| if (this.q.scale > 0.55) this.setQuality(this.q.scale - 0.2); | |
| else if (this.q.bloom) this.q.bloom = false; | |
| else if (++this.strikes > 2) this.tooSlow = true; | |
| } | |
| } else if (this.ft < 18 && this.q.scale < 1) { this.slow = 0; if (++this.fast > 300) { this.fast = 0; this.setQuality(this.q.scale + 0.1); } } | |
| else this.slow = Math.max(0, this.slow - 1); | |
| } | |
| const r = this.r, L = this.look, U = this.mComp.uniforms; | |
| r.setRenderTarget(this.rtS); r.render(this.scene, cam); | |
| let b1 = this.rtB[0].texture, b2 = this.rtB[2].texture; | |
| if (this.q.bloom && L.bloom > 0) { | |
| const pass = (mat, out) => { this.fsq.material = mat; r.setRenderTarget(out); r.render(this.fsScene, this.fsCam); }; | |
| this.mBright.uniforms.t.value = this.rtS.texture; this.mBright.uniforms.uTh.value = L.threshold; this.mBright.uniforms.uPx.value.set(1 / this.w, 1 / this.h); | |
| pass(this.mBright, this.rtB[0]); | |
| const blur = (src, tmp, dst, w, h) => { | |
| this.mBlur.uniforms.t.value = src.texture; this.mBlur.uniforms.uDir.value.set(1 / w, 0); pass(this.mBlur, tmp); | |
| this.mBlur.uniforms.t.value = tmp.texture; this.mBlur.uniforms.uDir.value.set(0, 1 / h); pass(this.mBlur, dst); | |
| }; | |
| blur(this.rtB[0], this.rtB[1], this.rtB[0], this.rtB[0].width, this.rtB[0].height); | |
| this.mBlur.uniforms.t.value = this.rtB[0].texture; this.mBlur.uniforms.uDir.value.set(0, 0); pass(this.mBlur, this.rtB[2]); | |
| blur(this.rtB[2], this.rtB[3], this.rtB[2], this.rtB[2].width, this.rtB[2].height); | |
| blur(this.rtB[2], this.rtB[3], this.rtB[2], this.rtB[2].width, this.rtB[2].height); | |
| b1 = this.rtB[0].texture; b2 = this.rtB[2].texture; U.uBloom.value = L.bloom; | |
| } else U.uBloom.value = 0; | |
| U.tScene.value = this.rtS.texture; U.tB1.value = b1; U.tB2.value = b2; | |
| U.uExp.value = L.exposure; U.uSat.value = L.sat; U.uCon.value = L.con; U.uVig.value = L.vig; U.uGrain.value = L.grain; | |
| U.uLift.value.set(...L.lift); U.uGain.value.set(...L.gain); U.uTime.value = this.t; | |
| U.uFlash.value = this.flashA; U.uFlashCol.value.copy(this.flashCol); this.flashA *= Math.exp(-dt * 7); if (this.flashA < 0.004) this.flashA = 0; | |
| U.uAb.value = this.kick + tr * 0.012; this.kick *= Math.exp(-dt * 8); | |
| this.fsq.material = this.mComp; r.setRenderTarget(null); r.render(this.fsScene, this.fsCam); | |
| } | |
| setCam(pos, look) { this.camSet = true; this.camBase.copy(pos); this.camLook.copy(look); } | |
| dispose() { this.r.dispose(); } | |
| } | |
| /** | |
| * Mount a 3D layer behind a game's 2D canvas: a WebGL canvas the same size, in the same box. The 2D canvas stays on | |
| * top (HUD text, taps, focus, tests) and the game draws it transparent while 3D is on. | |
| */ | |
| export function mountBehind(cv2d, cls = 'cmx3d') { | |
| const host = cv2d.parentElement; | |
| const wrap = document.createElement('div'); wrap.className = `${cls}-wrap`; | |
| host.insertBefore(wrap, cv2d); wrap.appendChild(cv2d); | |
| const c = document.createElement('canvas'); c.className = cls; c.setAttribute('aria-hidden', 'true'); | |
| wrap.insertBefore(c, cv2d); | |
| return c; | |
| } | |