bevy/examples/3d/wireframe.rs
Carter Anderson 015f2c69ca
Merge Style properties into Node. Use ComputedNode for computed properties. (#15975)
# Objective

Continue improving the user experience of our UI Node API in the
direction specified by [Bevy's Next Generation Scene / UI
System](https://github.com/bevyengine/bevy/discussions/14437)

## Solution

As specified in the document above, merge `Style` fields into `Node`,
and move "computed Node fields" into `ComputedNode` (I chose this name
over something like `ComputedNodeLayout` because it currently contains
more than just layout info. If we want to break this up / rename these
concepts, lets do that in a separate PR). `Style` has been removed.

This accomplishes a number of goals:

## Ergonomics wins

Specifying both `Node` and `Style` is now no longer required for
non-default styles

Before:
```rust
commands.spawn((
    Node::default(),
    Style {
        width:  Val::Px(100.),
        ..default()
    },
));
```

After:

```rust
commands.spawn(Node {
    width:  Val::Px(100.),
    ..default()
});
```

## Conceptual clarity

`Style` was never a comprehensive "style sheet". It only defined "core"
style properties that all `Nodes` shared. Any "styled property" that
couldn't fit that mold had to be in a separate component. A "real" style
system would style properties _across_ components (`Node`, `Button`,
etc). We have plans to build a true style system (see the doc linked
above).

By moving the `Style` fields to `Node`, we fully embrace `Node` as the
driving concept and remove the "style system" confusion.

## Next Steps

* Consider identifying and splitting out "style properties that aren't
core to Node". This should not happen for Bevy 0.15.

---

## Migration Guide

Move any fields set on `Style` into `Node` and replace all `Style`
component usage with `Node`.

Before:
```rust
commands.spawn((
    Node::default(),
    Style {
        width:  Val::Px(100.),
        ..default()
    },
));
```

After:

```rust
commands.spawn(Node {
    width:  Val::Px(100.),
    ..default()
});
```

For any usage of the "computed node properties" that used to live on
`Node`, use `ComputedNode` instead:

Before:
```rust
fn system(nodes: Query<&Node>) {
    for node in &nodes {
        let computed_size = node.size();
    }
}
```

After:
```rust
fn system(computed_nodes: Query<&ComputedNode>) {
    for computed_node in &computed_nodes {
        let computed_size = computed_node.size();
    }
}
```
2024-10-18 22:25:33 +00:00

158 lines
4.9 KiB
Rust

//! Showcases wireframe rendering.
//!
//! Wireframes currently do not work when using webgl or webgpu.
//! Supported platforms:
//! - DX12
//! - Vulkan
//! - Metal
//!
//! This is a native only feature.
use bevy::{
color::palettes::css::*,
pbr::wireframe::{NoWireframe, Wireframe, WireframeColor, WireframeConfig, WireframePlugin},
prelude::*,
render::{
render_resource::WgpuFeatures,
settings::{RenderCreation, WgpuSettings},
RenderPlugin,
},
};
fn main() {
App::new()
.add_plugins((
DefaultPlugins.set(RenderPlugin {
render_creation: RenderCreation::Automatic(WgpuSettings {
// WARN this is a native only feature. It will not work with webgl or webgpu
features: WgpuFeatures::POLYGON_MODE_LINE,
..default()
}),
..default()
}),
// You need to add this plugin to enable wireframe rendering
WireframePlugin,
))
// Wireframes can be configured with this resource. This can be changed at runtime.
.insert_resource(WireframeConfig {
// The global wireframe config enables drawing of wireframes on every mesh,
// except those with `NoWireframe`. Meshes with `Wireframe` will always have a wireframe,
// regardless of the global configuration.
global: true,
// Controls the default color of all wireframes. Used as the default color for global wireframes.
// Can be changed per mesh using the `WireframeColor` component.
default_color: WHITE.into(),
})
.add_systems(Startup, setup)
.add_systems(Update, update_colors)
.run();
}
/// set up a simple 3D scene
fn setup(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<StandardMaterial>>,
) {
// Red cube: Never renders a wireframe
commands.spawn((
Mesh3d(meshes.add(Cuboid::default())),
MeshMaterial3d(materials.add(Color::from(RED))),
Transform::from_xyz(-1.0, 0.5, -1.0),
NoWireframe,
));
// Orange cube: Follows global wireframe setting
commands.spawn((
Mesh3d(meshes.add(Cuboid::default())),
MeshMaterial3d(materials.add(Color::from(ORANGE))),
Transform::from_xyz(0.0, 0.5, 0.0),
));
// Green cube: Always renders a wireframe
commands.spawn((
Mesh3d(meshes.add(Cuboid::default())),
MeshMaterial3d(materials.add(Color::from(LIME))),
Transform::from_xyz(1.0, 0.5, 1.0),
Wireframe,
// This lets you configure the wireframe color of this entity.
// If not set, this will use the color in `WireframeConfig`
WireframeColor { color: LIME.into() },
));
// plane
commands.spawn((
Mesh3d(meshes.add(Plane3d::default().mesh().size(5.0, 5.0))),
MeshMaterial3d(materials.add(Color::from(BLUE))),
// You can insert this component without the `Wireframe` component
// to override the color of the global wireframe for this mesh
WireframeColor {
color: BLACK.into(),
},
));
// light
commands.spawn((PointLight::default(), Transform::from_xyz(2.0, 4.0, 2.0)));
// camera
commands.spawn((
Camera3d::default(),
Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
));
// Text used to show controls
commands.spawn((
Text::default(),
Node {
position_type: PositionType::Absolute,
top: Val::Px(12.0),
left: Val::Px(12.0),
..default()
},
));
}
/// This system let's you toggle various wireframe settings
fn update_colors(
keyboard_input: Res<ButtonInput<KeyCode>>,
mut config: ResMut<WireframeConfig>,
mut wireframe_colors: Query<&mut WireframeColor, With<Wireframe>>,
mut text: Single<&mut Text>,
) {
text.0 = format!(
"Controls
---------------
Z - Toggle global
X - Change global color
C - Change color of the green cube wireframe
WireframeConfig
-------------
Global: {}
Color: {:?}",
config.global, config.default_color,
);
// Toggle showing a wireframe on all meshes
if keyboard_input.just_pressed(KeyCode::KeyZ) {
config.global = !config.global;
}
// Toggle the global wireframe color
if keyboard_input.just_pressed(KeyCode::KeyX) {
config.default_color = if config.default_color == WHITE.into() {
DEEP_PINK.into()
} else {
WHITE.into()
};
}
// Toggle the color of a wireframe using WireframeColor and not the global color
if keyboard_input.just_pressed(KeyCode::KeyC) {
for mut color in &mut wireframe_colors {
color.color = if color.color == LIME.into() {
RED.into()
} else {
LIME.into()
};
}
}
}