# DREngine.js

**Repository Path**: Hiwen/DREngine.js

## Basic Information

- **Project Name**: DREngine.js
- **Description**: 基于WebGPU实现的Deferred Rendering三维引擎
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-12-10
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DREngine.js

![4000个灯光](./doc/ScreenShot.png)


## 介绍

基于WebGPU实现的Deferred Rendering三维引擎。

WebGPU已经发布一段时间了，WebGPU的API已经稳定，并且已经有很多第三方库支持WebGPU，比如three.js，Babylon.js等。不过原生支持Deferred Rendering的引擎还没有出现，所以我自己动手实现了一套基于WebGPU的Deferred Rendering引擎。在学习WebGPU的同时，研究一下Deferred Rendering的原理，并尝试用WebGPU实现一套自己的Deferred Rendering引擎。

### Deferred Rendering

Deferred Rendering，也就是延迟渲染。通俗来说，就是将渲染的几何处理过程与光照处理和后处理等操作分离开来，先渲染几何体，然后再进行光照处理和后处理。这样做的好处是可以提高渲染效率，因为光照处理和后处理的操作比较耗时，可以将其放在后台处理，而不影响主渲染过程。这样就可以实现大量灯光的高效渲染。

当然，在几何渲染过程中，需要将法向、颜色、位置，纹理坐标等信息都存储起来，然后再进行光照处理和后处理。这恰好可以利用WebGPU的多目标渲染特性来实现。
WebGPU通常支持8个渲染目标，所以可以在几何渲染阶段保存很多的信息供后续使用。不过，内存的消耗也会比较大。

多个阶段的渲染，则可以使用WebGPU自带的渲染管线来支持。

还可以利用WebGPU的Compute Shader来进行一些计算密集型的操作，比如计算大量模型的矩阵。

## 软件架构

* core 核心代码
* geometry 几何体处理
* interface 接口层
* pipeline 管线层
* sample 示例代码
* shader 着色器
* utils 工具类

scene 场景管理，仿Cesium的API
viewer 视图管理，仿Cesium的API

## 如何启动

1. npm install
2. npm run dev

## 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## TODO

* 支持移除对象
* 动态修改灯光管线，比如调整灯光数量