Used Gemini 4 Argon on https://factory.com/

Prompt

<aside>

Browser-Native Three.js Tactical FPS

You are a senior real-time graphics engineer, gameplay programmer, technical artist, physics programmer, AI programmer, and procedural-audio designer. Build a finished, highly polished browser-native first-person tactical shooter, not a blockout, not a visual mockup, and not a shallow tech demo.

The attached reference video is the primary visual and gameplay target. Match its overall fidelity, framing, pace, weapon presence, lighting, dense urban environment, readable combat feedback, and cinematic post-processing, then improve the weak areas. The result must feel like a compact premium PC FPS somehow running directly in the browser.

Use original or properly licensed visual assets only. Match the reference’s quality and art direction without copying proprietary logos, branded UI, characters, or map geometry.

1. Non-negotiable technical constraints

• Runtime: Three.js r180 / v0.180.0 on WebGL2.
• Build tooling: Vite 7.
• Automated visual and performance checks: Playwright.
• three must be the only runtime dependency.
• No game engine.
• No physics library such as Rapier, Ammo, Cannon, Oimo, Havok, or Jolt.
• No animation middleware.
• No audio files, music files, sampled gunshots, sampled footsteps, or downloaded impulse responses.
• Do not use Three.js examples/jsm/postprocessing or EffectComposer. The post-processing pipeline must be custom.
• No React, Vue, Svelte, UI framework, ECS framework, or external state library. Use TypeScript or modern JavaScript plus DOM/CSS for menus and HUD.
• No runtime network requests. The production build must run offline after loading.
• Final deployment must be effectively self-contained: index.html plus one bundled JavaScript payload. Original meshes, texture data, shaders, worklet code, and generated resources may be embedded into the bundle or generated at startup.
• The game must launch reliably with npm install && npm run dev, build with npm run build, and expose a Playwright test/profiling command.

2. Finished experience to build

Create a complete offline team-deathmatch-style FPS match on one exceptionally detailed map. Keep the scope focused and make every part feel finished.

Core match:

• Player team versus AI-controlled enemy team.
• Suggested setup: 4v4 or 5v5, ten-minute match, first team to 30 eliminations.
• Immediate spawn into a sunlit dense urban combat district.
• Player begins with a detailed modern carbine, 30-round magazine, reserve ammunition, one tactical throwable, and one explosive throwable represented as fictional game items.
• Controls: walk, sprint, crouch, jump, short mantle, aim down sights, fire, reload, weapon inspect, throw item, pause, and respawn.
• Mouse input must feel raw and responsive under Pointer Lock. Add configurable sensitivity, FOV, ADS multiplier, invert-Y, and keybinds.
• Movement should be fast and responsive but grounded, with acceleration, deceleration, slope response, step handling, crouch transitions, landing compression, and subtle camera inertia.
• Combat must support body hits, limb hits, headshots, armor-neutral fictional damage values, hit markers, directional damage feedback, kill confirmation, score updates, death, ragdoll, and respawn.
• No gore, dismemberment, or graphic injury. Keep reactions impactful but clean and game-like.
• Include a start screen, compact settings panel, pause menu, loading/progress state, match-end screen, and restart option. These must look like part of the game, not a default web page.

3. Exact visual target and map art direction

The map should read instantly like the reference: a bright, war-worn North African or eastern Mediterranean market district under hard midday sunlight. It must feel hand-authored even if generated procedurally.

Map structure

Build one compact map approximately 120–180 meters across with strong FPS flow:

• A long central market street that creates the same powerful forward sightline shown in the reference.
• Two narrower side alleys for flanking.
• A partially covered market lane with stalls, awnings, tables, crates, and sandbag positions.
• A broken courtyard or small plaza near a monumental concrete or stone archway.
• Several shallow building interiors and window cut-throughs.
• A few accessible balconies or low rooftop positions, but do not turn the map into vertical chaos.
• Readable spawn zones with multiple safe exits.
• Alternating long-range, medium-range, and close-range engagement spaces.
• Strong cover rhythm: low walls, concrete road barriers, carts, vehicles, sandbags, barrels, door frames, and building corners.
• No empty open field and no maze of identical corridors.

Use a fixed world seed for consistent benchmarking. Micro-detail placement, ambient particles, small debris motion, audio variation, and cosmetic prop variants may use deterministic seeded variation.

Buildings

Every building must have believable construction and layered detail:

• Two- and three-story concrete, plaster, brick, and stucco structures with flat roofs and parapets.
• Sun-faded beige, chalky gray, dusty blue, pale peach, muted terracotta, and off-white facades.
• Worn plaster, exposed concrete, patched walls, cracks, chipped corners, discoloration, grime beneath windows, bullet marks, and repairs.
• Recessed doors, barred windows, metal shutters, wooden shutters, rough window frames, balconies, railings, drain pipes, small ledges, and roof access structures.
• Window air-conditioning units, satellite dishes, wall conduits, utility boxes, exterior lamps, vents, antennas, and water tanks.
• Sagging power and communication cables crossing streets between buildings.
• Laundry lines, cloth pieces, small flags or unbranded fabric, hanging rugs, and awnings that respond subtly to wind.
• A mix of open, dark, partially blocked, boarded, and reflective windows. Avoid repeating the same window pattern.
• Simple but convincing interior shells visible through openings: dark rooms, tiled walls, shelves, stairs, curtains, and bounce-lit dust.

Build a procedural facade grammar or modular assembly system so buildings are not identical. Use deterministic variation in widths, heights, window spacing, balcony presence, AC units, damage, color, roof clutter, and grime masks.

Street and prop density

The ground must never feel sterile. Include hundreds of placed or instanced details:

• Broken asphalt, dust, sand accumulation, patched road sections, curbs, drain channels, cracked concrete, scattered pebbles, and small weeds.
• Concrete Jersey barriers, improvised concrete blocks, sandbag walls, wooden barricades, and metal fencing.
• Market stalls with rough timber or metal frames, fabric roofs, empty trays, baskets, boxes, sacks, pottery, and unbranded produce-like shapes.
• Wooden pallets, crates, plastic containers, metal drums, propane-style cylinders, tires, loose boards, rubble piles, bricks, paper, cloth, cans, and discarded household objects.
• Parked utility vehicles, small pickups, carts, and damaged street furniture. Vehicles can be static but must look integrated into the world.
• Palm trees, dry shrubs, balcony plants, wall vines, and scattered hardy vegetation.
• No obvious repeated prop rows. Vary rotation, scale, wear, material tint, and grouping using the fixed seed.
• Use instancing and texture atlases where sensible, but preserve enough individual variation to avoid a cloned look.

Environmental motion

The world cannot be frozen:

• Cloth awnings and hanging fabric move with layered low-frequency wind.
• Overhead cables sway almost imperceptibly.
• Dust motes drift through bright shafts and shadowed interiors.
• Lightweight paper and leaves occasionally skitter across the road using simple physical impulses.
• Plants and palm fronds respond to wind.
• Muzzle pressure and nearby impacts may disturb dust and light debris.
• Distant heat haze should subtly distort geometry near sunlit ground.

4. Sky, atmosphere, lighting, and shadows

The sky is a major visual feature. Do not use a flat blue clear color or a low-resolution static skybox.

• Implement a procedural physical atmosphere with a bright sun disk, horizon haze, aerial perspective, and believable Rayleigh/Mie-style color behavior.
• Create large, soft, detailed cumulus cloud layers like the reference: bright white sunlit tops, soft gray interiors, varied scale, and slow movement.
• Clouds need parallax and depth. Use ray-marched volumetric clouds, layered procedural density volumes, or another convincing shader approach that remains performant.
• Generate a low-frequency cloud-shadow field that moves slowly over the map and subtly changes exterior lighting.
• Set the scene in late morning or midday: strong directional sun, crisp but naturally softened shadows, bright sky fill, and deep readable shade beneath awnings and balconies.
• Generate environment lighting or spherical-harmonic sky irradiance from the procedural sky rather than using a downloaded HDRI.
• Add distance haze and localized dust without washing out the entire image.
• Maintain realistic exposure transitions when moving between open sunlight and shaded interiors.
• Avoid orange cinematic grading, excessive fog, crushed blacks, blown-out white walls, and fake lens flare spam.

5. Materials and geometry quality

Use physically based materials with carefully controlled roughness and normal response.

• Surfaces need separate macro, meso, and micro scales: large color variation, medium cracks/stains, and fine roughness/normal detail.
• Generate or embed original texture atlases for plaster, concrete, brick, metal, wood, cloth, road, glass, sandbags, and weapon materials.
• Add triplanar or world-space detail where needed to prevent obvious UV stretching.
• Blend edge wear, dust accumulation, water streaks, grime, and impact decals through masks rather than baking every variation into geometry.
• Glass should have subtle reflections, dirt, and interior darkness without becoming mirror-like.
• Metals need correct roughness differences: painted steel, bare worn edges, anodized weapon parts, dull barrels, and oxidized fixtures.
• Avoid low-poly silhouettes on foreground props and the weapon. Use LODs for distant geometry.
• Use bevels or bevel-like normal treatment on hard edges so lighting catches geometry convincingly.

6. First-person weapon and hands

The first-person weapon is always visible and must be one of the most polished elements.

</aside>

Thanks https://x.com/athrix_codes