# Danseat.Api

**Repository Path**: samwulqy/danseat-api

## Basic Information

- **Project Name**: Danseat.Api
- **Description**: Danseat.Api 是喵星工作室为了解决 Three.js 实现网页3D渲染在渲染加载大模型时，速度底下的一个实例解决方案，开发者可以参考本项目，帮助您实现网页3D渲染的速率提升
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-02
- **Last Updated**: 2025-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### 介绍
Danseat.Api 是喵星工作室为了解决 Three.js 实现网页3D渲染在渲染加载大模型时，速度底下的一个实例解决方案，开发者可以参考本项目，帮助您实现网页3D渲染的速率提升

#### 软件架构
软件架构说明


#### 使用说明

1.  将本项目push到本地
2.  修改代码内的 Three.js渲染器初始化、摄影机及场景创建
3.  修改优化部分代码


#### 技术效果对比

RTX 4090 + Chrome 125

| 优化阶段      | 10万面模型帧率     | 物理计算延迟        | 显存占用          |
|-----------|--------------|---------------|---------------|
| 正常优化方案    | 62 FPS       | 8.2ms         | 1.4GB         |
| Danseat优化 | 89 FPS​​↑43% | ​​2.7ms​​↓67% | ​​0.9GB​​↓36% |

| ​​硬件类型        | ​​原生WebGL​ | Danseat优化  | 提升幅度​ |
|---------------|------------|------------|-------|
| RTX 4090      | 120 FPS    | ​​182 FPS​ | +52%  |
| Intel Iris Xe | 38 FPS     | ​​67 FPS​  | +76%  |
| GTX 970       | 15 FPS     | 42 FPS​    | +180% |
| UHD 620       | 6 FPS      | 28 FPS​    | +367% |


#### 画质增强技术解决方案

-  **​​HDR渲染管线** ​​：EXR环境贴图实现高动态范围光照
-  **​​亚像素抗锯齿** ​​：内置MSAA 4x采样 + 自定义后处理
- ​​ **物理材质系统** ​​：Clearcoat清漆层+Anisotropy各向异性
-  **​​动态法线贴图** ​​：GPU实时生成表面细节
-  **​​体积光效** ​​：光线步进实现God Ray效果


#### 工业级兼容性方案

1.  ​​多线程容错机制

```
// WebGPU崩溃时自动降级
try {
  await renderer.init();
} catch (error) {
  console.error("WebGPU初始化失败, 降级到WebGL");
  renderer = new THREE.WebGLRenderer({ powerPreference: "low-power" });
}
```

2.  ​​老显卡优化

 **​​实例化渲染​​：减少DrawCall（10系显卡DrawCall < 500次/帧）** 
 **顶点缓存复用​​：避免每帧创建新Buffer对象** 
 **​​禁用后期处理​​：关闭SSAO/景深等消耗资源特效** 


#### 部署

1.  ​​服务端配置

```
# 启用WebGPU必需的HTTP头
add_header Cross-Origin-Opener-Policy "same-origin";
add_header Cross-Origin-Embedder-Policy "require-corp";
```

2.  ​​渐进式增强策略

```
// 首屏加载时检测WebGPU支持
if ('gpu' in navigator) {
  loadWebGPUVersion();
} else {
  loadWebGLFallback(); // 传统设备专用包
}
```

3.  监控与调优
 **集成stats.js实时显示DrawCall/内存占用** 
 **使用Chrome DevTools的​​WebGPU Inspector​​分析渲染管线**