Skip to content

Commit

Permalink
Add Shape::Callback to do custom rendering inside of an egui UI
Browse files Browse the repository at this point in the history
  • Loading branch information
emilk committed Mar 10, 2022
1 parent 510cef0 commit 37227eb
Show file tree
Hide file tree
Showing 29 changed files with 648 additions and 212 deletions.
11 changes: 10 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w


## Unreleased
* Fixed ComboBoxes always being rendered left-aligned ([1304](https://github.com/emilk/egui/pull/1304))
### Added ⭐
* Add `Shape::Callback` for backend-specific painting ([#1351](https://github.com/emilk/egui/pull/1351)).

### Changed 🔧
* `ClippedMesh` has been replaced with `ClippedPrimitive` ([#1351](https://github.com/emilk/egui/pull/1351)).

### Fixed 🐛
* Fixed ComboBoxes always being rendered left-aligned ([#1304](https://github.com/emilk/egui/pull/1304)).



## 0.17.0 - 2022-02-22 - Improved font selection and image handling

Expand Down
2 changes: 2 additions & 0 deletions Cargo.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -204,9 +204,9 @@ loop {
let full_output = egui_ctx.run(raw_input, |egui_ctx| {
my_app.ui(egui_ctx); // add panels, windows and widgets to `egui_ctx` here
});
let clipped_meshes = egui_ctx.tessellate(full_output.shapes); // creates triangles to paint
let clipped_primitives = egui_ctx.tessellate(full_output.shapes); // creates triangles to paint

my_integration.paint(&full_output.textures_delta, clipped_meshes);
my_integration.paint(&full_output.textures_delta, clipped_primitives);

let platform_output = full_output.platform_output;
my_integration.set_cursor_icon(platform_output.cursor_icon);
Expand Down
2 changes: 2 additions & 0 deletions eframe/Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,11 @@ egui_web = { version = "0.17.0", path = "../egui_web", default-features = false,
# For examples:
egui_extras = { path = "../egui_extras", features = ["image", "svg"] }
ehttp = "0.2"
glow = "0.11"
image = { version = "0.24", default-features = false, features = [
"jpeg",
"png",
] }
parking_lot = "0.12"
poll-promise = "0.1"
rfd = "0.8"
193 changes: 193 additions & 0 deletions eframe/examples/custom_3d.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
//! This demo shows how to embed 3D rendering using [`glow`](https://github.com/grovesNL/glow) in `eframe`.
//!
//! This is very advanced usage, and you need to be careful.
//!
//! If you want an easier way to show 3D graphics with egui, take a look at:
//! * [`bevy_egui`](https://github.com/mvlabat/bevy_egui)
//! * [`three-d`](https://github.com/asny/three-d)

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release

use eframe::{egui, epi};

use parking_lot::Mutex;
use std::sync::Arc;

#[derive(Default)]
struct MyApp {
rotating_triangle: Arc<Mutex<Option<RotatingTriangle>>>,
angle: f32,
}

impl epi::App for MyApp {
fn name(&self) -> &str {
"Custom 3D painting inside an egui window"
}

fn update(&mut self, ctx: &egui::Context, _frame: &epi::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Here is some 3D stuff:");

egui::ScrollArea::both().show(ui, |ui| {
egui::Frame::dark_canvas(ui.style()).show(ui, |ui| {
self.custom_painting(ui);
});
ui.label("Drag to rotate!");
});
});

let mut frame = egui::Frame::window(&*ctx.style());
frame.fill = frame.fill.linear_multiply(0.5); // transparent
egui::Window::new("3D stuff in a window")
.frame(frame)
.show(ctx, |ui| {
self.custom_painting(ui);
});
}
}

impl MyApp {
fn custom_painting(&mut self, ui: &mut egui::Ui) {
let (rect, response) =
ui.allocate_exact_size(egui::Vec2::splat(256.0), egui::Sense::drag());

self.angle += response.drag_delta().x * 0.01;

let angle = self.angle;
let rotating_triangle = self.rotating_triangle.clone();

let callback = egui::epaint::PaintCallback {
rect,
callback: std::sync::Arc::new(move |render_ctx| {
if let Some(gl) = render_ctx.downcast_ref::<glow::Context>() {
let mut rotating_triangle = rotating_triangle.lock();
let rotating_triangle =
rotating_triangle.get_or_insert_with(|| RotatingTriangle::new(gl));
rotating_triangle.paint(gl, angle);
} else {
eprintln!("Can't do custom painting because we are not using a glow context");
}
}),
};
ui.painter().add(callback);
}
}

struct RotatingTriangle {
program: glow::Program,
vertex_array: glow::VertexArray,
}

impl RotatingTriangle {
fn new(gl: &glow::Context) -> Self {
use glow::HasContext as _;

let shader_version = if cfg!(target_arch = "wasm32") {
"#version 300 es"
} else {
"#version 410"
};

unsafe {
let program = gl.create_program().expect("Cannot create program");

let (vertex_shader_source, fragment_shader_source) = (
r#"
const vec2 verts[3] = vec2[3](
vec2(0.0, 1.0),
vec2(-1.0, -1.0),
vec2(1.0, -1.0)
);
const vec4 colors[3] = vec4[3](
vec4(1.0, 0.0, 0.0, 1.0),
vec4(0.0, 1.0, 0.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0)
);
out vec4 v_color;
uniform float u_angle;
void main() {
v_color = colors[gl_VertexID];
gl_Position = vec4(verts[gl_VertexID], 0.0, 1.0);
gl_Position.x *= cos(u_angle);
}
"#,
r#"
precision mediump float;
in vec4 v_color;
out vec4 out_color;
void main() {
out_color = v_color;
}
"#,
);

let shader_sources = [
(glow::VERTEX_SHADER, vertex_shader_source),
(glow::FRAGMENT_SHADER, fragment_shader_source),
];

let shaders: Vec<_> = shader_sources
.iter()
.map(|(shader_type, shader_source)| {
let shader = gl
.create_shader(*shader_type)
.expect("Cannot create shader");
gl.shader_source(shader, &format!("{}\n{}", shader_version, shader_source));
gl.compile_shader(shader);
if !gl.get_shader_compile_status(shader) {
panic!("{}", gl.get_shader_info_log(shader));
}
gl.attach_shader(program, shader);
shader
})
.collect();

gl.link_program(program);
if !gl.get_program_link_status(program) {
panic!("{}", gl.get_program_info_log(program));
}

for shader in shaders {
gl.detach_shader(program, shader);
gl.delete_shader(shader);
}

let vertex_array = gl
.create_vertex_array()
.expect("Cannot create vertex array");

Self {
program,
vertex_array,
}
}
}

// TODO: figure out how to call this in a nice way
#[allow(unused)]
fn destroy(self, gl: &glow::Context) {
use glow::HasContext as _;
unsafe {
gl.delete_program(self.program);
gl.delete_vertex_array(self.vertex_array);
}
}

fn paint(&self, gl: &glow::Context, angle: f32) {
use glow::HasContext as _;
unsafe {
gl.use_program(Some(self.program));
gl.uniform_1_f32(
gl.get_uniform_location(self.program, "u_angle").as_ref(),
angle,
);
gl.bind_vertex_array(Some(self.vertex_array));
gl.draw_arrays(glow::TRIANGLES, 0, 3);
}
}
}

fn main() {
let options = eframe::NativeOptions::default();
eframe::run_native(Box::new(MyApp::default()), options);
}
19 changes: 13 additions & 6 deletions egui/src/context.rs
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@ impl ContextImpl {
/// });
/// });
/// handle_platform_output(full_output.platform_output);
/// let clipped_meshes = ctx.tessellate(full_output.shapes); // create triangles to paint
/// paint(full_output.textures_delta, clipped_meshes);
/// let clipped_primitives = ctx.tessellate(full_output.shapes); // create triangles to paint
/// paint(full_output.textures_delta, clipped_primitives);
/// }
/// ```
#[derive(Clone)]
Expand Down Expand Up @@ -773,7 +773,7 @@ impl Context {
}

/// Tessellate the given shapes into triangle meshes.
pub fn tessellate(&self, shapes: Vec<ClippedShape>) -> Vec<ClippedMesh> {
pub fn tessellate(&self, shapes: Vec<ClippedShape>) -> Vec<ClippedPrimitive> {
// A tempting optimization is to reuse the tessellation from last frame if the
// shapes are the same, but just comparing the shapes takes about 50% of the time
// it takes to tessellate them, so it is not a worth optimization.
Expand All @@ -782,13 +782,13 @@ impl Context {
tessellation_options.pixels_per_point = self.pixels_per_point();
tessellation_options.aa_size = 1.0 / self.pixels_per_point();
let paint_stats = PaintStats::from_shapes(&shapes);
let clipped_meshes = tessellator::tessellate_shapes(
let clipped_primitives = tessellator::tessellate_shapes(
shapes,
tessellation_options,
self.fonts().font_image_size(),
);
self.write().paint_stats = paint_stats.with_clipped_meshes(&clipped_meshes);
clipped_meshes
self.write().paint_stats = paint_stats.with_clipped_primitives(&clipped_primitives);
clipped_primitives
}

// ---------------------------------------------------------------------
Expand Down Expand Up @@ -1246,3 +1246,10 @@ impl Context {
self.set_style(style);
}
}

#[cfg(test)]
#[test]
fn context_impl_send_sync() {
fn assert_send_sync<T: Send + Sync>() {}
assert_send_sync::<Context>();
}
6 changes: 4 additions & 2 deletions egui/src/introspection.rs
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,10 @@ impl Widget for &epaint::stats::PaintStats {
shape_path,
shape_mesh,
shape_vec,
num_callbacks,
text_shape_vertices,
text_shape_indices,
clipped_meshes,
clipped_primitives,
vertices,
indices,
} = self;
Expand All @@ -104,6 +105,7 @@ impl Widget for &epaint::stats::PaintStats {
label(ui, shape_path, "paths");
label(ui, shape_mesh, "nested meshes");
label(ui, shape_vec, "nested shapes");
ui.label(format!("{} callbacks", num_callbacks));
ui.add_space(10.0);

ui.label("Text shapes:");
Expand All @@ -113,7 +115,7 @@ impl Widget for &epaint::stats::PaintStats {
ui.add_space(10.0);

ui.label("Tessellated (and culled):");
label(ui, clipped_meshes, "clipped_meshes")
label(ui, clipped_primitives, "clipped_primitives")
.on_hover_text("Number of separate clip rectangles");
label(ui, vertices, "vertices");
label(ui, indices, "indices").on_hover_text("Three 32-bit indices per triangles");
Expand Down
10 changes: 5 additions & 5 deletions egui/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
//! ``` no_run
//! # fn handle_platform_output(_: egui::PlatformOutput) {}
//! # fn gather_input() -> egui::RawInput { egui::RawInput::default() }
//! # fn paint(textures_detla: egui::TexturesDelta, _: Vec<egui::ClippedMesh>) {}
//! # fn paint(textures_detla: egui::TexturesDelta, _: Vec<egui::ClippedPrimitive>) {}
//! let mut ctx = egui::Context::default();
//!
//! // Game loop:
Expand All @@ -128,8 +128,8 @@
//! });
//! });
//! handle_platform_output(full_output.platform_output);
//! let clipped_meshes = ctx.tessellate(full_output.shapes); // create triangles to paint
//! paint(full_output.textures_delta, clipped_meshes);
//! let clipped_primitives = ctx.tessellate(full_output.shapes); // create triangles to paint
//! paint(full_output.textures_delta, clipped_primitives);
//! }
//! ```
//!
Expand Down Expand Up @@ -386,8 +386,8 @@ pub use epaint::{
color, mutex,
text::{FontData, FontDefinitions, FontFamily, FontId, FontTweak},
textures::TexturesDelta,
AlphaImage, ClippedMesh, Color32, ColorImage, ImageData, Mesh, Rgba, Rounding, Shape, Stroke,
TextureHandle, TextureId,
AlphaImage, ClippedPrimitive, Color32, ColorImage, ImageData, Mesh, Rgba, Rounding, Shape,
Stroke, TextureHandle, TextureId,
};

pub mod text {
Expand Down
11 changes: 7 additions & 4 deletions egui_demo_lib/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ fn test_egui_e2e() {
let full_output = ctx.run(raw_input.clone(), |ctx| {
demo_windows.ui(ctx);
});
let clipped_meshes = ctx.tessellate(full_output.shapes);
assert!(!clipped_meshes.is_empty());
let clipped_primitives = ctx.tessellate(full_output.shapes);
assert!(!clipped_primitives.is_empty());
}
}

Expand All @@ -167,8 +167,11 @@ fn test_egui_zero_window_size() {
let full_output = ctx.run(raw_input.clone(), |ctx| {
demo_windows.ui(ctx);
});
let clipped_meshes = ctx.tessellate(full_output.shapes);
assert!(clipped_meshes.is_empty(), "There should be nothing to show");
let clipped_primitives = ctx.tessellate(full_output.shapes);
assert!(
clipped_primitives.is_empty(),
"There should be nothing to show"
);
}
}

Expand Down
4 changes: 2 additions & 2 deletions egui_glium/src/epi_backend.rs
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ pub fn run(app: Box<dyn epi::App>, native_options: &epi::NativeOptions) -> ! {

integration.handle_platform_output(display.gl_window().window(), platform_output);

let clipped_meshes = integration.egui_ctx.tessellate(shapes);
let clipped_primitives = integration.egui_ctx.tessellate(shapes);

// paint:
{
Expand All @@ -89,7 +89,7 @@ pub fn run(app: Box<dyn epi::App>, native_options: &epi::NativeOptions) -> ! {
&display,
&mut target,
integration.egui_ctx.pixels_per_point(),
clipped_meshes,
clipped_primitives,
&textures_delta,
);

Expand Down
Loading

0 comments on commit 37227eb

Please sign in to comment.