glayout 介绍：OpenGL/WebGL 的界面绘制库（技术）

Posted 2021-04-25 最后的叶子的神秘故事

在我的 和 43 游戏中，我使用了自己的库作为界面绘制库 glayout 。这个库可以用于常规的 2D 界面绘制，接口和 DOM 有点像。这篇文章是对它的一个介绍，感兴趣的技术小伙伴可以读一下。

特点

glayout 是一个 rust 语言编写的库。它的最大特点是可以编译成两大类目标代码：

• 普通的客户端二进制程序，理论上可以通过 OpenGL ES 支持所有主流桌面和移动操作系统（但目前我只测试过 Windows ）。

• asm.js / WebAssembly 代码，可以运行在主流浏览器中（我的游戏就是这样运行在浏览器里的）。在这种方式下，还可以使用 javascript 接口来调用 glayout 进行界面绘制。

glayout 主要做两件事情：基于 GL 的 2D 绘制、简单的排版。

glayout 的接口从模型上近似于浏览器的 DOM 接口，目前也有初步的排版能力和一点点 CSS 支持。

Hello World

下面是 rust 语言版本 hello world 的代码片段（省略了一些周边代码）。

let cfg = context.canvas_config(); cfg.append_style_sheet("    .text {        display: block;        color: #222;    } "); let elem = element!(&cfg, Empty {    Text {        class: "text";        font_size: 50.;        line_height: 80.;        set_text("Hello world");    };    Text {        class: "text";        font_size: 24.;        line_height: 40.;        set_text("from glayout");    }; }); let mut body = context.root(); body.append(elem);

如果编译为 Windows 客户端程序，效果如下：

如果编译到 asm.js 的网页上，效果如下：

将这段代码编译为客户端程序时，glayout 仅需要常规的 rust 工具链支持。编译为 asm.js 代码时，需要 node.js 和 emscripten 工具链，以进行 asm.js 代码生成。

目前开发状态

glayout 目前还处在一个很早期的开发状态，虽然开发比较久了，但我的业余时间比较少而且项目工程量很大。感兴趣的小伙伴可以去 GitHub 看看，如果有兴趣参与开发就更好了~（直接联系我吧！）

GitHub: https://github.com/LastLeaf/glayout