Guide · 02 Core Engine

统一架构与 GPU 渲染管线

深入理解 GPUX 如何通过三层渲染管线(Entity 状态层、Taffy 布局层、GPU Primitive 着色器层)在桌面、移动与 Web/小程序 8 大平台实现原生 GPU 渲染。

为什么抛弃 WebView?

传统跨端方案(Electron / WebView 类框架)需要同时维护后端进程与完整的浏览器内核进程,一次简单的 UI 更新需要跨越:Rust/Go JSON 序列化 → 跨进程 IPC → V8 反序列化 → Virtual DOM Diff → DOM 树变更 → CSS 重新计算 → 合成器光栅化。

而在 GPUX 中,UI 与业务逻辑运行在同一个原生 Rust 进程空间(或单 WASM 线性内存)内,由三大平台宿主驱动 8 大目标平台:

text
┌────────────────────────────────────────────────────────────────────────────────────────┐
│                              Your Application (Pure Rust)                              │
│          Store<T>  ·  Router<R>  ·  ServiceRegistry  ·  GPUI-Kit (90+ Widgets)         │
├───────────────────────────┬──────────────────────────────┬─────────────────────────────┤
│       gpux-desktop        │         gpux-mobile          │          gpux-web           │
│  macOS (Metal)            │  iOS / iPadOS (Metal UIKit)  │  Web Browser (WebGPU/WASM)  │
│  Linux (Vulkan Wayland)   │  Android (Vulkan NDK)        │  WeChat/Alipay/TT MiniProg  │
│  Windows (DirectX 12)     │  HarmonyOS NEXT (XComponent) │  CanvasFontFallback (Emoji) │
└───────────────────────────┴──────────────────────────────┴─────────────────────────────┘

GPUI 三阶段帧渲染流水线 (0.18ms / Frame)

  1. 声明式视图构建 (`Render::render`):组件树通过链式方法 v_flex().gap_3().p_4() 构建轻量级元素描述符,结合保留模式实体缓存(Entity<T>),仅在状态脏标记(cx.notify())时按需重建。
  2. 亚毫秒级 Flexbox / Grid 布局计算 (Taffy):纯 Rust 实现的布局引擎在微秒级内算出所有节点的精确像素坐标与滚动裁剪边界。
  3. 单次实例化 GPU 批处理绘制 (Instanced Draw Calls):将圆角矩形、高斯阴影、矢量图标与亚像素抗锯齿字形(含 CJK 与彩色 Emoji 回退纹理)打包为 GPU Instance Buffer,单帧仅需极少数 Draw Call 即可完成单帧渲染。

运行时平台与图形后端内省 (`PlatformKind`)

gpux_core::PlatformKind 提供编译期与运行时的 8 端硬件能力查询,让你在统一代码库中针对特定平台微调渲染策略:

rust
use gpux::prelude::*;

fn inspect_runtime_targets() {
    let current = PlatformKind::current();
    println!(
        "当前宿主: {:?}, GPU 渲染后端: {:?}, Target: {}",
        current,
        current.primary_gpu_backend(),
        current.rust_target_triple()
    );

    // 读取默认的应用配置清单(自动覆盖桌面、移动、Web 与小程序 8 端)
    let manifest = AppManifest::default_for("ClusterStudio");
    for target in &manifest.targets {
        println!(
            "Target {:?} -> triple: {}, backend: {:?}",
            target,
            target.rust_target_triple(),
            target.primary_gpu_backend()
        );
    }
}