Do all blending in gamma space
This is an experiment to investigate solutions to * https://github.com/emilk/egui/issues/1410
This commit is contained in:
parent
0f0031ebbb
commit
4969f7e18b
5 changed files with 30 additions and 90 deletions
|
@ -273,7 +273,7 @@ impl Painter {
|
||||||
);
|
);
|
||||||
|
|
||||||
if !cfg!(target_arch = "wasm32") {
|
if !cfg!(target_arch = "wasm32") {
|
||||||
self.gl.enable(glow::FRAMEBUFFER_SRGB);
|
self.gl.disable(glow::FRAMEBUFFER_SRGB);
|
||||||
check_for_gl_error!(&self.gl, "FRAMEBUFFER_SRGB");
|
check_for_gl_error!(&self.gl, "FRAMEBUFFER_SRGB");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,72 +5,32 @@
|
||||||
uniform sampler2D u_sampler;
|
uniform sampler2D u_sampler;
|
||||||
|
|
||||||
#ifdef NEW_SHADER_INTERFACE
|
#ifdef NEW_SHADER_INTERFACE
|
||||||
in vec4 v_rgba;
|
in vec4 v_rgba_gamma; // 0-1 RGBA gamma
|
||||||
in vec2 v_tc;
|
in vec2 v_tc;
|
||||||
out vec4 f_color;
|
out vec4 f_color;
|
||||||
// a dirty hack applied to support webGL2
|
// a dirty hack applied to support webGL2
|
||||||
#define gl_FragColor f_color
|
#define gl_FragColor f_color
|
||||||
#define texture2D texture
|
#define texture2D texture
|
||||||
#else
|
#else
|
||||||
varying vec4 v_rgba;
|
varying vec4 v_rgba_gamma; // 0-1 RGBA gamma
|
||||||
varying vec2 v_tc;
|
varying vec2 v_tc;
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
#ifdef SRGB_SUPPORTED
|
// 0-255 sRGB from 0-1 linear
|
||||||
void main() {
|
vec3 srgb_from_linear(vec3 rgb) {
|
||||||
// The texture sampler is sRGB aware, and OpenGL already expects linear rgba output
|
bvec3 cutoff = lessThan(rgb, vec3(0.0031308));
|
||||||
// so no need for any sRGB conversions here:
|
vec3 lower = rgb * vec3(3294.6);
|
||||||
gl_FragColor = v_rgba * texture2D(u_sampler, v_tc);
|
vec3 higher = vec3(269.025) * pow(rgb, vec3(1.0 / 2.4)) - vec3(14.025);
|
||||||
}
|
return mix(higher, lower, vec3(cutoff));
|
||||||
#else
|
}
|
||||||
// 0-255 sRGB from 0-1 linear
|
|
||||||
vec3 srgb_from_linear(vec3 rgb) {
|
|
||||||
bvec3 cutoff = lessThan(rgb, vec3(0.0031308));
|
|
||||||
vec3 lower = rgb * vec3(3294.6);
|
|
||||||
vec3 higher = vec3(269.025) * pow(rgb, vec3(1.0 / 2.4)) - vec3(14.025);
|
|
||||||
return mix(higher, lower, vec3(cutoff));
|
|
||||||
}
|
|
||||||
|
|
||||||
vec4 srgba_from_linear(vec4 rgba) {
|
// 0-255 sRGBA from 0-1 linear
|
||||||
return vec4(srgb_from_linear(rgba.rgb), 255.0 * rgba.a);
|
vec4 srgba_from_linear(vec4 rgba) {
|
||||||
}
|
return vec4(srgb_from_linear(rgba.rgb), 255.0 * rgba.a);
|
||||||
|
}
|
||||||
|
|
||||||
// 0-1 linear from 0-255 sRGB
|
void main() {
|
||||||
vec3 linear_from_srgb(vec3 srgb) {
|
vec4 tex_color_linear = texture2D(u_sampler, v_tc);
|
||||||
bvec3 cutoff = lessThan(srgb, vec3(10.31475));
|
vec4 tex_color_gamma = srgba_from_linear(tex_color_linear) / 255.0;
|
||||||
vec3 lower = srgb / vec3(3294.6);
|
gl_FragColor = v_rgba_gamma * tex_color_gamma;
|
||||||
vec3 higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4));
|
}
|
||||||
return mix(higher, lower, vec3(cutoff));
|
|
||||||
}
|
|
||||||
|
|
||||||
vec4 linear_from_srgba(vec4 srgba) {
|
|
||||||
return vec4(linear_from_srgb(srgba.rgb), srgba.a / 255.0);
|
|
||||||
}
|
|
||||||
|
|
||||||
void main() {
|
|
||||||
// We must decode the colors, since WebGL1 doesn't come with sRGBA textures:
|
|
||||||
vec4 texture_rgba = linear_from_srgba(texture2D(u_sampler, v_tc) * 255.0);
|
|
||||||
/// Multiply vertex color with texture color (in linear space).
|
|
||||||
gl_FragColor = v_rgba * texture_rgba;
|
|
||||||
|
|
||||||
// WebGL1 doesn't support linear blending in the framebuffer,
|
|
||||||
// so we do a hack here where we change the premultiplied alpha
|
|
||||||
// to do the multiplication in gamma space instead:
|
|
||||||
|
|
||||||
// Unmultiply alpha:
|
|
||||||
if (gl_FragColor.a > 0.0) {
|
|
||||||
gl_FragColor.rgb /= gl_FragColor.a;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Empiric tweak to make e.g. shadows look more like they should:
|
|
||||||
gl_FragColor.a *= sqrt(gl_FragColor.a);
|
|
||||||
|
|
||||||
// To gamma:
|
|
||||||
gl_FragColor = srgba_from_linear(gl_FragColor) / 255.0;
|
|
||||||
|
|
||||||
// Premultiply alpha, this time in gamma space:
|
|
||||||
if (gl_FragColor.a > 0.0) {
|
|
||||||
gl_FragColor.rgb *= gl_FragColor.a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#endif
|
|
||||||
|
|
|
@ -14,30 +14,17 @@
|
||||||
|
|
||||||
uniform vec2 u_screen_size;
|
uniform vec2 u_screen_size;
|
||||||
I vec2 a_pos;
|
I vec2 a_pos;
|
||||||
I vec4 a_srgba; // 0-255 sRGB
|
I vec4 a_srgba; // 0-255 sRGBA gamma
|
||||||
I vec2 a_tc;
|
I vec2 a_tc;
|
||||||
O vec4 v_rgba;
|
O vec4 v_rgba_gamma; // 0-1 RGBA gamma
|
||||||
O vec2 v_tc;
|
O vec2 v_tc;
|
||||||
|
|
||||||
// 0-1 linear from 0-255 sRGB
|
|
||||||
vec3 linear_from_srgb(vec3 srgb) {
|
|
||||||
bvec3 cutoff = lessThan(srgb, vec3(10.31475));
|
|
||||||
vec3 lower = srgb / vec3(3294.6);
|
|
||||||
vec3 higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4));
|
|
||||||
return mix(higher, lower, V(cutoff));
|
|
||||||
}
|
|
||||||
|
|
||||||
vec4 linear_from_srgba(vec4 srgba) {
|
|
||||||
return vec4(linear_from_srgb(srgba.rgb), srgba.a / 255.0);
|
|
||||||
}
|
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
gl_Position = vec4(
|
gl_Position = vec4(
|
||||||
2.0 * a_pos.x / u_screen_size.x - 1.0,
|
2.0 * a_pos.x / u_screen_size.x - 1.0,
|
||||||
1.0 - 2.0 * a_pos.y / u_screen_size.y,
|
1.0 - 2.0 * a_pos.y / u_screen_size.y,
|
||||||
0.0,
|
0.0,
|
||||||
1.0);
|
1.0);
|
||||||
// egui encodes vertex colors in gamma space, so we must decode the colors here:
|
v_rgba_gamma = a_srgba / 255.0;
|
||||||
v_rgba = linear_from_srgba(a_srgba);
|
|
||||||
v_tc = a_tc;
|
v_tc = a_tc;
|
||||||
}
|
}
|
||||||
|
|
|
@ -311,22 +311,22 @@ impl Rgba {
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn from_luminance_alpha(l: f32, a: f32) -> Self {
|
pub fn from_luminance_alpha(l: f32, a: f32) -> Self {
|
||||||
crate::epaint_assert!(0.0 <= l && l <= 1.0);
|
crate::epaint_assert!(0.0 <= l && l <= 1.0, "l: {}", l);
|
||||||
crate::epaint_assert!(0.0 <= a && a <= 1.0);
|
crate::epaint_assert!(0.0 <= a && a <= 1.0, "a: {}", a);
|
||||||
Self([l * a, l * a, l * a, a])
|
Self([l * a, l * a, l * a, a])
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Transparent black
|
/// Transparent black
|
||||||
#[inline(always)]
|
#[inline(always)]
|
||||||
pub fn from_black_alpha(a: f32) -> Self {
|
pub fn from_black_alpha(a: f32) -> Self {
|
||||||
crate::epaint_assert!(0.0 <= a && a <= 1.0);
|
crate::epaint_assert!(0.0 <= a && a <= 1.0, "a: {}", a);
|
||||||
Self([0.0, 0.0, 0.0, a])
|
Self([0.0, 0.0, 0.0, a])
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Transparent white
|
/// Transparent white
|
||||||
#[inline(always)]
|
#[inline(always)]
|
||||||
pub fn from_white_alpha(a: f32) -> Self {
|
pub fn from_white_alpha(a: f32) -> Self {
|
||||||
crate::epaint_assert!(0.0 <= a && a <= 1.0);
|
crate::epaint_assert!(0.0 <= a && a <= 1.0, "a: {}", a);
|
||||||
Self([a, a, a, a])
|
Self([a, a, a, a])
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -197,13 +197,10 @@ impl FontImage {
|
||||||
/// If you are having problems with text looking skinny and pixelated, try
|
/// If you are having problems with text looking skinny and pixelated, try
|
||||||
/// setting a lower gamma, e.g. `0.5`.
|
/// setting a lower gamma, e.g. `0.5`.
|
||||||
pub fn srgba_pixels(&'_ self, gamma: f32) -> impl ExactSizeIterator<Item = Color32> + '_ {
|
pub fn srgba_pixels(&'_ self, gamma: f32) -> impl ExactSizeIterator<Item = Color32> + '_ {
|
||||||
self.pixels.iter().map(move |coverage| {
|
self.pixels.iter().map(move |&coverage| {
|
||||||
// This is arbitrarily chosen to make text look as good as possible.
|
Color32::from(crate::Rgba::from_white_alpha(
|
||||||
// In particular, it looks good with gamma=1 and the default eframe backend,
|
coverage.clamp(0.0, 1.0).powf(gamma),
|
||||||
// which uses linear blending.
|
))
|
||||||
// See https://github.com/emilk/egui/issues/1410
|
|
||||||
let a = fast_round(coverage.powf(gamma / 2.2) * 255.0);
|
|
||||||
Color32::from_rgba_premultiplied(a, a, a, a) // this makes no sense, but works
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -252,10 +249,6 @@ impl From<FontImage> for ImageData {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn fast_round(r: f32) -> u8 {
|
|
||||||
(r + 0.5).floor() as _ // rust does a saturating cast since 1.45
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
/// A change to an image.
|
/// A change to an image.
|
||||||
|
|
Loading…
Reference in a new issue