#webgl #glsl-shader #shaders #glsl #api-wrapper

glsmrs

基于 WebGL 1.0 API 的观点性薄包装

3 个不稳定版本

0.2.0 2022 年 6 月 14 日
0.1.1 2021 年 1 月 16 日
0.1.0 2021 年 1 月 16 日

#498 in 图形 API

MIT 许可证

26KB
646

Rust 中的 WebGL 状态机

Package Build Publish

这是一个针对低级 WebGL API 的观点性包装,旨在提供一些显式的状态管理以及合理的默认值。该库的主要目标是支持 WebGL 1.0,因此它建立在 web-sys 包的原始绑定之上。

关键概念

  • 程序 - 包含顶点着色器、片段着色器、属性和统一变量的 GL 程序描述。程序负责编译着色器、获取属性/统一变量的位置,并在超出作用域时最终释放资源。
  • 网格 - 持有上传到 GPU 的数据的结构,负责在超出作用域时释放数组/元素缓冲区。
  • 帧缓冲区 - 渲染目标,具有深度和颜色槽,也可以初始化为空,然后渲染将输出到屏幕。
  • 管线 - 将东西绘制到屏幕上的原语,其主要目的是设置 GL 上下文配置,并提供 shade 方法进行绘制。

使用示例

从 crates.io 获取

[dependencies]
# ...
glsmrs = "0.2.0"

导入包

use glsmrs as gl;

创建上下文,Ctx 是一个包装器,内部使用 Rc,因此您可以克隆它并在不需要过多关注生命周期的情况下传递。

let ctx = gl::util::get_ctx("canvas-name", "webgl")?;

创建一些网格,例如一个 RGB 三角形

let vertices = vec![[0.5, -0.5], [0.0, 0.5], [-0.5, -0.5]];
let colors = vec![[1., 0., 0.], [0., 1., 0.], [0., 0., 1.]];
let indices = [0, 1, 2];

let triangle = gl::mesh::Mesh::new(&ctx, &indices)?
    .with_attribute::<gl::attributes::AttributeVector2>("position", &vertices)?
    .with_attrubute::<gl::attributes::AttributeVector3>("color", &colors)?;

定义渲染目标

let viewport = gl::texture::Viewport::new(720, 480);
let displayfb = gl::texture::EmptyFramebuffer::new(&ctx, viewport);

创建程序描述

let program = gl::Program::new(
    &ctx,
    include_str!("../shaders/dummy.vert"),
    include_str!("../shaders/dummy.frag"),
)?;

在状态中运行程序,提供必要的输入

let uniforms: HashMap<_, _> = vec![
    ("time", gl::UniformData::Scalar(time as f32)),
].into_iter().collect();

let pipeline = gl::Pipeline::new(&ctx);

pipeline.shade(
    &program,
    uniforms,
    vec![&mut triangle],
    &mut displayfb
)?;

例如,使用此库的项目可以查看 https://github.com/wg-romank/wasm-game-of-life ,这是一个修改过的原始 WASM 教程版本,完全在 GPU 上运行。

依赖项

~6.5–8.5MB
~169K SLoC