<!-- Three.js SSAA（超级采样抗锯齿）示例代码详解
一、项目概述
这是一个基于Three.js的WebGL高级示例，主要演示了SSAA（Super Sampling Anti-Aliasing，超级采样抗锯齿）技术的实现和应用。通过这个示例，用户可以：

直观理解SSAA的工作原理和效果

对比不同采样等级对图像质量的影响

观察"无偏渲染"如何消除颜色条带伪影

体验透视相机和正交相机的视觉差异

二、核心功能模块
1. SSAA抗锯齿系统
基本流程：以更高分辨率渲染 → 下采样到显示分辨率

采样等级：支持1、2、4、8、16、32个样本

无偏模式：减少8位颜色缓冲区中的舍入误差累积

2. 双相机渲染系统
javascript
// 透视相机（模拟人眼视角）
const cameraP = new THREE.PerspectiveCamera(65, aspect, 3, 10);

// 正交相机（无透视变形）
const cameraO = new THREE.OrthographicCamera(left, right, top, bottom, 3, 10);
3. 实例化渲染优化
javascript
// 创建120个球体实例，但只需1次绘制调用
const mesh = new THREE.InstancedMesh(geometry, material, 120);
4. 交互式GUI控制面板
实时调整所有渲染参数

即时反馈参数变化效果

支持相机切换、背景色修改等

三、主要技术点详解
1. SSAA技术原理
text
┌─────────────────────────────────────────┐
│        SSAA渲染流程                      │
├─────────────────────────────────────────┤
│ 1. 选择采样模式(1x, 2x, 4x, 8x等)       │
│ 2. 在子像素位置采集多个样本             │
│ 3. 对所有样本颜色进行平均              │
│ 4. 下采样到目标分辨率                   │
│ 5. (无偏模式)消除舍入误差              │
└─────────────────────────────────────────┘
关键代码：

javascript
// 设置SSAA参数
ssaaRenderPassP.sampleLevel = params.sampleLevel;  // 采样等级
ssaaRenderPassP.unbiased = params.unbiased;        // 无偏模式
2. 实例化渲染（Instanced Rendering）
传统渲染 vs 实例化渲染：

text
传统渲染120个球体：
├─ Draw Call 1: 球体1 (变换矩阵1, 材质1)
├─ Draw Call 2: 球体2 (变换矩阵2, 材质1)
├─ ...
└─ Draw Call 120: 球体120 (变换矩阵120, 材质1)

实例化渲染120个球体：
└─ Draw Call 1: 
   ├─ 几何体: 球体
   ├─ 材质: 标准材质
   ├─ 实例数据: [变换矩阵1..120, 颜色1..120]
   └─ GPU一次性处理所有实例
性能优势：

减少CPU-GPU通信：数据一次性上传到GPU

减少状态切换：保持相同的着色器程序

提升渲染效率：特别适合大规模相同物体的渲染

3. 后期处理管线架构
text
渲染管线流程：
┌─────────────┐    ┌──────────────┐    ┌─────────────┐
│  原始场景   │───▶│  SSAA通道    │───▶│  输出通道   │
│  渲染       │    │  (抗锯齿)    │    │  (到屏幕)  │
└─────────────┘    └──────────────┘    └─────────────┘
EffectComposer核心代码：

javascript
// 创建后期处理合成器
composer = new EffectComposer(renderer);
composer.setPixelRatio(1);  // 固定像素比，确保SSAA计算准确

// 添加渲染通道
composer.addPass(ssaaRenderPassP);  // SSAA处理
composer.addPass(outputPass);       // 最终输出
4. 光照系统设计
三点光照法 + 环境光：

javascript
// 1. 主光源（左前上）- 淡绿色
const light = new THREE.PointLight(0xefffef, 500);
light.position.set(-10, -10, 10);

// 2. 补充光源（左前下）- 淡红色
const light2 = new THREE.PointLight(0xffefef, 500);
light2.position.set(-10, 10, 10);

// 3. 补充光源（右前上）- 淡蓝色
const light3 = new THREE.PointLight(0xefefff, 500);
light3.position.set(10, -10, 10);

// 4. 环境光（整体照明）- 白色低强度
const light4 = new THREE.AmbientLight(0xffffff, 0.2);
光照效果：

立体感：三点光照产生自然的高光和阴影

颜色混合：三色光源混合产生丰富的色彩变化

阴影细节：环境光填充暗部，避免死黑

5. 相机系统对比
特性	透视相机	正交相机
投影方式	锥形投影	平行投影
视觉效果	近大远小	大小恒定
适用场景	3D游戏、模拟	CAD、UI、2.5D游戏
视野控制	FOV角度	缩放因子
视野匹配计算：

javascript
// 使正交相机的视野与透视相机匹配
const fov = THREE.MathUtils.degToRad(cameraP.fov);
const hyperfocus = (cameraP.near + cameraP.far) / 2;
const _height = 2 * Math.tan(fov / 2) * hyperfocus;
cameraO.zoom = height / _height;  // 计算缩放比例
6. 性能优化策略
1. 固定像素比
javascript
composer.setPixelRatio(1);  // 重要：SSAA计算需要固定比例
原因：SSAA算法基于固定的采样模式，如果使用设备像素比，会导致：

采样模式不一致

性能不可预测

跨设备显示差异

2. 批量处理
javascript
// 批量更新所有实例的矩阵和颜色
for (let i = 0; i < 120; i++) {
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);
    mesh.setColorAt(i, color);
}
// 标记数据需要更新
mesh.instanceMatrix.needsUpdate = true;
mesh.instanceColor.needsUpdate = true;
3. 合理的几何体复杂度
javascript
// 48×24分段：平衡视觉效果和性能
const geometry = new THREE.SphereGeometry(3, 48, 24);
太少分段：球体不圆滑，有棱角

太多分段：顶点数过多，性能下降

合理选择：根据物体在画面中的大小决定

7. GUI交互系统
javascript
// 创建GUI实例
gui = new GUI();

// 添加各种控件类型
gui.add(params, 'unbiased').name('无偏渲染');
gui.add(params, 'sampleLevel', options).name('采样等级');
gui.add(params, 'clearAlpha', 0, 1).name('背景透明度').step(0.01);
控件类型：

开关：布尔值参数

下拉菜单：枚举值选择

滑块：数值范围调整

颜色选择：预设颜色切换

四、技术架构图
text
┌─────────────────────────────────────────────────────────┐
│                    Three.js SSAA示例                     │
├─────────────────────────────────────────────────────────┤
│ 用户界面层                                              │
│  ├─ GUI控制面板 (lil-gui)                               │
│  └─ 性能监控器 (Stats.js)                               │
├─────────────────────────────────────────────────────────┤
│ 应用逻辑层                                              │
│  ├─ 场景管理 (Scene)                                    │
│  ├─ 相机控制 (透视/正交切换)                            │
│  ├─ 动画循环 (自动旋转)                                 │
│  └─ 参数同步 (GUI→渲染)                                 │
├─────────────────────────────────────────────────────────┤
│ 渲染引擎层                                              │
│  ├─ WebGL渲染器 (Three.js)                              │
│  ├─ 后期处理管线 (EffectComposer)                       │
│  │   ├─ SSAARenderPass (抗锯齿)                         │
│  │   └─ OutputPass (最终输出)                           │
│  └─ 实例化渲染系统 (InstancedMesh)                      │
├─────────────────────────────────────────────────────────┤
│ 资源管理层                                              │
│  ├─ 几何体 (球体，48×24分段)                            │
│  ├─ 材质系统 (PBR标准材质)                              │
│  ├─ 光照系统 (三点光照+环境光)                          │
│  └─ 着色器程序 (Three.js内置)                           │
└─────────────────────────────────────────────────────────┘
五、教育价值
这个示例不仅仅是一个技术演示，更是一个优秀的教学工具：

1. 实时图形学概念
抗锯齿技术：理解各种AA技术（SSAA、MSAA、FXAA等）的区别

渲染管线：了解现代GPU的渲染流程

颜色管理：认识8位颜色限制和精度问题

2. 性能优化实践
实例化渲染：学习大规模物体渲染的优化技巧

后期处理：掌握现代游戏和应用的渲染效果实现

资源管理：理解几何体复杂度与性能的平衡

3. 交互设计模式
实时反馈：参数调整立即看到效果

对比学习：通过开关不同功能观察差异

渐进式理解：从简单到复杂逐步探索功能

六、扩展可能性
基于这个示例，可以进一步开发：

1. 技术扩展
javascript
// 添加更多后期处理效果
import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';

// 添加更多相机类型
import { CubeCamera } from 'three';

// 添加物理引擎
import { AmmoPhysics } from 'three/addons/physics/AmmoPhysics.js';
2. 功能扩展
动态LOD系统：根据距离调整几何体细节

屏幕空间反射：添加真实的水面/镜面反射

体积光照：实现上帝光、雾气等效果

粒子系统：添加背景星空或特效

3. 应用场景
产品展示：高质量的3D产品渲染

建筑设计：实时建筑可视化

教育工具：图形学教学演示

艺术创作：交互式数字艺术

七、总结
这个Three.js SSAA示例展示了现代WebGL技术的多个重要方面：

先进的抗锯齿技术：SSAA提供高质量的边缘平滑

高性能渲染：实例化渲染处理大量相同物体

灵活的后期处理：可扩展的渲染管线架构

用户友好的交互：实时调整参数观察效果

跨平台兼容：纯Web技术，无需插件 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL 后期处理 - 手动超级采样抗锯齿 -->
		<title>Three.js WebGL 后期处理 - 手动超级采样抗锯齿(SSAA)</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			- width=device-width：宽度等于设备宽度
			- user-scalable=no：禁止用户缩放
			- minimum-scale=1.0, maximum-scale=1.0：固定缩放比例为1.0
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入外部CSS样式文件 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			信息展示区域：
			显示Three.js技术信息和示例说明
		-->
		<div id="info">
			<!-- 
				Three.js链接和作者信息：
				- target="_blank"：在新标签页打开链接
				- rel="noopener"：防止新页面访问window.opener，增强安全性
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 无偏手动超级采样抗锯齿(SSAA)通道，由 <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a> 开发<br/><br/>
			<!-- 示例详细说明 -->
			本示例展示了如何消除8位每通道缓冲区上使用大量SSAA样本时累积的舍入误差带来的偏差。<br/><br/>
			SSAA（超级采样抗锯齿）是一种通过以更高分辨率渲染场景然后下采样到显示分辨率的技术。<br/>
			但在8位颜色缓冲区中，多次平均操作会导致舍入误差累积，产生颜色条带（banding）。<br/>
			启用"unbiased"（无偏）选项可以消除这种误差，获得更平滑的颜色过渡。<br/><br/>
			尝试关闭"unbiased"功能，观察由于舍入误差累积导致的颜色条带现象。<br/>
			您也可以通过调整采样等级（Sample Level）来控制抗锯齿的质量，采样等级越高，效果越好，但性能消耗也越大。
		</div>

		<!-- 
			主容器：
			用于承载Three.js渲染的Canvas元素和性能监控面板
		-->
		<div id="container"></div>

		<!-- 
			导入映射（Import Map）：
			- 现代JavaScript模块导入配置
			- 允许使用简短名称导入模块
			- 这里是ES模块的路径映射配置
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module"表示这是一个ES6模块
			模块内部的代码具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ========== 模块导入部分 ==========
			
			// 导入Three.js核心库的所有功能
			// Three.js是一个流行的3D图形库，用于在浏览器中创建和显示3D内容
			import * as THREE from 'three';

			// 导入性能监控器（Stats.js）
			// 用于显示帧率、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轻量级GUI库（lil-gui）
			// 用于创建交互式控制面板，调整参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入后期处理相关模块
			// EffectComposer：后期处理合成器，管理多个渲染通道
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			// SSAARenderPass：SSAA渲染通道，实现超级采样抗锯齿
			import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
			// OutputPass：输出通道，将处理结果渲染到屏幕
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

			// ========== 全局变量声明 ==========
			
			// Three.js核心对象
			let scene;        // 场景对象，包含所有3D物体、灯光、相机等
			let renderer;     // WebGL渲染器，负责将3D场景渲染到2D Canvas
			let composer;     // 后期处理合成器，管理渲染管线
			
			// 透视相机相关
			let cameraP;          // 透视相机（Perspective Camera）
			let ssaaRenderPassP;  // 透视相机的SSAA渲染通道
			
			// 正交相机相关
			let cameraO;          // 正交相机（Orthographic Camera）
			let ssaaRenderPassO;  // 正交相机的SSAA渲染通道
			
			// 工具对象
			let gui;    // GUI控制器实例
			let stats;  // 性能监控器实例

			// ========== 配置参数对象 ==========
			// 这些参数将通过GUI面板供用户调整
			const params = {
				// 采样等级：控制SSAA的采样数量
				// 0=1个样本, 1=2个样本, 2=4个样本, 3=8个样本, 4=16个样本, 5=32个样本
				// 样本越多，抗锯齿效果越好，但性能消耗越大
				sampleLevel: 4,
				
				// 无偏渲染：是否启用无偏SSAA
				// 开启时可减少颜色条带（banding），关闭时可观察舍入误差的影响
				unbiased: true,
				
				// 相机类型：在透视相机和正交相机之间切换
				// 透视相机模拟人眼视角（近大远小）
				// 正交相机无透视变形（平行投影，常用于CAD等应用）
				camera: 'perspective',
				
				// 清除颜色：渲染前Canvas的清除颜色
				// 即背景颜色
				clearColor: 'black',
				
				// 清除透明度：背景颜色的透明度
				// 0.0=完全透明，1.0=完全不透明
				clearAlpha: 1.0,
				
				// 视图水平偏移：控制透视相机的视图偏移
				// 用于演示视图偏移效果，负值向左偏移，正值向右偏移
				viewOffsetX: 0,
				
				// 自动旋转：是否自动旋转场景中的物体
				// 开启时物体会持续旋转，关闭时停止旋转
				autoRotate: true
			};

			// ========== 初始化调用 ==========
			
			// 调用初始化函数，创建场景、相机、灯光、物体等
			init();
			
			// 初始化GUI控制面板
			clearGui();

			// ========== 函数定义部分 ==========

			/**
			 * 清除并重新创建GUI控制面板
			 * 当参数变化或需要重置GUI时调用
			 */
			function clearGui() {
				// 如果已存在GUI实例，先销毁它
				// 避免重复创建导致的内存泄漏
				if ( gui ) gui.destroy();

				// 创建新的GUI实例
				// GUI将浮动在页面右上角
				gui = new GUI();
				
				// 添加"无偏渲染"开关控件
				// 参数1：参数对象
				// 参数2：参数名
				gui.add( params, 'unbiased' )
				   .name('无偏渲染')  // 设置控件显示名称
				   .onChange(function(value) {
					   // 当值改变时的回调函数（可选）
					   console.log('无偏渲染设置为：', value);
				   });
				
				// 添加"采样等级"下拉选择控件
				// 第三个参数是选项对象，键为显示文本，值为实际值
				gui.add( params, 'sampleLevel', {
					'等级 0: 1个样本': 0,
					'等级 1: 2个样本': 1,
					'等级 2: 4个样本': 2,
					'等级 3: 8个样本': 3,
					'等级 4: 16个样本': 4,
					'等级 5: 32个样本': 5
				} ).name('采样等级');
				
				// 添加"相机类型"下拉选择控件
				gui.add( params, 'camera', [ 'perspective', 'orthographic' ] )
				   .name('相机类型');
				
				// 添加"清除颜色"下拉选择控件
				gui.add( params, 'clearColor', [ 'black', 'white', 'blue', 'green', 'red' ] )
				   .name('背景颜色');
				
				// 添加"清除透明度"滑块控件
				// 参数3和4：最小值和最大值
				gui.add( params, 'clearAlpha', 0, 1 )
				   .name('背景透明度')
				   .step(0.01);  // 设置滑块步长为0.01
				
				// 添加"视图水平偏移"滑块控件
				gui.add( params, 'viewOffsetX', -100, 100 )
				   .name('视图水平偏移')
				   .step(1);  // 设置滑块步长为1
				
				// 添加"自动旋转"开关控件
				gui.add( params, 'autoRotate' )
				   .name('自动旋转');

				// 默认打开GUI面板
				// 用户可点击右上角按钮关闭/打开
				gui.open();
			}

			/**
			 * 主初始化函数
			 * 创建Three.js核心对象：渲染器、场景、相机、灯光、物体等
			 */
			function init() {
				// 获取页面中的容器元素
				// 后续将Canvas和性能监控器添加到此容器中
				const container = document.getElementById( 'container' );

				// 获取当前窗口的尺寸
				// 如果window.innerWidth不存在（极少数情况），使用1作为默认值
				const width = window.innerWidth || 1;
				const height = window.innerHeight || 1;
				const aspect = width / height;  // 计算宽高比，用于设置相机
				const devicePixelRatio = window.devicePixelRatio || 1;  // 设备像素比，用于高清屏适配

				// ========== 创建WebGL渲染器 ==========
				
				// 创建Three.js的WebGL渲染器
				// WebGLRenderer使用WebGL API在Canvas上绘制3D图形
				renderer = new THREE.WebGLRenderer({
					// 可选的配置参数：
					// antialias: true,  // 是否启用硬件抗锯齿（这里使用SSAA，所以不启用）
					// alpha: true,      // 是否允许透明度
					// preserveDrawingBuffer: true  // 是否保留绘图缓冲区
				});
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina屏）上，这会提高渲染分辨率以获得更清晰的图像
				renderer.setPixelRatio( devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize( width, height );
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的Canvas元素添加到页面body中
				// renderer.domElement是Canvas DOM元素
				document.body.appendChild( renderer.domElement );

				// ========== 初始化性能监控器 ==========
				
				// 创建Stats.js实例
				stats = new Stats();
				
				// 将性能监控器的DOM元素添加到容器中
				// stats.dom是包含FPS、MS等显示元素的div
				container.appendChild( stats.dom );

				// ========== 创建相机 ==========
				
				// 创建透视相机（模拟人眼视角）
				// 参数说明：
				// 1. fov: 65 - 视野角度（Field of View），单位是度，较大的值产生鱼眼效果
				// 2. aspect: aspect - 宽高比，通常设置为Canvas的宽高比
				// 3. near: 3 - 近裁剪面，比这个距离近的物体不会被渲染
				// 4. far: 10 - 远裁剪面，比这个距离远的物体不会被渲染
				cameraP = new THREE.PerspectiveCamera( 65, aspect, 3, 10 );
				
				// 设置相机位置
				// 在Three.js中，默认相机看向Z轴负方向，物体在原点(0,0,0)
				cameraP.position.z = 7;  // 将相机向后移动7个单位
				
				// 设置视图偏移
				// 参数说明：
				// 1. fullWidth: width - 完整视图宽度
				// 2. fullHeight: height - 完整视图高度
				// 3. x: params.viewOffsetX - 子视图的水平偏移
				// 4. y: 0 - 子视图的垂直偏移
				// 5. width: width - 子视图宽度
				// 6. height: height - 子视图高度
				// 这允许在一个大视图中定义一个小视口，用于多视图渲染等场景
				cameraP.setViewOffset( width, height, params.viewOffsetX, 0, width, height );

				// 创建正交相机（无透视变形，平行投影）
				// 参数说明：
				// 1. left: width / -2 - 左裁剪面
				// 2. right: width / 2 - 右裁剪面
				// 3. top: height / 2 - 上裁剪面
				// 4. bottom: height / -2 - 下裁剪面
				// 5. near: 3 - 近裁剪面
				// 6. far: 10 - 远裁剪面
				cameraO = new THREE.OrthographicCamera( width / -2, width / 2, height / 2, height / -2, 3, 10 );
				
				// 设置正交相机位置
				cameraO.position.z = 7;

				// 计算正交相机的缩放，使其视野与透视相机匹配
				// 这样切换相机时，物体看起来大小一致
				const fov = THREE.MathUtils.degToRad( cameraP.fov );  // 将视野角度转换为弧度
				const hyperfocus = ( cameraP.near + cameraP.far ) / 2;  // 计算超焦距（对焦距离）
				const _height = 2 * Math.tan( fov / 2 ) * hyperfocus;  // 计算在超焦距处的视野高度
				cameraO.zoom = height / _height;  // 设置正交相机的缩放比例
				
				// 更新正交相机的投影矩阵
				// 在Three.js中，修改相机参数后需要手动更新投影矩阵
				cameraO.updateProjectionMatrix();

				// ========== 创建场景 ==========
				
				// 创建Three.js场景
				// 场景是所有3D对象的容器，包括网格、灯光、相机等
				scene = new THREE.Scene();
				
				// 设置场景背景色（可选）
				// scene.background = new THREE.Color(0x000000);

				// ========== 创建物体和组 ==========
				
				// 创建一个组对象
				// 组用于将多个物体组织在一起，可以一起进行变换操作
				const group = new THREE.Group();
				
				// 将组添加到场景中
				scene.add( group );

				// ========== 创建灯光系统 ==========
				
				// 创建第一个点光源（带淡绿色的白光）
				// 参数说明：
				// 1. color: 0xefffef - 光源颜色（RGB十六进制）
				// 2. intensity: 500 - 光源强度
				const light = new THREE.PointLight( 0xefffef, 500 );
				
				// 设置光源位置
				// 点光源从指定位置向所有方向均匀发光
				light.position.set( -10, -10, 10 );
				
				// 将光源添加到场景中
				scene.add( light );

				// 创建第二个点光源（带淡红色的白光）
				const light2 = new THREE.PointLight( 0xffefef, 500 );
				light2.position.set( -10, 10, 10 );
				scene.add( light2 );

				// 创建第三个点光源（带淡蓝色的白光）
				const light3 = new THREE.PointLight( 0xefefff, 500 );
				light3.position.set( 10, -10, 10 );
				scene.add( light3 );

				// 创建环境光（提供均匀的基础照明）
				// 环境光没有方向，会均匀照亮所有物体
				// 参数说明：
				// 1. color: 0xffffff - 白色光
				// 2. intensity: 0.2 - 较低强度，用于填充阴影
				const light4 = new THREE.AmbientLight( 0xffffff, 0.2 );
				scene.add( light4 );

				// ========== 创建几何体和材质 ==========
				
				// 创建球体几何体
				// 参数说明：
				// 1. radius: 3 - 球体半径
				// 2. widthSegments: 48 - 水平分段数（经线）
				// 3. heightSegments: 24 - 垂直分段数（纬线）
				// 较高的分段数使球体更平滑，但顶点数也更多
				const geometry = new THREE.SphereGeometry( 3, 48, 24 );
				
				// 创建标准网格材质（基于物理的渲染材质）
				// MeshStandardMaterial支持光照、阴影、环境光遮蔽等高级特性
				const material = new THREE.MeshStandardMaterial();
				
				// 设置材质属性
				material.roughness = 0.5;  // 粗糙度：0.0=镜面光滑，1.0=完全漫反射
				material.metalness = 0;    // 金属度：0.0=非金属，1.0=金属
				
				// 可设置的其他材质属性：
				// material.color = new THREE.Color(0xffffff);  // 基础颜色
				// material.emissive = new THREE.Color(0x000000);  // 自发光颜色
				// material.emissiveIntensity = 0.0;  // 自发光强度

				// ========== 创建实例化网格 ==========
				
				// 创建实例化网格（InstancedMesh）
				// 实例化渲染是一种高性能渲染技术，可以一次性渲染多个相同几何体的实例
				// 参数说明：
				// 1. geometry: geometry - 几何体
				// 2. material: material - 材质
				// 3. count: 120 - 实例数量
				const mesh = new THREE.InstancedMesh( geometry, material, 120 );
				
				// 创建临时对象，用于计算每个实例的变换矩阵
				const dummy = new THREE.Object3D();
				
				// 创建临时颜色对象，用于计算每个实例的颜色
				const color = new THREE.Color();

				// 循环创建120个实例
				for ( let i = 0; i < 120; i ++ ) {
					// 设置随机位置
					// Math.random()返回0-1之间的随机数
					// Math.random() * 4 - 2 返回-2到2之间的随机数
					dummy.position.x = Math.random() * 4 - 2;
					dummy.position.y = Math.random() * 4 - 2;
					dummy.position.z = Math.random() * 4 - 2;
					
					// 设置随机旋转
					// 每个轴随机旋转0-360度（弧度制）
					dummy.rotation.x = Math.random() * Math.PI * 2;
					dummy.rotation.y = Math.random() * Math.PI * 2;
					dummy.rotation.z = Math.random() * Math.PI * 2;
					
					// 设置随机缩放
					// Math.random() * 0.2 + 0.05 返回0.05到0.25之间的随机数
					// setScalar将所有分量设置为相同的值（均匀缩放）
					dummy.scale.setScalar( Math.random() * 0.2 + 0.05 );
					
					// 更新对象的变换矩阵
					// 当修改位置、旋转、缩放后，需要调用此方法更新变换矩阵
					dummy.updateMatrix();
					
					// 将变换矩阵设置到实例化网格的第i个实例
					mesh.setMatrixAt( i, dummy.matrix );
					
					// 设置随机颜色
					// HSL颜色空间：
					// H（色相）：0.0-1.0（红色到紫色）
					// S（饱和度）：1.0（最大饱和度）
					// L（亮度）：0.3（较暗的亮度）
					color.setHSL( Math.random(), 1.0, 0.3 );
					
					// 将颜色设置到实例化网格的第i个实例
					mesh.setColorAt( i, color );
				}

				// 重要：更新实例化网格的实例矩阵和颜色
				// 修改实例数据后，需要设置这些标志为true
				mesh.instanceMatrix.needsUpdate = true;
				if (mesh.instanceColor) {
					mesh.instanceColor.needsUpdate = true;
				}

				// 将实例化网格添加到组中
				group.add( mesh );

				// ========== 后期处理设置 ==========
				
				// 创建效果合成器（EffectComposer）
				// 效果合成器管理多个渲染通道，形成后期处理管线
				composer = new EffectComposer( renderer );
				
				// 设置合成器的像素比为1
				// 这是重要设置：对于SSAA，我们希望以固定的1:1像素比进行计算
				// 如果使用设备像素比，SSAA计算会变得复杂且不一致
				composer.setPixelRatio( 1 );
				
				// 创建透视相机的SSAA渲染通道
				// SSAARenderPass实现了超级采样抗锯齿
				// 参数说明：
				// 1. scene: scene - 要渲染的场景
				// 2. camera: cameraP - 使用的相机
				ssaaRenderPassP = new SSAARenderPass( scene, cameraP );
				
				// 将SSAA通道添加到合成器
				// 通道按照添加顺序执行
				composer.addPass( ssaaRenderPassP );
				
				// 创建正交相机的SSAA渲染通道
				ssaaRenderPassO = new SSAARenderPass( scene, cameraO );
				composer.addPass( ssaaRenderPassO );
				
				// 创建输出通道（OutputPass）
				// 输出通道是后期处理管线的最后一个通道
				// 它将前面通道的处理结果渲染到屏幕
				const outputPass = new OutputPass();
				composer.addPass( outputPass );
				
				// 注意：两个SSAA通道只有一个会被启用
				// 根据用户选择的相机类型决定启用哪个

				// ========== 事件监听器 ==========
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，重新调整渲染尺寸
				window.addEventListener( 'resize', onWindowResize );
				
				// 可添加的其他事件监听：
				// window.addEventListener('mousemove', onMouseMove);  // 鼠标移动
				// window.addEventListener('click', onClick);  // 鼠标点击
				// window.addEventListener('keydown', onKeyDown);  // 键盘按下
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时调用
			 * 重新调整相机、渲染器和合成器的尺寸
			 */
			function onWindowResize() {
				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;
				const aspect = width / height;

				// ========== 更新透视相机 ==========
				
				// 更新透视相机的宽高比
				cameraP.aspect = aspect;
				
				// 重新设置透视相机的视图偏移
				cameraP.setViewOffset( width, height, params.viewOffsetX, 0, width, height );
				
				// 更新透视相机的投影矩阵
				// 修改相机参数后必须调用此方法
				cameraP.updateProjectionMatrix();

				// ========== 更新正交相机 ==========
				
				// 重新计算正交相机的裁剪面
				// 保持正交相机的视野与窗口大小匹配
				cameraO.left = - height * aspect;
				cameraO.right = height * aspect;
				cameraO.top = height;
				cameraO.bottom = - height;
				
				// 更新正交相机的投影矩阵
				cameraO.updateProjectionMatrix();

				// ========== 更新渲染器和合成器 ==========
				
				// 更新WebGL渲染器的尺寸
				renderer.setSize( width, height );
				
				// 更新后期处理合成器的尺寸
				composer.setSize( width, height );
				
				// 注意：这里没有更新合成器的像素比
				// 因为合成器固定使用像素比1以确保SSAA计算准确
			}

			/**
			 * 动画循环函数
			 * 每一帧都会被调用（通常每秒60次）
			 * 负责更新场景状态和渲染
			 */
			function animate() {
				// 开始性能统计
				// Stats.js会记录这一帧的开始时间
				stats.begin();

				// ========== 自动旋转处理 ==========
				
				// 如果启用了自动旋转
				if ( params.autoRotate ) {
					// 遍历场景中的所有子对象
					for ( let i = 0; i < scene.children.length; i ++ ) {
						const child = scene.children[ i ];
						
						// 对每个子对象应用旋转
						// 注意：这里旋转的是整个组，而不是单个球体
						child.rotation.x += 0.005;  // X轴旋转，每帧增加0.005弧度
						child.rotation.y += 0.01;   // Y轴旋转，每帧增加0.01弧度
						
						// 可以添加的旋转限制：
						// child.rotation.x %= Math.PI * 2;  // 限制在0-2π之间
						// child.rotation.y %= Math.PI * 2;
					}
				}

				// ========== 更新清除颜色 ==========
				
				// 根据GUI的选择更新清除颜色
				let newColor = ssaaRenderPassP.clearColor;  // 获取当前颜色作为默认值
				
				// 根据选择的颜色名称设置对应的十六进制颜色值
				switch ( params.clearColor ) {
					case 'blue': newColor = 0x0000ff; break;   // 蓝色
					case 'red': newColor = 0xff0000; break;    // 红色
					case 'green': newColor = 0x00ff00; break;  // 绿色
					case 'white': newColor = 0xffffff; break;  // 白色
					case 'black': newColor = 0x000000; break;  // 黑色（默认）
					
					// 可以扩展更多颜色：
					// case 'yellow': newColor = 0xffff00; break;
					// case 'purple': newColor = 0xff00ff; break;
				}

				// ========== 更新SSAA渲染通道参数 ==========
				
				// 更新清除颜色（同时设置给两个通道，虽然只有一个启用）
				ssaaRenderPassP.clearColor = newColor;
				ssaaRenderPassO.clearColor = newColor;
				
				// 更新清除透明度
				ssaaRenderPassP.clearAlpha = params.clearAlpha;
				ssaaRenderPassO.clearAlpha = params.clearAlpha;
				
				// 更新采样等级
				ssaaRenderPassP.sampleLevel = params.sampleLevel;
				ssaaRenderPassO.sampleLevel = params.sampleLevel;
				
				// 更新无偏渲染设置
				ssaaRenderPassP.unbiased = params.unbiased;
				ssaaRenderPassO.unbiased = params.unbiased;
				
				// 根据选择的相机类型启用/禁用对应的渲染通道
				// 使用布尔表达式进行判断
				ssaaRenderPassP.enabled = ( params.camera === 'perspective' );
				ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
				
				// 注意：两个通道不会同时渲染
				// 启用一个的同时会禁用另一个

				// ========== 更新相机视图偏移 ==========
				
				// 更新透视相机的视图水平偏移
				cameraP.view.offsetX = params.viewOffsetX;
				
				// 注意：这里没有调用cameraP.updateProjectionMatrix()
				// 因为setViewOffset已经内部处理了投影矩阵更新

				// ========== 渲染场景 ==========
				
				// 使用效果合成器进行渲染
				// 这将执行整个后期处理管线：
				// 1. 启用通道渲染场景到中间缓冲区
				// 2. 应用SSAA抗锯齿
				// 3. 输出通道将结果渲染到屏幕
				composer.render();
				
				// 对比：如果不用后期处理，直接渲染：
				// renderer.render(scene, currentCamera);

				// 结束性能统计
				// Stats.js会计算这一帧的耗时并更新显示
				stats.end();
				
				// 可添加的其他帧逻辑：
				// 1. 物理模拟更新
				// 2. 用户输入处理
				// 3. AI逻辑更新
				// 4. 网络数据同步
			}
			
			// ========== 其他可能添加的功能 ==========
			
			/**
			 * 鼠标移动事件处理（示例）
			 * 可根据鼠标位置旋转相机或物体
			 */
			/*
			function onMouseMove(event) {
				// 计算归一化的鼠标坐标（-1到1之间）
				const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
				const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
				
				// 根据鼠标位置旋转相机
				cameraP.rotation.y = mouseX * 0.5;
				cameraP.rotation.x = mouseY * 0.5;
			}
			*/
			
			/**
			 * 点击事件处理（示例）
			 * 可实现物体选择、交互等功能
			 */
			/*
			function onClick(event) {
				// 计算鼠标在标准化设备坐标中的位置
				const mouse = new THREE.Vector2();
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
				
				// 创建射线投射器
				const raycaster = new THREE.Raycaster();
				raycaster.setFromCamera(mouse, cameraP);
				
				// 检测与物体的相交
				const intersects = raycaster.intersectObjects(scene.children, true);
				
				if (intersects.length > 0) {
					// 点击到了物体
					const clickedObject = intersects[0].object;
					console.log('点击了物体：', clickedObject);
				}
			}
			*/
			
			/**
			 * 键盘事件处理（示例）
			 * 可实现WASD移动相机等功能
			 */
			/*
			function onKeyDown(event) {
				const moveSpeed = 0.1;
				
				switch(event.key) {
					case 'w': cameraP.position.z -= moveSpeed; break;
					case 's': cameraP.position.z += moveSpeed; break;
					case 'a': cameraP.position.x -= moveSpeed; break;
					case 'd': cameraP.position.x += moveSpeed; break;
					case 'q': cameraP.position.y -= moveSpeed; break;
					case 'e': cameraP.position.y += moveSpeed; break;
				}
			}
			*/

		</script>
	</body>
</html>