The user wants me to create a website with a realistic, detailed, interactive 3D aquarium, all in one HTML file. They want me to show everything I'm capable of and not be lazy. I'll create an impressive 3D aquarium using Three.js with: 1. Realistic water effects with caustics 2. Multiple fish with realistic swimming behaviors (flocking/boids) 3. Bubbles rising 4. Plants swaying 5. Sand/rocks at the bottom 6. Light rays (god rays) from above 7. Interactive features: click to feed fish, mouse interaction, camera controls 8. Glass tank effect 9. Particles in water 10. Post-processing effects Let me build a comprehensive Three.js aquarium: Features to include: - Three.js scene with aquarium tank (glass walls) - Procedural fish models (built with geometry - body, tail, fins) with vertex shader animation for swimming motion - Fish AI: wandering, flocking behavior, avoiding walls - Bubbles with realistic rising physics (wobble, speed increases) - Animated plants (vertex displacement for swaying) - Sand floor with texture (procedural canvas texture) - Rocks/coral decorations - Caustics light patterns on the floor (animated shader) - God rays / light beams - Floating dust particles - Water surface with waves - Fog for depth - Interactive: click drops food, fish swim to food - Camera orbit controls - UI overlay with info Let me write the fish with custom shader material for tail wagging. I'll create fish geometry procedurally: - Body: elongated sphere (scaled) - Tail: flattened cone or custom shape - Fins: small planes Fish swimming animation via vertex shader: bend based on x position and time. Actually, let me make fish as groups with body parts, animate tail rotation in JS - simpler and looks good. Or use skinned vertex shader. A shader approach: pass uniform time and phase, in vertex shader offset z by sin(position.x * frequency + time * speed + phase) * amplitude * (distance from head). That gives nice swimming wiggle. Let me plan the fish geometry more carefully. A good stylized-realistic fish: - Use a sphere geometry, scale it: x (length) ~ 1, y (height) ~ 0.35, z (width) ~ 0.15 - Vertex colors or gradient texture for fish coloring - Add tail fin: use a flattened, shaped plane geometry or extruded shape - Dorsal fin, pectoral fins Colors: tropical fish - orange clownfish with stripes, blue tang, yellow fish, etc. I can generate textures on canvas for each fish type with stripes. Boids algorithm for schooling: separation, alignment, cohesion, plus wander, wall avoidance, food attraction. Food: clicking in water drops food pellets that sink slowly, fish swim to nearest food and "eat" it (food shrinks/disappears when fish close). Bubbles: spawn from bottom (from airstone/decoration), rise with wobble, slight size variation, pop at surface. Plants: multiple blades using plane geometries with vertex shader sway, anchored at bottom. Sand: plane with procedural noise texture, caustics via shader. Caustics: implement classic caustic pattern using voronoi-ish function in fragment shader, animated. There's a well-known caustics shader function (from Shadertoy by David Hoskins / "Seascape"-like). I'll implement a compact version: ```glsl float caustic(vec2 uv, float t) { vec2 p = mod(uv*TAU, TAU) - 250.0; ... } ``` The classic one: ```glsl #define TAU 6.28318530718 vec3 caustics(vec2 uv, float time) { vec2 p = mod(uv*TAU, TAU)-250.0; vec2 i = vec2(p); float c = 1.0; float inten = .005; for (int n = 0; n < 5; n++) { float t = time * (1.0 - (3.5 / float(n+1))); i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x)); c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten))); } c /= 5.0; c = 1.17-pow(c, 1.4); vec3 colour = vec3(pow(abs(c), 8.0)); return colour; } ``` This creates nice caustics. Apply on floor as additive light. God rays: create several translucent cone/cylinder meshes with additive blending and animated opacity, angled from top. Water surface: plane at top with normal-perturbed shader or simple animated opacity + wave mesh. Since camera is mostly outside/below, keep it subtle. Glass: transparent box faces with slight reflection (envmap?) — keep simple: semi-transparent with fresnel shader for realism. I'll make a ShaderMaterial for glass with fresnel. Environment: place aquarium in a "room" - dark gradient background, wooden stand? Maybe simple dark backdrop with vignette. Add a subtle room: floor plane, walls dark. Focus on tank. Post-processing: could use UnrealBloomPass from three examples via CDN. Using import maps with three from unpkg/jsdelivr: ```html ``` Use OrbitControls from addons. Bloom pass adds glow to caustics and bubbles. That's nice but could hurt performance; make it subtle. Interactivity: - OrbitControls for camera (limited distance) - Click on water → raycast into tank volume, spawn food - Buttons: toggle feed mode, add bubble stream, day/night toggle maybe - Mouse move: fish slightly scared? Could add "tap glass" - click on glass scares nearby fish (dash away). UI: Russian language since user speaks Russian. Title, instructions, buttons, FPS counter maybe, fish count. Let me also add: - Snail slowly moving on glass? Maybe skip. - Treasure chest with bubbles? Air stone: a decoration that emits bubble stream. - Small castle decoration. Let me carefully structure the code: 1. Imports, renderer setup (antialias, shadows maybe), scene, camera, controls 2. Lights: ambient, directional (with shadows for fish on sand), point light above tank 3. Room: big sphere with gradient or simple fog + background color 4. Tank dimensions: W=16, H=9, D=8 (units) 5. Glass: box with 4 sides + no top/bottom, fresnel shader, double-sided 6. Water volume: box slightly smaller, backside material with blue tint and depth-based opacity? Use a BoxGeometry with BackSide and gradient shader to fake water depth + fog. 7. Sand: plane with displacement noise, canvas texture with speckles, caustics shader on top (custom ShaderMaterial combining sand texture + caustics) 8. Rocks: few dodecahedron/icosahedron geometries randomly deformed 9. Plants: several clusters, each with blades (plane strips, shader sway) 10. Fish class: build geometry, shader material with swim animation; update with boids 11. Bubbles: instanced or individual meshes with shader (fake sphere shading with highlight), updated in loop 12. Food system: small spheres sinking, eaten by fish 13. Particles: floating motes (Points with additive material) 14. God rays: cones additive 15. Animation loop with delta time 16. UI events: buttons, click handling, raycasting Let me write the fish shader. Fish geometry along X axis, head at +X? Let's set head at +x, tail at -x. Swim wiggle in vertex shader: ```glsl uniform float uTime; uniform float uPhase; uniform float uSpeed; // wag frequency multiplier varying vec2 vUv; varying vec3 vNormal; varying vec3 vPos; void main(){ vUv = uv; vec3 p = position; float bend = sin(uTime * uSpeed + uPhase + p.x * 2.2) * 0.12 * smoothstep(1.2, -1.5, p.x); // stronger at tail (negative x) p.z += bend; // also slight roll vec4 mv = modelViewMatrix * vec4(p, 1.0); vNormal = normalMatrix * normal; vPos = mv.xyz; gl_Position = projectionMatrix * mv; } ``` Hmm, smoothstep(1.2,-1.5,p.x): at p.x = 1.2 (head) → 0, at p.x=-1.5 (tail) → 1. Good, bend amplitude grows toward tail. Fragment shader: use texture from canvas (stripes per species), plus simple lighting (lambert + specular) computed manually since ShaderMaterial. Or use onBeforeCompile on MeshStandardMaterial? Simpler: custom shader with basic lighting — fine. Actually simpler approach: use MeshPhongMaterial with map and onBeforeCompile to inject wiggle. That gives standard lights/shadows plus custom vertex displacement. Fish receiving shadows isn't needed; casting shadows on sand is nice though — with custom depth material... Shadows might complicate; skip shadow casting for fish or accept static depth (wiggle won't show in shadow, fine). I'll use MeshStandardMaterial with onBeforeCompile injecting uniforms. Keep reference to shader to update uTime. Fish geometry: I'll build a custom fish using LatheGeometry? A lathe gives a body of revolution — fish are laterally compressed. Better: SphereGeometry scaled (1.6, 0.75, 0.35) → body. Tail: custom shape via ShapeGeometry (triangle-ish forked tail) positioned at back, rotated to be in XY plane... Tail fin should be vertical plane (XY) at the end. Fins: dorsal triangle on top, pectoral small planes on sides. Merge into group per fish, each part shares the wiggle material (so whole fish wiggles coherently). The wiggle is based on local x, but parts are in world of fish group... If material is shared and applied to parts positioned via mesh.position, the wiggle uses geometry-local x, which differs. Simpler: build one BufferGeometry per fish merging parts with transforms baked, then one mesh per fish. I can use BufferGeometryUtils.mergeGeometries from addons. Then uv for texture: body sphere has proper uv; tail/fins need uvs mapping to texture region (fin color). I can assign uv to all vertices of fins to a point in texture with fin color. Simplify further: generate fish texture with body gradient + stripes + fin color area. Map fin uvs to fin color area. Scale fish group per species. Number of fish: ~18-25 mixed species + a school of small neon tetras (instanced? just many small fish, maybe 30) — boids for all maybe heavy but fine (50 boids = trivial). Performance: each fish a separate mesh — 50 draw calls, fine. Bubbles as Points or instanced mesh ~100. Particles as Points ~200. Plants merged geometry per cluster with shader. All good. Boids detail: - Each fish: position, velocity, maxSpeed per species, wander target. - Neighbor search O(n²) fine for n≈60. - Species behavior: schoolers (tetras) strong cohesion/alignment; loners weak. - Wall avoidance: steer away when near bounds. - Food attraction: if food exists, weight toward nearest food, eat when close. - Scare: on glass tap, fish near point get burst velocity away. - Tail wag speed proportional to velocity. Orientation: fish forward along +x; compute quaternion from velocity direction; add slight banking on turns. Use a helper: lookAt along velocity, since geometry head at +x — need rotation so +x maps to direction. Use quaternion.setFromUnitVectors(new Vector3(1,0,0), dir) — loses banking but ok; add smooth interpolation (slerp toward target). Tail wag uniform: uTime global, per-fish phase, uSpeed = base + speed*k. Bubbles: shader material on SphereGeometry instanced? Use Points with custom shader (circular sprite with rim highlight). Points simpler and fast. Size attenuation, transparent. Each bubble: pos, speed, wobble phase. On reaching surface y > waterTop → recycle to bottom at air stone position. Bubble sprite texture: canvas radial gradient ring → looks like bubble. Food pellets: small brown spheres, sink slowly, fish eat. Limit ~30 pellets. Caustics on sand: ShaderMaterial with sand texture + caustics + fog. Also add caustics to back wall? Just sand. Also project fake caustic light onto fish? Skip. Water surface: plane at top inside tank with shader: animated normals → specular streaks; visible when camera above water? Keep camera min polar angle so you can go slightly above. Add surface as semi-transparent with moving ripple normal. Simple shader with sin waves producing sparkle. God rays: 4-6 planes (vertical, angled) with additive gradient texture, slowly rotating/pulsing. Or cones. Planes from top inside tank downward, billboarded-ish around Y. Looks decent. Floating particles: Points with tiny white dots, slow drift, additive, low opacity — gives "water density". Day/Night toggle: lerp light colors, background, caustics intensity. Feed mode: button toggles; or simply any click inside tank drops food; click on glass (raycast hits glass first) scares fish. Distinguish: raycast against an invisible box (water volume) and glass planes. Let's do: on click, raycast; if intersects glass before water box point... simpler: clicking anywhere drops food at the point where ray intersects the front glass plane, projected inside with random depth. Hmm. Better UX: - Click inside tank view → food at ray ∩ front glass position, pellet sinks from that point with slight inward drift. Actually food should fall from top. So: on click, compute ray, intersect with plane y=waterTop → that's where pellet spawns and sinks. If ray doesn't hit water top plane within bounds (camera below?), intersect with front glass and spawn at top above that x,z. Simplest robust: intersect with top water plane (mathematically, even if beyond bounds, clamp x,z into tank). Camera default looks slightly downward so fine. - "Tap glass" scare: double-click or a dedicated mode? Let's do: click with Shift, or a button "Постучать по стеклу" toggling tap mode for one click. Simpler: click = feed, double-click = scare tap at front glass point. Add instructions. Camera auto-slow-rotate option (autoRotate toggle). Stats: show fish count, fps. Audio? Could add gentle bubble sound via WebAudio oscillator/noise on user gesture. Nice touch: ambient hum generated procedurally with noise buffer + filter, bubbles blips randomly. Add mute button. WebAudio: create brown noise loop through lowpass at low gain + random sine blips with quick decay for bubbles. Keep volumes low. Toggle button (off by default to avoid autoplay issues; start on first click maybe). I'll add "🔊 Звук" toggle. Let me also add a subtle wooden stand and table? Adds realism: a box under the tank (dark wood texture via canvas) and a room with soft gradient walls + floor with reflection? Keep performance: simple dark floor plane, big room box with dark gradient shader, vignette overlay via CSS. Alright, code structure (module script): ```js import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js'; ``` Maybe bloom: EffectComposer, RenderPass, UnrealBloomPass, OutputPass. Bloom threshold ~0.85 strength 0.35 — makes caustics/bubbles glow subtly. Import from addons. I'll include it but make sure it looks fine. Resize handling for composer. Let me now write all pieces carefully. Constants: ```js const TANK = { w: 18, h: 10, d: 9, glass: 0.12, bottom: 0 }; ``` Tank inner bounds for fish: x ±(w/2 - margin), y from sandTop(≈0.8 above tank bottom) to waterTop (tank bottom + h - 0.6). Set tank bottom at y=0, sand surface ~0.55 with noise up to ±0.25. Fish y range [1.2, waterTop-0.4]. Stand: box from y=-4 to 0 sized w+1.5, 4, d+1.5, wood texture. Lights: - HemisphereLight(skyblue-ish, sand color, 0.5) - DirectionalLight from above-front, casts shadow onto sand: shadow camera sized to tank. Shadows: sand receives (it's ShaderMaterial — receiving shadows in custom shader is pain). Hmm. Skip shadowmaps entirely? Fish over sand without contact shadow may look floaty but underwater + dim it's ok. I'll skip shadow maps for simplicity and perf, add a fake blob shadow? Skip. Actually standard materials with lights look fine without shadows in underwater ambiance. Water fog: scene.fog = new THREE.FogExp2(0x0a2a3a, 0.028) but fog affects room too... Room is big; fog color match background. Since looking through glass into water, exp fog gives depth. Background: gradient via large sphere shader behind everything (fog:false on its material). Glass fresnel shader: ```glsl varying vec3 vN; varying vec3 vV; void main(){ float f = pow(1.0 - abs(dot(normalize(vN), normalize(vV))), 3.0); gl_FragColor = vec4(mix(vec3(0.4,0.7,0.8), vec3(0.9,1.0,1.0), f), 0.05 + f*0.35); } ``` Transparent, side: DoubleSide, depthWrite false. Water volume box (BackSide): gradient vertical from deep blue bottom to lighter top, opacity 0.18, additive? Normal blending with depthWrite false. Render order after tank contents? Transparent objects sort by distance; to be safe set renderOrder: water box renderOrder 1, glass 2, bubbles 3 etc. Hmm, transparent sorting: renderer sorts back-to-front automatically per object. A big enclosing box with BackSide — its center is tank center, distance to camera relatively small, so it'd render... could cause artifacts with fish inside (fish are opaque though, drawn before transparents). Opaque fish fine. Transparent bubbles inside vs water box: both transparent; bubbles drawn in correct order if their distances > box center distance? Camera outside box: box center closer than far bubbles? Distance from camera to bubble vs to box center — bubbles on far side are farther than center → drawn before box → then box blends over them → slightly tinted, which is actually desirable (water tints things behind). Bubbles near side: closer than center → drawn after box → full bright. Fine. Plants: create blade geometry: PlaneGeometry(0.35, h, 1, 6), translate so base at y=0, bend via shader: x-offset = sin(time*speed + phase + y*k)*amp*(y/h)^2. Plus static lean. Use onBeforeCompile on MeshLambertMaterial with vertexColors for gradient green. Merge blades per cluster into one geometry with per-blade phase attribute? With onBeforeCompile, can use position-based phase: use world position offset — merge all plants into one geometry; phase from position.x*3.7+position.z*2.9 → varied. Good: single draw call for all plants. Actually plant material with DoubleSide, alpha? Just solid blades colored green gradient; looks fine. Also add a big "amazon sword" style: wider blades. Keep one type, vary sizes/colors. Rocks: 5-7 icosahedrons detail 1, vertices jittered, flat shading, gray-brown with slight color variance, partially buried. Coral/decoration: maybe a small castle is too kitschy; add a piece of driftwood: bent cylinder? Skip, rocks + plants suffice, plus an air stone (small porous cylinder) emitting bubbles. Sand texture canvas: 512², base #c2b280-ish variation speckles darker/lighter, plus slight noise. Repeat 3x2. Sand geometry: PlaneGeometry(w, d, 64, 32), rotate -90°, displace y with noise function (simple sin/cos combo or value noise). Custom ShaderMaterial: uniforms: map, uTime, causticIntensity, lightDir... fragment: sample map, compute caustics(vec2 uv*scale, time), color = sand*(0.55 + 0.45*ndotl) + caustics*color... compute lighting manually-ish. Also fog. I'll implement fog manually (exp2) matching scene fog. Or use material.fog with ShaderMaterial by including fog chunks — easier to manually do: uniform fogColor, fogDensity. Actually to keep sand lit by scene lights is complex in ShaderMaterial; manual lambert with fixed light dir is fine and caustics add life. Fish textures: function makeFishTexture({base, belly, stripes, stripeColor, fin}) → canvas 256x128: vertical gradient base→belly (top to bottom? fish v axis: v=1 top). SphereGeometry uv: v=1 at top. Draw gradient, stripes as vertical bands with slight curve, eye? Eye better as separate small sphere added per fish — adds draw calls; or draw eye in texture near head (u≈0.9?). Head at +x; sphere u: for sphere rotated so that +x corresponds to u=0.5? Default SphereGeometry: u goes around Y axis starting at +x? The seam at -x? Let me think: Three.js SphereGeometry: u = phi/(2π), phi starts at phiStart (default 0) around Y from positive X? Actually vertices: x = -r cos(phiStart+phi*u)... I don't recall exactly. To avoid eye placement headaches: add eye meshes — 2 tiny spheres per fish with black material, cheap (~40 extra small draws, ok). Or include eyes in merged geometry with separate material group... simpler: after building fish mesh, attach two eye spheres as children positioned on head sides. They won't wiggle with shader (they're separate objects) — slight detachment when tail wags... eyes are at head where bend≈0, fine. But eyes as children positioned in fish local space — with fish mesh scaled non-uniformly (body scaled geometry), eyes placed at (0.95, 0.15, ±0.28). Body scale applied to geometry itself (bake scale into geometry via geometry.scale) so mesh scale uniform → eyes fine. Fish size variation per species. Species definitions: 1. Clownfish: orange, white stripes with black edges, size 0.9 2. Blue tang: royal blue body, black palette marking, yellow tail, size 1.1 3. Yellow fish (like yellow tang): bright yellow, size 1.0 4. Angelfish-ish: silver with black vertical stripes, taller body, size 1.2 5. Neon tetra: small 0.45, silver with cyan/red horizontal stripe — school of 12 Texture per species generated once, shared material per species (with shared uniforms? each fish needs own uPhase → onBeforeCompile adds uniforms referencing per-fish object. If material shared, uniforms shared → same phase for all. Use per-fish cloned material, or use a per-vertex attribute for phase... Cloning material per fish (25 fish) fine — programs shared via cache key since same shader code. onBeforeCompile with customProgramCacheKey to ensure program reuse. Set material.customProgramCacheKey = () => 'fish'. Then each fish material instance holds own uniforms. Fish update loop (boids): ```js for each fish: acc = 0 // neighbor for other: d2 < r2 → separation += (pos-opos)/d2 ... etc wander: steer toward wanderTarget, occasionally change bounds: if outside inner margin push back strongly food: if food, dir to nearest → acc += dir * foodWeight; if dist<0.5 → eat vel += acc*dt; clamp speed [minSpeed, maxSpeed]; pos += vel*dt ``` Orientation: target quaternion from vel; slerp factor 1-exp(-dt*5). Add bank: roll around forward axis proportional to turn rate — compute lateral component of acceleration: bank = clamp(dot(acc, right)*k). Apply via additional quaternion multiply. Nice detail. Tail wag: uniforms.uTime.value = t; uSpeed = 6 + speed*3. Bubbles: Points geometry with attributes position, aScale, aPhase. Update positions CPU each frame (200 bubbles fine). y += speed*dt*(0.8+scale), x += sin(t*3+phase)*0.15*dt... wobble: x += sin(t*4+phase)*0.01. At y>waterTop → respawn at emitter positions (two air stones) with some random. Shader: point sprite with bubble texture, size = aScale * (300/depth), gl_PointSize. Opacity 0.7. Particles (motus): 150 points drifting slowly with sin motion, wrap in box. Tiny, opacity 0.25. God rays: geometry PlaneGeometry(1, H) gradient texture (alpha top bright→bottom 0), additive, positioned tilted from top, 5 of them at angles, rotate slowly around Y, opacity pulsing with sin. depthWrite false. Water surface: PlaneGeometry at waterTop, ShaderMaterial: normal-perturbed specular: compute pseudo normal from sin waves; view-dependent spec highlight + fresnel-ish transparency; additive light streaks. Keep subtle: opacity 0.25, transparent. Also ripple rings from food drops? Extra: when food lands, spawn a ripple ring mesh expanding on surface (torus scale anim, fade). Nice detail — implement simple: ring = Mesh(RingGeometry, basic material additive), animate scale+opacity, reuse pool. Food: pellets = Mesh(SphereGeometry(0.06), brown standard). Each: vel y small sink (-0.35), slight drift, life until eaten or hits sand (rest 8s then dissolve). Fish eat: nearest fish within 0.6 → pellet shrinks quickly, fish does a little lunge (speed burst). Pellet removed when scale<0.05. Scare: double-click → raycast to front glass plane z=d/2 (and other sides? just use nearest glass intersection point). Fish within 4 units get velocity impulse away + wag burst. Also spawn small bubble burst at tap point? Sure, few bubbles. Day/Night: lerp function animating: hemi intensity/color, dir light intensity, fog color, background uniforms, caustics strength, godray opacity. Night: deep blue, moon-ish light from top (bluish), caustics dim cyan. Add small LED strip effect? Keep simple. UI (HTML/CSS overlay, Russian): - Title "Аквариум 3D" - Buttons: 🍤 Покормить (also just click), 🔦 День/Ночь, 🎥 Автовращение, 🔊 Звук, ➕ Добавить рыбку - Hint text: "ЛКМ — кормить • Двойной клик — постучать по стеклу • Перетаскивайте для обзора" - Loading overlay until init done (it's all synchronous, brief; still show fade). Sound: WebAudio, master gain. Components: - Ambient: looped noise buffer → lowpass 400Hz → gain 0.03 - Filter hum: oscillator 50Hz sine gain 0.01 (equipment hum) - Bubble blips: every 0.4–1.5s, oscillator sine freq 400→900 ramp 0.15s, gain envelope 0.05 → random pan. Start on toggle click. Now let me write the noise for sand displacement: ```js function noise2(x, z){ return Math.sin(x*1.7+Math.sin(z*2.3)*1.3)*0.5 + Math.sin(z*1.3+Math.sin(x*1.9))*0.3 + Math.sin((x+z)*0.7)*0.2; } ``` Sand color texture canvas with speckles. Wood texture canvas for stand: brown base with horizontal streaks. Background: big sphere (r=120) BackSide ShaderMaterial gradient: top #0e2733 → bottom #04090d, plus subtle radial glow behind tank. Fog shouldn't apply (fog:false). Scene fog color should match mid color for blending; exp2 density 0.02 — room sphere unaffected (fog false) but floor plane will be. Floor: circle radius 100 dark #06090c, MeshBasicMaterial with fog → blends. Hmm, fog applies to fish too (standard material) — with density 0.02 at distance ~20 → factor exp(-(0.02*20)^2)= exp(-0.16)=0.85 — mild. OK, adds underwater feel. But camera far zoomed out 35 → exp(-0.49)=0.61 too foggy. Use density 0.012. Glass: to see clearly, keep opacity low facing straight. Now write the caustics GLSL (compact classic): ```glsl float causticPattern(vec2 uv, float t){ vec2 p = mod(uv*6.28318, 6.28318) - 250.0; vec2 i = p; float c = 1.0; float inten = 0.005; for (int n = 0; n < 4; n++){ float tt = t * (1.0 - (3.5 / float(n+1))); i = p + vec2(cos(tt - i.x) + sin(tt + i.y), sin(tt - i.y) + cos(tt + i.x)); c += 1.0/length(vec2(p.x/(sin(i.x+tt)/inten), p.y/(cos(i.y+tt)/inten))); } c /= 4.0; c = 1.17 - pow(c, 1.4); return pow(abs(c), 7.0); } ``` Sand fragment: ```glsl vec3 sand = texture2D(map, vUv*vec2(3.0,1.5)).rgb; float ndl = clamp(dot(normal, normalize(uLightDir)),0.0,1.0); vec3 col = sand * (uAmbient + uLightColor * ndl); float c = causticPattern(vUv*uCausticScale, uTime); col += uCausticColor * c * uCausticIntensity * (0.35 + 0.65*ndl); // fog ``` Also darken edges slightly (vignette in tank corners) — skip. Plants shader injection with MeshLambertMaterial: ```js mat.onBeforeCompile = (sh)=>{ sh.uniforms.uTime = timeUniform; // shared object {value:0} sh.vertexShader = 'uniform float uTime;\n' + sh.vertexShader.replace('#include ', `#include float swayPh = position.x*2.1 + position.z*3.3; float hgt = clamp(position.y / 3.0, 0.0, 1.0); transformed.x += sin(uTime*1.3 + swayPh) * 0.25 * hgt*hgt; transformed.z += cos(uTime*1.1 + swayPh*1.3) * 0.18 * hgt*hgt;`); }; ``` But merged plant geometry positions baked at world coords → position.x/z vary → good phase variation. Blade height differs; using absolute y works since bases near sand (~0.5) and tops up to ~4. hgt = clamp((position.y-0.5)/3.5,...). Good. Vertex colors for plant gradient: darker base → lighter tips; per-blade hue variation via color attribute — set when building blades. Fish material: MeshStandardMaterial({map, roughness 0.6, metalness 0.1}) with emissive slight? Neon tetra: emissive cyan on stripe → separate small emissive map? Simplify: give tetras emissive color overall slight. Fish wiggle injection: ```js shader.vertexShader = shader.vertexShader .replace('#include ', '#include \nuniform float uTime;uniform float uPhase;uniform float uWag;') .replace('#include ', `#include float bendAmt = smoothstep(1.0, -1.6, position.x); transformed.z += sin(uTime*uWag + uPhase + position.x*1.8) * 0.18 * bendAmt; transformed.y += sin(uTime*uWag*0.5 + uPhase) * 0.02;`); ``` Store fish.shader = shader in onBeforeCompile. Shadows skipped. Renderer: outputColorSpace default SRGB; toneMapping ACESFilmic, exposure 1.1. Bloom: strength 0.45, radius 0.6, threshold 0.8. With ACES + bloom fine. Use EffectComposer; ensure resize updates composer. Render via composer in loop. Fish geometry builder: ```js function buildFishGeometry(spec){ const parts = []; const body = new THREE.SphereGeometry(1, 24, 16); body.scale(spec.len, spec.hgt, spec.wid); parts.push(body); // tail: shape const tailShape = new THREE.Shape(); tailShape.moveTo(0,0); tailShape.lineTo(-spec.len*0.55, spec.hgt*0.85); tailShape.quadraticCurveTo(-spec.len*0.35, 0, -spec.len*0.55, -spec.hgt*0.85); tailShape.lineTo(0,0); const tail = new THREE.ShapeGeometry(tailShape, 8); tail.translate(-spec.len*0.92, 0, 0); setFlatUV(tail, 0.05, 0.9); // map to fin color region parts.push(tail); // dorsal fin const dShape = new THREE.Shape(); dShape.moveTo(0.3*spec.len?...) ... } ``` ShapeGeometry lies in XY plane — tail vertical in XY: correct (tail fin vertical, extending -x). Dorsal fin: also XY plane, on top: shape from x -0.2len..0.5len along body top, height up to hgt*1.6, thin — but ShapeGeometry has zero thickness in z, same as tail — fine, DoubleSide. Pectoral fins: small triangles rotated outward on sides at (0.45len, -0.1hgt, ±wid*0.8), rotate around Y ∓0.5 and X. Use small ShapeGeometry transformed with matrix. setFlatUV: set all uv to a coordinate (u,v) pointing into texture area with fin color (I'll reserve top strip of texture v in [0.95,1] as fin color? UV v=1 top of texture; canvas y down — handle flipY default true: texture v=0 = bottom of canvas? With flipY=true, v=1 is top of canvas image. I'll just reserve region u∈[0,0.08] full v as fin color column, mapping fin uvs to (0.04, 0.5). Body texture layout (canvas 256x128): - column x∈[0,20]: fin color (solid + slight gradient) - rest: body: vertical gradient (top darker → belly lighter), stripes per species, head region. Sphere uv: u wraps around; need to know orientation to put head/eye correct. Eyes as separate meshes sidestep that. Stripes are vertical bands — they map around body regardless of seam — ok visually. Angelfish taller: spec.hgt larger, len smaller, plus long trailing ventral fin — add via shape. Keep angelfish: body scale (0.9, 1.3, 0.28) with big dorsal/ventral triangles. Tetra: small, hgt small. Also gill plate shine: add slight metalness 0.3 roughness 0.4 → specular from lights. Good. Eye: SphereGeometry(0.09), black with tiny white? MeshBasicMaterial black + small white dot impossible per mesh; just black glossy (MeshStandardMaterial black, roughness 0.2). Place (len*0.62, hgt*0.25, ±(wid*0.85)). Scaled with fish size (eye radius * size factor). Fish group per fish: mesh (body merged) + 2 eyes. Or merge eyes into geometry with groups & multi-material — complexity; children eyes fine. Boids params per species: maxSpeed 1.2–2.4, size, school flags. Bounds: x ±7.6, z ±3.3, y [1.3, waterTop(9.3)-0.5=8.8]... tank h=10 → water top at 9.2. Fish y max 8.6. Wall avoidance: compute force when within 1.8 of boundary pushing inward proportional. Separation radius 1.2*size; cohesion/alignment radius 3 (schoolers). Cap velocity, add slight vertical bobbing via wander. Food data: array of {mesh, vel, eaten}. Eat check: each food, find nearest fish dist; if <0.55 → eaten=true, fish.hunger boost (speed burst), pellet shrink. Also fish open mouth? Too much. The lunge suffices. Raycast for feeding: on pointerdown (without drag — distinguish click vs orbit drag: record downPos, on up if moved<5px → click). Use ray from camera; intersect plane y=waterTop; if point within tank bounds → spawn food there; else clamp to bounds. Spawn 4-6 pellets scattered. Double-click: raycast intersect glass meshes (array of 4 side planes) → point; scare radius 4.5. Add ripple at food spawn point on surface. Camera: fov 50, pos (14, 8, 20) look at (0,4.5,0). Controls target (0,4.5,0), minDistance 8, maxDistance 40, maxPolarAngle 1.65 (slightly below horizon ok), enableDamping. AutoRotate optional toggle. Extra realism bits: - Heater tube? skip. - Subtle vignette: CSS radial-gradient overlay pointer-events none. - Water meniscus line at top: thin box bright rim? skip. Tank top frame: black plastic rim boxes along top edges and bottom — adds realism. Make 4 thin boxes top (frame) + 4 bottom, dark gray. Also glass thickness visual: draw glass as box walls with some thickness? Use planes; rim hides edges. Let me count draw calls: fish ~25*3, bubbles 1, plants 1, sand 1, rocks ~7, glass 4-5, water 1, rays 5, surface 1, rim 8, stand 1, bg 1, floor 1, food up to 30 small. ~130 draw calls — fine. Now day/night implementation: object lighting presets: ```js const presets = { day: { hemiSky:0xbfd9e8, hemiGround:0x3a4a3a, hemiInt:0.7, dir:0xfff2dd, dirInt:1.1, fog:0x0d2733, bgTop:0x1a3f52, bgBot:0x050d12, caustInt:0.9, rayOp:0.5, water:0x1a4a66 }, night:{ hemiSky:0x24304e, hemiGround:0x0a0d14, hemiInt:0.35, dir:0x6f8fd0, dirInt:0.35, fog:0x060d18, bgTop:0x0a1626, bgBot:0x020409, caustInt:0.35, rayOp:0.18, water:0x0d2438 } }; lerp over 2s with easing, store current values object, tween in animate loop. ``` Water box color uniform, background shader uniforms (uTop,uBot), fog color, etc. FPS counter: simple, update every 0.5s. Fish count display. "Add fish" button: spawn random species fish (cap 40). Now, writing all the code. It'll be long (~900-1100 lines). Let's be careful with correctness. Key risk areas: - import map + module scripts OK. - mergeGeometries import path 'three/addons/utils/BufferGeometryUtils.js' exports mergeGeometries (r160: yes, named export mergeGeometries). - onBeforeCompile with customProgramCacheKey to share programs: set both before first render. - Points bubble shader with fog? skip fog on bubbles. - ShapeGeometry UV: has uv based on shape coords; override with attribute fill. Let me write setUVAttr(geo, u, v): create Float32Array(count*2) filled with (u,v); geo.setAttribute('uv', ...). For merged fish geometry: all parts need same attributes: position, normal, uv. ShapeGeometry has normal (0,0,1) and uv — good. SphereGeometry has all. mergeGeometries(parts) → works if attribute sets match (position/normal/uv each). ShapeGeometry includes uv and normal — yes. Tail normals face +z; material DoubleSide → fine. Pectoral fin transform: create shape tri (0,0)-( -0.35len, -0.25hgt? ) small; rotate: geo.rotateY(±0.7); geo.rotateX? then translate to side. Let me do: fin shape in XY (pointing back-down), then rotateY(+/- 0.6) to angle outward, translate(0.35len, -0.15hgt, ±wid*0.7). After rotateY, z extent appears; translation ±wid*0.7 fine. Dorsal fin shape: start (0.45len, hgt*0.8) curve back to (-0.55len, hgt*0.75) with peak (−0.05len, hgt*1.75). Build with moveTo/lineTo/quadraticCurveTo. For angelfish: peak hgt*2.2 and ventral fin below mirrored. I'll parametrize: spec = {len, hgt, wid, dorsal: 1.0, ventral: 0, tailSize, tex: {...}, size, maxSpeed, school, wag}. Fish texture functions: ```js function fishTexture(draw){ const c=document.createElement('canvas'); c.width=256;c.height=128; const x=c.getContext('2d'); draw(x,256,128); const t=new THREE.CanvasTexture(c); t.colorSpace=THREE.SRGBColorSpace; return t; } ``` Body gradient helper: vertical: top color → mid → belly. Canvas y: 0 top. Texture v=1 top corresponds canvas y=0 (flipY true). Sphere v: 1 at top(+y). Good: draw top of fish at canvas top. Clown draw: fill orange gradient; 3 white bands at x fractions (0.18, 0.5, 0.86) width 14px with black outline; fin column: orange. Note u wraps: fish "length" maps around u; bands vertical on canvas → rings around body → stripes across body — clownfish stripes go around body vertically — correct! Blue tang: blue gradient; black "palette" shape: draw curved black blob; yellow tail: right portion? tail maps to fin column — tail uses uv(0.04,0.5) column → make column yellow for tang, body blue with black mark. But pectoral fins also use column color → yellow pectoral — tangs have yellow pectorals? Their tail is yellow; fine. Yellow tang: all yellow gradient, fin column slightly darker yellow. Angel: silver gradient, 4 black vertical bands, fin column silver-yellow. Tetra: horizontal stripes: top half silver, middle cyan line, bottom red band; fin column translucent white. Now water surface shader: ```glsl varying vec2 vUv; varying vec3 vWorld; uniform float uTime; // normal from waves vec3 n = normalize(vec3( sin(p.x*3.1+t)*0.15 + sin(p.x*7.7 - t*1.7)*0.06, 1.0, cos(p.y*2.7+t*0.8)*0.15 + cos(p.y*6.3+t*1.3)*0.06 )); vec3 V = normalize(cameraPosition - vWorld); float spec = pow(max(dot(reflect(-uLightDir3, n), V),0.0), 60.0); float fres = pow(1.0-max(dot(n,V),0.0),2.0); col = uColor*(0.15+fres*0.3) + vec3(1.0)*spec*0.6; alpha = 0.18 + fres*0.25 + spec*0.4; ``` Transparent, DoubleSide (visible from below too). God ray texture canvas: vertical gradient white→transparent, plus horizontal soft edges (multiply sin(u*π)). Draw: gradient alpha top 0.5→0; horizontal fade via second gradient composite 'destination-in' with linear horizontal gradient 0→1→0. Ray planes: PlaneGeometry(width 2.5–4, height 12), positioned y= waterTop-4, tilted rotateX slight? God rays slant: rotate around Z by 0.25 and face camera-ish: rotateY various; group slowly rotating around center Y; opacity pulse sin(t*0.5+i). Air stones: two small cylinders dark gray at sand, bubble emitters there. Also decorative rock hides. Food pellet color 0x8a5a2a. Ripple: RingGeometry(0.05, 0.5, 32) at waterTop+0.01 rotated flat, additive white, scale up 1→3, fade. Ok also "tap glass" visual: brief circle on glass at tap point (sprite ring) + bubbles. Implement ring on glass plane oriented to that plane's normal — simplify: only allow tap on front glass via raycast to any of 4 walls; orient ring to wall normal. Sound engine: ```js let audioCtx, master, soundOn=false, blipTimer; function initAudio(){ audioCtx = new (window.AudioContext||webkitAudioContext)(); master=audioCtx.createGain(); master.gain.value=0; master.connect(audioCtx.destination); // noise ambient const len=audioCtx.sampleRate*2; const buf=audioCtx.createBuffer(1,len,audioCtx.sampleRate); const d=buf.getChannelData(0); let last=0; for(...){ const w=Math.random()*2-1; last=(last+0.02*w)/1.02; d[i]=last*3.5; } const src=audioCtx.createBufferSource(); src.buffer=buf; src.loop=true; const lp=audioCtx.createBiquadFilter(); lp.type='lowpass'; lp.frequency.value=320; const g=audioCtx.createGain(); g.gain.value=0.5; src.connect(lp).connect(g).connect(master); src.start(); } function blip(){ osc sine f0 300+rand*500 → f*1.8 exp ramp 0.12s; gain 0→0.15→0; connect master; } master.gain.linearRampTo(soundOn?0.25:0) ``` Schedule blips with setInterval-ish random while soundOn. UI styling: glassmorphism dark panel top-left, buttons row bottom center, hint. Google font? Use system fonts to avoid extra deps (fine). Use nice CSS. Loading overlay: black with "Загрузка аквариума…" fade out after first frame. Now careful with performance of O(n²) boids with up to 40 fish + tetra school — trivial. Also make fish avoid food overeating: cap pellets 40. Write the animate loop with clock delta clamped 0.05. Tween for day/night: store `env = {cur:{...numeric colors as THREE.Color...}}` — simpler: keep two presets; on toggle set t0=now, from=currentSnapshot, to=target; each frame k=min(1,(t-t0)/2), eased; apply lerp onto live objects (colors via .lerpColors(fromColor,toColor,k)). Snapshot current colors into "from" at toggle. Implement helper: ```js const envLive = { hemiSky:new Color, hemiGround, dir:Color, fog:Color, bgTop, bgBot, caustColor?, water:Color, hemiInt:{v}, dirInt:{v}, caustInt:{v}, rayOp:{v} }; ``` Numbers wrap as {v} or handle separately. I'll write applyEnv(k, from, to) that lerps each field. from = snapshotEnv() returns {colors cloned, numbers}. Fields: hemi.color, hemi.groundColor, hemi.intensity, dir.color, dir.intensity, scene.fog.color, bgMat uniforms uTop/uBot, sand uniforms uCaustColor? keep caustColor constant light cyan; caustInt uniform; rays material opacity base multiplier (uniform per material? rays share material with uniform uOpacity? separate materials share base opacity variable rayBaseOp used each frame: ray.material.opacity = pulse * envRayOp). water uniform uColor. surface uColor maybe constant. Night extras: maybe stars in bg? skip. Bloom in composer — at night threshold keeps only bright bits. Edge case: OrbitControls dblclick default does nothing — fine, we handle dblclick. But dblclick also triggers two click feeds... Acceptable? Might drop food AND scare. To avoid, debounce: on click, wait 250ms timer; if dblclick occurs, cancel feed. Implement: pointerup click → setTimeout feed unless dblclick fired. I'll implement with timer. Food spawn at surface point (clamped), pellets start at y=waterTop-0.1, sink 0.4/s, sway. Fish eating: choose nearest pellet target per fish every few frames (or compute per pellet nearest fish — pellet count small). Approach: each pellet finds nearest fish; if dist < 0.6 → eaten. Fish steering: each fish targets nearest pellet if any within 12 units; steer strongly, min speed boost. Remove pellets resting on sand after 10s (fade). Fish "gulp" scale burst? skip. Bubble bursts at tap: temporarily increase emitter at tap point: spawn 10 bubbles at point. Bubble system capacity 260; emitters: two airstones continuous + bursts use same pool with position override. Alright — also small detail: fish occasionally produce bubble from mouth? cute: random fish emits 1 bubble at head position every few seconds. Easy with pool. Let me also handle window resize. Plants positions: clusters at back corners and mid-back, avoiding center-front for clear view. ~5 clusters × 7 blades. Rocks: 6 rocks scattered, scale 0.8–1.8, sunk into sand. Sand plane sized to inner tank (17.6 × 8.6) at y=0.5 base, displacement ±0.22, plus rim? Sand should reach glass edges. Water box inner (17.9, 9.0, 8.9) center y ~ 0.5+4.5. waterTop = 9.4. Tank outer h=10. Glass planes: front/back (w×h) at z=±d/2, left/right (d×h) at x=±w/2. y center h/2=5. Material single shared fresnel. depthWrite false, transparent. renderOrder maybe 5. Rims: top frame: 4 boxes (w+0.3, 0.35, 0.35) at y=h, along edges; bottom similar at y=0.15. Color 0x14181c roughness 0.7. Also corner posts? skip. Stand: box (w+1.2, 4.2, d+1.2) top at y=0 → position y=-2.1+0? Let stand top y=-0.05, so center y=-2.15, height 4.2. Wood texture canvas: base #3a2a1c streaks. Add slight sheen roughness 0.6. Floor: CircleGeometry(90) y=-4.25? stand bottom at -4.25... place floor y=-4.3, color #05070a, receive nothing. Fog blends. Background sphere r=150. Light: dir from (6, 18, 8) intensity 1.1; hemi 0.7. Point light inside top water (0, waterTop+0.5, 0) color cyan 0.6 intensity 20 distance 30 decay 2 → gives water glow on fish tops? dir light enough. Add subtle point for night moon. Keep: dir + hemi + ambient small. Actually with MeshStandard fish + Lambert plants + custom sand, dir+hemi fine. One more: subtle caustics also on rocks? They use Lambert; skip. Fish wag uniform naming: uWag (frequency), uAmp maybe. Update per frame: fish.userData.shader?.uniforms.uWag.value = 5 + speed*2.5; uTime shared global uniform object? If materials cloned per fish with onBeforeCompile capturing per-fish uniform objects — set shader.uniforms.uTime = globalTimeUniform (shared {value}) — assign inside onBeforeCompile: shader.uniforms.uTime = uTimeGlobal; shader.uniforms.uPhase = {value: phase}; shader.uniforms.uWag = fishWagObj (per fish {value}). Store fishWagObj on fish. For program sharing: customProgramCacheKey = () => 'fishMat' — but different maps don't affect program. Good. Plants: single material, onBeforeCompile assign shared uTime. cacheKey 'plant'. Water surface/box/glass/sand/rays — custom ShaderMaterials straightforward. Potential pitfall: ShaderMaterial with fog manual — sand: implement exp2 fog: ```glsl uniform vec3 uFogColor; uniform float uFogDensity; varying float vDepth; // in vertex: vDepth = -mvPosition.z; float f = 1.0 - exp(-uFogDensity*uFogDensity*vDepth*vDepth); // exp2: factor = exp(-d²·density²)... gl_FragColor.rgb = mix(col, uFogColor, clamp(fogFactor,0.,1.)); ``` three fog exp2: factor = 1 - exp(-density² * depth²)? Actually THREE FogExp2: fogFactor = 1 - exp( - fogDensity² * fogDepth² )? In shader chunk: `float fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth );`. Yes. I'll replicate. Water box shader: vertical gradient alpha; also apply slight wave shimmer? Keep static gradient, alpha 0.22 at bottom to 0.1 top, tint color uniform (env-driven). Blending normal, depthWrite false, side BackSide, fog no. Also inner glow at top (light entering): add at top edge brighter — gradient includes. Surface ripple rings pool: 8 rings. Now the raycaster for dblclick glass: glassMeshes array; intersect; point → scare(point); spawn tapRing oriented: ring mesh lookAt along normal: mesh.position.copy(point).add(normal*0.05); mesh.lookAt(point.clone().add(normal)); ring faces +z by default (RingGeometry in XY) → lookAt aligns +z to normal-ish. ok. Scare: for each fish d<5: vel += (fish.pos - point).normalize() * (5*(1-d/5)+2); wag burst: wagObj.value boosted temporarily (decays back in update toward base). Fish update target wag: baseWag + speed*2.2 + burst; burst *= exp(-dt*3). Now food click handler with click-vs-dblclick: ```js let clickTimer=null; renderer.domElement.addEventListener('pointerup', e=>{ if(dragged) return; if(clickTimer){clearTimeout(clickTimer);clickTimer=null; return;} clickTimer=setTimeout(()=>{feed(e);clickTimer=null;},260); }); domElement.addEventListener('dblclick', e=>{ if(clickTimer){clearTimeout(clickTimer);clickTimer=null;} tapGlass(e); }); ``` dragged detection: pointerdown store xy; pointerup compare >6px → dragged. Feed also via button: feeds at random surface point. Add fish button: createFish(randomSpecies, position center top) with fade-in scale. Fish count cap 40, tetras count as fish. Initial population: 3 clown, 2 tang, 2 yellow, 3 angel, 12 tetra = 22. Now species definitions with colors: ```js const SPECIES = { clown: { size:0.85, len:1.5, hgt:0.62, wid:0.34, maxSpeed:2.0, minSpeed:0.5, school:false, tex: drawClown }, tang: { size:1.05, len:1.6, hgt:0.85, wid:0.3, maxSpeed:2.6, ... tex: drawTang }, yellow: { size:0.95, len:1.5, hgt:0.7, wid:0.3, maxSpeed:2.4, tex: drawYellow }, angel: { size:1.15, len:1.2, hgt:1.05, wid:0.26, maxSpeed:1.6, tall:true, tex: drawAngel }, tetra: { size:0.42, len:1.5, hgt:0.55, wid:0.3, maxSpeed:3.0, minSpeed:1.2, school:true, tex: drawTetra, emissive: 0x225566 } }; ``` Fish world size: geometry already sized by len/hgt/wid; fish.scale.setScalar(spec.size). Eyes scaled by size via being children with own size relative... eye radius 0.11 in local units (before fish scale) — geometry units where body len ~1.5 total; eye r 0.09*? set 0.085. Wait — body sphere radius 1 scaled (len? ) Actually body sphere radius 1 → scale(spec.len*0.5?) Let's define: sphere scaled to (len/2? ) simpler: body scale x = spec.len*0.55, y=spec.hgt*0.5, z=spec.wid*0.5 → body length ≈ 1.1*len, with tail total ≈ 1.6*len. For len 1.5 → fish ~2.4 units long before size factor. Tank width 18 → good proportion. Eyes at x = 0.55*len*0.62 ≈ 0.51 for len 1.5. y = hgt*0.18, z = ±(wid*0.5*0.82). Tail shape coordinates as function of len/hgt: root at x=-0.5*len*0.55*... hmm root at body back x=-0.55len*0.95; tip -0.55len - 0.5len. Let me define bx = spec.len*0.55 (half-length). Body from -bx..bx. Tail root at -bx*0.9, tail tip at -bx - 0.75*hgt... tail length ~ hgt*1.1. Fine-tune visually reasonable; can't test, keep numbers sane. Let me define precisely in code with bx=spec.len*0.55, by=spec.hgt*0.5, bz=spec.wid*0.5. Tail shape (in XY, vertical fin): ```js s.moveTo(-bx*0.85, 0); s.quadraticCurveTo(-bx - by*0.9, by*1.05, -bx - by*1.35, by*1.15); // upper edge out s.quadraticCurveTo(-bx - by*0.95, 0, -bx - by*1.35, -by*1.15); // concave middle to lower tip s.quadraticCurveTo(-bx - by*0.9, -by*1.05, -bx*0.85, 0); // back to root ``` Forked tail-ish. Good. Dorsal: ```js s.moveTo(bx*0.55, by*0.75); s.quadraticCurveTo(bx*0.15, by*(1.9*dorsalMul), -bx*0.25, by*0.95); s.quadraticCurveTo(-bx*0.6, by*0.8, -bx*0.75, by*0.6); s.lineTo(bx*0.55, by*0.75)? close via lineTo start. ``` Rough triangle fin along top. It sits slightly above body — overlapping body edge ok. Ventral (angel): mirror below from x 0..-bx*0.9, tip down by*2.0. Pectoral: shape small: (0,0)→(-bx*0.4, -by*0.5)→(-bx*0.05,-by*0.45) close; rotateY(∓0.8) for right/left so it angles out, translate (bx*0.35, -by*0.35, ±bz*0.75). UVs for all fins → column (0.04, 0.55). Body keeps sphere uv. Note: SphereGeometry rotated? Sphere poles at ±y — uv v vertical — stripes vertical on canvas become rings around y-axis → bands around the fish body (cross-section rings) — that's what we want for clown/angel. Tang palette mark: blobby region — draw on canvas around (u 0.55..0.95?, v mid) — appears somewhere around body — fine wherever. Eye positions relative to sphere seam unknown → but eyes at ±z sides near head (+x). Sphere seam at...? The stripe phase doesn't matter since stripes uniform rings. Tetra horizontal stripes: canvas horizontal bands → v bands → along body length variation? v is latitude (top-bottom) → horizontal canvas bands = top-to-bottom color changes — tetra: top silver, mid cyan line, bottom red → horizontal bands on canvas ✔. Tang black palette: draw as spline blob upper-middle; will wrap as ring-ish upper band — acceptable stylization. Now plants blade geometry: PlaneGeometry(w, h, 1, 5) translate(0, h/2, 0), then apply slight curve: bend x progressively: for each vertex, x += (y/h)² * lean. Then random rotateY, translate to cluster pos. Vertex colors: base rgb(0.05,0.18,0.06) → tip (0.15,0.45,0.12) with random hue shift per blade. Merge all blades: need position/normal/color attributes; PlaneGeometry has uv too; mergeGeometries requires same attributes — keep uv on all (present) plus color added to each. OK: attributes position, normal, uv, color on every blade → merge fine. Lambert with vertexColors true. Rocks: IcosahedronGeometry(r, 1), jitter vertices: p *= 1 + (noise-0.5)*0.35 using pseudo-random per vertex consistent via sin hash. computeVertexNormals? Icosahedron non-indexed? It's indexed; jitter then computeVertexNormals → flat-ish shading: use flatShading true. Color per rock slight variance gray-brown. Lambert. Air stone: CylinderGeometry(0.18,0.22,0.5,12) gray porous — place at two spots. Now counts: bubbles pool 240. Bubble material: PointsMaterial with map bubbleTex, size 0.35, transparent, depthWrite false, blending Normal? Additive makes them glow-ish; normal with white ring texture looks better. Use sizeAttenuation true. Per-bubble size: PointsMaterial lacks per-point size → custom shader: ```glsl attribute float aSize; varying float vA; void main(){ vec4 mv = modelViewMatrix*vec4(position,1.); gl_PointSize = aSize * (240.0 / -mv.z); gl_Position = projectionMatrix*mv; } frag: uniform sampler2D map; void main(){ vec4 c = texture2D(map, gl_PointCoord); gl_FragColor = vec4(c.rgb, c.a*0.85); } ``` transparent, depthWrite false. Bubble texture canvas 64: radial: outer ring bright, inner faint highlight: draw circle stroke gradient + small highlight arc. Motes: Points 180, shader similar tiny size fixed 1.5px, opacity 0.3 additive, slow drift via CPU or shader time displacement: do CPU update cheap: pos += vel*dt, wrap. Actually motes can be shader-animated: position base + sin offsets in vertex using aPhase — no CPU. Do that. Fish eye material: MeshStandardMaterial({color:0x0a0a0a, roughness:0.25, metalness:0.0}) shared. Fish forward +x; initial random vel. Also idle "breathing" bob handled by wag shader small y. Feeding frenzy: when food present, fish maxSpeed temporarily *1.6. Ok, UI text in Russian: Panel: ``` 🐠 Аквариум Рыб: • FPS: Подсказка: клик по воде — кормёжка; двойной клик — постучать по стеклу; колесо — зум; перетаскивание — обзор. ``` Buttons: 🍤 Покормить | 🌙 Ночь | 🎥 Автообзор | 🔊 Звук | 🐟 + Рыбка Style: fixed panels, blur backdrop, rounded, subtle borders, responsive bottom bar. Loading overlay with CSS animation (bubbles emoji or CSS wave) fade out. Now — assemble entire HTML. Watch out: code inside ` ``` Renderer appended to body; CSS canvas fixed full. Detailed fish species textures: drawClown(x,w,h): ```js const g = x.createLinearGradient(0,0,0,h); g.addColorStop(0,'#ff9a3c'); g.addColorStop(0.5,'#ff7f11'); g.addColorStop(1,'#ffd9a0'); fillRect body area from X=20..256 (fin column 0..20 separate) fin column: gradient orange dark. stripes: bands at cx=[0.16,0.47,0.80] of body region: draw black band then white inner band: widths 26/18 px, vertical full height slightly angled? vertical fine. ``` Wait stripes vertical on canvas = rings around body ✔ (bands at head (near gills), mid, tail — clown has 3 white bars ✔). drawTang: ```js body gradient: '#1b3fae'→'#2e63e7'→'#7fa8ff' belly? Real tang: blue with black palette, yellow tail. fin column: yellow (#ffd23c) — tail + pectoral. palette: black thick curve from top-mid to bottom: draw bezier band. belly slightly lighter. ``` drawYellow: gradient '#e8b400'→'#ffd93c'→'#fff0a8'; fin col '#f0c020'. drawAngel: gradient silver '#c9d2d8'→'#e8eef2'→'#f8f4e0'; 4 black vertical bands widths 16 at 0.2,0.42,0.62,0.84; fin column '#e8d9a0'. Eye band: first band through eye position — wherever. drawTetra: top: '#b9c4cc'; line cyan '#39f0ff' at v 0.45 height 8px glow; below red '#e33' from 0.55→bottom. fin col 'rgba(255,255,255,0.6)'. Emissive for tetra material: emissive 0x4488aa, emissiveIntensity 0.35 — but emissive applies whole body with map? emissive adds flat color — with emissiveMap same texture could tint... skip emissiveMap; small emissive fine glow for bloom. Alright — also each fish gets slight color variation via material.color multiplier (white default; set slight hsl offsets for variety within species): mat.color.setHSL(0,0, 0.85+rand*0.3)?? That multiplies map. subtle: 0.9–1.05. Now writing out everything. Also FPS meter: frames counted; update span. Potential subtle bug: onBeforeCompile assigned uniforms must exist in shader code — I inject declarations; ensure uTime etc used so not optimized out (used → fine). For fish material clones: create base material per fish: ```js const mat = new THREE.MeshStandardMaterial({ map: spec.tex, roughness:0.55, metalness:0.25 }); mat.customProgramCacheKey = ()=>'fishWag'; mat.onBeforeCompile = (sh)=>{ sh.uniforms.uTime = TIME; sh.uniforms.uPhase={value:fish.phase}; sh.uniforms.uWag = fish.wagU; sh.vertexShader = sh.vertexShader.replace('#include ', `#include \nuniform float uTime;uniform float uPhase;uniform float uWag;`).replace('#include ', wiggleChunk); }; ``` TIME = {value:0} global. wiggleChunk: ```glsl #include float bendAmt = smoothstep(0.8, -1.4, position.x); float wob = sin(uTime*uWag + uPhase + position.x*1.6); transformed.z += wob * 0.16 * bendAmt; transformed.z += sin(uTime*uWag*0.5 + uPhase) * 0.015; ``` Note geometry x range: body bx≈0.8 for clown(len1.5→bx=0.82); tail to ≈ -1.5. smoothstep(0.8,-1.4,x): 0 at head 0.8, 1 at -1.4 ✔. For tetra len 1.5 same geometry scale (then fish.scale 0.42) ✔ since wiggle in local space. But bendAmt smoothstep edges fixed values assume len≈1.5 for all — angel len 1.2 (bx 0.66, tail -1.2): smoothstep(0.8,-1.4) at head 0.66 → ~0.04 fine; tail -1.2 → 0.87 ok. Normals: wiggle displaces z but normals unchanged — minor shading artifact, acceptable. Plant chunk: ```glsl #include float ph = position.x*2.3 + position.z*3.1; float hh = clamp((position.y - 0.4)/3.2, 0.0, 1.5); transformed.x += sin(uTime*1.2 + ph) * 0.28 * hh*hh; transformed.z += cos(uTime*0.9 + ph*1.4) * 0.2 * hh*hh; ``` Now sand shader full: ```glsl // vertex varying vec2 vUv; varying vec3 vNormal; varying float vDepth; void main(){ vUv=uv; vNormal = normalize(normalMatrix*normal); vec4 mv=modelViewMatrix*vec4(position,1.); vDepth=-mv.z; gl_Position=projectionMatrix*mv; } // fragment uniform sampler2D uMap; uniform float uTime; uniform vec3 uLightDir; uniform vec3 uLightColor; uniform vec3 uAmbient; uniform vec3 uCausticColor; uniform float uCausticIntensity; uniform vec3 uFogColor; uniform float uFogDensity; float caustic(vec2 uv, float t){...} void main(){ vec3 sand = texture2D(uMap, vUv*vec2(4.0,2.0)).rgb; vec3 N = normalize(vNormal); // view space vs light world... mixing spaces; simpler compute lighting in world: pass world normal. ``` Let me pass world normal & use world light dir: varying vec3 vNormalW = mat3(modelMatrix)*normal (model matrix identity-ish — sand at scene root, rotation baked into geometry via rotateX → geometry normals already world). Actually I rotate geometry itself (rotateX), so normal attribute is world-space; modelMatrix identity. So vNormalW = normal. Good — pass attribute directly. frag: ```glsl float ndl = max(dot(normalize(vNormalW), normalize(uLightDir)), 0.0); vec3 col = sand * (uAmbient + uLightColor*ndl); float c1 = caustic(vUv*vec2(6.0,3.0), uTime*0.6); col += uCausticColor * c1 * uCausticIntensity * (0.25+0.75*ndl); float fogF = 1.0 - exp(-uFogDensity*uFogDensity*vDepth*vDepth); col = mix(col, uFogColor, clamp(fogF,0.0,1.0)); gl_FragColor = vec4(col, 1.0); ``` Sand opaque ✔. God rays ignore fog (small depth anyway). Surface shader fog? At distance might fog; include simple fade? skip. Let me also ensure tone mapping with custom ShaderMaterials: they output linear? With ACES tonemap + sRGB output, custom shaders get tonemapped/encoded automatically? For ShaderMaterial, three injects tonemapping/encoding chunks only if you include them (`#include ` and ``). Without them, colors will look off vs standard materials when using composer+OutputPass (OutputPass does tonemap+sRGB at end for everything). With EffectComposer + OutputPass: render targets are linear; OutputPass applies tone mapping & sRGB conversion in final — so all materials should NOT do their own tonemapping/encoding; renderer.toneMapping should be NoToneMapping? Actually with composer, standard materials render into float? composer target is UnsignedByte by default → banding; set frameBufferType HalfFloat for bloom quality: new EffectComposer(renderer, new THREE.WebGLRenderTarget(w,h,{type:THREE.HalfFloatType})). And renderer.toneMapping = THREE.NoToneMapping? Hmm: When rendering to render target, three disables tone mapping & output color space conversions for built-in materials automatically (they check render target null). Yes: tone mapping applied only when rendering to screen (null target). With composer, scene renders to RT → no tonemapping inline; OutputPass then applies renderer.toneMapping settings. So set renderer.toneMapping = ACESFilmic and OutputPass reads it. Custom ShaderMaterials output linear values → fine, OutputPass converts. Canvas textures need colorSpace SRGB so they're converted to linear on sample ✔ (set on textures). So custom shader colors: specify in linear-ish; approximate fine. Bloom threshold on half-float HDR — threshold 0.8 fine. Sand: output linear color — sand texture sRGB→linear via texture decode ✔. Bubble texture: CanvasTexture SRGB. OK. Water surface spec with fixed light dir uniform. Let me now also implement ripple rings pool & tap rings: ```js const ripples = []; function spawnRipple(x,z){ const r = ripplePool.find(r=>!r.active); if(!r) return; r.active=true; r.t=0; r.mesh.position.set(x, waterTop+0.02, z); r.mesh.visible=true; } update: r.t+=dt; const k=r.t/1.2; if(k>=1){active=false;visible=false;} else { scale.setScalar(0.3+k*2.8); opacity=(1-k)*0.5; } ``` Mesh: RingGeometry(0.45,0.55,48) rotateX(-π/2), MeshBasicMaterial({color:0xbfe8ff, transparent:true, blending:Additive, depthWrite:false}). Tap ring similar but oriented vertical at glass. Now food pellets: geometry sphere 0.07; material brownish standard. Update: y -= 0.45*dt (slow), x += sin(t*2+seed)*0.1*dt; if y < sandHeightAt? just y<0.95 → rest; restTimer → remove after 12s fade scale. Eat: for each pellet not eaten: nearest fish d<0.7 → eaten: pellet.eaten=true; fish.burst+=2; score? remove after shrink. Fish mouth position ≈ pos + forward*0.8*size — use fish.pos offset by vel dir*0.7*size for eating distance. Fish feeding steering: if pellet exists: target nearest; acc += dirToPellet*3.0 (strong), and when within 1.2 → slow (arrive). Also y clamp. Cap pellets 25; each click spawns 5. Now sound blips scheduled: in animate, if soundOn && t>nextBlip { blip(); nextBlip = t + 0.3+rand*1.2; } Write blip(): ```js function blip(){ if(!actx) return; const o=actx.createOscillator(), g=actx.createGain(); const f=250+Math.random()*550; o.frequency.setValueAtTime(f, actx.currentTime); o.frequency.exponentialRampToValueAtTime(f*2.2, actx.currentTime+0.14); g.gain.setValueAtTime(0.0001, actx.currentTime); g.gain.exponentialRampToValueAtTime(0.12, actx.currentTime+0.02); g.gain.exponentialRampToValueAtTime(0.0001, actx.currentTime+0.18); o.connect(g).connect(master); o.start(); o.stop(actx.currentTime+0.2); } ``` Toggle: master.gain ramp 0↔0.5; init once. Now intro camera animation: ```js let intro = {t:0, dur:2.5, from:new Vector3(30,16,40), to:new Vector3(15.5,8.5,21.5)}; in animate: if(intro.t<1){ intro.t+=dt/dur; k=easeOutCubic; camera.position.lerpVectors(from,to,k); controls.enabled = intro.t>=1 || userInteracted; } controls 'start' event → intro.t=1. ``` Loading overlay fade after first rendered frame (requestAnimationFrame once). Edge: OrbitControls import path correct. Fish initial positions random in bounds; vel random dir*speed. Also slight fish size randomness per individual: scale *= 0.85+rand*0.3. Fish count text update. Extra feature — "cleanup" not needed. Also mouse move parallax? skip, orbit enough. Double-check bloom import OutputPass exists in r160 ✔ (added r152+). UnrealBloomPass constructor (resolution Vector2, strength, radius, threshold). Composer setSize on resize; bloomPass.setSize too via composer? composer.setSize handles passes. Also set renderer.setPixelRatio(Math.min(devicePixelRatio,2)); composer.setPixelRatio same. Water surface plane at waterTop may z-fight with water box top face — box top at 9.2 equals surface → offset surface 9.18 and box height slightly less top (box spans 0.35..9.15). Set water box center y=4.75 height 8.8 → 0.35..9.15. Surface 9.18. Glass extends to 10. Rim at top 9.85..10.15 box centered y=10 height 0.3 → covers gap above water ✔. Front glass: plane(18,10) at z=4.5; back z=-4.5; left/right rotated y 90°, plane(9,10) at x=±9. Rim boxes: top: two (18.6,0.35,0.5) at z=±4.5,y=9.95; two (0.5,0.35,9.6) at x=±9. Hmm corner overlaps fine. Bottom rims same at y=0.18. Stand: (19.4, 4.0, 10.2) center y=-2.03. Top of stand y=-0.03 slightly below tank bottom 0 ✔. Floor y=-4.1. Dir light position (7,20,9), target (0,4,0). Hemi: sky color presets. Extra point light? Add PointLight cyan (0x66ccff, 18, distance 40, decay 2) at (0, 12, 0) for top water glow — actually dir+hemi suffice; skip to save perf? One point adds nice central glow on sand... sand is custom shader ignoring point lights. Fish would get it subtly. Skip. Camera near 0.1 far 400. Let me now write final code mentally-checked, then output. Fish orientation basis: ```js const _x=new THREE.Vector3(),_y=new THREE.Vector3(),_z=new THREE.Vector3(),_m=new THREE.Matrix4(),_q=new THREE.Quaternion(), _up=new THREE.Vector3(0,1,0), _bq=new THREE.Quaternion(), _xAxis=new THREE.Vector3(1,0,0); _x.copy(f.vel).normalize(); if(Math.abs(_x.y)>0.95) _up.set(1,0,0); // avoid degenerate _z.crossVectors(_x,_up).normalize(); // careful order: z = x × up gives... x=(1,0,0),up=(0,1,0): x×up=(0,0,1)? (1,0,0)×(0,1,0) = (0*0-0*1, 0*0-1*0, 1*1-0*0) = (0,0,1). For fish facing +x with up +y, z should be... body z lateral; ok sign whatever. _y.crossVectors(_z,_x).normalize(); _m.makeBasis(_x,_y,_z); _q.setFromRotationMatrix(_m); // banking const lat = f.acc.dot(_z); // lateral accel const bank = THREE.MathUtils.clamp(-lat*0.25, -0.6, 0.6); _bq.setFromAxisAngle(_xAxis, bank); _q.multiply(_bq); f.group.quaternion.slerp(_q, 1-Math.exp(-dt*5)); ``` Store f.acc for banking. Wander target occasionally includes following another species? skip. Avoid fish flipping upside down from setFromUnitVectors — basis method keeps up ✔. Bounds force: ```js function boundsAcc(p, a){ const m=1.6, k=2.5; if(p.x> BX-m) a.x -= (p.x-(BX-m))/m*k; ... etc for all six } ``` BX=7.9, BY0=1.4, BY1=8.5, BZ=3.6. Hard clamp after integrate: if outside [BX+0.4] clamp pos & reflect vel component. Boids neighbor loop with fishes array up to 40 → 1600 checks/frame fine. Tetra schooling strong: cohesion 0.6 align 0.9; others school flag false but still mild grouping same species? clown mild 0.15. Species-level params: schoolW. Food attraction overrides wander when pellets exist: acc toward target *2.5. Pellet "eaten" sets shrink animation; on scale<0.02 remove from scene/array; fish.foodTarget=null there. Also when pellet eaten, fish.small jump: f.burst += 3. Add "foodTarget" search throttle: f.retarget -= dt; if(f.retarget<=0){ f.retarget=0.25+rand*0.2; f.foodTarget=nearestPellet(f.pos); } nearestPellet returns null if none within 15. Ok, also fish vertical bob when idle: wander target y covers it. Bubbles emitters: array of Vector3; each frame spawn rate: accumulate spawnAcc += dt*22; while(spawnAcc>1){ spawnAcc--; spawnBubble(randomEmitter + jitter) } until pool capacity; also ambient slow rise. Bubble object pool with attributes arrays: positions Float32Array(N*3), sizes, plus JS arrays speeds/phases/active. Update loop over N, if active update else keep y=-999. Simpler: fixed N=220 always active, respawn at bottom when reaching top — continuous stream, bursts just relocate some bubbles to burst point. Do that. Motes: N=160; shader-based drift: vertex: pos + vec3(sin(t*0.3+phase)*1.2, sin(t*0.2+phase*1.3)*0.6, cos(t*0.25+phase)*1.0) — attribute aPhase; uniform uTime. gl_PointSize=2.2*(180/-z). opacity 0.28 additive. Sand noise function for displacement: ```js function snoise(x,z){ return Math.sin(x*0.9)*Math.cos(z*1.1)*0.5 + Math.sin(x*2.3+1.7)*Math.sin(z*1.9+0.6)*0.3 + Math.sin((x+z)*3.7)*0.15; } ``` Also raise sand near rocks/plants? skip. Wood texture: ```js canvas 256; base '#4a3524'; for 60 streaks: y random, alpha 0.15 dark/light horizontal lines with waviness; frame edges darker. ``` Stand front could have door lines: draw two vertical rectangles darker → cabinet doors. Cute detail: yes draw on texture used for all sides (doors appear each side, fine) or only front via multi-material... keep single texture. Bg: also add faint light spot behind tank: in bg shader add glow = exp(-pow(acos?)) skip — gradient enough. Night preset values tuned darker. UI styling — modern glassmorphism: ```css .panel{ position:fixed; backdrop-filter: blur(12px); background:rgba(10,25,35,.45); border:1px solid rgba(120,200,255,.18); border-radius:14px; color:#dff2ff; } ``` Buttons bottom center: pill style, hover glow, active state. Hint bottom-left small. Title top-left with fish emoji and subtitle. FPS + fish count top-right panel. Loading overlay: centered pulsing "🐠" + text; transition opacity. Ensure canvas behind UI: renderer.domElement position fixed inset 0, z-index 0; UI z 10. Prevent context menu on canvas? not needed. Touch support: pointer events cover touch; orbit controls handle touch; dblclick via dblclick event (mobile double-tap fires? often yes). Fine. Now count code length ~ let me just write it. I'll be thorough but efficient. Use comments in Russian/English mix (Russian comments nice for user). One more check — ShapeGeometry merge with sphere: both indexed? ShapeGeometry indexed yes; mergeGeometries handles indexed if all indexed ✔. setUV for shape geoms before merge: shape uv attribute exists → overwrite with constant fin uv. Pectoral fin: after building shape, apply matrix: geo.rotateY(±0.9) then translate. Since rotateY about origin at fin root — fin root at (0,0) shape start near body attach point then translate to attach. Build fin shape with root at origin extending -x, slightly -y: ```js s.moveTo(0,0); s.quadraticCurveTo(-bx*0.35, -by*0.15, -bx*0.5, -by*0.75); s.quadraticCurveTo(-bx*0.18,-by*0.55, 0,0); geo.rotateY(side>0? -0.85 : 0.85); geo.translate(bx*0.30, -by*0.25, side*(bz*0.72)); ``` Rotate sign: to swing fin outward +z for side +, rotateY(-0.85)? rotateY positive rotates +x→ -z? Rotation about Y by θ: x' = x cosθ + z sinθ... point (-1,0,0) under rotY(+0.85): x'=-cos0.85≈-0.66, z' = +sin? formula: for rotY, z' = -x sinθ + z cosθ → z' = -(-1)(0.75)=+0.75 → fin tip moves +z: outward for +side with +0.85 ✔. So side +1 → rotateY(0.85), side -1 → rotateY(-0.85). Also fins DoubleSide via material side. Angel ventral fin: shape mirror of dorsal downward, longer trailing: ```js s.moveTo(bx*0.25, -by*0.8); s.quadraticCurveTo(-bx*0.2, -by*2.4, -bx*0.85, -by*0.9); s.lineTo(-bx*0.5,-by*0.7); close. ``` Enable when spec.tall. Angelfish dorsal bigger: dorsalMul 1.8 vs 1.0. Also anal fin for others small? skip. Now fish tail "caudal peduncle" narrowing — sphere body enough. I think we're ready to write final output. Length is big but justified ("покажи всё на что ты способен, не ленись"). Also day/night button label toggles ☀️/🌙. Auto-rotate button toggles active class. Let me write env presets and apply function: ```js const ENV = { day: { hemiSky:0x9fd4e8, hemiGround:0x51624a, hemiInt:0.75, dirColor:0xfff1d6, dirInt:1.15, fog:0x0e2a38, bgTop:0x2a5a74, bgBot:0x07131c, water:0x2d6e8f, waterDeep:0x0f3348, caust:1.0, rays:0.5, ambient:0.35, lightColor:0xffe9c4 }, night:{ hemiSky:0x2c3a5e, hemiGround:0x10141c, hemiInt:0.4, dirColor:0x7e9ade, dirInt:0.4, fog:0x081120, bgTop:0x122238, bgBot:0x03060c, water:0x173650, waterDeep:0x081a2c, caust:0.4, rays:0.16, ambient:0.2, lightColor:0x9db8e8 } }; ``` Transition manager: ```js let envFrom = snapshot(ENV.day), envTo = ENV.day, envK = 1, cur = 'day'; function toggleEnv(){ cur = cur==='day'?'night':'day'; envFrom = readCurrent(); envTo = ENV[cur]; envK=0; } in loop: if(envK<1){ envK=min(1, envK+dt/2.2); applyEnv(mix) } applyEnv(k): lerp each: hemi.color.lerpColors(cA,cB,k)... numbers lerp. ``` readCurrent returns snapshot object with colors cloned + numbers. Simplify: keep a persistent "live" set of objects (colors already live on lights/uniforms) → readCurrent clones from them. Colors lists: [hemi.color, hemi.groundColor, dir.color, scene.fog.color, bgTop U, bgBot U, waterU, waterDeepU, fogSandU(=same fog color — bind sand uFogColor to follow scene.fog.color by copying each frame? simpler: sand uFogColor.value.copy(scene.fog.color) every frame; also uFogDensity constant)]. Numbers: hemi.intensity, dir.intensity, caustU.value, rayMul (JS var), sand uAmbient, sand uLightColor (color). To keep code manageable, define mapping array: ```js const envBindings = [ {get:()=>hemi.color, k:'hemiSky', col:true}, {get:()=>hemi.groundColor, k:'hemiGround', col:true}, {get:()=>dirLight.color, k:'dirColor', col:true}, {get:()=>scene.fog.color, k:'fog', col:true}, {get:()=>bgU.uTop.value, k:'bgTop', col:true}, {get:()=>bgU.uBot.value, k:'bgBot', col:true}, {get:()=>waterU.uColor.value, k:'water', col:true}, {get:()=>waterU.uDeep.value, k:'waterDeep', col:true}, {get:()=>sandU.uLightColor.value, k:'lightColor', col:true}, {set:(o,v)=>o.hemi.intensity=v, k:'hemiInt'}, ... ]; ``` Might overcomplicate; instead write explicit applyEnv(e, k) with ~14 lines lerping. And snapshotEnv() capturing current into plain object of same shape (colors as new Color). And initial env = apply day at k=1. Fine. Sand ambient number and caust number, rayMul number, hemiInt, dirInt. Also bloom strength: day 0.5 night 0.35 — add to lerp numbers. Alright, finally write everything. Also make sure `scene.fog = new THREE.FogExp2(0x0e2a38, 0.011)` and sand uses same density 0.011. Bubble Points frustumCulled = false (positions move). Motes too. Rocks Lambert receive standard lighting ✔. Plants Lambert + vertexColors ✔ fog applies (Lambert has fog by default ✔). Fish standard fog ✔. Water box ShaderMaterial no fog (encloses camera sometimes? camera outside; fine). Glass no fog (thin). Ray planes additive over water — they'll render through glass — renderOrder: rays 3, water box 4? Water box should tint rays behind? rays inside water... Set: waterBox.renderOrder=2, rays 3, bubbles 4, glass 5, surface 6, ripples 7. Transparent sort within same order by distance. OK. Fish food etc opaque standard. Let me make sure transparent glass doesn't hide bubbles due to depth: bubbles depthWrite false ✔ glass depthWrite false ✔ sorting by renderOrder then distance — with renderOrder set explicitly, order deterministic: bubbles drawn before glass → glass blends over ✔. Surface drawn after glass — surface visible through top glass region ✔. Loading overlay removal: after 2 frames. Now writing HTML/CSS/JS completely. I'll produce the final answer now. Also add small easter egg: pressing 'B' spawns bubble burst? skip. One more feature to impress: fish names on hover? Raycast fish → tooltip with species name — nice interactive detail, cheap. Add: on pointermove throttle 100ms raycast fish meshes; show floating label (div) with Russian species name; cursor pointer. Implement with array of fish meshes. Raycast against ~40 meshes each 100ms fine. Add it! Species Russian names: Клоун «Немо», Синий хирург «Дори», Жёлтая рыба, Скалярия, Неон. Species label mapping: clown:'Клоун', tang:'Синий хирург', yellow:'Жёлтый зебрасом', angel:'Скалярия', tetra:'Неон'. Tooltip div absolute positioned at event clientX/Y. Ok writing now. Also guard: renderer context creation inside try with error overlay message. For crispness set toneMappingExposure 1.15. Final check of GLSL caustic loop types (use float(n+1)) ✔. In vertex injections ensure no redefinition conflicts: 'uniform float uTime' added after where uTime not defined ✔. Write code. Also handle prefers-reduced-motion? skip. Size estimate ~950 lines. Go. For the bubbles texture: ```js function bubbleTexture(){ c 64; g; const grd=g.createRadialGradient(32,32,20,32,32,30); grd.addColorStop(0,'rgba(255,255,255,0)'); grd.addColorStop(0.85,'rgba(200,230,255,0.25)'); grd.addColorStop(1,'rgba(230,245,255,0.9)'); g.fillStyle=grd; circle fill; highlight: white arc small at (22,22) r6 alpha .8; } ``` Motes texture: plain soft dot. Godray texture as described. Fish material envMapIntensity n/a. Also add slight clearcoat? Standard material fine. renderer.shadowMap disabled default ✔. Time to write the final answer file. I'll be careful with brackets and syntax since it's long. Let me draft key tricky snippets precisely. Sand caustic GLSL: ```glsl float caustic(vec2 uv, float t){ vec2 p = mod(uv*6.28318530718, 6.28318530718) - 250.0; vec2 i = p; float c = 1.0; float inten = 0.005; for (int n = 0; n < 4; n++) { float tt = t * (1.0 - (3.5 / float(n+1))); i = p + vec2(cos(tt - i.x) + sin(tt + i.y), sin(tt - i.y) + cos(tt + i.x)); c += 1.0/length(vec2(p.x/(sin(i.x+tt)/inten), p.y/(cos(i.y+tt)/inten))); } c /= 4.0; c = 1.17 - pow(c, 1.4); return pow(abs(c), 7.0); } ``` ✔ classic. Surface shader: ```glsl varying vec2 vUv; varying vec3 vWorld; uniform float uTime; uniform vec3 uColor; uniform vec3 uLightDir; void main(){ vec2 p = vUv*20.0; float nx = sin(p.x*1.3+uTime*1.1)*0.5 + sin(p.x*3.1 - uTime*0.7 + p.y)*0.3 + sin((p.x+p.y)*2.2+uTime*1.9)*0.2; float nz = cos(p.y*1.1+uTime*0.9)*0.5 + cos(p.y*2.7 + uTime*1.3 + p.x)*0.3 + cos((p.x-p.y)*1.9 - uTime*1.5)*0.2; vec3 N = normalize(vec3(nx*0.25, 1.0, nz*0.25)); vec3 V = normalize(cameraPosition - vWorld); vec3 L = normalize(uLightDir); float spec = pow(max(dot(reflect(-L,N),V),0.0), 90.0); float fres = pow(1.0 - abs(dot(N,V)), 2.5); vec3 col = uColor*(0.10 + fres*0.35) + vec3(1.0,0.98,0.9)*spec*0.9; float a = 0.12 + fres*0.25 + spec*0.55; gl_FragColor = vec4(col, a); } ``` vWorld via modelMatrix (identity) = position after rotateX baked? Plane rotated via mesh.rotation → modelMatrix not identity → vWorld = (modelMatrix*vec4(position,1)).xyz ✔. Glass shader: ```glsl varying vec3 vN; varying vec3 vW; vertex: vN = normalize(mat3(modelMatrix)*normal); vW=(modelMatrix*vec4(position,1.)).xyz; standard mvp. frag: vec3 V=normalize(cameraPosition - vW); float f=pow(1.0-abs(dot(normalize(vN),V)),3.0); vec3 col = mix(vec3(0.35,0.6,0.7), vec3(0.85,0.95,1.0), f); gl_FragColor = vec4(col, 0.04 + f*0.4); ``` Water box: ```glsl varying vec3 vP; // local uniform float uH; frag: float f = clamp(vP.y/uH + 0.5, 0.,1.); vec3 col = mix(uDeep, uColor, f); float a = mix(0.34, 0.10, f); // brighter near top where light enters a += pow(f, 6.0)*0.05; gl_FragColor = vec4(col, a); ``` Bg: ```glsl varying vec3 vW; frag: float h = normalize(vW).y*0.5+0.5; vec3 c = mix(uBot,uTop,pow(h,1.4)); // soft glow center behind tank c += uTop*0.08*exp(-length(normalize(vW).xy - vec2(0.0,0.1))*3.0)? maybe skip gl_FragColor=vec4(c,1.0); ``` Add subtle vignette naturally dark bottom. Motes vertex: ```glsl attribute float aPhase; uniform float uTime; vec3 p = position + vec3(sin(uTime*0.25+aPhase*7.0), sin(uTime*0.18+aPhase*13.0)*0.6, cos(uTime*0.22+aPhase*9.0))*0.9; ``` Bubble points vertex: ```glsl attribute float aSize; void main(){ vec4 mv=modelViewMatrix*vec4(position,1.0); gl_PointSize = aSize*(300.0/max(1.0,-mv.z)); gl_Position=projectionMatrix*mv; } ``` frag: ```glsl uniform sampler2D uMap; void main(){ vec4 c=texture2D(uMap, gl_PointCoord); if(c.a<0.02) discard; gl_FragColor=vec4(c.rgb, c.a*0.9); } ``` Good. Now fish creation: ```js function createFish(specKey, pos){ const spec = SPECIES[specKey]; const geo = getFishGeometry(specKey); // cache per species const mat = new THREE.MeshStandardMaterial({ map: spec.tex(), roughness:0.5, metalness:0.3, side:THREE.DoubleSide }); ... } ``` spec.tex should create once — precompute textures at init into spec.texObj. Fish object: ```js const fish = { spec, group, vel, acc, phase:Math.random()*Math.PI*2, wagU:{value:6}, burst:0, wanderTarget, wanderT:0, retarget:0, foodTarget:null, size: spec.size*(0.85+Math.random()*0.3), schoolW: spec.school?1:0.18 }; mat.onBeforeCompile uses fish.wagU & phase (closure). ``` Eyes: shared eyeGeo; two meshes added to group at scaled positions * spec proportions (unscaled local coords; group.scale=size handles). Wait eyes as children of group: group scale = size scales eyes ✔ positions also scaled ✔. Cache geometry per species: build once. Materials per fish (for wag phase) but map shared. setHSL tint variation: mat.color.setScalar? Color multiply: mat.color.setHSL(0,0,0.9+Math.random()*0.2)? setHSL lightness L — color=(L,L,L) grayscale multiplier ✔. Update loop fish: write clean. Let me now also compute nearestPellet including pellet.eaten skip. Pellet removal from scene & array splice. Write everything now. Final output below. I'll keep comments concise. This is a big file; ensure syntactic completeness. Also add `window.addEventListener('resize', onResize)`. Tooltip: div #tip hidden default. Fish hover raycast list: fishHitMeshes (the body mesh per fish; store ref back fish). throttled move handler. Cursor: canvas style cursor default; on hover fish 'pointer'. Okay — writing final code block now. Also short message before block (one or two sentences), no iframe mention. Let me be extra careful about one thing: `mergeGeometries` import name in r160 BufferGeometryUtils — exports `mergeGeometries` ✔. OrbitControls: `import { OrbitControls } from 'three/addons/controls/OrbitControls.js'` ✔. For bloom HalfFloat: `new EffectComposer(renderer)` creates UnsignedByte RT; to keep HDR: ```js const rt = new THREE.WebGLRenderTarget(innerWidth, innerHeight, { type: THREE.HalfFloatType, samples: 4 }); const composer = new EffectComposer(renderer, rt); ``` samples 4 for MSAA in RT (WebGL2). ✔ OutputPass() no args. renderer.toneMapping = THREE.ACESFilmicToneMapping; OutputPass uses it ✔. exposure 1.15. Also since scene renders to RT, built-in materials skip tonemapping (correct pipeline), custom shaders linear ✔. But note: with UnsignedByte RT? we set HalfFloat ✔. One risk: `samples:4` + HalfFloat might be heavy on weak GPUs; acceptable. Also fish standard material with metalness 0.3 without envmap → dark-ish; envMap none so metalness makes it darker; reduce metalness 0.15, roughness 0.45. Add scene.environment? Could generate PMREM from a simple gradient scene — skip, keep metalness low. Alright, final code: Also include fish food color variation and pellet spin. Write now, carefully, completely. I'll structure the module script with sections: 1. imports, config, helpers 2. renderer/scene/camera/controls/composer 3. lights, fog, bg, floor, stand 4. tank: glass, rims, water box, surface, sand, rocks, plants, airstones 5. rays, motes 6. bubbles 7. fish (textures, geometry, species, class logic) 8. food, ripples 9. interaction (pointer, dblclick, hover) 10. audio 11. env day/night 12. UI wiring 13. animate loop Double-check every referenced variable defined. Begin writing. (For the wander target y range use [2.0, 8.0].) For tetra school cohesion they need same species detection: fish.specKey. Separation radius: (0.55*f.size + 0.55*o.size + 0.35). Max speed boosted when foodTarget: maxSpeed*1.7. Min speed: spec.minSpeed. Acceleration clamp magnitude ~ 8. dt clamp 0.05. velocities damp: v *= exp(-dt*0.15) mild water drag. Now the click vs orbit drag detection & dblclick feed-cancel logic — implemented earlier. Feed spawn: ray-plane intersect with plane y=waterTop: ```js const t = (waterTop - ro.y)/rd.y; if(t>0 && isFinite(t)){ p = ro + rd*t; clamp x,z; spawnPellets(p); spawnRipple(p.x,p.z); } ``` If rd.y≈0 (horizontal click) fallback: intersect front glass z=d/2-0.01 plane, use its x and spawn at top: p=(x, waterTop, clamp(z guess 0))... simpler fallback: intersect glass walls, take point, spawn at (p.x, waterTop, p.z*0.5). Good enough. TapGlass: raycast glass meshes; if hit: scare(point), tap ring at point oriented to normal (face normal from intersection face.normal transformed... planes rotated via mesh rotation; compute world normal = face.normal transformed by normal matrix — use intersect.object.matrixWorld basis. Simpler: store normal per glass mesh in userData ✔. Ok write. Hover tooltip: on pointermove store last event; every 0.12s in loop do raycast if pointer moved. tooltip text = fish.spec.ru + maybe emoji. Right — final answer time. I'll write it in one continuous, careful pass. Вот полноценный интерактивный 3D-аквариум в одном HTML-файле: процедурные рыбки 5 видов с реалистичной анимацией плавания (вершинный шейдер), стайное поведение (boids), кормление, стук по стеклу, пузырьки, каустика на песке, лучи света, режим дня/ночи, звук и многое другое. ```html 🐠 Интерактивный 3D Аквариум

🐠

НАПОЛНЯЕМ АКВАРИУМ...

🐠 Глубокая Вода

Интерактивный 3D-аквариум · Three.js

Рыб: 0
FPS: —
Режим: День

Клик — покормить · Двойной клик — постучать по стеклу · Drag — обзор · Колесо — зум · Наведи — имя рыбки

``` **Что внутри:** - 🐟 **5 видов рыб** с процедурными текстурами (клоун, синий хирург, скалярия, неон и др.) — тела собраны из геометрии, плавание анимируется вершинным шейдером (волна от головы к хвосту), скорость виляния зависит от скорости рыбы - 🧠 **Стайный интеллект (boids)**: неоны реально держатся стаей, все рыбы избегают друг друга и стенок, кренятся в поворотах - 🍤 **Кормление**: клик по воде — корм падает с поверхности, рыбы устремляются к нему и съедают - 👊 **Стук по стеклу** (двойной клик): рыбы испуганно разбегаются, кольцо на стекле, всплеск пузырей - ✨ **Каустика** на песке (классический шейдер), объёмные лучи света, взвесь частиц, пузырьки с физикой подъёма - 🌙 **День/Ночь** с плавным переходом всего освещения - 🔊 **Процедурный звук** (WebAudio): шум воды + бульканье - 🏷️ Наведи курсор на рыбку — узнаешь её вид, кнопка «+ Рыбка» добавляет новых - 🎥 Bloom-постобработка, автoview, орбитальная камера, FPS-счётчик

check kimi k3 powerful