<!-- Three.js浮点像素读取应用 - 详细技术分析
📋 项目概述
这是一个基于Three.js的高级WebGL应用，演示了如何实现离屏渲染（Offscreen Rendering） 并读取浮点精度像素数据。应用通过鼠标交互实时显示屏幕上任意位置的高精度颜色值。

🎯 核心功能
1. 双通道渲染系统
第一通道（渲染到纹理）：渲染动态着色器效果和3D几何体到浮点纹理

第二通道（屏幕显示）：将生成的纹理显示到全屏

实时像素读取：鼠标悬停时读取对应位置的浮点像素值

2. 动态视觉效果
UV-based渐变：基于纹理坐标的红色/绿色渐变

时间动画：蓝色通道随时间周期性变化

3D对象旋转：两个圆环绕Y轴持续旋转

3. 交互反馈
实时显示鼠标位置的RGBA浮点值

高精度颜色值展示（32位浮点精度）

🔧 主要技术点
一、渲染管线架构
1. 双场景渲染系统
javascript
// 场景1：渲染到纹理（包含动态效果和3D对象）
sceneRTT = new THREE.Scene();

// 场景2：屏幕显示（仅包含全屏纹理四边形）
sceneScreen = new THREE.Scene();
2. 正交相机配置
javascript
// 使用正交投影，无透视变形
cameraRTT = new THREE.OrthographicCamera(
  -width/2, width/2,    // left, right
  height/2, -height/2,  // top, bottom (Y轴翻转)
  1, 1000               // near, far
);
二、核心Three.js技术
1. 浮点纹理渲染目标
javascript
rtTexture = new THREE.WebGLRenderTarget(
  window.innerWidth, window.innerHeight,
  {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.NearestFilter,
    format: THREE.RGBAFormat,
    type: THREE.FloatType  // 关键：使用浮点数据类型
  }
);
2. 自定义着色器材质
顶点着色器：标准MVP变换，传递UV坐标

片段着色器1：动态生成颜色（RGBA值）

片段着色器2：纹理采样 + 颜色空间转换

3. 多遍渲染控制
javascript
// 第一遍：渲染到纹理
renderer.setRenderTarget(rtTexture);
renderer.render(sceneRTT, cameraRTT);

// 第二遍：渲染到屏幕
renderer.setRenderTarget(null);
renderer.render(sceneScreen, cameraRTT);
三、WebGL高级特性
1. 浮点帧缓冲区
glsl
// 片段着色器输出浮点颜色
gl_FragColor = vec4(r, g, time, 1.0);
// 值可以超过1.0，支持HDR范围
2. 像素数据读取
javascript
// 创建32位浮点数组
const read = new Float32Array(4);

// 从渲染目标读取像素
renderer.readRenderTargetPixels(
  rtTexture,          // 浮点纹理
  x, y,               // 坐标（考虑Y轴翻转）
  1, 1,               // 读取1x1像素
  read                // 存储到Float32Array
);
3. 颜色空间管理
glsl
#include <colorspace_fragment>
// Three.js内置颜色空间转换（线性到sRGB）
四、性能优化技术
1. 渲染状态管理
javascript
renderer.autoClear = false;      // 手动控制清除
materialScreen.depthWrite = false; // 全屏四边形无需深度写入
2. 纹理过滤策略
javascript
{
  minFilter: THREE.LinearFilter,   // 缩小：线性插值（平滑）
  magFilter: THREE.NearestFilter   // 放大：最近邻采样（锐利）
}
3. 动画循环优化
javascript
// 使用setAnimationLoop替代requestAnimationFrame
renderer.setAnimationLoop(animate);
🎨 视觉表现
1. 颜色分布模式
右上区域：红色 + 绿色 = 黄色

左上区域：仅蓝色分量（随时间变化）

右下区域：仅红色分量

左下区域：仅蓝色分量

2. 3D场景元素
大圆环（灰色）：中心位置，1.5倍缩放

小圆环（红色）：上方位置，0.75倍缩放

双光源系统：前向白光 + 后向淡红光

📊 数据流
text
鼠标位置 → 计算纹理坐标 → 渲染到浮点纹理 → 读取像素 → 显示浮点值
    ↓           ↓               ↓              ↓           ↓
客户端坐标   纹理UV坐标    HDR颜色数据    Float32Array    HTML显示
🔍 关键技术挑战与解决方案
挑战1：浮点纹理支持
问题：WebGL 1.0默认不支持浮点纹理

解决方案：使用扩展检测和适当回退策略

本应用：假设浏览器支持OES_texture_float扩展

挑战2：颜色精度保持
问题：常规8位纹理导致精度损失

解决方案：使用FloatType纹理保持32位精度

优势：支持超过1.0的HDR值，适合科学可视化

挑战3：坐标系统转换
问题：WebGL纹理坐标与屏幕坐标差异

解决方案：Y轴翻转和归一化处理

关键代码：windowHalfY - mouseY

🚀 应用场景扩展
这个技术可以扩展应用于：

科学可视化：显示物理模拟的浮点数据

图像处理：高精度颜色分析工具

游戏开发：HDR渲染管线调试

计算机视觉：算法输出值实时检查

教育工具：WebGL渲染原理教学

📈 性能考量
GPU负载因素：
纹理尺寸：全屏浮点纹理（内存占用高）

读取频率：每帧读取像素（潜在性能瓶颈）

着色器复杂度：简单运算，GPU友好

优化建议：
降低读取频率（如每N帧读取一次）

使用更小的渲染目标

实现节流机制减少数据读取

💡 学习价值
这个示例展示了：

现代WebGL渲染管线的设计模式

离屏渲染技术的实际应用

着色器编程的基础到中级概念

Three.js高级API的使用方法

实时交互与数据可视化的结合 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题 - 显示页面主要内容 -->
		<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">
		<!-- 外部样式表链接 - 引入main.css文件进行页面样式控制 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			主要容器div - Three.js渲染器将把WebGL画布插入到这个div中
			id="container": 为这个div元素分配唯一的标识符"container"
			这个div充当Three.js渲染的根容器
		-->
		<div id="container"></div>
		
		<!-- 
			信息显示区域 - 用于显示页面信息和动态数据
			id="info": 为这个div元素分配唯一的标识符"info"
			包含链接和动态更新的像素值显示区域
		-->
		<div id="info">
			<!-- 
				外部链接 - 指向Three.js官方网站
				href="https://threejs.org": 链接目标地址
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全属性，防止新页面访问window.opener
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			<!-- 页面描述文字 - 说明页面功能 -->
			读取线性-sRGB浮点像素数据<br/>
			<!-- 
				动态数值显示区域 - 用于实时显示鼠标位置的像素值
				id="values": 为这个span元素分配唯一的标识符"values"
				JavaScript代码将动态更新这个元素的内容
			-->
			<span id="values"></span>
		</div>

		<!-- 
			屏幕渲染片段着色器脚本块（最终显示用）
			id="fragment_shader_screen": 用于JavaScript中识别和获取着色器代码
			type="x-shader/x-fragment": 自定义MIME类型，表示这是GLSL片段着色器代码
			浏览器不会直接执行这个脚本，而是由Three.js读取并使用
		-->
		<script id="fragment_shader_screen" type="x-shader/x-fragment">
			// varying变量 - 从顶点着色器传递到片段着色器的插值变量
			// vec2 vUv: 二维向量，包含纹理坐标（U和V分量在0.0到1.0之间）
			varying vec2 vUv;
			
			// uniform变量 - 由JavaScript代码设置的全局变量，所有片段共享相同值
			// sampler2D tDiffuse: 2D纹理采样器，用于从纹理中读取颜色数据
			uniform sampler2D tDiffuse;

			// 主函数 - 片段着色器的入口点，每个像素执行一次
			void main() {
				// texture2D函数: 从纹理tDiffuse中采样vUv坐标处的颜色值
				// gl_FragColor: GLSL内置变量，表示最终输出的像素颜色（RGBA）
				gl_FragColor = texture2D( tDiffuse, vUv );
				
				// Three.js预处理器指令 - 包含颜色空间转换代码
				// <colorspace_fragment>: Three.js内置着色器代码块，处理线性空间到sRGB的转换
				#include <colorspace_fragment>
			}
		</script>

		<!-- 
			第一遍渲染片段着色器脚本块（渲染到纹理）
			id="fragment_shader_pass_1": 用于JavaScript中识别和获取着色器代码
			这个着色器用于生成浮点纹理，包含动态变化的颜色值
		-->
		<script id="fragment_shader_pass_1" type="x-shader/x-fragment">
			// varying变量 - 从顶点着色器传递的插值纹理坐标
			varying vec2 vUv;
			
			// uniform变量 - 时间变量，由JavaScript代码控制，实现动态效果
			// float time: 浮点数，随时间变化，用于动画效果
			uniform float time;

			// 主函数 - 计算每个像素的输出颜色
			void main() {
				// 计算红色分量：基于U坐标（水平方向）
				// vUv.x: 纹理坐标的U分量（从左到右：0.0到1.0）
				float r = vUv.x;
				
				// 条件判断：如果V坐标小于0.5（下半部分），将红色分量设为0
				if( vUv.y < 0.5 ) r = 0.0;
				
				// 计算绿色分量：基于V坐标（垂直方向）
				// vUv.y: 纹理坐标的V分量（从下到上：0.0到1.0）
				float g = vUv.y;
				
				// 条件判断：如果U坐标小于0.5（左半部分），将绿色分量设为0
				if( vUv.x < 0.5 ) g = 0.0;
				
				// 构建最终输出颜色向量
				// vec4(r, g, time, 1.0): 
				//   - r: 红色分量（基于U坐标）
				//   - g: 绿色分量（基于V坐标）
				//   - time: 蓝色分量（随时间变化）
				//   - 1.0: Alpha分量（完全不透明）
				// 这种组合产生：右上角为黄色（红+绿），左上角为蓝色，右下角为红色，左下角为蓝色
				gl_FragColor = vec4( r, g, time, 1.0 );
			}
		</script>

		<!-- 
			顶点着色器脚本块（两个渲染通道共用）
			id="vertexShader": 用于JavaScript中识别和获取着色器代码
			type="x-shader/x-vertex": 自定义MIME类型，表示这是GLSL顶点着色器代码
			顶点着色器处理每个顶点的位置和属性
		-->
		<script id="vertexShader" type="x-shader/x-vertex">
			// varying变量 - 声明要传递给片段着色器的变量
			// varying变量会在顶点之间进行插值，每个片段获得不同的值
			varying vec2 vUv;

			// 主函数 - 顶点着色器的入口点，每个顶点执行一次
			void main() {
				// 将模型原始的UV坐标传递给片段着色器
				// uv: Three.js自动传入的顶点属性，包含纹理坐标
				vUv = uv;
				
				// 计算顶点在裁剪空间中的最终位置
				// 这是3D图形编程中的标准变换流程：
				// 1. position: 顶点的原始局部坐标（模型空间）
				// 2. modelViewMatrix: 模型视图矩阵，将顶点从模型空间转换到相机空间
				// 3. projectionMatrix: 投影矩阵，将顶点从相机空间转换到裁剪空间
				// 4. vec4(position, 1.0): 将三维位置转换为齐次坐标（w分量为1.0）
				// 5. gl_Position: GLSL内置变量，存储变换后的顶点位置
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
		</script>

		<!-- 
			导入映射表（Import Map） - 现代浏览器模块导入配置
			type="importmap": 告诉浏览器这是一个导入映射配置
			导入映射允许开发者控制模块标识符到实际URL的映射关系
			这是ES模块系统的功能，用于在浏览器中直接使用import语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块 - 包含所有Three.js应用逻辑
			type="module": 声明这是一个ES6模块，支持import/export语法
			模块会自动延迟执行，在HTML解析完成后才运行
		-->
		<script type="module">
			// 导入Three.js库的所有导出内容到THREE对象
			// THREE对象包含所有Three.js的核心类和方法
			import * as THREE from 'three';

			// 从Three.js附加组件中导入Stats性能监视器
			// Stats是一个小型库，用于显示FPS（帧率）、MS（渲染时间）和MB（内存使用）
			import Stats from 'three/addons/libs/stats.module.js';

			// ==================== 全局变量声明 ====================
			
			// DOM元素引用
			let container;    // 存储id为"container"的div元素引用
			let stats;        // 存储Stats性能监视器实例
			
			// Three.js核心对象
			let cameraRTT;    // 渲染到纹理使用的相机（正交相机）
			let sceneRTT;     // 第一遍渲染的场景（渲染到纹理的场景）
			let sceneScreen;  // 第二遍渲染的场景（屏幕显示的最终场景）
			let renderer;     // WebGL渲染器实例
			let zmesh1;       // 第一个圆环网格（较大，灰色）
			let zmesh2;       // 第二个圆环网格（较小，红色）
			
			// 输入处理变量
			let mouseX = 0;   // 鼠标X坐标（相对于窗口中心）
			let mouseY = 0;   // 鼠标Y坐标（相对于窗口中心）
			
			// 窗口尺寸计算
			const windowHalfX = window.innerWidth / 2;   // 窗口中心X坐标
			const windowHalfY = window.innerHeight / 2;  // 窗口中心Y坐标
			
			// 渲染到纹理相关
			let rtTexture;    // 渲染目标纹理（WebGLRenderTarget）
			let material;     // 第一遍渲染的着色器材质
			let quad;         // 全屏四边形网格引用
			
			// 动画控制
			let delta = 0.01; // 时间变化增量，控制颜色动画速度
			
			// DOM引用
			let valueNode;    // 存储id为"values"的span元素引用，用于显示像素值

			// ==================== 初始化函数调用 ====================
			// 页面加载完成后立即执行初始化
			init();

			// ==================== 初始化函数定义 ====================
			/**
			 * 初始化函数 - 设置Three.js场景的所有组件
			 * 这个函数在页面加载时调用一次，执行所有初始化操作
			 */
			function init() {
				// 获取容器DOM元素 - Three.js渲染器将把canvas元素插入到这里
				container = document.getElementById( 'container' );

				// ==================== 相机设置 ====================
				/**
				 * 创建正交相机用于渲染到纹理
				 * 正交相机没有透视效果（物体不会随着距离变小）
				 * 参数说明:
				 *   left: -窗口宽度/2（左边界）
				 *   right: 窗口宽度/2（右边界）
				 *   top: 窗口高度/2（上边界）
				 *   bottom: -窗口高度/2（下边界）
				 *   near: 1（近裁剪平面）
				 *   far: 1000（远裁剪平面）
				 * 这种设置使相机看到的范围恰好覆盖整个窗口
				 */
				cameraRTT = new THREE.OrthographicCamera( 
					window.innerWidth / - 2,   // left: 左边在屏幕外半个窗口宽度
					window.innerWidth / 2,     // right: 右边在屏幕外半个窗口宽度
					window.innerHeight / 2,    // top: 上边在屏幕外半个窗口高度
					window.innerHeight / - 2,  // bottom: 下边在屏幕外半个窗口高度
					1,                         // near: 近裁剪面距离
					1000                       // far: 远裁剪面距离
				);
				cameraRTT.position.z = 500;  // 将相机沿Z轴向后移动，确保能看到场景中的物体

				// ==================== 场景创建 ====================
				/**
				 * 创建两个场景对象:
				 * 1. sceneRTT: 用于第一遍渲染（渲染到纹理）
				 *    包含动态着色器四边形和两个3D圆环
				 * 2. sceneScreen: 用于第二遍渲染（屏幕显示）
				 *    包含显示纹理的全屏四边形
				 */
				sceneRTT = new THREE.Scene();
				sceneScreen = new THREE.Scene();

				// ==================== 第一遍场景的光照设置 ====================
				/**
				 * 添加第一个定向光（白色，强度3.0）
				 * 定向光模拟无限远处的光源（如太阳）
				 */
				let light = new THREE.DirectionalLight( 0xffffff, 3 );  // 颜色: 白色, 强度: 3.0
				light.position.set( 0, 0, 1 ).normalize();  // 设置光源方向为正Z轴并归一化
				sceneRTT.add( light );  // 将光源添加到第一遍渲染场景

				/**
				 * 添加第二个定向光（淡红色，强度4.5）
				 * 这个光源从相反方向照射，增加场景层次感
				 */
				light = new THREE.DirectionalLight( 0xffd5d5, 4.5 );  // 颜色: 淡红色, 强度: 4.5
				light.position.set( 0, 0, -1 ).normalize();  // 设置光源方向为负Z轴
				sceneRTT.add( light );  // 将光源添加到第一遍渲染场景

				// ==================== 渲染目标纹理创建 ====================
				/**
				 * 创建WebGL渲染目标（浮点纹理）
				 * WebGLRenderTarget是一个离屏渲染缓冲区，可以渲染到纹理中
				 * 参数说明:
				 *   width: window.innerWidth - 纹理宽度等于窗口宽度
				 *   height: window.innerHeight - 纹理高度等于窗口高度
				 *   options: 纹理配置对象
				 *     minFilter: THREE.LinearFilter - 缩小过滤（纹理缩小显示时使用线性插值）
				 *     magFilter: THREE.NearestFilter - 放大过滤（纹理放大显示时使用最近邻采样）
				 *     format: THREE.RGBAFormat - 纹理格式为RGBA（红绿蓝透明度四个通道）
				 *     type: THREE.FloatType - 纹理数据类型为浮点数（支持高精度颜色值存储）
				 */
				rtTexture = new THREE.WebGLRenderTarget( 
					window.innerWidth,   // 纹理宽度
					window.innerHeight,  // 纹理高度
					{ 
						minFilter: THREE.LinearFilter,   // 缩小过滤方式：线性插值
						magFilter: THREE.NearestFilter,  // 放大过滤方式：最近邻采样（保持像素锐利）
						format: THREE.RGBAFormat,        // 格式：RGBA四通道
						type: THREE.FloatType            // 类型：浮点数（32位浮点精度）
					} 
				);

				// ==================== 材质创建 ====================
				/**
				 * 创建第一个着色器材质（用于第一遍渲染到纹理）
				 * ShaderMaterial允许完全自定义顶点和片段着色器
				 * 这个材质产生动态的渐变颜色效果
				 */
				material = new THREE.ShaderMaterial( {
					// uniforms: 着色器全局变量，可以从JavaScript中设置
					uniforms: { 
						'time': { value: 0.0 }  // 时间变量，用于动画效果，初始值为0.0
					},
					// vertexShader: 顶点着色器代码（从HTML中的script标签获取）
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					// fragmentShader: 片段着色器代码（从HTML中的script标签获取）
					fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent
				} );

				/**
				 * 创建第二个着色器材质（用于第二遍屏幕显示）
				 * 这个材质将渲染目标纹理显示到屏幕上
				 */
				const materialScreen = new THREE.ShaderMaterial( {
					uniforms: { 
						// tDiffuse: 纹理采样器，绑定到之前创建的渲染目标纹理
						'tDiffuse': { value: rtTexture.texture }
					},
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
					// depthWrite: false - 禁用深度写入（因为全屏四边形不需要深度测试）
					depthWrite: false  // 性能优化：避免不必要的深度缓冲区写入
				} );

				// ==================== 几何体创建 ====================
				/**
				 * 创建平面几何体（用于全屏四边形）
				 * 参数说明:
				 *   width: window.innerWidth - 平面宽度等于窗口宽度
				 *   height: window.innerHeight - 平面高度等于窗口高度
				 * 这个平面将覆盖整个屏幕
				 */
				const plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );

				// ==================== 网格创建和添加 ====================
				/**
				 * 创建第一个四边形网格（第一遍渲染使用）
				 * 使用动态着色器材质，渲染到纹理
				 */
				quad = new THREE.Mesh( plane, material );  // 使用平面几何体和动态材质
				quad.position.z = - 100;  // 沿Z轴向后移动，避免与相机太近
				sceneRTT.add( quad );     // 添加到第一遍渲染场景

				/**
				 * 创建圆环几何体（3D圆环）
				 * 参数说明:
				 *   radius: 100 - 圆环主半径（中心到圆管中心的距离）
				 *   tube: 25 - 圆管半径（圆环截面的半径）
				 *   radialSegments: 15 - 径向分段数（围绕圆环的分段数）
				 *   tubularSegments: 30 - 管状分段数（圆管周围的分段数）
				 */
				const geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );

				/**
				 * 创建两种Phong材质（用于3D圆环）
				 * MeshPhongMaterial支持镜面高光和多种光照效果
				 */
				const mat1 = new THREE.MeshPhongMaterial( { 
					color: 0x9c9c9c,      // 主颜色：灰色 (#9c9c9c)
					specular: 0xffaa00,   // 镜面反射颜色：橙色 (#ffaa00)
					shininess: 5          // 光泽度：控制高光大小（值越小高光越大）
				} );
				const mat2 = new THREE.MeshPhongMaterial( { 
					color: 0x9c0000,      // 主颜色：深红色 (#9c0000)
					specular: 0xff2200,   // 镜面反射颜色：亮红色 (#ff2200)
					shininess: 5          // 光泽度：控制高光大小
				} );

				/**
				 * 创建第一个圆环网格（较大，灰色）
				 */
				zmesh1 = new THREE.Mesh( geometry, mat1 );  // 使用圆环几何体和灰色材质
				zmesh1.position.set( 0, 0, 100 );  // 位置：屏幕中心，Z轴向前100单位
				zmesh1.scale.set( 1.5, 1.5, 1.5 ); // 缩放：放大1.5倍
				sceneRTT.add( zmesh1 );            // 添加到第一遍渲染场景

				/**
				 * 创建第二个圆环网格（较小，红色）
				 */
				zmesh2 = new THREE.Mesh( geometry, mat2 );  // 使用圆环几何体和红色材质
				zmesh2.position.set( 0, 150, 100 );  // 位置：Y轴向上150单位，Z轴向前100单位
				zmesh2.scale.set( 0.75, 0.75, 0.75 ); // 缩放：缩小到0.75倍
				sceneRTT.add( zmesh2 );               // 添加到第一遍渲染场景

				/**
				 * 创建第二个四边形网格（第二遍渲染使用）
				 * 使用纹理显示材质，渲染到屏幕
				 */
				quad = new THREE.Mesh( plane, materialScreen );  // 使用平面几何体和纹理材质
				quad.position.z = - 100;  // 沿Z轴向后移动，避免与相机太近
				sceneScreen.add( quad );  // 添加到第二遍渲染场景

				// ==================== 渲染器设置 ====================
				/**
				 * 创建WebGL渲染器
				 * WebGLRenderer是Three.js的核心，负责所有WebGL渲染
				 */
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比 - 适配高DPI屏幕（如Retina显示器）
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸 - 使其填充整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数 - 替换传统的requestAnimationFrame
				renderer.setAnimationLoop( animate );
				
				// 禁用自动清除 - 手动控制渲染清除，实现多遍渲染
				renderer.autoClear = false;

				// 将渲染器的canvas元素添加到容器div中
				container.appendChild( renderer.domElement );

				// ==================== 性能监视器设置 ====================
				/**
				 * 创建Stats性能监视器
				 * Stats显示FPS（帧率）、MS（每帧渲染时间）和MB（内存使用）
				 */
				stats = new Stats();
				container.appendChild( stats.dom );  // 将Stats的DOM元素添加到容器

				// ==================== DOM元素引用获取 ====================
				/**
				 * 获取像素值显示区域的span元素
				 * 这个元素将用于实时显示鼠标位置的像素值
				 */
				valueNode = document.getElementById( 'values' );

				// ==================== 事件监听器设置 ====================
				/**
				 * 添加鼠标移动事件监听器
				 * 监听整个文档的鼠标移动事件
				 */
				document.addEventListener( 'mousemove', onDocumentMouseMove );
			}

			// ==================== 事件处理函数 ====================
			/**
			 * 鼠标移动事件处理函数
			 * 每次鼠标移动时调用，更新鼠标位置变量
			 * @param {MouseEvent} event - 鼠标事件对象，包含鼠标位置等信息
			 */
			function onDocumentMouseMove( event ) {
				/**
				 * 计算鼠标相对于窗口中心的位置
				 * event.clientX: 鼠标相对于浏览器窗口左上角的X坐标
				 * event.clientY: 鼠标相对于浏览器窗口左上角的Y坐标
				 * windowHalfX: 窗口宽度的一半（中心点X坐标）
				 * windowHalfY: 窗口高度的一半（中心点Y坐标）
				 * 
				 * 计算结果:
				 *   mouseX: 正数表示鼠标在中心右侧，负数表示在左侧
				 *   mouseY: 正数表示鼠标在中心下方，负数表示在上方
				 */
				mouseX = ( event.clientX - windowHalfX );
				mouseY = ( event.clientY - windowHalfY );
			}

			// ==================== 动画循环函数 ====================
			/**
			 * 动画循环函数 - 每帧调用一次
			 * 这个函数由renderer.setAnimationLoop()自动调用
			 * 帧率通常为60fps（每秒60次）
			 */
			function animate() {
				render();        // 执行渲染逻辑
				stats.update();  // 更新性能监视器显示
			}

			// ==================== 渲染函数 ====================
			/**
			 * 渲染函数 - 执行所有渲染操作
			 * 包括：更新动画状态、渲染到纹理、渲染到屏幕、读取像素值
			 */
			function render() {
				/**
				 * 计算基于时间的时间值
				 * Date.now(): 返回自1970年1月1日以来的毫秒数
				 * * 0.0015: 将毫秒转换为秒，并乘以系数控制动画速度
				 * 结果用于控制圆环旋转和颜色动画
				 */
				const time = Date.now() * 0.0015;

				// ==================== 更新3D对象状态 ====================
				/**
				 * 更新两个圆环的旋转状态
				 * 如果圆环对象已创建，则每帧更新它们的旋转角度
				 */
				if ( zmesh1 && zmesh2 ) {
					// 第一个圆环：随时间反向旋转
					zmesh1.rotation.y = - time;
					
					// 第二个圆环：随时间反向旋转，但偏移90度（π/2弧度）
					zmesh2.rotation.y = - time + Math.PI / 2;
				}

				// ==================== 更新时间uniform ====================
				/**
				 * 控制时间uniform的循环变化
				 * 当time值超过1.0或小于0.0时，反转变化方向
				 * 实现time在0.0到1.0之间的往复循环
				 */
				if ( material.uniforms[ 'time' ].value > 1 || material.uniforms[ 'time' ].value < 0 ) {
					delta *= - 1;  // 反转delta的符号（正变负或负变正）
				}
				
				// 更新着色器材质的时间uniform
				// 每帧增加delta，使time值线性变化
				material.uniforms[ 'time' ].value += delta;

				// ==================== 清除渲染器 ====================
				/**
				 * 清除渲染器的颜色、深度和模板缓冲区
				 * 由于autoClear设置为false，需要手动清除
				 */
				renderer.clear();

				// ==================== 第一步：渲染到纹理 ====================
				/**
				 * 设置当前渲染目标为纹理（离屏渲染）
				 * 之后的所有渲染操作都会绘制到rtTexture纹理中
				 */
				renderer.setRenderTarget( rtTexture );
				
				/**
				 * 清除渲染目标
				 * 确保纹理缓冲区是干净的，没有上一帧的残留
				 */
				renderer.clear();
				
				/**
				 * 渲染第一遍场景到纹理
				 * 参数:
				 *   sceneRTT: 第一遍渲染场景（包含动态四边形和圆环）
				 *   cameraRTT: 正交相机
				 * 结果保存到rtTexture纹理中
				 */
				renderer.render( sceneRTT, cameraRTT );

				// ==================== 第二步：渲染到屏幕 ====================
				/**
				 * 设置当前渲染目标为null（默认帧缓冲区，即屏幕）
				 * 之后的所有渲染操作都会直接绘制到屏幕上
				 */
				renderer.setRenderTarget( null );
				
				/**
				 * 渲染第二遍场景到屏幕
				 * 参数:
				 *   sceneScreen: 第二遍渲染场景（包含显示纹理的全屏四边形）
				 *   cameraRTT: 使用相同的正交相机
				 * 将纹理显示到整个屏幕
				 */
				renderer.render( sceneScreen, cameraRTT );

				// ==================== 读取像素值 ====================
				/**
				 * 创建Float32Array数组用于存储读取的像素值
				 * Float32Array: 32位浮点数数组，与纹理的FloatType匹配
				 * 4个元素分别对应RGBA四个通道的值
				 */
				const read = new Float32Array( 4 );  // [R, G, B, A]
				
				/**
				 * 读取渲染目标纹理中指定位置的像素值
				 * 方法参数说明:
				 *   rtTexture: 要读取的渲染目标纹理
				 *   windowHalfX + mouseX: 要读取的像素X坐标（窗口中心 + 鼠标偏移）
				 *   windowHalfY - mouseY: 要读取的像素Y坐标（窗口中心 - 鼠标偏移）
				 *                         Y坐标需要翻转，因为WebGL坐标系原点在左下角
				 *   1, 1: 读取区域的宽度和高度（1像素 × 1像素）
				 *   read: 存储读取结果的数组
				 * 
				 * 注意：由于渲染目标使用浮点纹理，读取的值是浮点数（0.0到1.0或更高）
				 */
				renderer.readRenderTargetPixels( 
					rtTexture,                  // 要读取的渲染目标
					windowHalfX + mouseX,       // 鼠标位置的X坐标（相对于纹理左上角）
					windowHalfY - mouseY,       // 鼠标位置的Y坐标（翻转，因为纹理坐标原点在左下角）
					1,                          // 读取区域的宽度（1像素）
					1,                          // 读取区域的高度（1像素）
					read                        // 存储读取结果的Float32Array
				);

				// ==================== 更新页面显示 ====================
				/**
				 * 在页面上显示读取的像素值
				 * 更新id为"values"的span元素的内容
				 * read[0]: 红色通道值
				 * read[1]: 绿色通道值
				 * read[2]: 蓝色通道值
				 * read[3]: Alpha通道值（未显示）
				 * 
				 * 注意：这些值是浮点数，可能超过1.0（高动态范围）
				 */
				valueNode.innerHTML = 
					'红色通道: ' + read[ 0 ].toFixed(4) + '<br/>' + 
					'绿色通道: ' + read[ 1 ].toFixed(4) + '<br/>' + 
					'蓝色通道: ' + read[ 2 ].toFixed(4);
			}
		</script>
	</body>
</html>