Rust文本渲染库Glyphon的使用

Glyphon为Rust应用提供高效跨平台文本排版与渲染解决方案

什么是Glyphon？

Glyphon是一个为wgpu提供简单2D文本渲染的库，它通过以下方式工作：

• 使用cosmic-text进行字形形状计算/布局/栅格化
• 使用etagere将字形打包到纹理图集
• 使用wgpu从纹理图集采样渲染文本

为了避免额外的渲染通道，渲染使用现有的渲染通道(遵循wgpu的Encapsulating Graphics Work wiki页面中描述的中间件模式)。

许可证

该项目采用以下许可证之一：

• Apache License, Version 2.0
• zlib License
• MIT License

安装

在项目目录中运行以下Cargo命令：

cargo add glyphon

或者在Cargo.toml中添加以下行：

glyphon = "0.9.0"

完整示例代码

use glyphon::{Attrs, Color, Family, FontSystem, SwashCache, TextArea, TextAtlas, TextRenderer};
use wgpu::{Device, Queue, TextureFormat};

fn main() {
    // 初始化wgpu设备、队列和表面纹理格式
    let (device, queue, format) = init_wgpu();
    
    // 创建字体系统
    let mut font_system = FontSystem::new();
    
    // 创建字形缓存
    let mut swash_cache = SwashCache::new();
    
    // 创建文本图集
    let mut atlas = TextAtlas::new(&device, &queue, format);
    
    // 创建文本渲染器
    let mut text_renderer = TextRenderer::new(&mut atlas, &device, None, None);
    
    // 准备要渲染的文本
    let text = "Hello, Glyphon!";
    let bounds = (0.0, 0.0, 300.0, 200.0);
    let color = Color::rgb(255, 255, 255);
    let size = 16.0;
    
    let text_area = TextArea {
        text,
        bounds,
        color,
        attrs: Attrs::new().family(Family::SansSerif).size(size),
        ..Default::default()
    };
    
    // 在渲染循环中：
    // 1. 更新图集
    atlas.trim();
    
    // 2. 准备文本渲染
    text_renderer.queue_text(&font_system, &mut swash_cache, &text_area);
    
    // 3. 在渲染通道中
    let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
        // ... 其他参数
        label: Some("text_render_pass"),
    });
    
    // 4. 渲染文本
    text_renderer.draw(&mut atlas, &device, &queue, &mut render_pass).unwrap();
}

fn init_wgpu() -> (wgpu::Device, wgpu::Queue, wgpu::TextureFormat) {
    // 这里应包含实际的wgpu初始化代码
    unimplemented!()
}

更完整的示例代码

use winit::{
    event::{Event, WindowEvent},
    event_loop::{ControlFlow, EventLoop},
    window::WindowBuilder,
};
use wgpu::{
    Backends, Device, DeviceDescriptor, Instance, InstanceDescriptor, PresentMode, Queue,
    RequestAdapterOptions, Surface, SurfaceConfiguration, TextureFormat, TextureUsages,
};
use glyphon::{Attrs, Color, Family, FontSystem, SwashCache, TextArea, TextAtlas, TextRenderer};

async fn run() {
    // 1. 创建窗口和wgpu实例
    let event_loop = EventLoop::new();
    let window = WindowBuilder::new().build(&event_loop).unwrap();
    
    let instance = Instance::new(InstanceDescriptor {
        backends: Backends::all(),
        ..Default::default()
    });
    
    let surface = unsafe { instance.create_surface(&window) }.unwrap();
    
    // 2. 初始化适配器、设备和队列
    let adapter = instance
        .request_adapter(&RequestAdapterOptions {
            power_preference: wgpu::PowerPreference::HighPerformance,
            force_fallback_adapter: false,
            compatible_surface: Some(&surface),
        })
        .await
        .unwrap();
    
    let (device, queue) = adapter
        .request_device(
            &DeviceDescriptor {
                features: wgpu::Features::empty(),
                limits: wgpu::Limits::default(),
                label: None,
            },
            None,
        )
        .await
        .unwrap();
    
    // 3. 配置表面
    let surface_caps = surface.get_capabilities(&adapter);
    let surface_format = surface_caps
        .formats
        .iter()
        .copied()
        .find(|f| f.describe().srgb)
        .unwrap_or(surface_caps.formats[0]);
    
    let config = SurfaceConfiguration {
        usage: TextureUsages::RENDER_ATTACHMENT,
        format: surface_format,
        width: window.inner_size().width,
        height: window.inner_size().height,
        present_mode: PresentMode::Fifo,
        alpha_mode: surface_caps.alpha_modes[0],
        view_formats: vec![],
    };
    
    surface.configure(&device, &config);
    
    // 4. 初始化Glyphon
    let mut font_system = FontSystem::new();
    let mut swash_cache = SwashCache::new();
    let mut atlas = TextAtlas::new(&device, &queue, surface_format);
    let mut text_renderer = TextRenderer::new(&mut atlas, &device, None, None);
    
    // 5. 准备渲染的文本
    let text_area = TextArea {
        text: "Hello, Glyphon! 这是一个中文示例",
        bounds: (20.0, 20.0, 300.0, 200.0),
        color: Color::rgb(255, 255, 255),
        attrs: Attrs::new().family(Family::SansSerif).size(24.0),
        ..Default::default()
    };
    
    // 6. 事件循环
    event_loop.run(move |event, _, control_flow| {
        *control_flow = ControlFlow::Wait;
        
        match event {
            Event::RedrawRequested(_) => {
                // 7. 渲染流程
                let frame = surface.get_current_texture().unwrap();
                let view = frame.texture.create_view(&wgpu::TextureViewDescriptor::default());
                
                let mut encoder = device.create_command_encoder(&wgpu::CommandEncoderDescriptor {
                    label: Some("Render Encoder"),
                });
                
                {
                    // 8. 更新文本图集
                    atlas.trim();
                    
                    // 9. 准备文本渲染
                    text_renderer.queue_text(&font_system, &mut swash_cache, &text_area);
                    
                    // 10. 创建渲染通道
                    let mut render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
                        label: Some("Render Pass"),
                        color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                            view: &view,
                            resolve_target: None,
                            ops: wgpu::Operations {
                                load: wgpu::LoadOp::Clear(wgpu::Color {
                                    r: 0.1,
                                    g: 0.2,
                                    b: 0.3,
                                    a: 1.0,
                                }),
                                store: wgpu::StoreOp::Store,
                            },
                        })],
                        depth_stencil_attachment: None,
                    });
                    
                    // 11. 渲染文本
                    text_renderer.draw(&mut atlas, &device, &queue, &mut render_pass).unwrap();
                }
                
                queue.submit(std::iter::once(encoder.finish()));
                frame.present();
            }
            Event::WindowEvent { event, .. } => match event {
                WindowEvent::CloseRequested => *control_flow = ControlFlow::Exit,
                WindowEvent::Resized(size) => {
                    if size.width > 0 && size.height > 0 {
                        config.width = size.width;
                        config.height = size.height;
                        surface.configure(&device, &config);
                        window.request_redraw();
                    }
                }
                _ => {}
            },
            _ => {}
        }
    });
}

fn main() {
    pollster::block_on(run());
}