2D Rendering / Mesh2d Alpha Mode

Back to examples View in GitHub
This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.

//! This example is used to test how transforms interact with alpha modes for [`Mesh2d`] entities with a [`MeshMaterial2d`].
//! This makes sure the depth buffer is correctly being used for opaque and transparent 2d meshes

use bevy::{
    color::palettes::css::{BLUE, GREEN, WHITE},
    prelude::*,
    sprite::AlphaMode2d,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    commands.spawn(Camera2d);

    let texture_handle = asset_server.load("branding/icon.png");
    let mesh_handle = meshes.add(Rectangle::from_size(Vec2::splat(256.0)));

    // opaque
    // Each sprite should be square with the transparent parts being completely black
    // The blue sprite should be on top with the white and green one behind it
    commands.spawn((
        Mesh2d(mesh_handle.clone()),
        MeshMaterial2d(materials.add(ColorMaterial {
            color: WHITE.into(),
            alpha_mode: AlphaMode2d::Opaque,
            texture: Some(texture_handle.clone()),
        })),
        Transform::from_xyz(-400.0, 0.0, 0.0),
    ));
    commands.spawn((
        Mesh2d(mesh_handle.clone()),
        MeshMaterial2d(materials.add(ColorMaterial {
            color: BLUE.into(),
            alpha_mode: AlphaMode2d::Opaque,
            texture: Some(texture_handle.clone()),
        })),
        Transform::from_xyz(-300.0, 0.0, 1.0),
    ));
    commands.spawn((
        Mesh2d(mesh_handle.clone()),
        MeshMaterial2d(materials.add(ColorMaterial {
            color: GREEN.into(),
            alpha_mode: AlphaMode2d::Opaque,
            texture: Some(texture_handle.clone()),
        })),
        Transform::from_xyz(-200.0, 0.0, -1.0),
    ));

    // Test the interaction between opaque/mask and transparent meshes
    // The white sprite should be:
    // - only the icon is opaque but background is transparent
    // - on top of the green sprite
    // - behind the blue sprite
    commands.spawn((
        Mesh2d(mesh_handle.clone()),
        MeshMaterial2d(materials.add(ColorMaterial {
            color: WHITE.into(),
            alpha_mode: AlphaMode2d::Mask(0.5),
            texture: Some(texture_handle.clone()),
        })),
        Transform::from_xyz(200.0, 0.0, 0.0),
    ));
    commands.spawn((
        Mesh2d(mesh_handle.clone()),
        MeshMaterial2d(materials.add(ColorMaterial {
            color: BLUE.with_alpha(0.7).into(),
            alpha_mode: AlphaMode2d::Blend,
            texture: Some(texture_handle.clone()),
        })),
        Transform::from_xyz(300.0, 0.0, 1.0),
    ));
    commands.spawn((
        Mesh2d(mesh_handle.clone()),
        MeshMaterial2d(materials.add(ColorMaterial {
            color: GREEN.with_alpha(0.7).into(),
            alpha_mode: AlphaMode2d::Blend,
            texture: Some(texture_handle),
        })),
        Transform::from_xyz(400.0, 0.0, -1.0),
    ));
}