如何使用WebRender渲染HTML？Rust实验浏览器技术求助

WebRender本身不具备HTML/CSS解析和布局能力，整个流程需要分三步：窗口与OpenGL上下文初始化、HTML转WebRender可处理的Display List、WebRender渲染循环整合。以下是具体实现步骤：

1. 依赖配置 #

首先在Cargo.toml中添加所需依赖（注意版本匹配，避免API兼容问题）：

[dependencies]
webrender = "0.67.0"
webrender_api = "0.67.0"
winit = "0.29.0"
glutin = { version = "0.31.0", features = ["winit"] }
html5ever = "0.26.0"  # 用于HTML解析
euclid = "0.22.0"     # WebRender依赖的几何计算库

2. 初始化窗口与OpenGL上下文 #

用winit创建窗口，通过glutin获取OpenGL上下文——WebRender需要基于OpenGL环境运行：

use winit::{event::*, event_loop::EventLoop, window::WindowBuilder};
use glutin::{ContextBuilder, PossiblyCurrentContext};

fn main() {
    let event_loop = EventLoop::new();
    let window = WindowBuilder::new()
        .with_title("WebRender Browser Demo")
        .with_inner_size(winit::dpi::LogicalSize::new(800, 600))
        .build(&event_loop)
        .unwrap();

    // 创建并激活OpenGL上下文
    let gl_context = ContextBuilder::new()
        .with_vsync(true)
        .build_windowed(&window)
        .unwrap();
    let gl_context = unsafe { gl_context.make_current().unwrap() };

    // 初始化WebRender实例
    let (renderer, sender) = init_webrender(&gl_context, window.inner_size());

    // 生成HTML对应的Display List（这里先用模拟内容，后面讲真实HTML处理）
    let initial_doc = build_document_from_content(window.inner_size());

    // 发送初始文档给WebRender
    sender.send(webrender_api::Msg::SetDocument(initial_doc)).unwrap();

    // 启动事件循环
    event_loop.run(move |event, _, control_flow| {
        *control_flow = ControlFlow::Wait;

        match event {
            Event::WindowEvent { event, window_id } if window_id == window.id() => {
                match event {
                    WindowEvent::CloseRequested => *control_flow = ControlFlow::Exit,
                    WindowEvent::Resized(new_size) => {
                        // 调整GL上下文和WebRender尺寸
                        unsafe { gl_context.resize(new_size) };
                        sender.send(webrender_api::Msg::Resize(new_size.width, new_size.height)).unwrap();
                        // 更新文档布局
                        let resized_doc = build_document_from_content(new_size);
                        sender.send(webrender_api::Msg::SetDocument(resized_doc)).unwrap();
                    }
                    _ => {}
                }
            }
            Event::RedrawRequested(window_id) if window_id == window.id() => {
                // 渲染帧并交换缓冲区
                let _ = renderer.render();
                gl_context.swap_buffers().unwrap();
                window.request_redraw();
            }
            _ => {}
        }
    });
}

3. 初始化WebRender #

编写辅助函数完成WebRender与OpenGL上下文的绑定：

use webrender::{Renderer, RendererOptions};
use webrender_api::MsgSender;
use euclid::Size2D;

fn init_webrender(gl_context: &PossiblyCurrentContext, size: winit::dpi::PhysicalSize<u32>) -> (Renderer, MsgSender) {
    // 获取OpenGL函数指针
    let gl_proc = gl_context.get_proc_address(|s| s.as_ptr());
    let options = RendererOptions {
        device_pixel_ratio: 1.0,
        initial_window_size: Size2D::new(size.width as f32, size.height as f32),
        ..Default::default()
    };
    // 创建WebRender渲染器和消息发送器
    Renderer::new(gl_proc, options).unwrap()
}

4. HTML到WebRender Display List的转换 #

WebRender只认Display List（一系列绘制命令），所以需要把HTML/CSS转换成这个格式。有两种方案：

方案A：手动构建（适合简单场景） #

如果只是渲染少量静态内容，可以直接手动创建Display List，模拟HTML元素的样式和布局：

use webrender_api::{Document, DisplayListBuilder, LayoutSize, LayoutRect, CommonItemProperties, ColorF, TextRun, FontKey};

fn build_document_from_content(size: winit::dpi::PhysicalSize<u32>) -> Document {
    let layout_size = LayoutSize::new(size.width as f32, size.height as f32);
    let mut builder = DisplayListBuilder::new(0, layout_size);

    // 模拟<body>背景
    builder.push_rect(
        &CommonItemProperties::new(LayoutRect::from_size(layout_size)),
        ColorF::new(1.0, 1.0, 1.0, 1.0),
    );

    // 模拟<h1>标题文本
    let title_text = "My Rust Browser";
    let font_size = 36.0;
    let font_key = FontKey::new(0); // 实际需注册真实字体
    let text_run = TextRun::new(
        title_text.to_string(),
        font_key,
        font_size,
        ColorF::new(0.1, 0.2, 0.5, 1.0),
        webrender_api::TextRunFlags::empty(),
    );
    let text_rect = LayoutRect::new(
        40.0,
        40.0,
        title_text.len() as f32 * font_size * 0.55,
        font_size,
    );
    builder.push_text(&CommonItemProperties::new(text_rect), text_run, 0.0);

    // 模拟<p>段落文本
    let para_text = "This is a paragraph rendered with WebRender.";
    let para_run = TextRun::new(
        para_text.to_string(),
        font_key,
        18.0,
        ColorF::new(0.0, 0.0, 0.0, 1.0),
        webrender_api::TextRunFlags::empty(),
    );
    let para_rect = LayoutRect::new(40.0, 100.0, 600.0, 20.0);
    builder.push_text(&CommonItemProperties::new(para_rect), para_run, 0.0);

    Document::new(layout_size, builder.finalize(), None)
}

方案B：集成HTML解析与布局引擎（真实浏览器场景） #

如果要处理完整的HTML/CSS，需要：

1. 用html5ever解析HTML成DOM树；
2. 用CSS解析器（如cssparser）处理样式；
3. 实现布局算法（或直接用Servo的layout库）将DOM+CSS转换成WebRender的Display List。

Servo的架构就是这套流程，你可以参考它的代码结构，复用其中的布局模块来生成WebRender可识别的绘制命令。

5. 关键注意事项 #

• 字体加载：示例中用了占位的FontKey，实际需要通过WebRender的RenderApi注册真实字体文件（TTF/OTF）；
• 交互处理：如果需要支持点击、滚动等交互，要把winit的输入事件转换成WebRender的InputEvent，通过消息发送器传给Renderer；
• 版本兼容：webrender、winit、glutin的版本迭代快，要确保依赖版本匹配，避免API冲突；
• 性能优化：WebRender的Display List应该尽量复用，只有内容变化时才重新生成，避免频繁重建。

内容的提问来源于stack exchange，提问作者dj_tech