# Fireflyx.js

**Repository Path**: anse_725/Fireflyx.js

## Basic Information

- **Project Name**: Fireflyx.js
- **Description**: 网页轻量3D实时渲染器 ，web 3d Lightweight Renderer
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-01
- **Last Updated**: 2024-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: render-engine

## README

# Fireflyx.js
web 平台 3D 轻量实时渲染器
web 3d Lightweight real-time Renderer

# 样例
- [前向渲染管线](http://anse_725.gitee.io/fireflyx.js/examples/?example=ForwardRandering)
- [太阳系变换](http://anse_725.gitee.io/fireflyx.js/examples/?example=SolarSystem)
- [查看模型](http://anse_725.gitee.io/fireflyx.js/examples/?example=CamViewModel)
- [模型加载](http://anse_725.gitee.io/fireflyx.js/examples/?example=LoadModel)
- [cube纹理](http://anse_725.gitee.io/fireflyx.js/examples/?example=DrawCubeTexture)
- [天空盒](http://anse_725.gitee.io/fireflyx.js/examples/?example=SkyBox)
- [后处理效果校色](http://anse_725.gitee.io/fireflyx.js/examples/?example=PostEffectColorTone)
- [后处理效果深度](http://anse_725.gitee.io/fireflyx.js/examples/?example=PostEffectDepthTex)
- [后处理效果景深](http://anse_725.gitee.io/fireflyx.js/examples/?example=PostEffectDepthOfField)
- [后处理效果运动模糊](http://anse_725.gitee.io/fireflyx.js/examples/?example=PostEffectMotionBlur)

# 功能预览

* ##### 场景
  * entity 节点附着组件功能
  * transform 场景变换组件
  * Component 组件 (start update lateUpdate onRenderImage)
  * script 用户脚本组件
  * camera 相机
  * light 灯光
  * meshRenderer 静态网格渲染组件

* ##### 数学库
    * 向量 234
    * 矩阵
    * 四元数
    * color
    * Curve3

* ##### 事件
  * 事件派发接口
  * 全局事件监听与派发
  
* ##### 输入
  * 键盘
  * 鼠标
  * 触摸 
  
* ##### 资源系统
  * 内建资源
  * 全局资源管理机制
  * 基础纹理文件(jpg,png)
  * 模型网格资源
  * 材质资源
  * .obj 模型网格文件
  * .glsl 着色器片段文件
  * .glsl 着色器片段文件
  * .shader.json shader资源文件

* ##### 纹理
  * 基础 2D 纹理
  * render 纹理（RenderTarget）
  * cube 纹理

* ##### 着色器
  * 自定义shader 和 glsl 片段
  * glsl片段作为库,被其他片段 include 的功能
  * shader 多变体功能
  
* ##### 材质
  * 光栅状态控制
  * 深度状态控制
  * 混合状态控制
  * 模板状态控制
  * 渲染队列控制

* ##### 前向渲染管线
  * 半透明物体
  * 方向光源
  * 方向光级联阴影
  * 后渲处理效果

# 项目
* 项目工程开发语言： typescript 
* 底层图形API：webgl2
* 格式检查工具：eslint
* 自动化工具： gulp

#### 初始配置环境
* 1.安装 nodejs
* 2.项目根目录命令行执行: npm i

#### 项目编译 
* 编译代码（引擎和样例）: npm run build

* 监听编译（引擎和样例）: npm run watch

#### 跑样例
* 启动 ./examples/index.html
* 访问指定样例名 [http://xxx/examples/index.html?example=样例类名](http://anse_725.gitee.io/fireflyx.js/examples/?example=ForwardRandering)

# 后续功能进度
[版本目标](https://gitee.com/anse_725/Fireflyx.js/blob/master/doc/versionTarget.md)

* ##### 前向渲染管线

| 功能         | 进度   | 备注 |
| ------------ | ------ | ---- |
| 多相机分屏   | 进行中 |      |
| 天空盒       | 进行中 |      |
| 点光源       | 进行中 |      |
| 投射光源     | 进行中 |      |
| 点光源阴影   | 等待   |      |
| 投射光源阴影 | 等待   |      |
| 纹理间接光   | 等待   |      |

* ##### 延迟渲染管线

| 功能     | 进度 | 备注 |
| -------- | ---- | ---- |
| 基础功能 | 等待 |      |