[Epic] Modern UI: frosted-glass (glassmorphism) interface, sleek and clean, behind a "Modern interface" switch #1242

New issue

Open

opened 2026-10-28 19:58:03 +00:00 by sky_line · 0 comments

sky_line commented

2026-10-28 19:58:03 +00:00

Owner

Rework the UI into a sleeker, more modern, cleaner look, behind one switch: Preferences > UI, "Modern interface" on / off. The current UI stays fully available, and switching is live (or needs at most a UI reload, never a restart).

How the glass is drawn (Vulkan, fixed cost):

One blur source per frame: after the world is composited (pre-UI), build a downsampled blur pyramid of the scene (dual-Kawase / Gaussian, 3-5 levels, about 1/4 to 1/16 resolution). Every glass panel samples it. One chain per frame no matter how many panels, so the cost is fixed and tiny.
Panel shader: a UI shader samples the blurred scene at the panel's screen rect, then adds a tint (theme colour plus opacity), a subtle noise / grain to avoid banding, a 1 px top-edge highlight and a rounded-rect SDF with an outer soft shadow. No per-widget textures.
Stacked floaters: a floater over another glass floater samples the same world blur (no recursive blur). The look stays right and the cost stays flat. Optionally darken more when panels overlap.
Readability: the tint opacity rises automatically behind dense text, plus a minimum contrast guarantee (text colour vs measured background luminance from the blur's lowest mip). There is a "reduce transparency" option for accessibility and screenshots.
Tiers: on low-end / pressure tiers, fall back to solid tinted panels. The look degrades but stays clean, and costs nothing.
HUD / snapshots: glass never blurs HUD attachments into itself oddly. Snapshots taken without the UI don't include it.

Tokens: glass tint, opacity, blur radius, edge highlight and corner radius are theme tokens, so skins and the light / dark themes can tune them. A user slider covers transparency only (minimal config).

Goals

Less chrome. Thinner floater frames and title bars, fewer borders and bevels, more whitespace. Flat surfaces with a subtle elevation (soft shadow) instead of outlined boxes.
One type scale and spacing grid. A consistent font size / weight hierarchy and 4/8 px spacing across floaters, so panels stop looking hand-placed. Fix the absolute-top layouts that break at UI scales (see #1224).
Modern controls. Rounded inputs, segmented controls, toggle switches for booleans, cleaner sliders and combo boxes, and clear hover / focus / disabled states. The vector icons (#1056) are everywhere.
Calmer colour. A refined dark theme (and light), one accent colour, and readable contrast (WCAG AA). Theme tokens live in colors.xml, so skins can override them.
Layout. Collapsible side panels instead of stacks of floaters where it fits (inventory, people, chat), toolbars that auto-hide (#920), and less modal clutter.
Motion. Short, subtle transitions (fade or slide for floaters and menus). They respect a "reduce motion" option.

How

A skin-level switch. The modern UI is a separate skin / XUI variant set plus theme tokens, selected by the switch. Shared C++ widgets gain the styling hooks (corner radius, elevation, spacing tokens) that both skins use. Avoid forking every floater: start with style tokens and the common widgets (button, line editor, combo, slider, checkbox, tab, scroll, floater frame), then redo the highest-traffic floaters (chat / conversations, inventory, people, preferences, Photo Studio, build).
Stays compatible. Old saved floater rects still work; the switch never moves a user's layout unexpectedly.
Performance. UI rendering stays cheap. Shadows and rounded corners are drawn in the UI shader, not per-widget textures.
Coordinate with #489 (Classic UI mode explore) and #1056 (vector icon set): the switch should be one axis (Classic / Default / Modern) rather than several overlapping toggles.

Process

Mockups first (a handful of key screens), owner review, then implement in stages, starting with the widgets and frame, then floaters one at a time.
Screenshot pass at 100 / 125 / 150 % UI scale and at 1080p / 1440p / 4K before each stage lands.

Related: #1056 (vector icons), #489 (classic UI mode), #920 (auto-hiding top bars), #918 (viewport sized to the visible area), #1224 (scrollable / resizable tall floaters).

Rework the UI into a sleeker, more modern, cleaner look, behind **one switch**: Preferences > UI, "Modern interface" on / off. The current UI stays fully available, and switching is live (or needs at most a UI reload, never a restart). **How the glass is drawn (Vulkan, fixed cost):** - **One blur source per frame:** after the world is composited (pre-UI), build a downsampled blur pyramid of the scene (dual-Kawase / Gaussian, 3-5 levels, about 1/4 to 1/16 resolution). Every glass panel samples it. One chain per frame no matter how many panels, so the cost is fixed and tiny. - **Panel shader:** a UI shader samples the blurred scene at the panel's screen rect, then adds a tint (theme colour plus opacity), a subtle noise / grain to avoid banding, a 1 px top-edge highlight and a rounded-rect SDF with an outer soft shadow. No per-widget textures. - **Stacked floaters:** a floater over another glass floater samples the same world blur (no recursive blur). The look stays right and the cost stays flat. Optionally darken more when panels overlap. - **Readability:** the tint opacity rises automatically behind dense text, plus a minimum contrast guarantee (text colour vs measured background luminance from the blur's lowest mip). There is a "reduce transparency" option for accessibility and screenshots. - **Tiers:** on low-end / pressure tiers, fall back to solid tinted panels. The look degrades but stays clean, and costs nothing. - **HUD / snapshots:** glass never blurs HUD attachments into itself oddly. Snapshots taken without the UI don't include it. **Tokens:** glass tint, opacity, blur radius, edge highlight and corner radius are theme tokens, so skins and the light / dark themes can tune them. A user slider covers transparency only (minimal config). ## Goals - **Less chrome.** Thinner floater frames and title bars, fewer borders and bevels, more whitespace. Flat surfaces with a subtle elevation (soft shadow) instead of outlined boxes. - **One type scale and spacing grid.** A consistent font size / weight hierarchy and 4/8 px spacing across floaters, so panels stop looking hand-placed. Fix the absolute-`top` layouts that break at UI scales (see #1224). - **Modern controls.** Rounded inputs, segmented controls, toggle switches for booleans, cleaner sliders and combo boxes, and clear hover / focus / disabled states. The vector icons (#1056) are everywhere. - **Calmer colour.** A refined dark theme (and light), one accent colour, and readable contrast (WCAG AA). Theme tokens live in colors.xml, so skins can override them. - **Layout.** Collapsible side panels instead of stacks of floaters where it fits (inventory, people, chat), toolbars that auto-hide (#920), and less modal clutter. - **Motion.** Short, subtle transitions (fade or slide for floaters and menus). They respect a "reduce motion" option. ## How - **A skin-level switch.** The modern UI is a separate skin / XUI variant set plus theme tokens, selected by the switch. Shared C++ widgets gain the styling hooks (corner radius, elevation, spacing tokens) that both skins use. Avoid forking every floater: start with style tokens and the common widgets (button, line editor, combo, slider, checkbox, tab, scroll, floater frame), then redo the highest-traffic floaters (chat / conversations, inventory, people, preferences, Photo Studio, build). - **Stays compatible.** Old saved floater rects still work; the switch never moves a user's layout unexpectedly. - **Performance.** UI rendering stays cheap. Shadows and rounded corners are drawn in the UI shader, not per-widget textures. - Coordinate with #489 (Classic UI mode explore) and #1056 (vector icon set): the switch should be one axis (Classic / Default / Modern) rather than several overlapping toggles. ## Process - Mockups first (a handful of key screens), owner review, then implement in stages, starting with the widgets and frame, then floaters one at a time. - Screenshot pass at 100 / 125 / 150 % UI scale and at 1080p / 1440p / 4K before each stage lands. Related: #1056 (vector icons), #489 (classic UI mode), #920 (auto-hiding top bars), #918 (viewport sized to the visible area), #1224 (scrollable / resizable tall floaters).

sky_line added this to the Slipstream project

2026-10-28 19:58:03 +00:00

sky_line changed title from ~~[Epic] Modern UI: sleeker, cleaner interface behind a "Modern interface" switch~~ to [Epic] Modern UI: frosted-glass (glassmorphism) interface, sleek and clean, behind a "Modern interface" switch

2026-10-28 19:58:53 +00:00

sky_line referenced this issue

2026-10-29 02:50:34 +00:00

UI render backend: GPU-driven RmlUi render interface in the Vulkan renderer (glass, multi-window, VR panels) #703

sky_line referenced this issue from a commit

2026-11-07 22:17:43 +00:00

#1242: The new interface's widget kit: theme tokens and the component stylesheet

sky_line referenced this issue from a commit

2026-11-07 22:17:43 +00:00

#1242: allowlist the new UI command field select-all (Ctrl+A) in the key-commands check