Threejs Aaa Graphics Builder

Three.js AAA Graphics Builder

Purpose

Own the production graphics pass. Convert basic screenshots into authored, high-density, performance-aware visual experiences.

Use When

Screenshots still look basic, models look primitive, worlds are sparse, UI/world art feels generic, or the user asks for premium, AAA, high-fidelity, showcase, or less-basic graphics.

Required References

These references are required phase-entry gates, not optional reading:

• Load references/visual-scorecard.md before scoring, judging completion, or making any premium/AAA/showcase claim.
• Load references/implementation-blueprint.md before changing graphics architecture, materials, VFX, rendering, diagnostics, or broad visual systems.
• Load references/model-recipes.md before building or upgrading hero/player, obstacle, enemy, pickup, world-kit, material, or prop models.
• Load references/render-recipes.md before changing lighting, tone mapping, shadows, fog, post-processing, materials, or render composition.
• Load references/checklists/aaa-game-quality-gate.md and references/checklists/aaa-visual-scorecard.md before declaring a game premium, AAA, showcase, complete, release-ready, or less basic.
• Load the relevant checklist before focused work: references/checklists/procedural-model-quality.md, references/checklists/material-lighting-quality.md, or references/checklists/performance-safe-visual-detail.md.
• Load references/prompt-templates.md only when the user asks for reusable prompts, a graphics-pass prompt, or a task template.

For broad "still looks basic", premium, AAA, high-fidelity, showcase, or less-basic graphics work, load all four references as the first action in the phase. Track them in a reference ledger with yes/no, path, and failure reason. Do not mark the graphics phase complete while any required reference is skipped.

External asset sourcing gate:

• For premium/AAA/showcase/high-fidelity/less-basic graphics with a hero/player, character, creature, boss, vehicle, ship, building, weapon, signature prop, complex pickup, or hero environment piece, load threejs-3d-generator before deciding procedural geometry is enough.
• For premium/AAA/showcase/high-fidelity/less-basic graphics with concept needs, texture/material references, decals, logos, faction marks, icons, GUI art, skies, backgrounds, title/menu art, or image-to-3D inputs, load threejs-image-generator before deciding 2D external assets are not needed.
• Run the director credential probe before using key unavailable as a skip reason and paste the SET/MISSING output.
• Create an asset sourcing ledger for each high-value surface: procedural / threejs-image-generator / threejs-3d-generator / hybrid, plus outputs or skip reason.
• not-needed is valid only after the relevant skill was loaded and the ledger explains why external generation would not improve a non-hero support surface, or why the credential probe or attempted generation shows a real blocker.
• For premium hero surfaces, procedural-only is not an allowed final answer unless there is real blocker evidence. At least one high-value surface must show a 3D generator task ID, downloaded GLB/GLTF/FBX path, image generator output path, or documented hybrid chain.

Workflow

1. Capture or inspect active desktop/mobile screenshots. 2. Score visuals across art direction, hero/player, obstacles, rewards, world, materials, render, VFX, UI, and performance evidence. 3. Add missing graphics architecture: material library, procedural textures/decals, model factories, world prop kit, VFX system, render pipeline, diagnostics. 4. Run the credential probe, then fill the external asset sourcing ledger per surface: procedural Three.js factory, threejs-image-generator 2D reference/texture, threejs-3d-generator 3D generation, or a hybrid. 5. Upgrade every weak visible surface, not only one hero object. 6. Add lighting/render/material polish after authored forms exist. 7. Add event-driven VFX tied to gameplay state. 8. Re-score screenshots. Continue until every premium category is at least 2/3 or report exact blockers. 9. Verify renderer diagnostics, desktop/mobile screenshots, console/page errors, canvas pixels, imported asset budgets, and playability.

Core Rule

Do not make primitives look AAA by adding glow. First build authored forms, then materials, then lighting, then effects.

Final Response

Report the reference ledger, credential probe output, external asset sourcing ledger, score before/after, production surfaces upgraded, files changed, screenshots/artifacts, renderer diagnostics, imported asset diagnostics when relevant, and remaining blockers. For premium/AAA/showcase claims, include the filled visual scorecard exactly as defined in references/visual-scorecard.md, including average and automatic failures remaining.

AAA Browser Game Quality Gate

• The game is immediately playable and not presented as a landing page.
• The core loop has objective, scoring/progress, fail/retry, pacing, and feedback.
• Screenshots do not read as a collection of default primitives, debug HUDs, or generic placeholder panels.
• Unadorned boxes, cones, spheres, flat planes, and stretched buildings are not the dominant art language unless explicitly intentional.
• UI is genre-specific, compact, readable during motion, responsive, and includes needed modal states.
• Player, threats, rewards, and objectives have distinct silhouettes and material/feedback language.
• Player/hero asset has primary silhouette, secondary structure, tertiary detail, material contrast, and state feedback.
• Obstacle/enemy set includes at least three authored variants with unique telegraphs.
• Reward/interactable set includes at least two authored variants with collection/interaction feedback.
• World kit includes reusable modules and does not rely on one repeated skyline/block/road primitive.
• The scene has foreground, midground, and background depth instead of one flat play lane.
• Lighting, shadows, fog, and post-processing clarify depth and mood without hiding gameplay.
• Procedural models use authored factories, shared materials, reusable prop kits, and collision proxies.
• Movement, camera, speed, impact, and restart loop feel tuned through play, not just configured.
• Audio/visual feedback exists for core actions and state transitions.
• Mobile viewport preserves framing, safe areas, touch targets, and text fit.
• Renderer diagnostics are reviewed when visual fidelity changes.
• Visual scorecard passes: every category at least 2 and average at least 2.3.
• Build, browser run, console/page errors, screenshots, nonblank canvas, interaction, and responsive checks all pass.
• A screenshot critique identifies no unresolved high-impact placeholder-quality blockers.
• If any premium surface was intentionally deferred, the final report says which one and why.

AAA Visual Scorecard Checklist

Use with threejs-aaa-graphics-builder/references/visual-scorecard.md.

• Current desktop and mobile active-play screenshots are available.
• Art direction category scored 0-3.
• Hero/player asset category scored 0-3.
• Obstacles/enemies category scored 0-3.
• Rewards/interactables category scored 0-3.
• World/environment category scored 0-3.
• Materials/textures category scored 0-3.
• Lighting/render category scored 0-3.
• VFX/motion category scored 0-3.
• UI/HUD category scored 0-3.
• Performance evidence category scored 0-3.
• No automatic failure is present: primitive-dominant screenshot, stat-card HUD, glow-only detail, color-only readability, idle-only evidence, or missing renderer diagnostics.
• Premium gate passes only when every category is at least 2 and average score is at least 2.3.
• Showcase gate passes only when at least six categories are 3, no category is below 2, and average score is at least 2.7.

Material and Lighting Quality Checklist

• Renderer color space, tone mapping, exposure, and shadow settings are intentional.
• Key, fill, rim, ambient, and environment lighting clarify depth and gameplay roles.
• Materials avoid flat default looks through roughness/metalness/emissive/vertex-color variation.
• Important objects have readable silhouettes against background, fog, and effects.
• Shadows help ground assets without obscuring navigation or collision boundaries.
• Fog, bloom, particles, and post-processing support readability instead of hiding it.
• Procedural textures or decals are scaled, stable, and not visually noisy during movement.
• Materials are reused where possible and disposed when obsolete.
• Desktop and mobile screenshots are checked after lighting/material changes.
• Renderer info or frame-time evidence is gathered when render cost changes.

Performance-Safe Visual Detail Checklist

• Baseline renderer info is captured when increasing fidelity.
• Draw calls, triangles, geometries, materials, textures, and frame time are reviewed after changes.
• Repeated details use instancing, shared resources, atlases, or generated texture reuse where practical.
• High segment counts are limited to silhouette-critical forms.
• Shadows are scoped by light count, shadow map size, casters/receivers, and camera distance.
• Post-processing is justified by gameplay readability or strong art direction.
• DPR caps or adaptive quality are considered for mobile.
• Generated resources have a disposal/reuse strategy.
• The worst-case gameplay scene, not only idle view, is inspected.
• Visual detail remains readable at mobile resolution without excessive GPU cost.

Procedural Model Quality Checklist

• The model has a recognizable silhouette from the gameplay camera.
• Primary forms read clearly before material or post-processing detail.
• Secondary detail supports the asset role: panels, trims, ridges, tubes, fins, sockets, decals, or emissive accents.
• Tertiary detail is visible at intended camera distance and does not create noise.
• Materials have purposeful contrast in roughness, metalness, color, emissive, or texture.
• Bevels, curves, and segment counts improve silhouette or highlight behavior.
• Repeated props use shared geometries/materials, instancing, or pools when practical.
• Visual mesh and gameplay collision/proxy are intentionally separated when needed.
• The factory returns named groups/meshes and keeps ownership/disposal clear.
• Renderer diagnostics are checked when triangles, materials, textures, or draw calls increase.
• Mobile screenshot still shows the asset as more than a primitive placeholder.

AAA Graphics Implementation Blueprint

Use this when a Three.js game reads as basic even after it is playable. The goal is a production graphics architecture that can be iterated, scored, profiled, and reused.

Recommended Ownership

src/assets/MaterialLibrary.ts
src/assets/ProceduralTextures.ts
src/assets/DecalShapes.ts
src/assets/ModelDiagnostics.ts
src/assets/ImportedAssetRegistry.ts
src/assets/modelFactories/HeroFactory.ts
src/assets/modelFactories/ObstacleFactory.ts
src/assets/modelFactories/RewardFactory.ts
src/assets/modelFactories/WorldPropKit.ts
src/systems/LightingRig.ts
src/systems/RenderPipeline.ts
src/systems/VfxSystem.ts
src/systems/WorldArtDirector.ts
src/systems/QualityDiagnostics.ts

Keep these boundaries lightweight. In small projects, a single file can contain multiple factories, but the concepts must remain separate: materials, authored geometry, repeated props, effects, render settings, and diagnostics.

Hybrid AI Asset Pipeline

Choose the asset path per surface:

• Procedural Three.js: repeated detail, simple props, rails, track parts, decals, collision proxies, VFX geometry, debug-friendly primitives.
• threejs-image-generator: concept sheets, T-pose/A-pose references, texture references, trim sheets, decals, icons, logos, skies, backgrounds, UI art.
• threejs-3d-generator: hero/player, characters, creatures, vehicles, buildings, weapons, signature props, pickups, bosses, complex terrain modules.
• Hybrid: image-generator concept/reference -> 3D-generator image-to-model -> Three.js import -> procedural collision/VFX/prop kit -> visual scorecard.

For premium/AAA/showcase/high-fidelity/less-basic games, do not decide threejs-3d-generator or threejs-image-generator is unnecessary before loading the relevant skill when the game includes characters, creatures, vehicles, ships, weapons, buildings, signature props, hero pickups, skies, textures, decals, logos, icons, or GUI art. Load first, run the credential probe, then document the tradeoff.

Use threejs-3d-generator when generated model fidelity will materially improve the active screenshot. Do not use generated 3D for every repeated small prop; use instancing/procedural kits for volume.

For premium hero surfaces, procedural-only is not a valid final choice unless a real blocker is recorded: missing key from the credential probe, API/network/quota error after an attempted command, user requested no external assets, or offline-only constraint. Repeated low-value props can stay procedural.

Asset sourcing ledger:

External asset sourcing:
- Credential probe output:
- Hero/player:
- Enemies/vehicles/weapons:
- Signature props/pickups:
- World/sky/background:
- Materials/textures/decals:
- Logos/icons/GUI art:
- Chosen sources per surface: procedural / threejs-image-generator / threejs-3d-generator / hybrid
- External assets generated: yes/no, task IDs/paths or allowed skip reason:

Production Surfaces

A premium pass must touch every weak visible surface:

• Hero/player: authored silhouette, state feedback, decals/trim, readable front/up/side, collision proxy.
• Hazards/enemies: at least three distinct silhouettes with telegraphs and material cues.
• Rewards/interactables: at least two forms with collection states and motion/VFX hooks.
• World kit: foreground, playable lane/arena, midground, background/parallax, set dressing, scale cues.
• Materials/textures: shared PBR/stylized material library, procedural panel lines, noise, trim, wear, emissive masks.
• Lighting/render: color space, tone mapping, exposure, shadows/contact, fog/depth, post-processing discipline.
• VFX/motion: event-driven bursts, trails, impact rings, speed lines, shield/boost states, pickup/fail feedback.
• UI/world cohesion: UI colors, icons, alerts, and meters echo gameplay materials and status colors.
• Diagnostics: renderer counts, material/geometry/texture counts, screenshots, scorecard.

For imported generated 3D assets, also require downloaded GLB/PBR output, import wrappers with scale/pivot/bounds, simple collision proxies, animation clips when relevant, and triangle/material/texture/file-size diagnostics.

Material Library

Create named material roles instead of one-off colors:

• bodyPrimary: dominant player/world shell.
• bodySecondary: panel contrast.
• trim: rails, bevel highlights, borders.
• hazard: danger surfaces, damage cues, warning stripes.
• reward: collectible surfaces with readable value.
• glass: cockpit, shield, lens, visor.
• emissiveSignal: authored glow strips, status lights, beacon cores.
• groundContact: dark matte surfaces and shadow receivers.
• decalDark and decalLight: panel lines, scratches, numbers, icons.

Use MeshStandardMaterial for most surfaces. Use MeshPhysicalMaterial selectively for cockpit glass, clearcoat panels, iridescent shields, or premium hero details. Share materials across repeated meshes.

Procedural Texture And Decal Kit

Use canvas textures, shape geometry, or thin offset meshes for detail that would otherwise require external assets:

• Panel lines and access hatches.
• Trim sheets and edge bands.
• Window strips, city light grids, arena markings.
• Hazard stripes, arrows, target indicators, lane glyphs.
• Scratches, wear, noise, dirt, heat tint, scorch marks.
• UI/world icon motifs reused in HUD and diegetic markers.

Set texture filtering, mipmaps, repeat/wrap, color space, and anisotropy intentionally. Avoid unique full-size textures for tiny repeated marks.

Use threejs-image-generator for high-value 2D source art: terrain/rock/asphalt/snow/moss texture references, sci-fi trim sheets, signs, hazard stripes, cockpit decals, sky/background plates, menu/loading art, faction logos, pickup icons, ability icons, and GUI glyphs. Use the resulting images either as actual 2D assets or as image-to-3D inputs.

Model Factories

Factories should return a grouped object plus metadata:

type ModelFactoryResult = {
  root: THREE.Group;
  collision?: THREE.Object3D;
  lod?: THREE.LOD;
  bounds?: THREE.Box3;
  diagnostics?: {
    meshes: number;
    materials: number;
    geometries: number;
    triangles?: number;
  };
};

Use named child meshes for readable debugging. Separate visual detail from collision proxies. Keep repeated detail instanced where practical.

For imported generated 3D models, create an ImportedAssetRegistry or loader wrapper that returns similar metadata: root group, bounds, collision proxy, animation clips, and diagnostics. Never put 3D/image/audio generation API calls in browser runtime code.

World Art Director

Build the world as layers:

• Play layer: ground, lanes, rails, objective path, hazards, pickups.
• Near layer: speed props, signs, arches, barriers, debris, foreground occluders used carefully.
• Mid layer: buildings, cliffs, hangars, pillars, platforms, arena machinery.
• Far layer: skyline, terrain silhouettes, nebula/cloud/fog cards, parallax planes.
• Motion layer: speed lines, particles, trail strips, dust, sparks, screen-space UI feedback.

Every layer should support gameplay readability. Do not obscure threats or the next decision.

Render Pipeline

Own renderer setup in one place:

• outputColorSpace = THREE.SRGBColorSpace.
• Tone mapping and exposure selected for the art direction.
• DPR capped for mobile and high-density displays.
• Shadows enabled only for objects that benefit from grounding.
• Post-processing is limited and measured: bloom, vignette, chromatic aberration, film grain, or color grade only when they improve authored forms.
• Resize updates canvas, renderer, camera, composer, and UI CSS variables.

VFX System

Effects should be event-driven, pooled, and readable:

• Pickup: ring contraction, shard burst, score trail, brief HUD echo.
• Hit/fail: impact flash, debris, camera impulse, temporary slow/hit pause.
• Boost/speed: engine trail, lane streaks, FOV ease, audio pitch.
• Near miss/combo: side spark, line snap, badge pulse.
• Shield/invulnerable: refractive shell, rim pulse, material swap.

Avoid permanent particle clutter. Effects must clarify state.

Diagnostics

Expose or log:

• Renderer calls, triangles, geometries, textures.
• Scene mesh count, instanced mesh count, unique materials/geometries/textures.
• Approximate visible prop counts by layer.
• Screenshot paths and visual scorecard.
• Performance notes after post-processing, shadows, or many repeated props.

Browser Game Budgets

Budgets vary by game and device, but start with explicit targets:

• Keep draw calls low through instancing and shared materials.
• Prefer many small details through instanced meshes over many unique mesh/material pairs.
• Cap DPR before removing all visual detail.
• Use LOD or distance culling for background props.
• Measure after every major graphics pass.

Implementation Order

1. Score active screenshots and identify the weakest three categories. 2. Add material and diagnostic foundations. 3. Decide which weak surfaces need procedural, threejs-image-generator, threejs-3d-generator, or hybrid treatment. 4. Build/import hero/player and one complete obstacle/reward family. 5. Add world prop kit and layered composition. 6. Add lighting/render polish. 7. Add event-driven VFX. 8. Re-score desktop/mobile active screenshots. 9. Optimize measured bottlenecks.

Procedural Model Recipes

These recipes are for scratch-built Three.js models when external art assets are unavailable. The goal is not photorealism; it is authored, layered, readable, premium browser-game art.

Modeling Principles

• Start with silhouette. A model should be recognizable as a dark shape before materials or glow.
• Combine primitive bases with authored geometry: extrusions, bevels, curves, tubes, lathes, custom buffers, decals, trim, and instanced micro-detail.
• Use asymmetry and functional parts: hinges, fins, vents, handles, rails, brackets, sensors, cables, panels, bolts.
• Put detail where the camera sees it. Spend triangles on player-facing surfaces, not hidden undersides.
• Create state variants through material swaps, animated child parts, emissive strips, and VFX sockets.
• Keep a simple collision proxy separate from the detailed visual group.
• Use shared geometries/materials and instancing for repeated bolts, panels, lights, windows, spikes, rocks, or rail segments.
• Name important child meshes: cockpitGlass, leftEngine, hazardTeeth, pickupCore, collisionProxy.

Minimum Premium Asset Pass

For a game that asks for premium/AAA/showcase quality, build at least:

• One hero/player model with readable front/up/side and three state cues.
• Three obstacle/enemy variants with unique silhouettes and telegraphs.
• Two reward/interactable variants with idle and collect states.
• One world prop kit with at least eight reusable parts.
• One material kit with trim, decals, panel lines, and emissive masks.
• Collision proxies and renderer diagnostics for the above.

Hero Vehicle Recipe

Use for runners, racers, hovercraft, spaceships, drones, or arcade vehicles.

• Core hull: ExtrudeGeometry or custom tapered BufferGeometry, not just a box.
• Nose/front: wedge, intake, sensor strip, bumper, or blade shape.
• Cockpit/core: glass dome from sphere/lathe segments, beveled capsule, or faceted canopy.
• Engines: cylinders/cones/tubes with nozzle rings, inner emissive discs, heat fins, and trail sockets.
• Wings/fins: extruded triangular or curved plates with bevel/trim lines.
• Undercarriage: skids, landing pads, rail clamps, suspension arms, or thruster pods.
• Decals: panel lines, numeric marks, faction glyph, hazard ticks, small bolts.
• State cues: boost flares, shield shell, damage scorch, pickup glow, overheat red.
• Collision proxy: one capsule/box/sphere group matching gameplay footprint.

Reject if the hero is mostly a box with two cylinders and a glow.

Hero Character Recipe

Use for arena fighters, brawlers, platformers, or stylized third-person games.

• Body mass: torso, pelvis, head/helmet, limbs with tapered capsule/cylinder custom scales.
• Rig illusion: separate shoulders, elbows, knees, wrists, ankles, belt, backpack, armor plates.
• Face/identity: visor, mask, hair/helmet crest, color-blocked silhouette, weapon/tool.
• Animation-ready pivots: group limbs under named joints even if animation is procedural.
• Material zones: skin/fabric/armor/metal/glass/emissive accents.
• State cues: hit flash material, shield ring, attack trail socket, stamina/charge glow.
• Collision proxy: capsule or cylinder independent of mesh detail.

Reject if the character reads as stacked spheres/cylinders with no costume, joints, or silhouette.

Obstacle And Enemy Families

Build distinct gameplay reads:

• Low barrier: ground-hugging slab, spikes, rails, caution panels, animated warning light.
• Gate/arch: overhead frame, side posts, pulsing pass/avoid lane, moving shutters.
• Moving hazard: rotating arm, sweeper beam, drone, crusher, sliding block, orbiting mines.
• Trap/zone: laser grid, electric puddle, collapsing tile, gravity well, proximity mine.
• Enemy: body core, sensor/head, weapon, shield, locomotion/hover base, attack telegraph.

Each variant needs:

• Unique silhouette.
• Material cue for danger.
• Telegraph from distance.
• Animation or state change.
• Collision proxy.
• Low-cost repeated detail.

Reject if all hazards are recolored cubes/cones.

Reward And Interactable Recipes

Rewards should be readable and desirable during motion.

• Token: outer ring, inner core, value icon, shimmer cards, collect burst socket.
• Shard: faceted crystal, metal bracket, orbiting chips, emissive seam.
• Capsule: glass shell, suspended item, end caps, rotating label strip.
• Power-up: icon silhouette matched to effect, color and shape differ from score pickups.
• Objective item: larger scale, unique motion, UI echo, stronger lighting/VFX.

States:

• Idle: slow rotation, pulse, bob, or orbit.
• Attract: line/trail toward player.
• Collect: vanish, burst, score trail, HUD meter update.

Reject if rewards are plain spheres or torus rings without state feedback.

World Prop Kit

Build modular props that can be instanced and recombined:

• Track/road: lane plates, seams, arrows, side rails, guard segments, repair panels.
• Arena: boundary rings, floor tiles, spawn pads, cover blocks, goal markers.
• City/sci-fi: window strips, antennas, rooftop units, bridge trusses, pylons, billboards.
• Nature: rocks from custom faceted buffers, cliffs, roots, crystals, grasses as cards.
• Industrial: pipes, vents, cables, tanks, crates, gantries, lights, warning signs.
• Space/air: debris panels, satellites, buoys, asteroid chunks, parallax dust.

Layer the kit:

• Near props create speed and scale.
• Mid props define the playable corridor.
• Far props create depth without stealing draw calls.

Reject if the world is mostly stretched boxes or a flat plane.

Procedural Geometry Techniques

• ExtrudeGeometry: panels, fins, wings, badges, UI/world glyphs, signs.
• LatheGeometry: capsules, domes, engines, pipes, bottles, turret bases.
• TubeGeometry: cables, rails, trails, conduits, curved weapons.
• Custom BufferGeometry: tapered hulls, rocks, shards, wedges, low-poly terrain.
• ShapeGeometry: decals, flat icons, trim strips, hazard markers.
• InstancedMesh: windows, bolts, lane markers, debris, grass, lights, small props.
• LOD: hero/background variants and dense prop reductions.

Use bevel-like layering when real bevel geometry is too expensive: duplicate thin trim meshes, edge strips, or slightly offset darker panels.

Material And Detail Rules

• Use roughness/metalness contrast, not only hue contrast.
• Use emissive for authored signals, not entire objects.
• Use glass/clearcoat sparingly on hero details.
• Add darker contact material under important objects.
• Use decals to imply scale and function.
• Reuse UI icon shapes as world decals for cohesion.

Diagnostics Checklist

After a model pass, report:

• Mesh count.
• Instanced mesh count.
• Unique geometries/materials/textures.
• Approximate triangle count if available.
• Collision proxies included.
• LOD or culling strategy for repeated/background props.
• Active-play screenshots, not only showroom renders.

Three.js AAA Graphics Prompt Templates

Reusable prompt templates packaged with this skill. Use only templates relevant to the current request, and adapt placeholders to the game/project context.

---

AAA Graphics Production Pass Prompt

Use threejs-aaa-graphics-builder to upgrade this Three.js game from basic prototype visuals to premium browser-game graphics.

Current screenshot blockers: -

Target art direction: -

Required pass:

• Score current screenshots with threejs-aaa-graphics-builder/references/visual-scorecard.md.
• Add or improve the graphics architecture from references/implementation-blueprint.md.
• Build material library, procedural texture/decal helpers, model factories, world prop kit, VFX system, lighting/render pipeline, and diagnostics.
• Use threejs-3d-generator for high-value hero/player, character, creature, vehicle, building, weapon, pickup, boss, rigging, animation, texture, or conversion needs when procedural code is not enough.
• Use threejs-image-generator for 2D concepts, T-pose/A-pose references, texture references, decals, logos, icons, GUI art, skies, backgrounds, or image-to-3D inputs.
• Upgrade hero/player, obstacles/enemies, rewards/interactables, world kit, HUD cohesion, lighting, effects, and renderer metrics.

Do not count as completion:

• Recolored boxes/cones/spheres.
• Glow, fog, or darkness hiding missing detail.
• One improved object while world/obstacles/UI remain placeholders.
• Idle/showroom screenshots only.
• Missing renderer diagnostics after visual density changes.

Verification:

• Capture active gameplay desktop and mobile screenshots.
• Report visual score before/after.
• Report draw calls, triangles, geometries, textures, and material count when available.
• Run build, browser, console/page error, nonblank canvas, interaction, and responsive checks.
• Continue until every scorecard category is at least 2, or report exactly why the target was not reached.

---

Before/After Visual Critique Prompt

Use threejs-aaa-graphics-builder to critique this Three.js game's current screenshots with the visual scorecard and produce a prioritized graphics plan.

Evidence to gather:

• Desktop screenshot.
• Mobile screenshot.
• Optional before/after screenshots if a pass was already completed.
• Renderer diagnostics if available.
• Notes on the game genre, core verb, and target mood.

Critique dimensions:

• Gameplay readability.
• UI hierarchy and text fit.
• Procedural model silhouette and fidelity.
• Material, lighting, shadows, color, and contrast.
• Camera composition and motion clarity.
• Mobile framing and touch/control readability.
• Performance risk from proposed upgrades.

Output:

• Pass/fail on whether the game looks polished enough for the current milestone.
• Top five blockers ordered by player impact.
• Recommended next skill/phase: threejs-aaa-graphics-builder, threejs-game-ui-designer, threejs-debug-profiler, or threejs-qa-release.
• Concrete acceptance criteria for the next pass.

---

Material, Lighting, and Render Quality Pass Prompt

Use threejs-aaa-graphics-builder for scene-level render quality, material libraries, model materials, geometry factories, and visual scoring.

Current problem: -

Target look: -

Work areas:

• Renderer color space, tone mapping, exposure, shadow settings, DPR cap.
• Key/fill/rim/environment lighting.
• Material roughness, metalness, emissive accents, vertex colors, generated textures, and decals.
• Fog, background, post-processing, and feedback effects only where they improve readability.
• Camera composition and gameplay-distance readability.

Constraints:

• Improve lighting and materials before adding heavy post-processing.
• Keep threats, pickups, player, and objective readable during motion.
• Avoid excessive bloom, low-contrast fog, and particle clutter.
• Re-measure renderer info if visual complexity changes.

Verification:

• Capture desktop and mobile screenshots.
• Check console/page errors and nonblank canvas pixels.
• Compare renderer calls/triangles/textures before and after when practical.
• Play the core loop and confirm effects do not hide gameplay information.

---

Procedural Hero Asset Pass Prompt

Use threejs-aaa-graphics-builder to create or upgrade a high-fidelity scratch-built Three.js hero asset.

Asset brief:

• Role:
• Silhouette:
• Scale:
• Camera distance:
• Style references:
• Performance budget:

Requirements:

• Build a reusable model factory that returns a named THREE.Group.
• Establish a recognizable silhouette before adding small detail.
• Add secondary and tertiary detail through bevels, trims, panels, ridges, tubes, decals, emissive elements, and material contrast.
• Add visible subassemblies, not just a few primitives: shell/body, core/cockpit, trims/rails, engines/emitters, decals/surface marks, and state feedback when relevant.
• Use shared geometries/materials where possible.
• Use PBR-style materials, shadows, color management, and lighting intentionally.
• Keep collision or gameplay proxies simpler than the visual mesh.

Avoid:

• Placeholder stacks of primitives.
• Detail visible only from a showroom camera.
• Excessive segment counts, unique materials, or draw calls without gameplay value.
• Glow-only upgrades that leave the silhouette primitive.

Verification:

• Build and run locally.
• Capture gameplay-camera screenshot and one inspection screenshot if useful.
• Report renderer info before/after when available.
• Verify the asset reads clearly at desktop and mobile gameplay distances.

---

Visual Polish Prompt

Use threejs-aaa-graphics-builder to improve the game's visual clarity and identity.

Use focused prompts instead when the main problem is narrower:

• Use threejs-game-ui-designer/references/prompt-templates.md for HUD/menu/interface quality prompts.
• Use the procedural hero asset or world prop kit sections in this file for scratch-built model fidelity inside the AAA graphics phase.
• Use the before/after visual critique section in this file when priorities are unclear.

Target feel: -

Constraints:

• Keep the game readable during motion.
• Avoid generic purple gradients, excessive bloom, particle clutter, and static showroom composition.
• Prefer purposeful lighting, color contrast, silhouettes, material variation, and procedural geometry that supports gameplay.
• Hand off substantial UI craft to threejs-game-ui-designer; keep model/world/render construction under threejs-aaa-graphics-builder.
• Keep performance visible while polishing.

Verification:

• Capture before/after screenshots where possible.
• Check desktop and mobile framing.
• Confirm the game remains interactive and no console errors were introduced.

---

World Prop Detail Kit Pass Prompt

Use threejs-aaa-graphics-builder to create a reusable procedural prop/detail kit for this Three.js game's world.

World role: -

Kit requirements:

• Define 4-8 reusable prop factories with shared materials.
• Include scale variants, color/material variants, and clear placement rules.
• Use instancing or shared geometry/materials for repeated details.
• Add visual detail that supports navigation, danger, reward, or atmosphere.
• Keep the kit coherent with the existing game UI and world lighting.
• For city/runner worlds, include skyline modules with setbacks/window bands/roof details, foreground speed props, track hardware, signage/cables/supports, and distant parallax layers.

Performance constraints:

• Avoid unique material explosions.
• Keep repeated props instanced or pooled when practical.
• Track draw calls, triangles, geometries, textures, and frame impact.

Verification:

• Capture before/after screenshots from gameplay camera.
• Check desktop and mobile readability.
• Report renderer diagnostics.
• Confirm no console/page errors and no obvious collision/occlusion issues.
• If the world is still dominated by stretched boxes, continue the prop-kit pass.

Render, Lighting, And VFX Recipes

Use this after authored forms exist. Rendering polish cannot compensate for missing models, props, or readable gameplay silhouettes.

Renderer Setup

• Set renderer.outputColorSpace = THREE.SRGBColorSpace.
• Choose tone mapping deliberately. ACESFilmicToneMapping often works for cinematic stylized scenes; simpler tone mapping can be better for bright arcade readability.
• Tune exposure against active gameplay, not a static title view.
• Cap DPR, especially on mobile. Start around Math.min(devicePixelRatio, 1.5 or 2) and profile.
• Update renderer, camera, composer, and CSS UI dimensions on resize.
• Use a transparent or explicit background only when composition requires it.

Camera Composition

• Keep the next decision visible. The camera should show player, immediate threat/reward, and route.
• Add depth layers: foreground speed elements, playable midground, background scale cues.
• Use FOV and camera distance to communicate speed without hiding hazards.
• Use camera shake sparingly and clamp intensity.
• Add camera impulses for hits/near misses/boosts, then ease back quickly.
• Check mobile framing separately; vertical and narrow layouts often need different offsets.

Lighting Stack

Use a small readable stack:

• Key light: defines form and direction.
• Fill light: keeps gameplay objects legible.
• Rim/back light: separates player and hazards from background.
• Practical/emissive lights: authored beacons, engines, pickups, arena markers.
• Contact shadows or shadow blobs: ground important objects.

Avoid many unmeasured dynamic lights. Prefer baked-looking material/emissive cues, light cards, or small unlit decals for repeated signals.

Shadows And Contact

• Use shadows for hero/player, major hazards, and large world anchors.
• Use smaller shadow maps and limited shadow casters when profiling shows cost.
• Add cheap contact discs or transparent planes for pickups/hovering objects.
• Tune bias to avoid acne and peter-panning.
• Do not let shadows hide collision reads.

Materials

• Prefer material contrast before post effects: matte vs glossy, metal vs plastic, transparent vs opaque, bright trim vs dark contact.
• Use MeshStandardMaterial for most objects and MeshPhysicalMaterial only where the premium feature is visible.
• Use emissive maps or small emissive parts for signals instead of making entire objects glow.
• Match material roles across UI and world: danger, reward, shield, boost, objective.

Fog, Background, And Depth

• Fog should reveal depth and mood, not hide empty worlds.
• Layer background silhouettes at varied scales and heights.
• Add parallax or slow-moving far layers for motion-heavy games.
• Avoid single flat sky colors when the world needs scale; use gradients only as support, not the whole art direction.
• Keep hazards/rewards readable against fog and background values.

Post-Processing

Use post as a finishing pass:

• Bloom: only authored emissive elements, not all bright materials.
• Vignette: subtle focus, never heavy darkness.
• Film grain/noise: low opacity; avoid compression-like artifacts.
• Chromatic aberration: only brief event-driven impacts or very subtle style.
• Motion blur/trails: prefer geometry trails or particles that preserve gameplay clarity.

Always compare screenshots with post enabled/disabled and profile the cost.

Event-Driven VFX

Tie effects to state:

• Boost: engine cones, trail ribbons, FOV ease, side streaks, audio pitch.
• Pickup: ring snap, shard particles, score line to HUD, short light pulse.
• Hit: impact ring, debris, damage flash, brief hit pause, camera impulse.
• Near miss/combo: edge spark, badge pulse, streak counter animation.
• Shield: shell mesh, rim pulse, absorbed impact ripple.
• Spawn/despawn: anticipation pulse, telegraph, dissolve or scale snap.

Pool effects and reuse geometries/materials. Permanent particle fields should be cheap and sparse.

Readability Checks

During active play, confirm:

• Player orientation is clear.
• Threats differ from rewards by both shape and material.
• Important pickups are visible before reaction time expires.
• UI feedback does not cover the play path.
• VFX clarifies state instead of obscuring collisions.
• Background contrast does not swallow dark objects.

Performance Checks

After render changes, report:

• FPS/frame time if available.
• Draw calls.
• Triangles.
• Geometries, textures, and materials.
• Composer/post passes.
• Shadow casters and shadow map settings.
• DPR cap and mobile notes.

If performance drops, reduce post/shadow cost first, then cull/LOD/instance, then reduce asset density only where it is least visible.

Visual Scorecard

Score active-play screenshots, not idle title screens or isolated showroom models. Use desktop and mobile screenshots when mobile is in scope.

Scoring Scale

• 0: Placeholder. Default primitives, sparse world, unreadable state, debug UI, or no evidence.
• 1: Basic styled. Playable and themed, but still obvious prototype assets, flat composition, repeated silhouettes, or generic UI.
• 2: Premium stylized. Authored silhouettes, material/detail systems, readable state, cohesive UI/world, measured performance.
• 3: Showcase. Strong art direction, memorable hero and world, dense authored detail, excellent readability, polished VFX/rendering, and diagnostics.

Categories

1. Art direction.

• 0: No clear theme.
• 1: Theme is mostly colors/fog.
• 2: Theme affects forms, materials, UI, world, and feedback.
• 3: Distinct identity visible in every surface.

2. Hero/player.

• 0: Default primitive stack.
• 1: Basic object with glow or simple attachments.
• 2: Authored silhouette, decals/trim, state cues, collision proxy.
• 3: Memorable model with layered construction and expressive feedback.

3. Obstacles/enemies.

• 0: Cubes/cones/spheres.
• 1: Recolored repeated silhouette.
• 2: Three readable variants with telegraphs and material cues.
• 3: Varied family with animation, anticipation, and gameplay clarity.

4. Rewards/interactables.

• 0: Plain sphere/ring/token.
• 1: Repeated object with simple glow.
• 2: Two authored forms with idle/collect states and UI feedback.
• 3: Desirable, animated, and clearly valued during motion.

5. World/environment.

• 0: Flat plane, empty arena, box skyline.
• 1: Themed but sparse repeated blocks.
• 2: Layered prop kit with foreground/midground/background and scale cues.
• 3: Dense authored world that supports gameplay readability.

6. Materials/textures.

• 0: Flat colors.
• 1: Basic roughness/metalness or emissive color.
• 2: Shared material roles, procedural decals, trim, panel lines, wear/noise.
• 3: Rich cohesive material language with measured texture/resource use.

7. Lighting/render.

• 0: Default lights or unreadable darkness.
• 1: Fog/bloom used as main style.
• 2: Intentional tone mapping, exposure, key/fill/rim, contact, depth.
• 3: Cinematic but readable composition with disciplined post-processing.

8. VFX/motion.

• 0: None or random particles.
• 1: Generic particles/trails.
• 2: Event-driven VFX for boost, pickup, hit, fail, combo, shield, or spawn.
• 3: High-impact effects that clarify gameplay and remain performant.

9. UI/HUD.

• 0: Debug text or missing UI.
• 1: Generic stat-card dashboard.
• 2: Genre-specific HUD states, meters/icons, responsive text fit.
• 3: Cohesive game interface with strong hierarchy and polished transitions.

10. Performance evidence.

• 0: No metrics after visual changes.
• 1: Informal "seems fine".
• 2: Renderer counts, build/browser QA, desktop/mobile screenshots.
• 3: Baseline/post metrics, bottleneck notes, budgets, and optimized asset strategy.

Thresholds

Premium:

• Every category at least 2.
• Average at least 2.3.
• Desktop and mobile active-play screenshots captured when mobile is in scope.
• Renderer diagnostics reported after graphics changes.

Showcase:

• At least six categories score 3.
• No category below 2.
• Average at least 2.7.
• Performance evidence includes before/after or budget-aware notes.

Automatic Failures

Any of these prevents a premium/AAA/showcase claim:

• Active screenshot is primitive-dominant.
• Main world is mostly stretched boxes, flat planes, or a sparse arena.
• Hero asset is mostly default primitives plus glow.
• Obstacles or rewards are one repeated silhouette.
• HUD is mostly rectangular stat/debug cards.
• Fog, darkness, bloom, or particles hide missing authored geometry.
• UI overlaps the play path, clips text, or fails mobile safe areas.
• The game is not playable through real input.
• No active-play screenshot was captured.
• No renderer diagnostics were collected after major graphics work.

Report Format

Visual scorecard:
- Art direction: before X / after Y - evidence:
- Hero/player: before X / after Y - evidence:
- Obstacles/enemies: before X / after Y - evidence:
- Rewards/interactables: before X / after Y - evidence:
- World/environment: before X / after Y - evidence:
- Materials/textures: before X / after Y - evidence:
- Lighting/render: before X / after Y - evidence:
- VFX/motion: before X / after Y - evidence:
- UI/HUD: before X / after Y - evidence:
- Performance evidence: before X / after Y - evidence:
Average:
Automatic failures remaining:

If any category remains below threshold, state the exact next pass instead of declaring completion.