hermes-workspace/docs/hermesworld/graphics-usability-plan.md

HermesWorld Graphics + Usability Development Plan

Status: start now Owner: Eric / Aurora Stack: Hermes Workspace + React + Three.js / React Three Fiber

Goal

Upgrade HermesWorld from "promising web demo" to "serious playable world" with:

• stronger visual identity
• much better usability
• more believable characters
• better screenshot / clip quality
• a clean path that stays web-native

Core decision

Do not switch engines now.

Stay on:

• Three.js
• React Three Fiber
• current Hermes Workspace integration

Reason:

• web shareability matters
• X traffic matters
• embedding/dashboard mode matters
• current blockers are art direction, assets, rendering, and UX, not engine choice

Hard truth on "real-looking characters"

What is realistic right now

We can get to:

• stylized-real / semi-real / premium MMO-lite
• strong silhouettes
• better faces/hair/clothes
• better animation
• more human proportions
• better materials and lighting

What is not realistic right now

Not this sprint:

• AAA Unreal photoreal humans
• fully custom hero character system from scratch
• hundreds of unique high-end characters

Recommended character direction

Target look:

• semi-real fantasy RPG characters
• more grounded than Roblox / low-poly toy figures
• less uncanny than rushed photoreal
• readable at gameplay distance
• works in browser performance budgets

Character pipeline to start now

Best first path

Use a proven character source instead of inventing characters from primitives.

Recommended order:

1. Ready Player Me or equivalent avatar source for fast believable human bases
2. Mixamo for animation clips
3. export to GLB
4. optimize materials / texture sizes for browser
5. adapt wardrobe/colors to HermesWorld visual language

Why this path

• gets believable humans fast
• works with browser GLB pipeline
• animation is solved sooner
• lets us focus on world + UX instead of making characters from zero

First character set we need

• player base male
• player base female
• scholar / oracle NPC
• blacksmith / forge NPC
• guard / knight NPC
• merchant / villager NPC

Do not start with huge variety. Get 4-6 great archetypes first.

Animation pipeline

First animation pack

Need:

• idle
• walk
• run
• talk / gesture
• inspect / use
• celebrate / emote
• sit or kneel if easy

Character behavior goals

• no stiff statue NPCs
• idle should feel alive
• movement should read clearly from distance
• talking should feel intentional even before lip sync

Environment upgrade priorities

1. Landmark pass

Every zone needs strong silhouette.

Immediate targets:

• Agora central monument / obelisk / sigil altar
• Oracle tower / ring structure
• Forge furnace / chimney / heat source
• Grove memory tree / crystal tree / archive roots
• Arena ring / banners / gates
• Training Grounds camp / gate / tutorial shrine

2. Ground + path pass

Fix the current "objects on a plane" feeling.

Need:

• stronger stone paths
• path borders
• elevation changes
• stairs / slopes / platform edges
• clustered vegetation instead of random scatter

3. Prop clustering

Move from generic scattered props to authored compositions.

Need:

• market stalls that actually compose into scenes
• bench / torch / crate / barrel clusters
• decorative banners and signposts
• repeating prop kits per zone

4. Lighting / atmosphere

Highest ROI visual upgrade.

Need:

• stronger key light direction
• fog / distance atmosphere
• warm firelight pools
• cooler shadow balance
• subtle bloom / post processing
• skybox that supports mythic mood

Usability upgrade priorities

1. Readability of objective flow

The user should always know:

• where they are
• what to do next
• what is interactable
• what their agents are doing

Immediate changes

• clearer quest objective widget
• stronger waypoint / marker language
• better hover/interact outlines
• more distinct NPC labels

2. HUD cleanup

Current HUD should feel more like a game and less like mixed prototype layers.

Need:

• one consistent HUD material language
• clearer bottom action bar
• tighter minimap frame
• cleaner player stats card
• less visual noise from debug/admin leftovers

3. Chat / social UX

Chat should not dominate the scene.

Need:

• smaller, cleaner chat panel
• better contrast and message hierarchy
• easier collapse/minimize behavior
• less overlap with gameplay space

4. Input / interaction cues

Need immediate affordances:

• interact prompt treatment
• click target confidence
• path-to-target feedback
• clearer selected NPC / object state

Performance plan

This all has to stay browser-safe.

Rules

• prefer instancing for repeated props
• reduce unique materials
• compress textures
• cap texture resolution aggressively
• use LOD where needed
• keep postprocessing restrained
• test draw calls after each art pass

Budget mindset

For each major scene ask:

• how many characters on screen?
• how many unique materials?
• how many dynamic lights?
• how many transparent effects?

Development tracks

Track A — Characters

Deliver believable people fast.

Start now

• choose character source
• pick 4-6 NPC archetypes
• pick 1 player archetype
• get GLB import path working cleanly
• wire idle + walk + talk test scene

Track B — Agora visual remake

Use Agora as the first gold-standard zone.

Start now

• rebuild central plaza composition
• improve stone ground / path circles
• add stronger firelight and monument detail
• replace placeholder NPC bodies with first believable characters

Track C — HUD / usability pass

Start now

• objective widget redesign
• minimap cleanup
• stats card cleanup
• interaction marker cleanup
• remove any workspace-local/debug carryover from game-facing UI

Track D — Asset pipeline

Start now

• standardize GLB imports
• define texture size limits
• define naming conventions
• define animation clip naming
• define NPC archetype list

Immediate first sprint

Sprint 1: "Agora believable"

Make only the Agora look and feel dramatically better.

Ship these first:

1. one upgraded player character
2. three upgraded NPC archetypes
3. better idle/walk/talk animations
4. rebuilt central plaza composition
5. better firelight/fog/post
6. cleaned HUD around objective + minimap + bottom bar

If Agora feels real, the rest of the world becomes believable.

Exact first implementation steps

Step 1

Replace current primitive character stand-ins with imported GLB humanoids.

Step 2

Add animation controller for:

• idle
• walk
• gesture/talk

Step 3

Rebuild Agora center using:

• stronger monument
• radial paving
• authored prop clusters
• meaningful NPC placement

Step 4

Polish camera and UI for the new scene.

Step 5

Capture screenshots/clips and tune from what looks weak.

Success criteria

We know this is working when:

• a screenshot reads like a real game scene, not a prototype
• characters look like people, not placeholders
• the objective and interactions are obvious
• the page is clip-worthy on X
• the browser still runs smoothly

My recommendation

Start now with:

1. character pipeline
2. Agora remake
3. HUD cleanup

That is the shortest path to the result you actually want.

Immediate next task

Implement the first "Agora believable" pass:

• import better humanoid characters
• wire idle/walk/talk clips
• rebuild the central plaza composition around those characters
• tune lighting/fog/post
• clean HUD overlap