# WebGL

**Repository Path**: xiangkp/WebGL

## Basic Information

- **Project Name**: WebGL
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-16
- **Last Updated**: 2026-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Three.js WebGL 综合图形演示

一个使用原生 Three.js + TypeScript + Vite 创建的沉浸式 WebGL 图形展厅，参考了高星项目与生态实践：

- [`mrdoob/three.js`](https://github.com/mrdoob/three.js)：WebGL 渲染、官方 examples、后处理、实例化与粒子范式
- [`pmndrs/react-three-fiber`](https://github.com/pmndrs/react-three-fiber)：场景模块化、交互状态与现代 3D Web 体验
- [`pmndrs/drei`](https://github.com/pmndrs/drei)：可复用图形能力、控件体验与展示型组件思路

## 功能亮点

- GLSL 能量核心：自定义顶点/片元着色器、Fresnel、透明辉光
- PBR 材质展台：金属、玻璃、清漆、阴影和动态灯光
- GPU 实例化：数百个 Dodecahedron 实例一次批量渲染
- 粒子星云：BufferGeometry 属性、颜色、大小和深度衰减
- 程序化波面：Shader 位移、扫描线和数据流效果
- 后处理管线：EffectComposer + UnrealBloomPass + OutputPass
- 交互体验：OrbitControls、热点选择、自动巡游、参数面板、FPS/绘制指标
- 响应式适配：桌面、平板和移动端布局降级

## 快速开始

```bash
npm install
npm run dev
```

浏览器打开 Vite 输出的本地地址即可查看。

## 脚本

```bash
npm run dev        # 启动开发服务器
npm run typecheck  # TypeScript 类型检查
npm run lint       # ESLint 代码检查
npm run build      # 生产构建
npm run preview    # 预览生产构建
```

## 项目结构

```text
.
├── index.html
├── package.json
├── eslint.config.js
├── tsconfig.json
└── src
    ├── main.ts
    ├── style.css
    └── vite-env.d.ts
```

## 技术栈

- Three.js `0.184.0`
- Vite `8.1.4`
- TypeScript `5.9.3`
- lil-gui `0.21.0`
- ESLint + typescript-eslint