bevy_ui_render

The renderer for bevy_ui. Reads the laid-out node tree from bevy_ui and produces draw calls for backgrounds, borders, images, and text.

Purpose

The data/render split mirrors the rest of the workspace. bevy_ui_render exists so users can swap in a custom UI renderer (immediate-mode, vector-rendered, accessible-DOM) without forking bevy_ui.

Directory layout

crates/bevy_ui_render/src/
├── lib.rs              # UiRenderPlugin
├── render/             # Extract / prepare / queue / draw
├── pipeline.rs         # The UI pipeline
├── ui_material.rs      # UiMaterial trait (custom UI shaders)
├── ui_texture_slice.rs # Slice / nine-patch
├── box_shadow.rs       # Box-shadow rendering
├── gradient.rs         # Gradient backgrounds
└── …

Key abstractions

Type	File	Description
UiRenderPlugin	crates/bevy_ui_render/src/lib.rs	Adds the UI pipeline.
UiMaterial (trait)	crates/bevy_ui_render/src/ui_material.rs	UI-flavored material trait for custom shaders.
MaterialNode<M>	crates/bevy_ui_render/src/ui_material.rs	Component pairing a UI node with a custom material.
Extracted UI types	crates/bevy_ui_render/src/render/	Per-frame render-world copies of node data.

How it works

The extract phase walks the laid-out UI tree, copying per-node data (computed rectangle, color, image handle, border radius, shadow, gradient) into the render world. The prepare phase builds vertex buffers; the queue phase produces TransparentUi phase items sorted by Z; the render phase walks the phase items and issues batched draw calls.

A custom UiMaterial lets you write a custom WGSL fragment shader for a UI node — useful for background effects, blurred panels, custom borders.

Integration points

• Depends on: bevy_render, bevy_core_pipeline, bevy_ui, bevy_text, bevy_image, bevy_color, bevy_camera.
• Depended on by: Default plugins.

Entry points for modification

• New visual feature (e.g., a new effect): add a new render path under render/ plus a shader.
• Custom material: users implement UiMaterial. See examples/ui/.
• Batching tweaks: render/. The current path tries to merge consecutive nodes that share textures.

See also

• bevy_ui — produces the data.
• bevy_text — text rendering glyphs.
• bevy_render, bevy_core_pipeline.