Skip to content

Latest commit

 

History

History
85 lines (67 loc) · 2.25 KB

README.md

File metadata and controls

85 lines (67 loc) · 2.25 KB
Raw

bubble

一个基于WebGPU的渲染引擎, 参考了Unity的Component和SRP设计。

仍然在开发中，没有实际渲染功能

功能

  • 内置集群前向渲染管线 (Clustered Forward Rendering)
  • 类Unity Component组件系统 (Entity/Component)
  • 可编程渲染管线 (SRP)
  • 基于Radiance Cascades的实时全局光照 (Realtime GI)
  • 动画系统 (Animation)
  • PBR (Cook-Torrance BRDF)
  • 剔除 (Culling)
  • 阴影 (ShadowMap/Cascaded ShadowMap)
  • 灯光 (Point/Spot/Directional/Ambient Light)
  • 雾/体积雾 (Volumetric Fog)
  • 天空盒 (Skybox)
  • CubeMap IBL
  • PostProcessing (Bloom)
  • SSAO
  • 物理模拟 (Physics)

性能对比

TODO

使用

# 克隆项目
git clone

# 安装依赖
npm install # 安装项目依赖
npx playwright install # 安装浏览器驱动用于单元测试

# 运行
npm run dev

# 测试
npm run test:unit

项目结构

  • bubble: 渲染引擎
    • core: 定义一些核心的接口和类
    • pipeline: 类Unity的可编程渲染管线和渲染图
    • shader: 着色器定义和处理，遵循WebGPU着色器最佳实践
    • node: 场景中各种元素(例如Mesh, Material, Light...)的实现
    • math: 一些数学工具类
    • loader: 资源/模型加载器
    • helper: 一些辅助实现 (如Controller以及一些VisualHelper)
    • spec: 基于Vitest的测试用例

Shader

Shader编写遵循WebGPU着色器最佳实践, 使用JavaScript字符串 模板来动态生成Shader代码。

const shader = wgsl`
struct VertexInput {
  @location(0) position: vec3<f32>;
  @location(1) normal: vec3<f32>;
  @location(2) uv: vec2<f32>;
};

@vertex
fn vs(input: VertexInput) -> @builtin(position) vec4<f32> {
  #if ${表达式}
    return vec4<f32>(input.position, 1.0);
  #else
    return vec4<f32>(input.position, 1.0);
  #endif
}`;

三方库

  • Tweakpane: 数据驱动的UI，方便调试
  • wgsl_reflect: WGSL反射库，用于解析wgsl绑定信息用于绑定资源