<!-- Three.js 深度纹理可视化示例 - 功能描述与技术要点
一、核心功能描述
1. 深度纹理可视化
这是一个展示WebGL深度纹理技术的交互式3D示例。程序将3D场景的深度信息（每个像素距离相机的远近）渲染到特殊的深度纹理中，然后通过后处理着色器将这些深度值转换为灰度图像进行可视化展示。

2. 主要流程
text
┌─────────────────────────────────────────────────────┐
│                   完整渲染流程                        │
├─────────────────────────────────────────────────────┤
│ 1. 渲染主3D场景到离屏渲染目标（Framebuffer）         │
│    ├── 颜色信息 → 颜色纹理                           │
│    └── 深度信息 → 深度纹理                           │
│                                                    │
│ 2. 执行后处理                                        │
│    ├── 创建全屏四边形                                │
│    ├── 使用自定义着色器处理纹理                      │
│    └── 将深度值转换为灰度颜色                        │
│                                                    │
│ 3. 显示到屏幕                                        │
│    └── 近处为白色，远处为黑色                        │
└─────────────────────────────────────────────────────┘
3. 交互功能
相机控制：用户可通过鼠标拖拽旋转视角、滚轮缩放

实时参数调整：通过右侧控制面板调整深度纹理格式、数据类型和抗锯齿等级

自适应窗口：响应浏览器窗口大小变化，自动调整渲染尺寸

二、主要技术要点
1. 深度纹理技术 (Depth Textures)
深度值存储与转换
glsl
// 核心深度转换算法
float readDepth(sampler2D depthSampler, vec2 coord) {
    // 从纹理读取标准化深度值 (0.0-1.0)
    float fragCoordZ = texture2D(depthSampler, coord).x;
    
    // 非线性→线性深度转换（逆投影变换）
    // 视图空间Z = (near * far) / ((far - near) * depth - far)
    float viewZ = (cameraNear * cameraFar) / ((cameraFar - cameraNear) * fragCoordZ - cameraFar);
    
    // 转换为0-1范围线性深度
    return (viewZ + cameraNear) / (cameraNear - cameraFar);
}
深度纹理配置
javascript
// 支持多种深度纹理格式
DepthFormat        // 仅存储深度信息
DepthStencilFormat // 深度+模板信息（用于高级效果）

// 支持多种数据类型
UnsignedShortType  // 16位整数 (0-65535)
UnsignedIntType    // 32位整数 (0-4.29亿)
FloatType          // 32位浮点数（最高精度）
2. 离屏渲染与后处理 (Offscreen Rendering & Post-Processing)
双通道渲染架构
javascript
// 第一通道：场景渲染到渲染目标
renderer.setRenderTarget(target);      // 切换到离屏目标
renderer.render(scene, camera);        // 渲染场景（生成深度纹理）

// 第二通道：后处理渲染到屏幕
renderer.setRenderTarget(null);        // 切换回屏幕
postMaterial.uniforms.tDepth.value = target.depthTexture; // 传递深度纹理
renderer.render(postScene, postCamera); // 执行后处理
全屏后处理四边形
几何体：2x2的平面，覆盖整个屏幕空间

相机：正交相机（无透视变形）

着色器：自定义GLSL着色器处理深度纹理

3. 实例化渲染优化 (Instanced Rendering)
高性能多对象渲染
javascript
// 创建50个相同几何体的实例
const mesh = new THREE.InstancedMesh(geometry, material, 50);

// 为每个实例设置独立变换矩阵
for (let i = 0; i < 50; i++) {
    dummy.position.set(randomX, randomY, randomZ);
    dummy.rotation.set(randomRotX, randomRotY, randomRotZ);
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix); // 只存储变换矩阵，不创建独立对象
}
优势：

单个Draw Call绘制所有实例

仅上传一次几何体数据到GPU

每个实例只需4x4变换矩阵（64字节）

4. WebGL资源管理
渲染目标生命周期管理
javascript
function setupRenderTarget() {
    if (target) target.dispose(); // 释放旧资源（避免内存泄漏）
    
    target = new THREE.WebGLRenderTarget(width, height);
    target.depthTexture = new THREE.DepthTexture();
    target.depthTexture.format = format;
    target.depthTexture.type = type;
}
抗锯齿配置
javascript
// 多重采样抗锯齿 (MSAA)
target.samples = 0;  // 0=禁用，4/8/16=不同质量等级
// 注意：深度纹理的MSAA支持因浏览器/GPU而异
5. 数学原理与坐标变换
深度变换数学
text
深度渲染管线：
1. 视图空间 (线性) → 裁剪空间 (非线性)
   z_clip = (A*z_view + B) / -z_view
   (A = far+near, B = far*near)

2. 裁剪空间 → 标准化设备坐标 (NDC)
   z_ndc = z_clip / w_clip

3. NDC → 窗口坐标 (深度纹理)
   z_window = (z_ndc + 1.0) / 2.0

反向计算（着色器中）：
已知z_window，求z_view（线性深度）
6. 用户界面与交互
参数化GUI控制
javascript
const gui = new GUI({ width: 300 });
gui.add(params, 'format', formats).name('纹理格式').onChange(setupRenderTarget);
gui.add(params, 'type', types).name('数据类型').onChange(setupRenderTarget);
gui.add(params, 'samples', 0, 16, 1).name('MSAA样本数').onChange(setupRenderTarget);
响应式设计
javascript
function onWindowResize() {
    // 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // 更新渲染目标尺寸（考虑设备像素比）
    const dpr = renderer.getPixelRatio();
    target.setSize(window.innerWidth * dpr, window.innerHeight * dpr);
    
    // 更新渲染器显示尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
}
三、技术应用场景
1. 学习与教育
理解深度缓冲区和深度测试机制

学习WebGL离屏渲染技术

掌握后处理着色器编程

2. 实际应用基础
景深效果：基于深度信息的模糊处理

雾气模拟：深度决定雾气浓度

边缘检测：深度不连续性识别

碰撞检测：深度信息用于拾取和碰撞

阴影映射：深度纹理用于阴影计算

3. 性能优化参考
实例化渲染的最佳实践

WebGL资源管理策略

多层次抗锯齿配置

四、核心代码模块关系
text
┌─────────────────────────────────────────────────────────┐
│                    Three.js深度纹理示例                  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌────────────┐    ┌────────────┐    ┌────────────┐    │
│  │  主渲染循环  │    │  离屏渲染   │    │  后处理渲染  │    │
│  │  animate() │───▶│   render() │───▶│   render() │    │
│  └────────────┘    └────────────┘    └────────────┘    │
│         │                    │                │         │
│  ┌──────▼──────┐    ┌───────▼──────┐  ┌──────▼──────┐  │
│  │  场景管理    │    │ 渲染目标管理 │  │ 着色器管理   │  │
│  │ setupScene()│    │setupRender-  │  │ setupPost() │  │
│  │             │    │  Target()    │  │             │  │
│  └─────────────┘    └──────────────┘  └─────────────┘  │
│         │                    │                │         │
│  ┌──────▼──────┐    ┌───────▼──────┐  ┌──────▼──────┐  │
│  │实例化网格    │    │ 深度纹理创建 │  │ GLSL着色器  │  │
│  │InstancedMesh│    │ DepthTexture │  │ 深度可视化  │  │
│  └─────────────┘    └──────────────┘  └─────────────┘  │
│                                                         │
└─────────────────────────────────────────────────────────┘ -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js贴花喷涂效果演示 -->
		<title>three.js WebGL - 深度纹理可视化示例</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">

		<!-- 
			视口设置：控制移动设备上的显示方式
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放
			minimum-scale=1.0: 最小缩放比例为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">
		<style>
			#error {
				margin: auto;
				margin-top: 40px;
				display: block;
				max-width: 400px;
				padding: 20px;
				background: #CE0808;
			}
		</style>

		<!-- ========== 后处理顶点着色器 ========== -->
		<!-- 作用：处理全屏四边形的顶点变换，主要传递UV坐标 -->
		<script id="post-vert" type="x-shader/x-vertex">
			// varying关键字声明的变量会在顶点着色器和片段着色器之间传递
			varying vec2 vUv; // 声明一个二维向量变量，用于从顶点着色器向片段着色器传递UV纹理坐标
			
			// 主函数：每个顶点执行一次
			void main() {
				// uv是three.js内置属性，表示顶点的纹理坐标(范围0.0-1.0)
				vUv = uv; // 将顶点的UV坐标赋值给vUv，传递给片段着色器使用
				
				// 计算顶点的最终裁剪空间位置（标准化设备坐标，范围-1.0到1.0）
				// projectionMatrix: 相机的投影矩阵，将3D坐标投影到2D屏幕
				// modelViewMatrix: 模型视图矩阵，组合了模型变换和视图变换
				// position: 顶点在模型空间中的原始位置
				// vec4(position, 1.0): 将三维位置转换为四维齐次坐标（w=1.0表示点）
				gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
				
				// gl_Position是WebGL内置变量，表示顶点在裁剪空间中的位置
				// 片段着色器将根据这些顶点的位置进行插值计算
			}
		</script>
		
		<!-- ========== 后处理片段着色器 ========== -->
		<!-- 作用：可视化深度纹理，将深度值转换为灰度颜色 -->
		<script id="post-frag" type="x-shader/x-fragment">
			// 从顶点着色器接收插值后的UV坐标
			varying vec2 vUv;
			
			// uniform变量：由JavaScript代码设置，在整个绘制调用中保持不变
			uniform sampler2D tDiffuse;  // 颜色纹理采样器（本例中未实际使用，保留供扩展）
			uniform sampler2D tDepth;    // 深度纹理采样器，存储了场景的深度信息
			uniform float cameraNear;    // 相机近裁剪面距离（通常为0.1或0.01）
			uniform float cameraFar;     // 相机远裁剪面距离（通常为100或1000）
			
			/**
			 * 深度值转换函数：将深度纹理中的标准化深度值转换为线性深度值
			 * 深度纹理存储的是非线性深度值（透视除法后的Z值），需要转换为线性深度用于可视化
			 * 
			 * 深度值在WebGL中的存储过程：
			 * 1. 视图空间Z值（线性） -> 裁剪空间Z值（非线性）
			 * 2. 标准化设备坐标Z值（-1到1） -> 窗口坐标Z值（0到1）
			 * 3. 深度纹理存储的就是这个0-1范围的窗口坐标Z值
			 * 
			 * 此函数的作用是逆向这个过程，将纹理中的值还原为视图空间中的线性深度
			 * 
			 * @param depthSampler 深度纹理采样器对象
			 * @param coord 纹理坐标（0.0-1.0范围）
			 * @return 返回0-1范围的线性深度值，0表示近平面，1表示远平面
			 */
			float readDepth( sampler2D depthSampler, vec2 coord ) {
				// 步骤1：从深度纹理中读取原始深度值
				// texture2D()函数采样纹理，返回RGBA颜色值
				// 深度纹理通常只使用R通道存储深度值，所以使用.x获取红色分量
				// fragCoordZ的范围是0.0-1.0，表示标准化设备坐标中的深度
				float fragCoordZ = texture2D( depthSampler, coord ).x;
				
				// 步骤2：将标准化设备坐标深度转换为视图空间深度（非线性到线性转换）
				// 这个公式是透视投影矩阵的逆变换
				// 视图空间Z值 = (near * far) / ((far - near) * depth - far)
				// 推导过程：
				// 1. 透视投影将视图空间Z映射到裁剪空间Z：z_clip = (A * z_view + B) / -z_view
				// 2. 其中A = far + near, B = far * near
				// 3. 标准化设备坐标z_ndc = z_clip / w_clip
				// 4. 窗口坐标z_window = (z_ndc + 1.0) / 2.0
				// 5. 深度纹理存储的就是z_window
				// 这里我们反向计算：已知z_window，求z_view
				float viewZ = ( cameraNear * cameraFar ) / ( ( cameraFar - cameraNear ) * fragCoordZ - cameraFar );
				
				// 步骤3：将视图空间深度转换为0-1范围的线性深度值
				// 公式：(viewZ + near) / (near - far)
				// 由于near - far是负数，所以这个公式实际上将：
				// -near处（最近）映射到0
				// -far处（最远）映射到1
				return ( viewZ + cameraNear ) / ( cameraNear - cameraFar );
			}

			/**
			 * 片段着色器主函数：每个像素执行一次
			 * 负责计算并输出每个像素的最终颜色
			 */
			void main() {
				// 注释掉的代码：读取颜色纹理（如果启用颜色可视化）
				// vec3 diffuse = texture2D( tDiffuse, vUv ).rgb;
				
				// 步骤1：调用readDepth函数获取当前像素的线性深度值
				// vUv是当前片段的纹理坐标，由顶点着色器传递并经过插值
				float depth = readDepth( tDepth, vUv );
				
				// 步骤2：将深度值转换为可视化颜色
				// 深度值范围：0.0（近处）到1.0（远处）
				// 1.0 - vec3(depth): 将深度值反转，使得：
				// - 近处物体显示为白色（深度值小，1.0-depth接近1.0）
				// - 远处物体显示为黑色（深度值大，1.0-depth接近0.0）
				// vec3(depth): 将浮点数深度值转换为三维向量(R,G,B相同值，产生灰度)
				gl_FragColor.rgb = 1.0 - vec3( depth );
				
				// 步骤3：设置完全不透明的Alpha通道
				// Alpha=1.0表示完全不透明，0.0表示完全透明
				gl_FragColor.a = 1.0;
				
				// gl_FragColor是WebGL内置变量，表示该片段的最终输出颜色
				// 这个颜色将被写入颜色缓冲区，最终显示在屏幕上
			}
		</script>

	</head>
	<body>
		<!-- ========== 页面信息展示区域 ========== -->
		<div id="info">
			<!-- 主标题 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL - 深度纹理可视化示例<br/>
			
			<!-- 示例描述 -->
			本示例展示了如何使用深度纹理技术。深度纹理是一种特殊的纹理，它存储了场景中每个像素的深度（距离相机的远近）信息，
			而不是颜色信息。通过将深度信息存储到纹理中，我们可以进行后处理效果，如景深、雾气、边缘检测等。<br/>
			
			<!-- 技术说明 -->
			<strong>工作原理：</strong><br/>
			1. 首先将3D场景渲染到一个离屏渲染目标（Framebuffer）<br/>
			2. 这个渲染目标附加了一个深度纹理，用于存储深度信息<br/>
			3. 然后进行第二次渲染（后处理），使用自定义着色器读取深度纹理<br/>
			4. 在片段着色器中将深度值转换为灰度颜色进行可视化<br/>
			
			<!-- 作者信息 -->
			示例由 <a href="http://twitter.com/mattdesl" target="_blank" rel="noopener">@mattdesl</a> 创建，
			由中文社区添加详细注释。<br/>
			
			<!-- 操作提示 -->
			<strong>操作说明：</strong><br/>
			- 鼠标拖拽：旋转相机视角<br/>
			- 鼠标滚轮：缩放视图<br/>
			- 右侧控制面板：调整深度纹理参数<br/>

			<!-- ========== WebGL兼容性检查区域 ========== -->
			<!-- 如果浏览器不支持WEBGL_depth_texture扩展，则显示此错误信息 -->
			<div id="error" style="display: none;">
				<strong>浏览器兼容性警告</strong><br/><br/>
				您的浏览器不支持 <strong>WEBGL_depth_texture</strong> 扩展。<br/>
				深度纹理是现代WebGL的高级特性，需要浏览器和显卡支持。<br/><br/>
				<strong>可能的原因：</strong><br/>
				1. 浏览器版本过旧（请更新到最新版本）<br/>
				2. 显卡不支持WebGL 2.0或相关扩展<br/>
				3. 浏览器中WebGL被禁用<br/><br/>
				由于缺乏支持，本示例将无法正常运行。<br/>
				建议使用最新版本的Chrome、Firefox或Edge浏览器。
			</div>
		</div>

		<!-- ========== 模块导入映射配置 ========== -->
		<!-- importmap是现代的JavaScript模块导入方式，允许我们定义模块的别名 -->
		<!-- 这类似于传统HTML中的<script src="...">，但更现代和灵活 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- ========== 主JavaScript模块 ========== -->
		<!-- type="module"表示这是一个ES6模块，支持现代JavaScript特性 -->
		<script type="module">
			// ========== 模块导入部分 ==========
			// 使用ES6模块语法导入所需的库和组件
			
			// 导入three.js核心库的所有功能
			// THREE对象将包含所有three.js的核心类和方法
			import * as THREE from 'three';

			// 导入性能统计模块
			// Stats.js用于显示帧率、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入GUI（图形用户界面）库
			// lil-gui是一个轻量级的GUI库，用于创建控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入轨道控制器
			// OrbitControls允许用户用鼠标控制相机旋转、平移和缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ========== 全局变量声明 ==========
			// 声明将在多个函数中使用的变量
			
			// 主场景相关变量
			let camera;      // 透视相机，用于3D场景的观察
			let scene;       // 主场景，包含所有3D对象
			let renderer;    // WebGL渲染器，负责将3D场景绘制到canvas
			let controls;    // 轨道控制器，提供用户交互
			let stats;       // 性能统计器
			
			// 渲染目标相关
			let target;      // 离屏渲染目标（Framebuffer），包含颜色和深度纹理
			
			// 后处理相关变量
			let postScene;   // 后处理场景，只包含一个全屏四边形
			let postCamera;  // 后处理相机，正交相机用于2D渲染
			let postMaterial;// 后处理材质，使用自定义着色器

			// ========== GUI参数配置对象 ==========
			// 这些参数将通过GUI面板暴露给用户调整
			const params = {
				// 深度纹理格式：决定深度信息的存储方式
				// DepthFormat: 仅存储深度信息
				// DepthStencilFormat: 存储深度+模板信息（用于遮罩等效果）
				format: THREE.DepthFormat,
				
				// 深度纹理数据类型：决定深度值的精度和范围
				// UnsignedShortType: 16位无符号整数（0-65535，精度一般）
				// UnsignedIntType: 32位无符号整数（0-4294967295，高精度）
				// FloatType: 32位浮点数（最高精度，支持较大范围）
				type: THREE.UnsignedShortType,
				
				// 多重采样抗锯齿（MSAA）样本数
				// 0表示禁用抗锯齿，较高的值提供更好的边缘平滑但性能开销更大
				// 注意：WebGL2+支持，某些格式可能不支持多重采样
				samples: 0,
			};

			// 深度纹理格式选项映射
			// 用于GUI下拉菜单显示友好的名称
			const formats = { 
				DepthFormat: THREE.DepthFormat,
				DepthStencilFormat: THREE.DepthStencilFormat
			};
			
			// 深度纹理数据类型选项映射
			const types = { 
				UnsignedShortType: THREE.UnsignedShortType,
				UnsignedIntType: THREE.UnsignedIntType,
				FloatType: THREE.FloatType
			};

			// ========== 初始化函数调用 ==========
			// 页面加载完成后开始初始化three.js应用
			init();

			/**
			 * 初始化函数 - 整个应用的入口点
			 * 负责创建和设置所有Three.js核心组件
			 * 调用顺序：渲染器 -> 相机 -> 控制器 -> 场景 -> 后处理
			 */
			function init() {
				// ========== 创建WebGL渲染器 ==========
				// WebGLRenderer是three.js与WebGL API交互的主要接口
				renderer = new THREE.WebGLRenderer({
					// 可以在这里添加渲染器配置选项，例如：
					// antialias: true, // 抗锯齿（但我们会用MSAA）
					// alpha: true,     // 启用透明背景
					// preserveDrawingBuffer: true // 保留绘图缓冲区
				});
				
				// 设置设备像素比，确保在高DPI屏幕（如Retina）上清晰显示
				// devicePixelRatio表示物理像素与CSS像素的比率
				// 设置为1.0可以提升性能，设置为设备值可以获得更清晰的图像
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了旧的requestAnimationFrame方式
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement是一个<canvas>元素
				document.body.appendChild(renderer.domElement);

				// ========== 初始化性能统计器 ==========
				// Stats.js会显示三个指标：
				// FPS: 帧率（绿色越好，黄色警告，红色卡顿）
				// MS: 每帧耗时（毫秒）
				// MB: 内存使用（如果启用）
				stats = new Stats();
				// 将统计器的DOM元素添加到页面，默认显示在左上角
				document.body.appendChild(stats.dom);

				// ========== 创建透视相机 ==========
				// PerspectiveCamera模拟人眼的视角，具有近大远小的透视效果
				camera = new THREE.PerspectiveCamera(
					70,                              // 视野角度（Field of View）
					window.innerWidth / window.innerHeight, // 宽高比
					0.01,                            // 近裁剪面距离（Near Clip Plane）
					50                               // 远裁剪面距离（Far Clip Plane）
				);
				// 设置相机初始位置
				// 在Three.js中，Z轴指向屏幕外，所以正Z值将相机向后移动
				camera.position.z = 4;

				// ========== 创建轨道控制器 ==========
				// OrbitControls将相机控制与鼠标/触摸事件绑定
				controls = new OrbitControls(camera, renderer.domElement);
				// 启用阻尼效果：相机移动会有惯性，慢慢停止，提供更自然的交互体验
				controls.enableDamping = true;
				// 其他可配置选项：
				// controls.enableZoom = true;      // 启用缩放
				// controls.enablePan = true;       // 启用平移
				// controls.enableRotate = true;    // 启用旋转
				// controls.minDistance = 1;        // 最小缩放距离
				// controls.maxDistance = 100;      // 最大缩放距离

				// ========== 初始化渲染目标（含深度纹理） ==========
				// 创建离屏渲染目标，用于第一遍渲染
				setupRenderTarget();

				// ========== 设置主3D场景 ==========
				// 创建包含多个3D对象的场景
				setupScene();

				// ========== 设置后处理阶段 ==========
				// 创建全屏四边形和着色器材质，用于深度纹理可视化
				setupPost();

				// ========== 初始窗口大小调整 ==========
				// 确保渲染器、相机和渲染目标的尺寸与窗口匹配
				onWindowResize();
				
				// ========== 添加窗口大小变化监听器 ==========
				// 当用户调整浏览器窗口大小时，重新调整渲染尺寸
				window.addEventListener('resize', onWindowResize);

				// ========== 创建GUI控制面板 ==========
				// lil-gui创建一个可折叠的控制面板，用户可调整参数
				const gui = new GUI({ 
					width: 300,      // 面板宽度
					title: '深度纹理参数', // 面板标题
					// 其他选项：autoPlace: false（手动指定位置）
				});
				
				// 添加深度纹理格式控制下拉菜单
				// 当用户更改选项时，重新创建渲染目标
				gui.add(params, 'format', formats)
				   .name('纹理格式')  // 显示名称
				   .onChange(setupRenderTarget); // 变更回调
				
				// 添加深度纹理数据类型控制下拉菜单
				gui.add(params, 'type', types)
				   .name('数据类型')
				   .onChange(setupRenderTarget);
				
				// 添加多重采样抗锯齿滑块控制
				gui.add(params, 'samples', 0, 16, 1)
				   .name('MSAA样本数')
				   .onChange(setupRenderTarget);
				
				// 默认展开GUI面板
				gui.open();
				
				// 可添加更多控制项，例如：
				// gui.addColor(params, 'color').name('背景颜色');
				// gui.add(params, 'rotationSpeed', 0, 0.1).name('旋转速度');
			}

			/**
			 * 设置渲染目标函数
			 * 创建或重新创建离屏渲染目标，并附加深度纹理
			 * 当GUI参数改变时会被调用
			 */
			function setupRenderTarget() {
				// ========== 清理旧渲染目标 ==========
				// 如果已存在渲染目标，需要先释放WebGL资源
				// 避免内存泄漏，特别是在频繁更改参数时
				if (target) {
					target.dispose(); // 释放纹理、帧缓冲区等资源
					// dispose()是Three.js的资源清理方法，对于不再使用的资源必须调用
				}

				// ========== 解析当前参数 ==========
				// 从params对象获取用户选择的参数值
				// parseInt将字符串转换为整数（GUI返回的是字符串）
				const format = parseInt(params.format);
				const type = parseInt(params.type);
				const samples = parseInt(params.samples);

				// ========== 获取设备像素比 ==========
				// 设备像素比（Device Pixel Ratio, DPR）
				// 例如：普通屏幕DPR=1，Retina屏幕DPR=2
				// 乘以DPR可以确保在高DPI屏幕上渲染足够清晰的图像
				const dpr = renderer.getPixelRatio();
				
				// ========== 创建新的WebGL渲染目标 ==========
				// WebGLRenderTarget是一个离屏帧缓冲区
				// 可以将场景渲染到这里而不是直接渲染到屏幕
				target = new THREE.WebGLRenderTarget(
					window.innerWidth * dpr,   // 宽度（像素）
					window.innerHeight * dpr,  // 高度（像素）
					{
						// 可以在这里添加更多配置选项：
						// minFilter: THREE.LinearFilter, // 纹理缩小过滤器
						// magFilter: THREE.LinearFilter, // 纹理放大过滤器
						// wrapS: THREE.ClampToEdgeWrapping, // 水平包裹方式
						// wrapT: THREE.ClampToEdgeWrapping, // 垂直包裹方式
						// format: THREE.RGBAFormat, // 颜色纹理格式
						// type: THREE.UnsignedByteType, // 颜色纹理数据类型
					}
				);
				
				// ========== 配置渲染目标的纹理属性 ==========
				// target.texture是渲染目标的颜色附件（颜色纹理）
				
				// 设置纹理缩小过滤器（当纹理被缩小时使用的过滤方式）
				// NearestFilter: 最近邻过滤，性能好但会有锯齿
				// LinearFilter: 线性过滤，效果平滑但性能稍差
				// 对于深度纹理可视化，通常使用NearestFilter保持深度值的准确性
				target.texture.minFilter = THREE.NearestFilter;
				
				// 设置纹理放大过滤器（当纹理被放大时使用的过滤方式）
				target.texture.magFilter = THREE.NearestFilter;
				
				// 是否生成Mipmap（多级渐远纹理）
				// Mipmap是一系列逐渐缩小的纹理副本，用于优化远距离纹理显示
				// 深度纹理通常不需要Mipmap，因为深度值不应该被模糊
				target.texture.generateMipmaps = false;
				
				// ========== 配置模板缓冲区 ==========
				// 模板缓冲区用于高级渲染效果（如遮罩、轮廓等）
				// 只有选择DepthStencilFormat时才启用模板缓冲区
				target.stencilBuffer = (format === THREE.DepthStencilFormat) ? true : false;
				
				// ========== 配置多重采样抗锯齿 ==========
				// 多重采样抗锯齿（MSAA）在渲染目标级别提供抗锯齿
				// 值越高，边缘越平滑，但性能开销越大
				// 0表示禁用抗锯齿
				// 注意：某些WebGL实现可能不支持深度纹理的多重采样
				target.samples = samples;

				// ========== 创建并附加深度纹理 ==========
				// DepthTexture是特殊的纹理类型，用于存储深度信息
				target.depthTexture = new THREE.DepthTexture(
					// 可以传递宽度和高度，但通常让Three.js自动匹配渲染目标尺寸
					// target.width, target.height,
					// format, type
				);
				
				// 设置深度纹理的格式
				// 格式决定了深度信息的存储方式：
				// THREE.DepthFormat: 仅深度信息
				// THREE.DepthStencilFormat: 深度+模板信息
				target.depthTexture.format = format;
				
				// 设置深度纹理的数据类型
				// 数据类型决定了深度值的精度和范围：
				// THREE.UnsignedShortType: 16位，深度范围0-65535
				// THREE.UnsignedIntType: 32位，深度范围0-4294967295
				// THREE.FloatType: 32位浮点，支持更大的动态范围
				target.depthTexture.type = type;
				
				// 深度纹理的其他可配置属性：
				// target.depthTexture.minFilter = THREE.NearestFilter;
				// target.depthTexture.magFilter = THREE.NearestFilter;
				
				// ========== 调试信息输出（可选） ==========
				// 在控制台输出当前渲染目标配置，便于调试
				console.log('渲染目标已创建:', {
					width: target.width,
					height: target.height,
					format: format === THREE.DepthFormat ? 'DepthFormat' : 'DepthStencilFormat',
					type: type === THREE.UnsignedShortType ? 'UnsignedShortType' : 
						  type === THREE.UnsignedIntType ? 'UnsignedIntType' : 'FloatType',
					samples: samples,
					hasStencil: target.stencilBuffer
				});
			}

			/**
			 * 设置后处理阶段函数
			 * 创建一个全屏四边形和着色器材质，用于深度纹理可视化
			 * 后处理是一种常用的图形学技术，将渲染结果作为纹理输入进行二次处理
			 */
			function setupPost() {
				// ========== 创建后处理相机 ==========
				// OrthographicCamera正交相机，没有透视效果，所有物体尺寸相同
				// 参数：left, right, top, bottom, near, far
				// 设置为-1到1的范围，正好覆盖整个屏幕空间
				postCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
				// 正交相机常用于：UI渲染、后处理、2D游戏等
				
				// ========== 创建后处理着色器材质 ==========
				// ShaderMaterial允许我们编写自定义的GLSL着色器
				postMaterial = new THREE.ShaderMaterial({
					// 顶点着色器：处理顶点位置和传递数据
					// 从HTML中获取我们之前定义的顶点着色器代码
					vertexShader: document.querySelector('#post-vert').textContent.trim(),
					
					// 片段着色器：处理每个像素的颜色
					// 从HTML中获取我们之前定义的片段着色器代码
					fragmentShader: document.querySelector('#post-frag').textContent.trim(),
					
					// uniform变量：从JavaScript传递到着色器的常量数据
					// 在着色器执行过程中，uniform的值保持不变
					uniforms: {
						// 相机近平面距离，用于深度值转换计算
						cameraNear: { 
							value: camera.near, // 初始值从主相机获取
							// 类型推断：THREE.Uniform类会自动处理
						},
						
						// 相机远平面距离，用于深度值转换计算
						cameraFar: { 
							value: camera.far,
						},
						
						// 颜色纹理（渲染目标的颜色附件）
						// 本例中未使用，但保留以供扩展（如同时显示颜色和深度）
						tDiffuse: { 
							value: null, // 将在动画循环中动态设置
							// 类型：THREE.TextureUniform
						},
						
						// 深度纹理（渲染目标的深度附件）
						tDepth: { 
							value: null, // 将在动画循环中动态设置
						}
					},
					
					// 其他材质选项（可根据需要添加）：
					// depthTest: false,     // 禁用深度测试（后处理通常需要）
					// depthWrite: false,    // 禁用深度写入
					// transparent: true,    // 启用透明度
				});
				
				// ========== 创建全屏四边形几何体 ==========
				// PlaneGeometry创建一个平面几何体
				// 参数：width, height, widthSegments, heightSegments
				// 设置为2x2，配合正交相机-1到1的范围，正好覆盖整个屏幕
				const postPlane = new THREE.PlaneGeometry(2, 2);
				// 为什么是2而不是1？因为正交相机范围是-1到1，总跨度是2
				
				// ========== 创建后处理网格 ==========
				// Mesh将几何体与材质结合，创建可渲染的对象
				const postQuad = new THREE.Mesh(postPlane, postMaterial);
				// 注意：不需要设置位置，因为几何体中心在(0,0)，相机在(0,0,0.5)
				// 正交投影会将这个四边形正好投影到整个屏幕
				
				// ========== 创建后处理场景 ==========
				// 后处理场景只包含一个对象：全屏四边形
				postScene = new THREE.Scene();
				postScene.add(postQuad);
				// 场景可以设置背景色、雾效等，但后处理场景通常不需要
				
				// ========== 调试信息（可选） ==========
				console.log('后处理阶段已设置:', {
					cameraType: 'OrthographicCamera',
					materialType: 'ShaderMaterial',
					uniforms: Object.keys(postMaterial.uniforms)
				});
			}

			/**
			 * 设置主3D场景函数
			 * 创建多个3D对象并添加到场景中
			 * 使用实例化渲染提高性能
			 */
			function setupScene() {
				// ========== 创建主场景 ==========
				// Scene是所有3D对象的容器，包含要渲染的所有对象
				scene = new THREE.Scene();
				// 可以设置场景属性：
				// scene.background = new THREE.Color(0x000000); // 背景色
				// scene.fog = new THREE.Fog(0x000000, 1, 100);   // 雾效

				// ========== 创建几何体 ==========
				// TorusKnotGeometry创建圆环结几何体
				// 参数：radius, tube, tubularSegments, radialSegments, p, q
				// radius: 主要半径，控制结的大小
				// tube: 管道半径，控制结的粗细
				// tubularSegments: 管道分段数，影响圆滑度
				// radialSegments: 径向分段数，影响圆滑度
				// p, q: 控制结的缠绕参数，产生不同的结型
				const geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 64);
				// 高分段数产生平滑的曲面，但会增加顶点数量
				// 对于实例化渲染，几何体复杂一些是可以接受的，因为只上传一次
				
				// ========== 创建材质 ==========
				// MeshBasicMaterial是最简单的材质，不受光照影响
				// 适合用于不需要光照的场景，或后处理中的颜色信息
				const material = new THREE.MeshBasicMaterial({ 
					color: 'blue', // 颜色可以是CSS颜色字符串或十六进制
					// 其他选项：
					// wireframe: true, // 线框模式，查看几何体结构
					// transparent: true, // 透明度
					// opacity: 0.5,     // 不透明度
				});

				// ========== 实例化渲染配置 ==========
				// 实例化渲染允许一次性渲染多个相同的几何体，性能极高
				// 每个实例可以有不同的变换矩阵（位置、旋转、缩放）
				const count = 50;    // 实例数量
				const scale = 5;     // 分布范围半径
				
				// 创建实例化网格
				// InstancedMesh参数：几何体、材质、实例数量
				const mesh = new THREE.InstancedMesh(geometry, material, count);
				
				// 创建临时对象用于计算变换矩阵
				// 我们不会将这个对象添加到场景，只用于计算
				const dummy = new THREE.Object3D();

				// ========== 随机生成实例位置和旋转 ==========
				// 在球体表面随机分布实例，创建有趣的3D结构
				for (let i = 0; i < count; i++) {
					// 生成随机球面坐标
					const r = Math.random() * 2.0 * Math.PI; // 随机方位角（0-2π）
					const z = (Math.random() * 2.0) - 1.0;   // 随机Z坐标（-1到1）
					
					// 计算XY平面的缩放因子
					// 使用球面坐标公式：x² + y² + z² = r²
					// 为了在球面上均匀分布，需要根据z值调整XY平面的半径
					const zScale = Math.sqrt(1.0 - z * z) * scale;
					
					// 设置临时对象的位置
					// 球面坐标转直角坐标公式：
					// x = cos(方位角) * XY半径
					// y = sin(方位角) * XY半径
					// z = z * 总半径
					dummy.position.set(
						Math.cos(r) * zScale,  // X坐标
						Math.sin(r) * zScale,  // Y坐标
						z * scale              // Z坐标
					);
					
					// 设置随机旋转
					// rotation属性使用欧拉角（x, y, z），单位是弧度
					dummy.rotation.set(
						Math.random(),  // 绕X轴旋转
						Math.random(),  // 绕Y轴旋转  
						Math.random()   // 绕Z轴旋转
					);
					
					// 可选的：设置随机缩放
					// const s = 0.5 + Math.random() * 0.5;
					// dummy.scale.set(s, s, s);
					
					// 更新变换矩阵
					// 将位置、旋转、缩放组合成一个4x4变换矩阵
					dummy.updateMatrix();
					
					// 将变换矩阵设置到实例化网格的指定实例
					mesh.setMatrixAt(i, dummy.matrix);
					
					// 可选的：设置每个实例的颜色
					// const color = new THREE.Color(Math.random(), Math.random(), Math.random());
					// mesh.setColorAt(i, color);
				}
				
				// 如果设置了实例颜色，需要更新颜色属性
				// if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
				
				// 标记实例矩阵需要更新
				mesh.instanceMatrix.needsUpdate = true;

				// ========== 将实例化网格添加到场景 ==========
				scene.add(mesh);
				
				// ========== 添加辅助对象（可选，用于调试） ==========
				// 坐标轴辅助：红色=X，绿色=Y，蓝色=Z
				// const axesHelper = new THREE.AxesHelper(5);
				// scene.add(axesHelper);
				
				// 网格辅助：显示网格平面
				// const gridHelper = new THREE.GridHelper(10, 10);
				// scene.add(gridHelper);
				
				// ========== 调试信息（可选） ==========
				console.log('主场景已设置:', {
					geometry: geometry.type,
					vertexCount: geometry.attributes.position.count,
					instanceCount: count,
					material: material.type
				});
			}

			/**
			 * 窗口大小变化处理函数
			 * 响应浏览器窗口大小变化，调整渲染器、相机和渲染目标
			 */
			function onWindowResize() {
				// ========== 更新相机宽高比 ==========
				// 宽高比 = 窗口宽度 / 窗口高度
				// 如果宽高比不正确，物体会被拉伸变形
				const aspect = window.innerWidth / window.innerHeight;
				camera.aspect = aspect; // 更新相机宽高比
				camera.updateProjectionMatrix(); // 必须调用以应用更改
				// updateProjectionMatrix重新计算投影矩阵，影响3D到2D的投影
				
				// ========== 更新渲染目标尺寸 ==========
				// 渲染目标需要与窗口保持相同比例，否则后处理会被拉伸
				const dpr = renderer.getPixelRatio();
				
				// 重新设置渲染目标尺寸
				// 注意：尺寸需要考虑设备像素比
				if (target) {
					target.setSize(
						window.innerWidth * dpr,   // 新宽度
						window.innerHeight * dpr   // 新高度
					);
					// setSize会自动调整深度纹理的尺寸以匹配
				}
				
				// ========== 更新渲染器尺寸 ==========
				// 设置渲染器canvas元素的实际显示尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 注意：这里的尺寸是CSS像素，renderer内部会根据dpr处理实际像素
				
				// ========== 可选：更新后处理相机 ==========
				// 如果后处理相机需要与窗口关联，可以在这里更新
				// 但我们的正交相机使用固定范围(-1,1)，所以不需要更新
				
				// ========== 调试信息（可选） ==========
				console.log('窗口大小已调整:', {
					width: window.innerWidth,
					height: window.innerHeight,
					aspectRatio: aspect.toFixed(3),
					dpr: dpr,
					renderTargetSize: target ? `${target.width}x${target.height}` : 'N/A'
				});
			}

			/**
			 * 动画循环函数
			 * 每一帧都会被调用，执行渲染逻辑
			 * 这是整个应用的核心循环
			 */
			function animate() {
				// ========== 第一步：渲染主场景到渲染目标 ==========
				// 设置当前渲染目标为离屏渲染目标
				// 之后的所有渲染操作都将绘制到这个目标，而不是屏幕
				renderer.setRenderTarget(target);
				
				// 清除渲染目标的颜色和深度缓冲区
				// 这是可选的，因为Three.js默认会清除
				// renderer.clear(true, true, true);
				
				// 渲染主场景到渲染目标
				// 这会执行以下操作：
				// 1. 遍历场景中的所有对象
				// 2. 对每个对象执行顶点着色器和片段着色器
				// 3. 将颜色写入颜色纹理，深度写入深度纹理
				renderer.render(scene, camera);
				
				// 此时，渲染目标的颜色纹理包含场景颜色，深度纹理包含场景深度

				// ========== 第二步：执行后处理渲染 ==========
				// 更新后处理材质的uniform变量
				// 将渲染目标的纹理传递给着色器
				postMaterial.uniforms.tDiffuse.value = target.texture;  // 颜色纹理
				postMaterial.uniforms.tDepth.value = target.depthTexture; // 深度纹理
				// 注意：相机near/far已经在初始化时设置，通常不需要每帧更新
				
				// 切换回默认渲染目标（屏幕）
				// null表示默认帧缓冲区，即屏幕
				renderer.setRenderTarget(null);
				
				// 清除屏幕的颜色和深度缓冲区
				// 避免上一帧的内容影响当前帧
				// renderer.clear();
				
				// 渲染后处理场景到屏幕
				// 这会使用我们的自定义着色器，将深度纹理可视化为灰度图像
				renderer.render(postScene, postCamera);
				
				// ========== 第三步：更新交互控制器 ==========
				// 如果启用了阻尼效果，需要每帧更新控制器
				// 阻尼效果会使相机运动逐渐减慢，需要持续更新
				if (controls && controls.enableDamping) {
					controls.update();
				}
				
				// ========== 第四步：更新性能统计 ==========
				// 更新Stats.js显示的帧率等信息
				stats.update();
				
				// ========== 可选：添加动画效果 ==========
				// 如果需要让场景中的物体动起来，可以在这里添加代码
				// 例如：
				// scene.rotation.y += 0.001; // 缓慢旋转整个场景
				// 或者更新特定对象的属性
				
				// ========== 调试信息（可选，每帧调用需谨慎） ==========
				// 可以使用requestAnimationFrame的timestamp参数
				// 但注意不要在每帧都console.log，会严重影响性能
				// if (frameCount % 60 === 0) { // 每秒一次
				//   console.log('帧率:', 1000 / stats.dom.children[0].innerText);
				// }
			}
			
			// ========== 可选：添加WebGL支持检测 ==========
			// 检查浏览器是否支持所需WebGL扩展
			function checkWebGLSupport() {
				// 创建临时canvas检查扩展支持
				const canvas = document.createElement('canvas');
				const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
				
				if (!gl) {
					// 完全不支持WebGL
					document.getElementById('error').style.display = 'block';
					document.getElementById('error').innerHTML = 
						'<strong>错误：浏览器不支持WebGL</strong><br>' +
						'请使用支持WebGL的浏览器，如Chrome、Firefox、Edge等。';
					return false;
				}
				
				// 检查深度纹理扩展
				const depthTextureExt = gl.getExtension('WEBGL_depth_texture');
				if (!depthTextureExt) {
					// 不支持深度纹理
					document.getElementById('error').style.display = 'block';
					return false;
				}
				
				return true;
			}
			
			// 在初始化开始时检查WebGL支持
			// if (!checkWebGLSupport()) {
			//   // 如果不支持，停止初始化
			//   return;
			// }
			
		</script>
	</body>
</html>