import * as THREE from 'three'; import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; export const xr = 'vr'; export default function sketch(ctx) { const { scene, camera, renderer, gui, size, pointer, canvas } = ctx; const sfx = ctx.sfx; const XR = ctx.xr; const inVR = () => !!(XR && XR.presenting); const params = { irisColor: '#3d7f8f', innerColor: '#b9822f', irisSize: 0.5, limbal: 0.75, fiber: 1.0, dilation: 0.32, catEye: 0, follow: 1, bloodshot: 0.25, veinColor: '#8e1418', sclera: '#efe5da', zoom: 1, exposure: 1.0, sound: 0.6, seed: 3.7, renderScale: 1.25, bloom: true, spawnOnClick: true, maxEyes: 72, push: 1, bounce: 0.55, gather: 0.25, randomize: () => randomize(), clearEyes: () => clearEyes(), }; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = params.exposure; scene.background = new THREE.Color('#030304'); scene.fog = new THREE.FogExp2('#030304', 0.16); const pmrem = new THREE.PMREMGenerator(renderer); scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture; const L1 = new THREE.Vector3(-0.6, 0.8, 0.9).normalize(); const L2 = new THREE.Vector3(0.8, -0.25, 0.5).normalize(); const key = new THREE.DirectionalLight('#fff4e6', 2.6); key.position.copy(L1).multiplyScalar(10); const fill = new THREE.DirectionalLight('#9fb4ff', 0.6); fill.position.copy(L2).multiplyScalar(10); const hemi = new THREE.HemisphereLight('#c8cfe0', '#1a1210', 0.5); scene.add(key, fill, hemi); // ---------- world: stage in metres, viewer stands at origin ---------- const STAGE_POS = new THREE.Vector3(0, 1.45, -1.15); const S0 = 0.16; // main eye radius in metres at zoom 1 const REF = 4.6 / 0.933; // reference layout distance const stage = new THREE.Group(); stage.position.copy(STAGE_POS); scene.add(stage); if (XR && XR.rig) XR.rig.position.set(0, 0, 0); camera.position.set(0, STAGE_POS.y, STAGE_POS.z + S0 * REF); // floor const floorTex = ctx.textures.get('tex_kMpgWYayHQxk', { repeat: 10 }); const floor = new THREE.Mesh( new THREE.CircleGeometry(14, 72), new THREE.MeshStandardMaterial({ map: floorTex, color: '#3a3330', roughness: 0.55, metalness: 0.05, envMapIntensity: 0.25 }) ); floor.rotation.x = -Math.PI / 2; scene.add(floor); const pool = new THREE.PointLight('#ffd2a8', 2.2, 0, 2); pool.position.set(0, 1.0, -1.0); scene.add(pool); // ---------- backdrop ---------- const bg = new THREE.Mesh( new THREE.PlaneGeometry(90, 90), new THREE.ShaderMaterial({ depthWrite: false, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); }`, fragmentShader: `varying vec2 vUv; float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898,78.233)))*43758.5453); } void main(){ vec2 p = vUv-0.5; float d = length(p); vec3 c = mix(vec3(0.05,0.038,0.036), vec3(0.004,0.004,0.006), smoothstep(0.0,0.12,d)); c += (h(gl_FragCoord.xy)-0.5)/255.0; gl_FragColor = vec4(c,1.0); }`, }) ); bg.position.z = -7; stage.add(bg); // invisible plane for controller aiming const hitPlane = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), new THREE.MeshBasicMaterial({ visible: false })); stage.add(hitPlane); // VR hint panel const hintCanvas = document.createElement('canvas'); hintCanvas.width = 1024; hintCanvas.height = 160; { const g = hintCanvas.getContext('2d'); g.fillStyle = 'rgba(0,0,0,0)'; g.clearRect(0, 0, 1024, 160); g.fillStyle = 'rgba(240,228,214,0.85)'; g.font = '500 40px sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText('Point and pull the trigger to open an eye', 512, 52); g.fillStyle = 'rgba(240,228,214,0.5)'; g.font = '400 32px sans-serif'; g.fillText('sweep your controller beam fast across them to knock them away', 512, 110); } const hintTex = new THREE.CanvasTexture(hintCanvas); hintTex.colorSpace = THREE.SRGBColorSpace; const hint = new THREE.Mesh(new THREE.PlaneGeometry(0.8, 0.125), new THREE.MeshBasicMaterial({ map: hintTex, transparent: true, depthWrite: false, fog: false, toneMapped: false })); hint.position.set(0, 0.92, -0.85); hint.rotation.x = -0.35; hint.visible = false; scene.add(hint); // ---------- shared noise ---------- const noiseGLSL = ` float hash(vec3 p){ p = fract(p*0.3183099 + 0.1); p *= 17.0; return fract(p.x*p.y*p.z*(p.x+p.y+p.z)); } float noise(vec3 x){ vec3 i = floor(x); vec3 f = fract(x); f = f*f*(3.0-2.0*f); return mix(mix(mix(hash(i), hash(i+vec3(1.0,0.0,0.0)), f.x), mix(hash(i+vec3(0.0,1.0,0.0)), hash(i+vec3(1.0,1.0,0.0)), f.x), f.y), mix(mix(hash(i+vec3(0.0,0.0,1.0)), hash(i+vec3(1.0,0.0,1.0)), f.x), mix(hash(i+vec3(0.0,1.0,1.0)), hash(i+vec3(1.0,1.0,1.0)), f.x), f.y), f.z); } float fbm(vec3 p){ float v = 0.0, a = 0.5; for (int i = 0; i < 4; i++){ v += a*noise(p); p = p*2.03 + 11.7; a *= 0.5; } return v/0.9375; } `; // ---------- sclera bake ---------- const bakeMat = new THREE.ShaderMaterial({ toneMapped: false, depthTest: false, depthWrite: false, uniforms: { uIrisR: { value: 0.5 }, uBlood: { value: 0.25 }, uSeed: { value: 0 }, uSclera: { value: new THREE.Color() }, uVein: { value: new THREE.Color() }, }, vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`, fragmentShader: ` uniform float uIrisR, uBlood, uSeed; uniform vec3 uSclera, uVein; varying vec2 vUv; ${noiseGLSL} float veinLine(vec3 p, float s, float w, float seed){ vec3 q = p*s + seed; vec3 wv = vec3(noise(q*0.7), noise(q*0.7+7.3), noise(q*0.7+13.1)) - 0.5; float n = fbm(q + wv*2.2); float d = abs(n - 0.5); float fw = fwidth(n); float th = w*(0.45 + noise(q*1.3 + 3.0)); return 1.0 - smoothstep(th*0.3, th + fw, d); } void main(){ float th = (1.0 - vUv.y)*3.14159265; float ph = vUv.x*6.28318531; vec3 Pn = vec3(-cos(ph)*sin(th), cos(th), sin(ph)*sin(th)); bool front = Pn.z > 0.0; float lq = length(Pn.xy)/uIrisR; float ang = acos(clamp(Pn.z, -1.0, 1.0)); float irisAng = asin(clamp(uIrisR, 0.0, 0.99)); vec3 sc = uSclera; sc = mix(sc, sc*vec3(0.92,0.70,0.68), smoothstep(0.4, 2.2, ang)*0.6); if (front) sc = mix(sc, sc*vec3(0.76,0.79,0.86), (1.0 - smoothstep(1.0, 1.28, lq))*0.6); sc *= 0.94 + 0.08*fbm(Pn*4.0 + uSeed); sc = mix(sc, sc*vec3(1.0,0.8,0.75), fbm(Pn*2.0 + uSeed*1.7)*0.35*(0.3 + uBlood)); float reach = mix(1.5, 0.15, uBlood); float vm = smoothstep(irisAng + 0.05, irisAng + 0.05 + reach, ang); float vm2 = smoothstep(irisAng + 0.02, irisAng + 0.02 + reach*0.7, ang); float v1 = veinLine(Pn, 1.6, 0.02, uSeed); float v2 = veinLine(Pn, 3.6, 0.014, uSeed + 11.0); float v3 = veinLine(Pn, 8.0, 0.011, uSeed + 23.0); float vein = v1*vm*0.85 + v2*vm*0.6*(0.4 + uBlood) + v3*vm2*0.55*uBlood; vein *= 0.3 + 0.9*uBlood; sc = mix(sc, uVein, clamp(vein, 0.0, 0.95)); sc = mix(sc, mix(sc, uVein*1.5 + 0.12, 0.4), uBlood*uBlood*vm2*0.7); gl_FragColor = vec4(pow(clamp(sc, 0.0, 1.0), vec3(1.0/2.2)), 1.0); }`, }); const bakeScene = new THREE.Scene(); const bakeCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const bakeQuad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), bakeMat); bakeQuad.frustumCulled = false; bakeScene.add(bakeQuad); function makeRT(w) { const rt = new THREE.WebGLRenderTarget(w, w / 2, { type: THREE.UnsignedByteType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, generateMipmaps: false, depthBuffer: false, }); rt.texture.wrapS = THREE.RepeatWrapping; return rt; } function bake(e) { const s = e.s, u = bakeMat.uniforms; u.uIrisR.value = s.irisSize; u.uBlood.value = s.bloodshot; u.uSeed.value = s.seed; u.uSclera.value.set(s.sclera); u.uVein.value.set(s.veinColor); const prev = renderer.getRenderTarget(); const xrWas = renderer.xr.enabled; renderer.xr.enabled = false; // render the bake with the flat camera, even in VR renderer.setRenderTarget(e.rt); renderer.render(bakeScene, bakeCam); renderer.setRenderTarget(prev); renderer.xr.enabled = xrWas; } // ---------- eye shader ---------- const eyeVert = ` uniform float uIrisR; varying vec3 vObj; varying vec3 vN; varying vec3 vW; varying vec2 vUv; float irisZ(float r){ float zL = sqrt(1.0 - uIrisR*uIrisR); float t = r/uIrisR; float zi = zL - 0.035 + 0.045*(1.0 - t*t); float zs = sqrt(max(1.0 - r*r, 0.0)); return mix(zi, zs, smoothstep(0.88, 1.0, t)); } void main(){ vec3 p = position; vec3 n = normal; float r = length(p.xy); if (p.z > 0.0 && r < uIrisR){ p.z = irisZ(r); float e = 0.002; float d = (irisZ(r+e) - irisZ(max(r-e,0.0)))/(2.0*e); n = normalize(vec3(-d*p.xy/max(r,1e-4), 1.0)); } vUv = uv; vObj = p; vec4 w = modelMatrix*vec4(p,1.0); vW = w.xyz; vN = normalize(mat3(modelMatrix)*n); gl_Position = projectionMatrix*viewMatrix*w; }`; const eyeFrag = ` uniform sampler2D uScleraMap; uniform float uIrisR, uPupil, uCat, uLimbal, uFiber, uSeed; uniform vec3 uIrisColor, uIrisInner, uL1, uL2; varying vec3 vObj; varying vec3 vN; varying vec3 vW; varying vec2 vUv; ${noiseGLSL} float sdVesica(vec2 p, float r, float d){ p = abs(p); float b = sqrt(max(r*r - d*d, 0.0)); return ((p.y-b)*d > p.x*b) ? length(p - vec2(0.0,b)) : length(p - vec2(-d,0.0)) - r; } void main(){ vec2 q = vObj.xy/uIrisR; float lq = length(q); bool front = vObj.z > 0.0; float irisMask = front ? 1.0 - smoothstep(0.985, 1.015, lq) : 0.0; vec3 sc = pow(texture2D(uScleraMap, vUv).rgb, vec3(2.2)); float pr = uPupil; float hh = min(pr*mix(1.0, 1.45, uCat), 0.93); float ww = max(pr*mix(1.0, 0.11, uCat), 0.012); float rv = (ww + hh*hh/ww)*0.5, dv = (hh*hh/ww - ww)*0.5; float sdP = sdVesica(q, rv, dv); float aa = fwidth(sdP) + 1e-4; float rimD = max(1.0 - lq, 0.0); float t = clamp(sdP/max(sdP + rimD, 1e-4), 0.0, 1.0); vec3 ic = vec3(0.0); if (irisMask > 0.0) { float a = atan(q.y, q.x); float a2 = a + 0.06*sin(t*9.0 + uSeed); vec2 cs = vec2(cos(a2), sin(a2)); vec2 c0 = vec2(cos(a), sin(a)); float fib = noise(vec3(cs*28.0, t*2.5 + uSeed))*0.6 + noise(vec3(cs*75.0, t*6.0 + uSeed*2.0))*0.4; float stroma = fbm(vec3(c0*6.0, t*4.0 + uSeed)); float r0 = 0.32 + 0.1*(noise(vec3(c0*5.0, uSeed)) - 0.5); float colla = exp(-pow((t - r0)/0.035, 2.0)); float cr = smoothstep(0.6, 0.78, noise(vec3(c0*9.0, t*6.0 + uSeed*3.0))) * smoothstep(0.18, 0.35, t) * (1.0 - smoothstep(0.5, 0.85, t)); ic = mix(uIrisInner, uIrisColor, smoothstep(r0 - 0.05, r0 + 0.22, t + (stroma - 0.5)*0.3)); ic *= mix(1.0, 0.5 + 1.0*fib, uFiber); ic = mix(ic, ic*1.45 + 0.03, colla*0.5); ic *= 1.0 - cr*0.6; ic += uIrisInner*0.45*smoothstep(0.78, 0.92, noise(vec3(c0*40.0, t*10.0 + uSeed)))*smoothstep(0.4, 0.7, t)*uFiber; ic *= 1.0 - 0.18*smoothstep(0.6, 1.0, t)*pow(0.5 + 0.5*sin(t*55.0 + noise(vec3(c0*4.0, uSeed))*6.0), 4.0); ic = mix(ic, uIrisColor*0.06, smoothstep(0.78, 1.0, t)*uLimbal); ic = mix(ic, vec3(0.07,0.035,0.02), (1.0 - smoothstep(0.0, 0.06, t))*0.85); float pm = 1.0 - smoothstep(-aa, aa, sdP); ic = mix(ic, vec3(0.0025, 0.002, 0.002), pm); } vec3 base = mix(sc, ic, irisMask); vec3 N = normalize(vN); vec3 V = normalize(cameraPosition - vW); vec3 keyC = vec3(1.0, 0.95, 0.88)*2.1; vec3 fillC = vec3(0.55, 0.65, 0.9)*0.45; float n1 = dot(N, uL1); float n2 = max(dot(N, uL2), 0.0); vec3 hemi = mix(vec3(0.05,0.035,0.035), vec3(0.17,0.18,0.21), N.y*0.5 + 0.5); float w1 = max((n1 + 0.35)/1.35, 0.0); vec3 sss = mix(vec3(1.0,0.32,0.22), vec3(1.0), smoothstep(0.0, 0.6, n1)); vec3 diffS = keyC*w1*sss + fillC*n2 + hemi; vec3 diffI = (keyC*max(n1, 0.0)*0.85 + fillC*n2 + hemi*1.3) * mix(1.0, 0.45, smoothstep(0.8, 1.0, lq)); vec3 col = base*mix(diffS, diffI, irisMask); float sMask = 1.0 - irisMask; if (sMask > 0.0) { float NV = max(dot(N, V), 0.0); float fres = 0.04 + 0.96*pow(1.0 - NV, 5.0); float nh = max(dot(N, normalize(uL1 + V)), 0.0); float spec = (pow(nh, 380.0)*7.0 + pow(nh, 45.0)*0.22)*(0.35 + fres); spec += pow(max(dot(N, normalize(uL2 + V)), 0.0), 200.0)*0.6; col += (keyC*spec + vec3(0.6,0.7,0.95)*pow(1.0 - NV, 4.0)*0.3)*sMask; } gl_FragColor = vec4(col, 1.0); }`; const sphereHi = new THREE.SphereGeometry(1, 160, 120); const sphereLo = new THREE.SphereGeometry(1, 80, 60); const sphereMid = new THREE.SphereGeometry(1, 56, 42); const corneaMat = new THREE.MeshPhysicalMaterial({ color: '#000000', metalness: 0, roughness: 0.035, envMapIntensity: 1.7, specularIntensity: 1, clearcoat: 1, clearcoatRoughness: 0.02, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, fog: false, }); function corneaGeometry(R) { const Rc = R * 1.25; const zL = Math.sqrt(1 - R * R); const c = zL - Math.sqrt(Rc * Rc - R * R); const th = Math.asin(R / Rc) * 0.995; const g = new THREE.SphereGeometry(Rc, 128, 40, 0, Math.PI * 2, 0, th); g.rotateX(Math.PI / 2); g.translate(0, 0, c); return g; } const bakeKey = (s) => s.bloodshot.toFixed(4) + '|' + s.seed.toFixed(4) + '|' + s.irisSize.toFixed(4) + '|' + s.sclera + '|' + s.veinColor; const eyes = []; function makeEye(s, radius, x, y, hi) { const rt = makeRT(hi ? 2048 : radius > 0.6 && eyes.length < 40 ? 1024 : 512); const u = { uScleraMap: { value: rt.texture }, uIrisR: { value: s.irisSize }, uPupil: { value: s.dilation }, uCat: { value: s.catEye }, uIrisColor: { value: new THREE.Color(s.irisColor) }, uIrisInner: { value: new THREE.Color(s.innerColor) }, uLimbal: { value: s.limbal }, uFiber: { value: s.fiber }, uSeed: { value: s.seed }, uL1: { value: L1 }, uL2: { value: L2 }, }; const mat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: eyeVert, fragmentShader: eyeFrag }); const group = new THREE.Group(); const ball = new THREE.Mesh(hi ? sphereHi : radius > 0.45 ? sphereLo : sphereMid, mat); const cornea = new THREE.Mesh(corneaGeometry(s.irisSize), corneaMat); cornea.renderOrder = 1; group.add(ball, cornea); group.position.set(x, y, 0); group.scale.setScalar(0.001); stage.add(group); const eye = { s, u, mat, rt, group, cornea, radius, irisSize: s.irisSize, age: 0, flash: 0, pupilCur: s.dilation * 1.7, rate: 9 + Math.random() * 8, phase: Math.random() * 100, baked: '', vx: 0, vy: 0, mass: radius * radius * radius, }; bake(eye); eye.baked = bakeKey(s); eyes.push(eye); return eye; } function disposeEye(e) { stage.remove(e.group); e.mat.dispose(); e.rt.dispose(); e.cornea.geometry.dispose(); } const main = makeEye(params, 1, 0, 0, true); main.age = 10; main.pupilCur = params.dilation; let corneaR = params.irisSize; function buildCornea() { if (corneaR === params.irisSize) return; corneaR = params.irisSize; main.cornea.geometry.dispose(); main.cornea.geometry = corneaGeometry(params.irisSize); main.u.uIrisR.value = params.irisSize; } // ---------- post (screen only) ---------- const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); const bloom = new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 0.28, 0.45, 0.9); composer.addPass(bloom); composer.addPass(new OutputPass()); const applyScale = () => composer.setPixelRatio(Math.min(window.devicePixelRatio || 1, params.renderScale)); applyScale(); // ---------- controls ---------- const ctrls = []; const fI = gui.addFolder('Iris'); ctrls.push(fI.addColor(params, 'irisColor').name('Outer colour').onChange((v) => main.u.uIrisColor.value.set(v))); ctrls.push(fI.addColor(params, 'innerColor').name('Inner colour').onChange((v) => main.u.uIrisInner.value.set(v))); ctrls.push(fI.add(params, 'irisSize', 0.4, 0.6, 0.005).name('Iris size').onChange(buildCornea)); ctrls.push(fI.add(params, 'limbal', 0, 1).name('Limbal ring')); ctrls.push(fI.add(params, 'fiber', 0, 1.5).name('Fibre detail')); ctrls.push(fI.add(params, 'randomize').name('Randomize iris')); const fP = gui.addFolder('Pupil'); ctrls.push(fP.add(params, 'dilation', 0.12, 0.8).name('Dilation')); ctrls.push(fP.add(params, 'catEye', 0, 1).name('Cat-eye slit')); ctrls.push(fP.add(params, 'follow', 0, 1.6).name('Follow mouse')); const fS = gui.addFolder('Sclera'); ctrls.push(fS.add(params, 'bloodshot', 0, 1).name('Bloodshot')); ctrls.push(fS.addColor(params, 'veinColor').name('Vein colour')); ctrls.push(fS.addColor(params, 'sclera').name('Sclera colour')); const fE = gui.addFolder('Eyes'); ctrls.push(fE.add(params, 'spawnOnClick').name('Click spawns eye')); ctrls.push(fE.add(params, 'maxEyes', 2, 120, 1).name('Max eyes')); ctrls.push(fE.add(params, 'clearEyes').name('Clear extra eyes')); const fPh = gui.addFolder('Physics'); ctrls.push(fPh.add(params, 'push', 0, 3).name('Pointer force')); ctrls.push(fPh.add(params, 'bounce', 0, 1).name('Bounciness')); ctrls.push(fPh.add(params, 'gather', 0, 1).name('Gather to centre')); const fC = gui.addFolder('Scene'); ctrls.push(fC.add(params, 'zoom', 0.6, 2.2).name('Zoom')); ctrls.push(fC.add(params, 'exposure', 0.4, 2).name('Exposure')); ctrls.push(fC.add(params, 'renderScale', 0.5, 2, 0.05).name('Render scale').onChange(applyScale)); ctrls.push(fC.add(params, 'bloom').name('Bloom')); ctrls.push(fC.add(params, 'sound', 0, 1).name('Sound volume')); const palettes = [ ['#3d7f8f', '#b9822f'], ['#4a2a14', '#2a1609'], ['#4f6fa8', '#a9bccf'], ['#5c7a3a', '#c29a3d'], ['#7d8a93', '#c9a46a'], ['#8a5a1c', '#e0b14a'], ['#2f5f9e', '#d2a24c'], ['#6b4a2b', '#7a8a3a'], ['#3a2414', '#6a4020'], ['#2c6a70', '#7fb0a0'], ]; const exotic = [ ['#c89a1a', '#e2701a'], ['#6aa030', '#e0c040'], ['#a8261c', '#f0a030'], ['#6a3a9a', '#d0a8e8'], ['#d0b030', '#7a9a20'], ['#1c8a9a', '#e8e0a0'], ]; function randomize() { const p = palettes[Math.floor(Math.random() * palettes.length)]; params.irisColor = p[0]; params.innerColor = p[1]; params.seed = Math.random() * 100; params.limbal = 0.5 + Math.random() * 0.45; main.u.uIrisColor.value.set(p[0]); main.u.uIrisInner.value.set(p[1]); ctrls.forEach((c) => c.updateDisplay && c.updateDisplay()); } const tmpC = new THREE.Color(); const jitter = (hex, h, sat, l) => '#' + tmpC.set(hex).offsetHSL((Math.random() - 0.5) * h, (Math.random() - 0.5) * sat, (Math.random() - 0.5) * l).getHexString(); function randomSettings() { const roll = Math.random(); const cat = roll < 0.3 ? 0.6 + Math.random() * 0.4 : roll < 0.42 ? Math.random() * 0.4 : 0; const pl = (cat > 0.5 && Math.random() < 0.7) || Math.random() < 0.12 ? exotic : palettes; const p = pl[Math.floor(Math.random() * pl.length)]; const blood = Math.pow(Math.random(), 1.8) * 0.85; return { irisColor: jitter(p[0], 0.05, 0.15, 0.08), innerColor: jitter(p[1], 0.05, 0.15, 0.08), irisSize: 0.43 + Math.random() * 0.15 + (cat > 0.5 ? 0.04 : 0), limbal: 0.3 + Math.random() * 0.7, fiber: 0.6 + Math.random() * 0.9, dilation: cat > 0.5 ? 0.3 + Math.random() * 0.35 : 0.2 + Math.random() * 0.33, catEye: cat, bloodshot: blood, veinColor: jitter('#8e1418', 0.04, 0.2, 0.1), sclera: Math.random() < 0.12 ? jitter('#e8dcb0', 0.03, 0.2, 0.05) : jitter('#efe5da', 0.02, 0.1, 0.04), seed: Math.random() * 100, }; } // ---------- placement (stage-local units) ---------- const TAN = Math.tan(THREE.MathUtils.degToRad(25)); const GAP = 0.07; let camDist = 0; let layoutAspect = 1.6; let k = S0; // metres per stage unit function isFree(x, y, r) { for (const e of eyes) { const dx = x - e.group.position.x, dy = y - e.group.position.y; if (Math.hypot(dx, dy) < r + e.radius + GAP) return false; } return true; } function findSpot(cx, cy, r, hw, hh) { let best = null, bestD = Infinity; const ax = hw - r, ay = hh - r; if (Math.abs(cx) <= ax && Math.abs(cy) <= ay && isFree(cx, cy, r)) return [cx, cy]; if (ax <= 0 || ay <= 0) return null; for (let i = 0; i < 400; i++) { const x = (Math.random() * 2 - 1) * ax, y = (Math.random() * 2 - 1) * ay; if (!isFree(x, y, r)) continue; const d = Math.hypot(x - cx, y - cy); if (d < bestD) { bestD = d; best = [x, y]; } } return best; } function spawnLocal(cx, cy) { if (eyes.length >= params.maxEyes) { const old = eyes.splice(1, 1)[0]; if (old) disposeEye(old); } const dist = camDist || REF; const hh = TAN * dist, hw = hh * layoutAspect; let r = 0.3 + Math.random() * 0.55; let spot = findSpot(cx, cy, r, hw, hh); if (!spot) { r *= 0.65; spot = findSpot(cx, cy, r, hw, hh); } for (let grow = 1.3; !spot && grow < 6; grow *= 1.3) spot = findSpot(cx, cy, r, hw * grow, hh * grow); if (!spot) return null; const e = makeEye(randomSettings(), r, spot[0], spot[1], false); if (sfx) sfx.play('sfx_anYzb0ymjxiW', { volume: 0.5 + Math.random() * 0.2, rate: 1.25 - r * 0.5 + Math.random() * 0.15, pan: THREE.MathUtils.clamp(spot[0] / Math.max(hw, 1), -1, 1) * 0.7 }); return e; } const ray = new THREE.Vector3(); const tmpW = new THREE.Vector3(); // screen ndc -> stage-local point on plane z = zLocal function ndcToLocal(nx, ny, zLocal, out) { ray.set(nx, ny, 0.5).unproject(camera).sub(camera.position).normalize(); const planeZ = STAGE_POS.z + zLocal * k; const t = (planeZ - camera.position.z) / (Math.abs(ray.z) > 1e-4 ? ray.z : -1e-4); tmpW.copy(camera.position).addScaledVector(ray, t); out.set((tmpW.x - STAGE_POS.x) / k, (tmpW.y - STAGE_POS.y) / k, zLocal); return out; } const spawnTmp = new THREE.Vector3(); function spawnAtClient(clientX, clientY) { const rect = canvas.getBoundingClientRect(); const nx = ((clientX - rect.left) / Math.max(rect.width, 1)) * 2 - 1; const ny = -(((clientY - rect.top) / Math.max(rect.height, 1)) * 2 - 1); ndcToLocal(nx, ny, 0, spawnTmp); return spawnLocal(spawnTmp.x, spawnTmp.y); } function clearEyes() { while (eyes.length > 1) disposeEye(eyes.pop()); } // ---------- sound & interaction ---------- let lastSnd = 0; if (sfx) { sfx.volume = params.sound; sfx.loop('sfx_pwAUWjWvj6MZ', { volume: 0.3 }); } const flashAll = () => eyes.forEach((e) => { e.flash = Math.max(e.flash, 0.7 + Math.random() * 0.3); }); const squelch = () => { const now = performance.now(); if (sfx && now - lastSnd > 250) { lastSnd = now; sfx.play('sfx_uxvrLawqqyJN', { volume: 0.25 + Math.random() * 0.1, rate: 0.9 + Math.random() * 0.25 }); } }; const downs = new Map(); const onDown = (ev) => { flashAll(); downs.set(ev.pointerId, { x: ev.clientX, y: ev.clientY, t: performance.now() }); }; const onUp = (ev) => { const d = downs.get(ev.pointerId); downs.delete(ev.pointerId); if (!d) return; const tap = Math.hypot(ev.clientX - d.x, ev.clientY - d.y) < 10 && performance.now() - d.t < 400; if (!tap) return; if (params.spawnOnClick) spawnAtClient(ev.clientX, ev.clientY); squelch(); }; const onCancel = (ev) => downs.delete(ev.pointerId); canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', onCancel); // VR: trigger aims at the wall of eyes const offs = []; const vrTmp = new THREE.Vector3(); if (XR && XR.on) { offs.push(XR.on('selectstart', () => flashAll())); offs.push(XR.on('select', ({ controller }) => { if (!controller || !params.spawnOnClick) return; const hits = controller.intersect([hitPlane]); if (hits && hits.length) { vrTmp.copy(hits[0].point); stage.worldToLocal(vrTmp); if (spawnLocal(vrTmp.x, vrTmp.y) && controller.pulse) controller.pulse(0.5, 40); } squelch(); })); } let lastHit = -1; function bump(pan, r, strength, time) { if (!sfx || time - lastHit < 0.07) return; lastHit = time; sfx.play('sfx_KpQGDx5npjv5', { volume: Math.min(0.12 + strength * 0.06, 0.55) * (0.85 + Math.random() * 0.3), rate: THREE.MathUtils.clamp(1.35 - r * 0.5 + Math.random() * 0.12, 0.7, 1.45), pan: THREE.MathUtils.clamp(pan, -1, 1) * 0.7, }); } // ---------- pushers: screen pointer + two VR hands ---------- const mkP = () => ({ pw: new THREE.Vector2(), prev: new THREE.Vector2(), pv: new THREE.Vector2(), raw: new THREE.Vector2(), had: false, active: false, r: 0, speed: 0, ctrl: null, src: '' }); // VR beam cursors: a glowing ring where each controller's ray meets the wall of eyes const cursorGeo = new THREE.RingGeometry(0.012, 0.02, 40); const cursors = [0, 1].map(() => { const m = new THREE.Mesh(cursorGeo, new THREE.MeshBasicMaterial({ color: '#ffd9b0', transparent: true, opacity: 0.5, depthTest: false, depthWrite: false, fog: false, toneMapped: false, blending: THREE.AdditiveBlending })); m.renderOrder = 10; m.visible = false; scene.add(m); return m; }); const camW = new THREE.Vector3(); const pushers = [mkP(), mkP(), mkP()]; function feedPusher(P, x, y, r, dt, ctrl, src) { if (P.src !== src) { P.had = false; P.src = src; } P.pw.set(x, y); P.r = r; P.ctrl = ctrl; if (P.had) { P.raw.set((x - P.prev.x) / dt, (y - P.prev.y) / dt); if (P.raw.length() > 60) P.raw.setLength(60); P.pv.lerp(P.raw, 0.5); } else P.pv.set(0, 0); P.prev.set(x, y); P.had = true; P.active = true; } const killPusher = (P) => { P.had = false; P.active = false; P.pv.set(0, 0); }; // ---------- tracking ---------- const dummy = new THREE.Object3D(); const tgt = new THREE.Vector3(0, 0, 2.5); const wander = new THREE.Vector3(0, 0, 2.5); const look = new THREE.Vector3(); const headW = new THREE.Vector3(); const gripW = new THREE.Vector3(); let wanderT = 0; const easeBack = (t) => { const c = 2.2; const x = t - 1; return 1 + (c + 1) * x * x * x + c * x * x; }; return { update({ time, delta }) { const dt = Math.min(delta, 0.05); const vr = inVR(); hint.visible = vr; const scrAspect = size.width / Math.max(size.height, 1); layoutAspect = vr ? 1.6 : scrAspect; buildCornea(); const bk = bakeKey(params); if (bk !== main.baked) { bake(main); main.baked = bk; } // layout distance (stage units) -> stage scale in metres const base = 4.6 / (0.933 * Math.min(1, layoutAspect)) / params.zoom; let area = 0; for (const e of eyes) area += (e.radius + GAP) * (e.radius + GAP) * 4; const hhNeed = Math.sqrt(area / (0.55 * 4 * layoutAspect)); let need = Math.max(base, (hhNeed * 1.08) / TAN, 1.15 / TAN, 1.15 / (TAN * layoutAspect)); need = Math.min(need, 40); if (!camDist) camDist = need; camDist += (need - camDist) * (1 - Math.exp(-dt * 2.2)); k = S0 * REF / camDist; stage.scale.setScalar(k); stage.updateMatrixWorld(); if (!vr) { const D = camDist * k; camera.position.set(STAGE_POS.x + Math.sin(time * 0.13) * 0.08 * k, STAGE_POS.y + Math.sin(time * 0.17) * 0.05 * k, STAGE_POS.z + D); camera.lookAt(STAGE_POS); camera.updateMatrixWorld(); } // ---------- pushers ---------- const vhh = TAN * camDist, vhw = vhh * layoutAspect; const vs = camDist / base; if (dt > 1e-4) { if (!vr && pointer.inside) { ndcToLocal(pointer.x, pointer.y, 0, look); feedPusher(pushers[0], look.x, look.y, 0.2 * vs, dt, null, 'mouse'); } else killPusher(pushers[0]); const hands = vr ? [XR.left, XR.right] : [null, null]; if (vr) camera.getWorldPosition(camW); for (let i = 0; i < 2; i++) { const c = hands[i], P = pushers[i + 1], cur = cursors[i]; cur.visible = false; if (!(c && c.connected)) { killPusher(P); continue; } let used = false; // direct hit: controller physically inside the eye wall if (c.grip) { c.grip.getWorldPosition(gripW); stage.worldToLocal(gripW); if (Math.abs(gripW.z) < 1.3) { feedPusher(P, gripW.x, gripW.y, 0.06 / k, dt, c, 'grip'); used = true; } } // beam hit: sweep the pointer ray across the eyes if (!used && c.intersect) { const hits = c.intersect([hitPlane]); if (hits && hits.length) { cur.position.copy(hits[0].point); cur.lookAt(camW); cur.visible = true; gripW.copy(hits[0].point); stage.worldToLocal(gripW); feedPusher(P, gripW.x, gripW.y, 0.16 * vs, dt, c, 'ray'); used = true; } } if (!used) killPusher(P); } } for (const P of pushers) P.speed = P.active ? Math.min(P.pv.length() / (3 * vs), 1) : 0; for (let i = 0; i < 2; i++) { const cur = cursors[i]; if (!cur.visible) continue; const sp = pushers[i + 1].speed; cur.material.opacity = 0.45 + 0.55 * sp; cur.scale.setScalar(1 + 1.6 * sp); } // ---------- physics ---------- const mP = 0.25 * params.push; const STEPS = 3, h = dt / STEPS, n = eyes.length; const damp = Math.exp(-h * 1.4); for (let st = 0; st < STEPS; st++) { for (let i = 0; i < n; i++) { const e = eyes[i], p = e.group.position, R = e.radius; const gk = params.gather * (e === main ? (n < 3 ? 9 : 3) : 1) + (e === main && n < 3 ? 0.6 : 0); e.vx -= p.x * gk * h; e.vy -= p.y * gk * h; const ox = Math.abs(p.x) + R - vhw, oy = Math.abs(p.y) + R - vhh; if (ox > 0) { const sx = Math.sign(p.x); p.x = sx * Math.max(vhw - R, 0); if (e.vx * sx > 0) { e.vx = -e.vx * params.bounce; if (Math.abs(e.vx) > 0.9) bump(sx, R, Math.abs(e.vx), time); } } if (oy > 0) { const sy = Math.sign(p.y); p.y = sy * Math.max(vhh - R, 0); if (e.vy * sy > 0) { e.vy = -e.vy * params.bounce; if (Math.abs(e.vy) > 0.9) bump(p.x / Math.max(vhw, 1), R, Math.abs(e.vy), time); } } if (mP <= 0) continue; for (const P of pushers) { if (!P.active || P.speed <= 0.05) continue; const dx = p.x - P.pw.x, dy = p.y - P.pw.y, d = Math.hypot(dx, dy), md = R + P.r; if (d < md && d > 1e-5) { const nx = dx / d, ny = dy / d, w = mP / (mP + e.mass); p.x += nx * (md - d) * w * P.speed; p.y += ny * (md - d) * w * P.speed; const rel = (P.pv.x - e.vx) * nx + (P.pv.y - e.vy) * ny; if (rel > 0) { const j = (1 + params.bounce) * rel * w; e.vx += nx * j; e.vy += ny * j; if (j > 1.5) { bump(p.x / Math.max(vhw, 1), R, j * 0.5, time); if (P.ctrl && P.ctrl.pulse) P.ctrl.pulse(Math.min(0.2 + j * 0.05, 0.8), 25); } } } } } for (let i = 0; i < n; i++) { const a = eyes[i], pa = a.group.position, ia = 1 / a.mass; for (let j = i + 1; j < n; j++) { const b = eyes[j], pb = b.group.position; const dx = pb.x - pa.x, dy = pb.y - pa.y; const md = a.radius + b.radius + GAP * 0.5; if (Math.abs(dx) > md || Math.abs(dy) > md) continue; const d = Math.hypot(dx, dy); if (d >= md || d < 1e-6) continue; const nx = dx / d, ny = dy / d, ib = 1 / b.mass, is = ia + ib; const pen = (md - d) * 0.8; pa.x -= nx * pen * ia / is; pa.y -= ny * pen * ia / is; pb.x += nx * pen * ib / is; pb.y += ny * pen * ib / is; const vn = (b.vx - a.vx) * nx + (b.vy - a.vy) * ny; if (vn < 0) { const J = -(1 + params.bounce) * vn / is; a.vx -= nx * J * ia; a.vy -= ny * J * ia; b.vx += nx * J * ib; b.vy += ny * J * ib; if (-vn > 0.9) bump(((pa.x + pb.x) * 0.5) / Math.max(vhw, 1), (a.radius + b.radius) * 0.5, -vn, time); } } } for (let i = 0; i < n; i++) { const e = eyes[i], p = e.group.position; if (!Number.isFinite(e.vx) || !Number.isFinite(e.vy)) { e.vx = 0; e.vy = 0; } p.x += e.vx * h; p.y += e.vy * h; e.vx *= damp; e.vy *= damp; } } // ---------- gaze target (stage-local) ---------- if (vr) { camera.getWorldPosition(headW); stage.worldToLocal(headW); tgt.copy(headW); if (tgt.z < 0.5) tgt.z = 0.5; } else if (pointer.inside) { ndcToLocal(pointer.x, pointer.y, 2.5, tgt); } else { wanderT -= dt; if (wanderT <= 0) { wanderT = 0.8 + Math.random() * 2.2; const sc = camDist / base; wander.set((Math.random() - 0.5) * 2.2 * sc, (Math.random() - 0.5) * 1.4 * sc, 2.5); } tgt.copy(wander); } const cz = tgt.z / 2.5; const hippus = 1 + 0.025 * Math.sin(time * 1.3) * Math.sin(time * 0.71 + 1); for (const e of eyes) { const g = e.group; e.age += dt; const pop = Math.min(e.age / 0.55, 1); g.scale.setScalar(Math.max(e.radius * easeBack(pop), 0.001)); const dx = THREE.MathUtils.clamp((tgt.x - g.position.x) * params.follow, -3 * cz, 3 * cz) + Math.sin(time * 7.1 + e.phase) * 0.006 * cz + e.vx * 0.12 * cz; const dy = THREE.MathUtils.clamp((tgt.y - g.position.y) * params.follow, -2.5 * cz, 2.5 * cz) + Math.sin(time * 6.3 + 1 + e.phase) * 0.006 * cz + e.vy * 0.12 * cz; look.set(g.position.x + dx, g.position.y + dy, tgt.z); dummy.position.copy(g.position); dummy.lookAt(look); g.quaternion.slerp(dummy.quaternion, 1 - Math.exp(-dt * e.rate)); e.flash *= Math.exp(-dt * 1.6); const dil = e === main ? params.dilation : e.s.dilation; const pT = dil * (1 - 0.5 * e.flash) * hippus; e.pupilCur += (pT - e.pupilCur) * (1 - Math.exp(-dt * (e.flash > 0.5 ? 10 : 3))); e.u.uPupil.value = e.pupilCur; } const u = main.u; u.uCat.value = params.catEye; u.uLimbal.value = params.limbal; u.uFiber.value = params.fiber; u.uSeed.value = params.seed; bloom.enabled = params.bloom; renderer.toneMappingExposure = params.exposure; if (sfx) sfx.volume = params.sound; }, render() { composer.render(); }, resize({ width, height }) { composer.setSize(width, height); applyScale(); }, dispose() { canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointerup', onUp); canvas.removeEventListener('pointercancel', onCancel); offs.forEach((f) => typeof f === 'function' && f()); eyes.forEach(disposeEye); sphereHi.dispose(); sphereLo.dispose(); sphereMid.dispose(); bakeMat.dispose(); bakeQuad.geometry.dispose(); corneaMat.dispose(); floor.geometry.dispose(); floor.material.dispose(); hint.geometry.dispose(); hint.material.dispose(); hintTex.dispose(); cursors.forEach((m) => { scene.remove(m); m.material.dispose(); }); cursorGeo.dispose(); pmrem.dispose(); }, }; }