djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[backend] use hardware scissor rect in WebGL and glium

Browse source
This commit is contained in:
Emil Ernerfeldt 2020-07-17 10:29:21 +02:00
parent c204922a3a
commit 520e42c11c
3 changed files with 43 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
egui/README.md
View file

@ -68,7 +68,7 @@ Add extremely quick animations for some things, maybe 2-3 frames. For instance:
* [x] Use clip rectangles when painting * [x] Use clip rectangles when painting
* [x] Use clip rectangles when interacting * [x] Use clip rectangles when interacting
* [x] Adjust clip rects so edges of child widgets aren't clipped * [x] Adjust clip rects so edges of child widgets aren't clipped
* [ ] Use HW clip rects * [x] Use HW clip rects
### Modularity ### Modularity
* [x] `trait Widget` (`Label`, `Slider`, `Checkbox`, ...) * [x] `trait Widget` (`Label`, `Slider`, `Checkbox`, ...)

54
egui_glium/src/painter.rs
View file

@ -2,6 +2,7 @@
use { use {
egui::{ egui::{
math::clamp,
paint::{PaintBatches, Triangles}, paint::{PaintBatches, Triangles},
Rect, Rect,
}, },
@ -20,36 +21,29 @@ impl Painter {
140 => { 140 => {
vertex: " vertex: "
#version 140 #version 140
uniform vec4 u_clip_rect; // min_x, min_y, max_x, max_y
uniform vec2 u_screen_size; uniform vec2 u_screen_size;
uniform vec2 u_tex_size; uniform vec2 u_tex_size;
in vec2 a_pos; in vec2 a_pos;
in vec4 a_color; in vec4 a_color;
in vec2 a_tc; in vec2 a_tc;
out vec2 v_pos;
out vec4 v_color; out vec4 v_color;
out vec2 v_tc; out vec2 v_tc;
out vec4 v_clip_rect;
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);
v_pos = a_pos;
v_color = a_color / 255.0; v_color = a_color / 255.0;
v_tc = a_tc / u_tex_size; v_tc = a_tc / u_tex_size;
v_clip_rect = u_clip_rect;
} }
", ",
fragment: " fragment: "
#version 140 #version 140
uniform sampler2D u_sampler; uniform sampler2D u_sampler;
in vec2 v_pos;
in vec4 v_color; in vec4 v_color;
in vec2 v_tc; in vec2 v_tc;
in vec4 v_clip_rect;
out vec4 f_color; out vec4 f_color;
// glium expects linear output. // glium expects linear output.
@ -61,10 +55,6 @@ impl Painter {
} }
void main() { void main() {
if (v_pos.x < v_clip_rect.x) { discard; }
if (v_pos.y < v_clip_rect.y) { discard; }
if (v_pos.x > v_clip_rect.z) { discard; }
if (v_pos.y > v_clip_rect.w) { discard; }
f_color = v_color; f_color = v_color;
f_color.rgb = linear_from_srgb(f_color.rgb); f_color.rgb = linear_from_srgb(f_color.rgb);
f_color *= texture(u_sampler, v_tc).r; f_color *= texture(u_sampler, v_tc).r;
@ -75,36 +65,29 @@ impl Painter {
110 => { 110 => {
vertex: " vertex: "
#version 110 #version 110
uniform vec4 u_clip_rect; // min_x, min_y, max_x, max_y
uniform vec2 u_screen_size; uniform vec2 u_screen_size;
uniform vec2 u_tex_size; uniform vec2 u_tex_size;
attribute vec2 a_pos; attribute vec2 a_pos;
attribute vec4 a_color; attribute vec4 a_color;
attribute vec2 a_tc; attribute vec2 a_tc;
varying vec2 v_pos;
varying vec4 v_color; varying vec4 v_color;
varying vec2 v_tc; varying vec2 v_tc;
varying vec4 v_clip_rect;
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);
v_pos = a_pos;
v_color = a_color / 255.0; v_color = a_color / 255.0;
v_tc = a_tc / u_tex_size; v_tc = a_tc / u_tex_size;
v_clip_rect = u_clip_rect;
} }
", ",
fragment: " fragment: "
#version 110 #version 110
uniform sampler2D u_sampler; uniform sampler2D u_sampler;
varying vec2 v_pos;
varying vec4 v_color; varying vec4 v_color;
varying vec2 v_tc; varying vec2 v_tc;
varying vec4 v_clip_rect;
// glium expects linear output. // glium expects linear output.
vec3 linear_from_srgb(vec3 srgb) { vec3 linear_from_srgb(vec3 srgb) {
@ -115,10 +98,6 @@ impl Painter {
} }
void main() { void main() {
if (v_pos.x < v_clip_rect.x) { discard; }
if (v_pos.y < v_clip_rect.y) { discard; }
if (v_pos.x > v_clip_rect.z) { discard; }
if (v_pos.y > v_clip_rect.w) { discard; }
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor.rgb = linear_from_srgb(gl_FragColor.rgb); gl_FragColor.rgb = linear_from_srgb(gl_FragColor.rgb);
gl_FragColor *= texture2D(u_sampler, v_tc).r; gl_FragColor *= texture2D(u_sampler, v_tc).r;
@ -129,36 +108,29 @@ impl Painter {
100 => { 100 => {
vertex: " vertex: "
#version 100 #version 100
uniform mediump vec4 u_clip_rect; // min_x, min_y, max_x, max_y
uniform mediump vec2 u_screen_size; uniform mediump vec2 u_screen_size;
uniform mediump vec2 u_tex_size; uniform mediump vec2 u_tex_size;
attribute mediump vec2 a_pos; attribute mediump vec2 a_pos;
attribute mediump vec4 a_color; attribute mediump vec4 a_color;
attribute mediump vec2 a_tc; attribute mediump vec2 a_tc;
varying mediump vec2 v_pos;
varying mediump vec4 v_color; varying mediump vec4 v_color;
varying mediump vec2 v_tc; varying mediump vec2 v_tc;
varying mediump vec4 v_clip_rect;
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);
v_pos = a_pos;
v_color = a_color / 255.0; v_color = a_color / 255.0;
v_tc = a_tc / u_tex_size; v_tc = a_tc / u_tex_size;
v_clip_rect = u_clip_rect;
} }
", ",
fragment: " fragment: "
#version 100 #version 100
uniform sampler2D u_sampler; uniform sampler2D u_sampler;
varying mediump vec2 v_pos;
varying mediump vec4 v_color; varying mediump vec4 v_color;
varying mediump vec2 v_tc; varying mediump vec2 v_tc;
varying mediump vec4 v_clip_rect
// glium expects linear output. // glium expects linear output.
vec3 linear_from_srgb(vec3 srgb) { vec3 linear_from_srgb(vec3 srgb) {
@ -169,10 +141,6 @@ impl Painter {
} }
void main() { void main() {
if (v_pos.x < v_clip_rect.x) { discard; }
if (v_pos.y < v_clip_rect.y) { discard; }
if (v_pos.x > v_clip_rect.z) { discard; }
if (v_pos.y > v_clip_rect.w) { discard; }
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor.rgb = linear_from_srgb(gl_FragColor.rgb); gl_FragColor.rgb = linear_from_srgb(gl_FragColor.rgb);
gl_FragColor *= texture2D(u_sampler, v_tc).r; gl_FragColor *= texture2D(u_sampler, v_tc).r;
@ -271,7 +239,6 @@ impl Painter {
let height_points = height_pixels as f32 / pixels_per_point; let height_points = height_pixels as f32 / pixels_per_point;
let uniforms = uniform! { let uniforms = uniform! {
u_clip_rect: [clip_rect.min.x, clip_rect.min.y, clip_rect.max.x, clip_rect.max.y],
u_screen_size: [width_points, height_points], u_screen_size: [width_points, height_points],
u_tex_size: [texture.width as f32, texture.height as f32], u_tex_size: [texture.width as f32, texture.height as f32],
u_sampler: &self.texture, u_sampler: &self.texture,
@ -288,8 +255,27 @@ impl Painter {
..Default::default() ..Default::default()
}; };
let clip_min_x = pixels_per_point * clip_rect.min.x;
let clip_min_y = pixels_per_point * clip_rect.min.y;
let clip_max_x = pixels_per_point * clip_rect.max.x;
let clip_max_y = pixels_per_point * clip_rect.max.y;
let clip_min_x = clamp(clip_min_x, 0.0..=width_pixels as f32);
let clip_min_y = clamp(clip_min_y, 0.0..=height_pixels as f32);
let clip_max_x = clamp(clip_max_x, clip_min_x..=width_pixels as f32);
let clip_max_y = clamp(clip_max_y, clip_min_y..=height_pixels as f32);
let clip_min_x = clip_min_x.round() as u32;
let clip_min_y = clip_min_y.round() as u32;
let clip_max_x = clip_max_x.round() as u32;
let clip_max_y = clip_max_y.round() as u32;
let params = glium::DrawParameters { let params = glium::DrawParameters {
blend, blend,
scissor: Some(glium::Rect {
left: clip_min_x,
bottom: height_pixels - clip_max_y,
width: clip_max_x - clip_min_x,
height: clip_max_y - clip_min_y,
}),
..Default::default() ..Default::default()
}; };

47
egui_wasm/src/webgl.rs
View file

@ -5,8 +5,9 @@ use {
}; };
use egui::{ use egui::{
math::clamp,
paint::{Color, PaintBatches, Texture, Triangles}, paint::{Color, PaintBatches, Texture, Triangles},
vec2, Pos2, vec2,
}; };
type Gl = WebGlRenderingContext; type Gl = WebGlRenderingContext;
@ -61,26 +62,21 @@ impl Painter {
&gl, &gl,
Gl::VERTEX_SHADER, Gl::VERTEX_SHADER,
r#" r#"
uniform vec4 u_clip_rect; // min_x, min_y, max_x, max_y
uniform vec2 u_screen_size; uniform vec2 u_screen_size;
uniform vec2 u_tex_size; uniform vec2 u_tex_size;
attribute vec2 a_pos; attribute vec2 a_pos;
attribute vec2 a_tc; attribute vec2 a_tc;
attribute vec4 a_color; attribute vec4 a_color;
varying vec2 v_pos;
varying vec4 v_color; varying vec4 v_color;
varying vec2 v_tc; varying vec2 v_tc;
varying vec4 v_clip_rect;
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);
v_pos = a_pos;
v_color = a_color; v_color = a_color;
v_tc = a_tc / u_tex_size; v_tc = a_tc / u_tex_size;
v_clip_rect = u_clip_rect;
} }
"#, "#,
)?; )?;
@ -90,15 +86,9 @@ impl Painter {
r#" r#"
uniform sampler2D u_sampler; uniform sampler2D u_sampler;
precision highp float; precision highp float;
varying vec2 v_pos;
varying vec4 v_color; varying vec4 v_color;
varying vec2 v_tc; varying vec2 v_tc;
varying vec4 v_clip_rect;
void main() { void main() {
if (v_pos.x < v_clip_rect.x) { discard; }
if (v_pos.y < v_clip_rect.y) { discard; }
if (v_pos.x > v_clip_rect.z) { discard; }
if (v_pos.y > v_clip_rect.w) { discard; }
gl_FragColor = v_color; gl_FragColor = v_color;
gl_FragColor *= texture2D(u_sampler, v_tc).a; gl_FragColor *= texture2D(u_sampler, v_tc).a;
} }
@ -165,16 +155,13 @@ impl Painter {
let gl = &self.gl; let gl = &self.gl;
gl.enable(Gl::SCISSOR_TEST);
gl.enable(Gl::BLEND); gl.enable(Gl::BLEND);
gl.blend_func(Gl::ONE, Gl::ONE_MINUS_SRC_ALPHA); // premultiplied alpha gl.blend_func(Gl::ONE, Gl::ONE_MINUS_SRC_ALPHA); // premultiplied alpha
gl.use_program(Some(&self.program)); gl.use_program(Some(&self.program));
gl.active_texture(Gl::TEXTURE0); gl.active_texture(Gl::TEXTURE0);
gl.bind_texture(Gl::TEXTURE_2D, Some(&self.texture)); gl.bind_texture(Gl::TEXTURE_2D, Some(&self.texture));
let u_clip_rect_loc = gl
.get_uniform_location(&self.program, "u_clip_rect")
.unwrap();
let u_screen_size_loc = gl let u_screen_size_loc = gl
.get_uniform_location(&self.program, "u_screen_size") .get_uniform_location(&self.program, "u_screen_size")
.unwrap(); .unwrap();
@ -204,6 +191,7 @@ impl Painter {
self.canvas.width() as i32, self.canvas.width() as i32,
self.canvas.height() as i32, self.canvas.height() as i32,
); );
// TODO: sRGBA
gl.clear_color( gl.clear_color(
bg_color.r as f32 / 255.0, bg_color.r as f32 / 255.0,
bg_color.g as f32 / 255.0, bg_color.g as f32 / 255.0,
@ -213,16 +201,25 @@ impl Painter {
gl.clear(Gl::COLOR_BUFFER_BIT); gl.clear(Gl::COLOR_BUFFER_BIT);
for (clip_rect, triangles) in batches { for (clip_rect, triangles) in batches {
// Avoid infinities in shader: let clip_min_x = pixels_per_point * clip_rect.min.x;
let clip_min = clip_rect.min.max(Pos2::default()); let clip_min_y = pixels_per_point * clip_rect.min.y;
let clip_max = clip_rect.max.min(Pos2::default() + screen_size_points); let clip_max_x = pixels_per_point * clip_rect.max.x;
let clip_max_y = pixels_per_point * clip_rect.max.y;
let clip_min_x = clamp(clip_min_x, 0.0..=screen_size_pixels.x);
let clip_min_y = clamp(clip_min_y, 0.0..=screen_size_pixels.y);
let clip_max_x = clamp(clip_max_x, clip_min_x..=screen_size_pixels.x);
let clip_max_y = clamp(clip_max_y, clip_min_y..=screen_size_pixels.y);
let clip_min_x = clip_min_x.round() as i32;
let clip_min_y = clip_min_y.round() as i32;
let clip_max_x = clip_max_x.round() as i32;
let clip_max_y = clip_max_y.round() as i32;
gl.uniform4f( // scissor Y coordinate is from the bottom
Some(&u_clip_rect_loc), gl.scissor(
clip_min.x, clip_min_x,
clip_min.y, self.canvas.height() as i32 - clip_max_y,
clip_max.x, clip_max_x - clip_min_x,
clip_max.y, clip_max_y - clip_min_y,
); );
for triangles in triangles.split_to_u16() { for triangles in triangles.split_to_u16() {