Vertex Colors, and Linear vs sRGB

[sarkahn]

Hello, I recently ran into an issue with my custom shader where it was outputting unexpected colors:

This picture is from this project. The first is a SpriteBundle with a ColorMaterial, the second is a MeshBundle with a custom material and shader copied from the example, the third is a MeshBundle with a shader that uses vertex colors. All three use the same color, but the third renders differently.

I asked about this in discord and was told to convert the color to linear col.as_rgba_linear() before I write it to the vertex colors on the mesh. I tried that and it does indeed fix the issue, the third square renders identically to the first two.

My question is: Why do I need to convert to linear color for vertex colors? Is this intentional? Is this something that should be obvious?

[riverfr0zen]

I have what I think is the same issue (at this point in Bevy 0.7.0). However, the .as_rgba_linear() approach doesn't seem to fix it for me. Instead, I have to multiply the vec3 values in the shader by 0.1 to achieve color parity.

Would love to get some understanding around this, and whether it's a feature or a bug.

[riverfr0zen]

Additional: I found that col.as_linear_rgba_f32() brings the colors closer. However it is still a little off (lighter). Attaching comparisons:

Multiplying vec3 by 0.1:

col.as_linear_rgba_f32()) comes close but the rect colors on the left are still a little lighter than the original on the right

[thomasvt]

For anyone who finds this post, looking for a solution: (it's not a bug)

• Whenever you see RGB codes in the "human" world, those are almost always sRGB aka non-linear RGB...
• Graphics engines must blend colors, this only works well on linear RGB

--> when you pass a color as raw floats to Bevy, Bevy expects you to pre-convert them to linear.
After doing that, the RGB values that go in and come out (by taking a screenshot) are exact matches, both for dark and light colors.

Complete example: (put bevy = "0.11" in your Cargo.toml and it should run)

use bevy::{
    prelude::*,
    sprite::{MaterialMesh2dBundle, Mesh2dHandle},
};

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

fn setup(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    let mut mesh = Mesh::from(shape::Quad::default());
    
    let color = Color::rgb_u8(180, 82, 82); // the red from https://lospec.com/palette-list/cc-29
    let color_linear_f32 = color.as_linear_rgba_f32(); // !!! pre-convet to linear !!!

    mesh.insert_attribute(Mesh::ATTRIBUTE_COLOR, vec![color_linear_f32; 4]); // pass to Bevy

    let mesh_handle: Mesh2dHandle = meshes.add(mesh).into();

    commands.spawn(MaterialMesh2dBundle {
        mesh: mesh_handle.clone(),
        transform: Transform::from_translation(Vec3::new(-96., 0., 0.))
            .with_scale(Vec3::splat(128.)),
        material: materials.add(ColorMaterial::default()),
        ..default()
    });

    commands.spawn(Camera2dBundle::default());
}