2026/9/11 7:45:36
FEATURED · 精选文章 
egui_demo_app 全功能演示程序指南本地运行、WASM 浏览器部署与 wgpu 后端切换【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/eguiegui_demo_app 是 egui 官方仓库中集大成式的演示应用用于展示即时模式 GUI 框架 egui 与跨平台应用框架 eframe 的全部核心能力覆盖 2D 绘图、自定义 3D 渲染、HTTP 请求、图片查看、分形时钟、颜色渲染测试等场景。读完本文你将掌握该演示程序在原生桌面端与 WASM 浏览器端的完整运行方式、feature 配置体系、脚本构建流程以及源码结构从而为基于 egui/eframe 开发自己的应用提供可直接对照的参考模板。一、egui_demo_app 是什么egui_demo_app 是整个 egui 仓库的官方门面它把 egui_demo_lib汇集了大量可复用 Demo 的共享库包装成两个可运行的形态——原生桌面程序与 WASM 网页程序。在线版本部署在 https://egui.rs可直接在浏览器体验它演示的不仅是一堆控件还包括eframe的窗口管理、视口viewport、渲染器接入glow/wgpu、持久化存储、无障碍accesskit、拖放文件等底层集成能力。从仓库结构看其源码位于 crates/egui_demo_app入口逻辑在 src/main.rs原生与 src/web.rsWASM而真正承载多个子应用的编排器是 src/wrap_app.rs。二、在本地原生运行原文档给出的核心命令非常简单cargo run --release -p egui_demo_app该命令以 release 模式运行工作区中的egui_demo_app包Cargo.toml中声明了default-run egui_demo_app。原生入口 src/main.rs 的启动逻辑包括全局分配器替换使用mimalloc::MiMalloc作为#[global_allocator]注释中说明这是更快的分配器可带来约 20% 的性能提升见main.rs第 7-8 行日志初始化自动向RUST_LOG追加naga、wgpu_core、wgpu_hal三个 crate 的warn级别过滤以抑制 wgpu 的日志刷屏然后调用env_logger::init()默认 debug 构建为debug、release 构建为info窗口配置通过eframe::NativeOptions创建 1280×1024 的窗口并开启拖放文件支持with_drag_and_drop(true)当启用wgpufeature 时渲染器指定为eframe::Renderer::Wgpu启动应用调用eframe::run_native(egui demo app, options, ...)将WrapApp作为eframe::App传入。命令行参数main.rs会解析启动参数目前唯一支持的是cargo run --release -p egui_demo_app -- --profile--profile依赖puffinfeature启用后会在127.0.0.1:8585启动一个 puffin 性能分析服务器并尝试自动拉起puffin_viewer需先cargo install puffin_viewer。若未启用puffinfeature会直接 panic 提示需要先开启该 feature。三、编译为 WASM 并在浏览器中本地查看原文档提供了两步脚本流程./scripts/start_server.sh ./scripts/build_demo_web.sh --open这两步分别对应起本地静态服务器与交叉编译到 wasm32 并生成 JS 绑定。1. start_server.sh本地静态服务器scripts/start_server.sh 的逻辑自动cargo install basic-http-server若未安装以web_demo目录为根在0.0.0.0:8765端口提供服务访问地址为 http://localhost:8765/index.html脚本注释中还给出了备选方案python3 -m http.server 8765 --bind 0.0.0.0即没有 basic-http-server 时可用 Python 代替。2. build_demo_web.shwasm 构建管线scripts/build_demo_web.sh 是核心构建脚本它依次完成调用 scripts/setup_web.sh 准备工具链rustup target add wasm32-unknown-unknown安装与锁定的版本一致的wasm-bindgen-cli当前仓库为0.2.126setup_web.sh注释明确要求与Cargo.toml、Cargo.lock、CI 中的rust.yml保持同步以--no-default-features --features web_app交叉编译crates/egui_demo_app的 lib 目标到wasm32-unknown-unknown用wasm-bindgen生成--no-modules --no-typescript的 JS 胶水代码输出到web_demo/egui_demo_app.js/_bg.wasm--release时用wasm-opt -O2 --fast-math做体积优化若同时加-g则保留调试符号便于剖析和裁剪。脚本支持的命令行选项如下表选项作用-g即使--release也保留调试符号便于 profiling 与体积分析--open构建完成后自动用系统默认浏览器打开http://localhost:8765/index.htmlLinux 用xdg-openWindows 用startmacOS 用open--release以 release 模式构建并执行wasm-opt优化--glow改用 glowOpenGL渲染后端而非默认的 wgpu注意浏览器端渲染默认走 wgpu--glow会改为web_app,glow组合。这也与Cargo.toml中glow [eframe/glow]、wgpu [eframe/wgpu, bytemuck]的 feature 设计一一对应。3. WASM 入口与 JS 对接在浏览器端程序入口不再是main()而是 src/web.rs 中通过#[wasm_bindgen]暴露给 JavaScript 的WebHandlenew()初始化eframe::WebLoggerdebug 构建为Trace、release 为Debug级别创建WebRunnerstart(canvas)接收canvas元素并启动WrapAppdestroy()销毁应用has_panicked()/panic_message()/panic_callstack()供 JS 检测应用是否崩溃及获取崩溃信息。Web 端加载页面由 web_demo/index.html 提供这也是 start_server.sh 以web_demo为根目录的原因。四、使用 wgpu 后端运行原文档给出了 wgpu 后端的运行方式(cd egui_demo_app cargo r --features wgpu)其等价于在crates/egui_demo_app目录下执行cargo run --features wgpu。由于Cargo.toml中default [wgpu, persistence, wayland, x11]实际上默认构建就已经启用了 wgpu显式写出--features wgpu是为了在关闭默认 feature如--no-default-features时强制启用它。main.rs中的关键代码第 60-61 行印证了这一行为#[cfg(feature wgpu)] renderer: eframe::Renderer::Wgpu,启用 wgpu 后演示程序左侧的 Backend 面板会显示当前 wgpu 适配器adapter的详细信息包括 BackendVulkan/Metal/Gl 等、设备类型、驱动名称、PCI 总线 ID、subgroup 大小等见 src/backend_panel.rs 的integration_ui。你还可以在界面中直接切换 Present modeAutoVsync、AutoNoVsync、Fifo、FifoRelaxed、Immediate、Mailbox与最大帧延迟实时观察渲染行为变化。若想改用 glow 后端运行原生版可执行cargo run --release -p egui_demo_app --no-default-features --features glow,persistence,wayland,x11五、Feature 配置体系详解Cargo.toml 中定义了一组可组合的 feature理解它们有助于按需裁剪演示功能或对照构建自己的应用Feature默认依赖与作用wgpu✅eframe/wgpu、bytemuck启用 wgpu 渲染后端含Custom3d3D 演示glow❌eframe/glow启用 glowOpenGL渲染后端persistence✅eframe/persistence、egui_extras/serde、egui/persistence、serde启动时从磁盘恢复、退出时保存应用状态wayland/x11✅eframe/wayland、eframe/x11Linux 窗口系统支持web_app❌httppersistenceWASM 构建的推荐组合build_demo_web.sh使用的正是它http❌ehttp、image/jpeg、poll-promise、egui_extras/image启用 HTTP 请求演示image_viewer❌image/jpeg、egui_extras/all_loaders、rfd启用图片查看器演示含文件选择对话框easymark❌EasyMark 轻量标记语言编辑器演示注释调侃其为比较烂的标记语言默认关闭puffin❌puffin、puffin_http、profiling/profile-with-puffin启用性能分析serde❌serde、egui_demo_lib/serde、egui/serde为状态结构体派生序列化实现syntect❌egui_demo_lib/syntect启用语法高亮accessibility_inspector❌accesskit、accesskit_consumer、eframe/accesskit启用无障碍树检视插件此外Cargo.toml中还声明crate-type [cdylib, rlib]这是同时支持原生二进制与 WASM 库cdylib 导出给 JS的关键原生构建额外启用 eframe 的inspectionfeature使得EGUI_INSPECTION1 cargo run -p egui_demo_app时可以打开供 egui_mcp 使用的检视端口环境变量未设置时无副作用。六、程序结构与源码导读从源码结构可以清晰看出演示程序的编排方式1. 多应用聚合WrapAppsrc/wrap_app.rs 定义了WrapApp与StateState保存全部子应用实例DemoWindows、FractalClockApp、ColorTestApp以及可选 feature 下的 EasyMark、Http、ImageViewer与当前选中的Anchorapps_iter_mut()返回名称 Anchor 可变的 DemoApp迭代器供顶部导航栏渲染顶部栏提供主题切换、Backend 面板开关、各 Demo 标签页切换原生端按 F11 可切换全屏启用persistence时通过eframe::get_value/set_value与eframe::APP_KEY完成状态的自动保存与恢复。Anchor枚举定义了可跳转的子应用且在 WASM 下支持通过 URL hash如#clock、#http直接定位到某个 Demo方便分享链接。2. 渲染模式与性能观察BackendPanelsrc/backend_panel.rs 演示了两种重绘模式Reactive默认仅在存在输入事件或动画时重绘最省 CPUContinuous每帧调用ctx.request_repaint()让 egui 以显示器刷新率持续重绘适合游戏类应用。面板同时提供帧历史统计FPS/CPU 占用、egui 内置的 Settings/Inspection/Memory/Output Events 调试窗口开关以及仅 debug 构建下request_repaint_after延迟重绘、request_discard丢弃帧等进阶 API 的交互式测试。3. 子应用集合src/apps/mod.rs 按 feature 条件引入各子应用custom3d_glow/custom3d_wgpu自定义 3D 绘制、fractal_clock分形时钟、http_appHTTP 请求、image_viewer图片查看器。其中WrapApp::new会调用egui_extras::install_image_loaders安装图片加载支持fractal_clock使用jiff库获取当前时间见 src/lib.rs 的seconds_since_midnight。4. 快照测试保障crates/egui_demo_app/tests/test_demo_app.rs 使用egui_kittest构建 wgpu 渲染的 Harness对每个子应用逐一截图做快照回归测试它会模拟点击导航按钮、为分形时钟固定mock_time、为图片查看器填入本地图片 URI并将结果存入 tests/snapshots 目录。这意味着你在运行 demo 时看到的界面呈现是有自动化测试兜底的。七、常见问题与排查提示wasm-bindgen版本不匹配build_demo_web.sh内注释提示若报错 cannot import from modules (env) with--no-modules可用wasm2wat target/wasm32-unknown-unknown/release/egui_demo_app.wasm | rg env定位问题并注意保持wasm-bindgen-cli与Cargo.lock中版本一致wasm-opt 缺失使用--release构建时需先安装 binaryenapt/brew/dnf install binaryen否则可省略该选项只做 debug 构建浏览器中老版本 WebGL1 无 sRGB 支持颜色测试ColorTest页面会提示部分老浏览器无法通过颜色测试见 src/wrap_app.rs 的ColorTestApp实现想清理所有状态Backend 面板中提供 Reset egui重置控件状态与 Reset everything重置全部演示状态两个按钮。八、小结egui_demo_app 既是 egui 生态的活文档也是开发者的参考脚手架一条cargo run --release -p egui_demo_app即可在桌面体验全部能力两条脚本命令即可将其搬进浏览器Cargo.toml中的 feature 矩阵展示了如何在一份代码中同时支持 glow/wgpu 双渲染后端与可裁剪的演示模块。对照 src/wrap_app.rs、src/backend_panel.rs 与 scripts/build_demo_web.sh 三处核心实现你便能快速迁移这套原生 WASM双端架构到自己的项目中。【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
egui_demo_app 全功能演示程序指南：本地运行、WASM 浏览器部署与 wgpu 后端切换
egui_demo_app 全功能演示程序指南本地运行、WASM 浏览器部署与 wgpu 后端切换【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/eguiegui_demo_app 是 egui 官方仓库中集大成式的演示应用用于展示即时模式 GUI 框架 egui 与跨平台应用框架 eframe 的全部核心能力覆盖 2D 绘图、自定义 3D 渲染、HTTP 请求、图片查看、分形时钟、颜色渲染测试等场景。读完本文你将掌握该演示程序在原生桌面端与 WASM 浏览器端的完整运行方式、feature 配置体系、脚本构建流程以及源码结构从而为基于 egui/eframe 开发自己的应用提供可直接对照的参考模板。一、egui_demo_app 是什么egui_demo_app 是整个 egui 仓库的官方门面它把 egui_demo_lib汇集了大量可复用 Demo 的共享库包装成两个可运行的形态——原生桌面程序与 WASM 网页程序。在线版本部署在 https://egui.rs可直接在浏览器体验它演示的不仅是一堆控件还包括eframe的窗口管理、视口viewport、渲染器接入glow/wgpu、持久化存储、无障碍accesskit、拖放文件等底层集成能力。从仓库结构看其源码位于 crates/egui_demo_app入口逻辑在 src/main.rs原生与 src/web.rsWASM而真正承载多个子应用的编排器是 src/wrap_app.rs。二、在本地原生运行原文档给出的核心命令非常简单cargo run --release -p egui_demo_app该命令以 release 模式运行工作区中的egui_demo_app包Cargo.toml中声明了default-run egui_demo_app。原生入口 src/main.rs 的启动逻辑包括全局分配器替换使用mimalloc::MiMalloc作为#[global_allocator]注释中说明这是更快的分配器可带来约 20% 的性能提升见main.rs第 7-8 行日志初始化自动向RUST_LOG追加naga、wgpu_core、wgpu_hal三个 crate 的warn级别过滤以抑制 wgpu 的日志刷屏然后调用env_logger::init()默认 debug 构建为debug、release 构建为info窗口配置通过eframe::NativeOptions创建 1280×1024 的窗口并开启拖放文件支持with_drag_and_drop(true)当启用wgpufeature 时渲染器指定为eframe::Renderer::Wgpu启动应用调用eframe::run_native(egui demo app, options, ...)将WrapApp作为eframe::App传入。命令行参数main.rs会解析启动参数目前唯一支持的是cargo run --release -p egui_demo_app -- --profile--profile依赖puffinfeature启用后会在127.0.0.1:8585启动一个 puffin 性能分析服务器并尝试自动拉起puffin_viewer需先cargo install puffin_viewer。若未启用puffinfeature会直接 panic 提示需要先开启该 feature。三、编译为 WASM 并在浏览器中本地查看原文档提供了两步脚本流程./scripts/start_server.sh ./scripts/build_demo_web.sh --open这两步分别对应起本地静态服务器与交叉编译到 wasm32 并生成 JS 绑定。1. start_server.sh本地静态服务器scripts/start_server.sh 的逻辑自动cargo install basic-http-server若未安装以web_demo目录为根在0.0.0.0:8765端口提供服务访问地址为 http://localhost:8765/index.html脚本注释中还给出了备选方案python3 -m http.server 8765 --bind 0.0.0.0即没有 basic-http-server 时可用 Python 代替。2. build_demo_web.shwasm 构建管线scripts/build_demo_web.sh 是核心构建脚本它依次完成调用 scripts/setup_web.sh 准备工具链rustup target add wasm32-unknown-unknown安装与锁定的版本一致的wasm-bindgen-cli当前仓库为0.2.126setup_web.sh注释明确要求与Cargo.toml、Cargo.lock、CI 中的rust.yml保持同步以--no-default-features --features web_app交叉编译crates/egui_demo_app的 lib 目标到wasm32-unknown-unknown用wasm-bindgen生成--no-modules --no-typescript的 JS 胶水代码输出到web_demo/egui_demo_app.js/_bg.wasm--release时用wasm-opt -O2 --fast-math做体积优化若同时加-g则保留调试符号便于剖析和裁剪。脚本支持的命令行选项如下表选项作用-g即使--release也保留调试符号便于 profiling 与体积分析--open构建完成后自动用系统默认浏览器打开http://localhost:8765/index.htmlLinux 用xdg-openWindows 用startmacOS 用open--release以 release 模式构建并执行wasm-opt优化--glow改用 glowOpenGL渲染后端而非默认的 wgpu注意浏览器端渲染默认走 wgpu--glow会改为web_app,glow组合。这也与Cargo.toml中glow [eframe/glow]、wgpu [eframe/wgpu, bytemuck]的 feature 设计一一对应。3. WASM 入口与 JS 对接在浏览器端程序入口不再是main()而是 src/web.rs 中通过#[wasm_bindgen]暴露给 JavaScript 的WebHandlenew()初始化eframe::WebLoggerdebug 构建为Trace、release 为Debug级别创建WebRunnerstart(canvas)接收canvas元素并启动WrapAppdestroy()销毁应用has_panicked()/panic_message()/panic_callstack()供 JS 检测应用是否崩溃及获取崩溃信息。Web 端加载页面由 web_demo/index.html 提供这也是 start_server.sh 以web_demo为根目录的原因。四、使用 wgpu 后端运行原文档给出了 wgpu 后端的运行方式(cd egui_demo_app cargo r --features wgpu)其等价于在crates/egui_demo_app目录下执行cargo run --features wgpu。由于Cargo.toml中default [wgpu, persistence, wayland, x11]实际上默认构建就已经启用了 wgpu显式写出--features wgpu是为了在关闭默认 feature如--no-default-features时强制启用它。main.rs中的关键代码第 60-61 行印证了这一行为#[cfg(feature wgpu)] renderer: eframe::Renderer::Wgpu,启用 wgpu 后演示程序左侧的 Backend 面板会显示当前 wgpu 适配器adapter的详细信息包括 BackendVulkan/Metal/Gl 等、设备类型、驱动名称、PCI 总线 ID、subgroup 大小等见 src/backend_panel.rs 的integration_ui。你还可以在界面中直接切换 Present modeAutoVsync、AutoNoVsync、Fifo、FifoRelaxed、Immediate、Mailbox与最大帧延迟实时观察渲染行为变化。若想改用 glow 后端运行原生版可执行cargo run --release -p egui_demo_app --no-default-features --features glow,persistence,wayland,x11五、Feature 配置体系详解Cargo.toml 中定义了一组可组合的 feature理解它们有助于按需裁剪演示功能或对照构建自己的应用Feature默认依赖与作用wgpu✅eframe/wgpu、bytemuck启用 wgpu 渲染后端含Custom3d3D 演示glow❌eframe/glow启用 glowOpenGL渲染后端persistence✅eframe/persistence、egui_extras/serde、egui/persistence、serde启动时从磁盘恢复、退出时保存应用状态wayland/x11✅eframe/wayland、eframe/x11Linux 窗口系统支持web_app❌httppersistenceWASM 构建的推荐组合build_demo_web.sh使用的正是它http❌ehttp、image/jpeg、poll-promise、egui_extras/image启用 HTTP 请求演示image_viewer❌image/jpeg、egui_extras/all_loaders、rfd启用图片查看器演示含文件选择对话框easymark❌EasyMark 轻量标记语言编辑器演示注释调侃其为比较烂的标记语言默认关闭puffin❌puffin、puffin_http、profiling/profile-with-puffin启用性能分析serde❌serde、egui_demo_lib/serde、egui/serde为状态结构体派生序列化实现syntect❌egui_demo_lib/syntect启用语法高亮accessibility_inspector❌accesskit、accesskit_consumer、eframe/accesskit启用无障碍树检视插件此外Cargo.toml中还声明crate-type [cdylib, rlib]这是同时支持原生二进制与 WASM 库cdylib 导出给 JS的关键原生构建额外启用 eframe 的inspectionfeature使得EGUI_INSPECTION1 cargo run -p egui_demo_app时可以打开供 egui_mcp 使用的检视端口环境变量未设置时无副作用。六、程序结构与源码导读从源码结构可以清晰看出演示程序的编排方式1. 多应用聚合WrapAppsrc/wrap_app.rs 定义了WrapApp与StateState保存全部子应用实例DemoWindows、FractalClockApp、ColorTestApp以及可选 feature 下的 EasyMark、Http、ImageViewer与当前选中的Anchorapps_iter_mut()返回名称 Anchor 可变的 DemoApp迭代器供顶部导航栏渲染顶部栏提供主题切换、Backend 面板开关、各 Demo 标签页切换原生端按 F11 可切换全屏启用persistence时通过eframe::get_value/set_value与eframe::APP_KEY完成状态的自动保存与恢复。Anchor枚举定义了可跳转的子应用且在 WASM 下支持通过 URL hash如#clock、#http直接定位到某个 Demo方便分享链接。2. 渲染模式与性能观察BackendPanelsrc/backend_panel.rs 演示了两种重绘模式Reactive默认仅在存在输入事件或动画时重绘最省 CPUContinuous每帧调用ctx.request_repaint()让 egui 以显示器刷新率持续重绘适合游戏类应用。面板同时提供帧历史统计FPS/CPU 占用、egui 内置的 Settings/Inspection/Memory/Output Events 调试窗口开关以及仅 debug 构建下request_repaint_after延迟重绘、request_discard丢弃帧等进阶 API 的交互式测试。3. 子应用集合src/apps/mod.rs 按 feature 条件引入各子应用custom3d_glow/custom3d_wgpu自定义 3D 绘制、fractal_clock分形时钟、http_appHTTP 请求、image_viewer图片查看器。其中WrapApp::new会调用egui_extras::install_image_loaders安装图片加载支持fractal_clock使用jiff库获取当前时间见 src/lib.rs 的seconds_since_midnight。4. 快照测试保障crates/egui_demo_app/tests/test_demo_app.rs 使用egui_kittest构建 wgpu 渲染的 Harness对每个子应用逐一截图做快照回归测试它会模拟点击导航按钮、为分形时钟固定mock_time、为图片查看器填入本地图片 URI并将结果存入 tests/snapshots 目录。这意味着你在运行 demo 时看到的界面呈现是有自动化测试兜底的。七、常见问题与排查提示wasm-bindgen版本不匹配build_demo_web.sh内注释提示若报错 cannot import from modules (env) with--no-modules可用wasm2wat target/wasm32-unknown-unknown/release/egui_demo_app.wasm | rg env定位问题并注意保持wasm-bindgen-cli与Cargo.lock中版本一致wasm-opt 缺失使用--release构建时需先安装 binaryenapt/brew/dnf install binaryen否则可省略该选项只做 debug 构建浏览器中老版本 WebGL1 无 sRGB 支持颜色测试ColorTest页面会提示部分老浏览器无法通过颜色测试见 src/wrap_app.rs 的ColorTestApp实现想清理所有状态Backend 面板中提供 Reset egui重置控件状态与 Reset everything重置全部演示状态两个按钮。八、小结egui_demo_app 既是 egui 生态的活文档也是开发者的参考脚手架一条cargo run --release -p egui_demo_app即可在桌面体验全部能力两条脚本命令即可将其搬进浏览器Cargo.toml中的 feature 矩阵展示了如何在一份代码中同时支持 glow/wgpu 双渲染后端与可裁剪的演示模块。对照 src/wrap_app.rs、src/backend_panel.rs 与 scripts/build_demo_web.sh 三处核心实现你便能快速迁移这套原生 WASM双端架构到自己的项目中。【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
