<!-- Three.js RGB半色调后期处理效果 - 功能和技术详解
🎯 项目概述
这是一个基于Three.js的交互式3D可视化应用，展示RGB半色调后期处理效果。项目模拟了传统印刷中的分色网点技术，通过WebGL实时渲染将3D场景转换为具有艺术感的半色调图像。

✨ 核心功能
1. 3D场景构建
创建包含50个随机分布彩色立方体的三维场景

添加地面平面和点光源，形成完整的光照环境

所有立方体使用自定义着色器材质，基于法线和UV坐标生成动态颜色

2. 交互控制系统
相机控制：支持鼠标拖拽旋转、滚轮缩放、右键平移

实时参数调整：通过右侧控制面板调整13种半色调效果参数

响应式设计：自动适应不同屏幕尺寸和设备像素比

3. 半色调后期处理
将3D场景渲染为RGB分色网点效果

每个颜色通道（红、绿、蓝）可独立控制：

网点旋转角度（防止莫尔条纹）

网点形状（圆点、椭圆、线条、方形）

网点大小和排列密度

4. 实时预览与调试
屏幕左上角显示性能监控（FPS、渲染时间）

一键切换效果启用/禁用，便于对比

支持灰度模式和多种混合模式

🛠️ 主要技术点
1. Three.js核心框架
javascript
// 三大核心组件
- Scene（场景）：3D对象的容器
- Camera（相机）：控制观察视角（透视投影）
- Renderer（渲染器）：WebGL渲染到Canvas
2. 后期处理管线
javascript
EffectComposer（效果合成器）
├── RenderPass（渲染通道）：原始场景渲染
└── HalftonePass（半色调通道）：RGB网点效果
多通道渲染：场景先渲染到纹理，再应用后期效果

自定义ShaderPass：HalftonePass使用GLSL着色器实现

3. 自定义着色器编程
顶点着色器：

glsl
// 传递UV坐标和法线到片元着色器
varying vec2 vUV;
varying vec3 vNormal;
片元着色器：

glsl
// 基于法线和UV生成颜色
vec4 c = vec4(abs(vNormal) + vec3(vUV, 0.0), 0.0);
4. GLSL半色调算法
glsl
// 核心原理：将像素颜色分解为RGB通道
// 每个通道应用不同的网点矩阵
float halftone = step(distance, radius);
// 通过旋转角度实现CMYK式分色效果
5. 模块化架构
javascript
// ES6模块导入
import * as THREE from 'three';
import { EffectComposer } from 'postprocessing';
// Import Maps配置模块路径
6. 性能优化技术
时钟同步动画：THREE.Clock实现帧率无关的平滑动画

统一变换：使用Group批量管理50个立方体

设备像素比适配：setPixelRatio()保证高DPI屏幕清晰度

7. 用户交互系统
javascript
// 轨道控制器
OrbitControls(camera, renderer.domElement);

// GUI参数绑定
gui.add(controller, 'radius', 1, 25)
   .onChange(updateUniforms);

// 事件委托模式：GUI改变 → Uniform更新 → 重新渲染
8. 响应式设计
javascript
window.onresize = function() {
    renderer.setSize(width, height);
    composer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};
🔧 技术架构图
text
用户交互层
    ├── 鼠标/触摸控制 (OrbitControls)
    └── GUI参数面板 (lil-gui)

应用逻辑层
    ├── 场景管理 (Scene/Group)
    ├── 动画循环 (Clock/AnimationLoop)
    └── 事件处理 (Resize/GUI Change)

渲染管线层
    ├── 几何体渲染 (Mesh/Geometry)
    ├── 材质系统 (ShaderMaterial)
    └── 后期处理 (EffectComposer/Passes)

底层渲染层
    ├── WebGL上下文
    ├── GLSL着色器编译
    └── 图形硬件加速
🎨 视觉效果特点
1. 半色调效果参数
参数	范围	功能描述
网点形状	1-4	圆点/椭圆/线条/方形
网点半径	1-25px	控制网点大小
旋转角度	0-90°	各颜色通道旋转角度
散射程度	0-1	网点排列随机性
混合模式	5种	颜色混合算法
2. 颜色分离技术
红色通道：默认15°旋转

绿色通道：默认45°旋转

蓝色通道：默认30°旋转

角度差异：避免各通道网点重叠产生视觉干扰

📊 性能特性
1. 监控指标
FPS（帧率）：实时显示渲染性能

MS（毫秒）：每帧渲染时间

MB（内存）：显存使用情况（可选）

2. 优化策略
实例化渲染：50个立方体共享相同材质

批次处理：Group统一变换减少计算量

智能更新：仅在参数改变时更新uniforms

🚀 扩展可能性
1. 效果增强
添加更多后期效果（辉光、景深、运动模糊）

支持更多网点形状和排列模式

添加动画效果（旋转、脉动网点）

2. 交互增强
支持触摸设备手势控制

添加预设效果快捷切换

实现效果参数动画录制

3. 性能优化
WebGL 2.0特性支持

离屏渲染预处理

动态细节层次（LOD）

💡 教育价值
这个项目是学习以下技术的绝佳示例：

Three.js基础：场景、相机、渲染器、几何体、材质

WebGL着色器：GLSL语言、顶点/片元着色器

后期处理：多通道渲染、图像处理算法

交互设计：GUI控制、参数绑定、实时反馈

性能优化：动画循环、资源管理、监控调试

📁 文件结构说明
text
项目根目录/
├── index.html          # 主HTML文件（本文件）
├── main.css           # 样式文件
├── build/             # Three.js构建文件
│   └── three.module.js
└── jsm/               # Three.js附加组件
    ├── controls/
    ├── postprocessing/
    └── libs/ -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面元信息配置：
			- 标题：显示在浏览器标签页上
			- 字符集：使用UTF-8支持中文字符
			- 视口设置：控制移动设备上的显示缩放
		-->
		<title>Three.js WebGL - RGB半色调后期处理效果</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			引入CSS样式文件：
			- 用于页面的基本样式设置，如字体、颜色、布局等
			- 文件路径为"main.css"
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			信息展示区域：
			- 显示项目使用的技术框架和作者信息
			- 包含两个链接：Three.js官网和作者GitHub主页
			- 使用中文描述，便于国内用户理解
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> - RGB半色调后期处理效果 作者：
			<a href="https://github.com/meatbags" target="_blank">Xavier Burrow</a>，由Three.js社区提供支持
			<br>
			<small>提示：使用鼠标拖动旋转视角，滚动滚轮缩放，右侧面板可调整效果参数</small>
		</div>

		<!-- 
			Import Maps配置：
			- 现代JavaScript模块导入映射配置
			- 将模块名映射到实际文件路径
			- 便于在代码中使用简洁的import语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			- type="module" 表示这是一个ES6模块
			- 模块化编程，支持import/export语法
			- 避免全局变量污染，提高代码可维护性
		-->
		<script type="module">

			// ========== 第一部分：导入依赖模块 ==========
			
			// 导入Three.js核心库的所有功能
			// Three.js是一个基于WebGL的3D图形库，提供创建和显示三维图形的能力
			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';
			
			// 导入后期处理相关模块：
			// EffectComposer - 效果合成器，管理多个后期处理效果的顺序和执行
			// RenderPass - 渲染通道，将3D场景渲染到纹理中
			// HalftonePass - 半色调效果通道，实现RGB分色网点效果
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';

			// ========== 第二部分：全局变量声明 ==========
			
			// 核心Three.js对象
			let renderer, clock, camera, stats;  // 渲染器、时钟、相机、性能监控器
			
			// 动画参数
			const rotationSpeed = Math.PI / 64;  // 物体组旋转速度，约2.8度/秒
			
			// 场景和效果对象
			let composer, group;  // 后期处理合成器、场景中物体的容器组

			// ========== 第三部分：初始化函数 ==========
			
			// 程序入口：调用初始化函数
			init();

			/**
			 * 初始化函数 - 整个应用程序的启动点
			 * 功能：创建和配置所有必要的Three.js对象和组件
			 * 包括：渲染器、场景、相机、光源、几何体、材质、后期处理效果、GUI控制等
			 * 此函数只执行一次，在页面加载时调用
			 */
			function init() {

				// ----- 3.1 创建和配置WebGL渲染器 -----
				// 渲染器负责将3D场景绘制到HTML Canvas元素上
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比例
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				// 使3D场景填满整个视口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// requestAnimationFrame的替代方案，Three.js推荐的动画循环方式
				renderer.setAnimationLoop( animate );

				// ----- 3.2 创建时钟对象 -----
				// Three.Clock用于精确的时间测量和动画控制
				// 可以获取自创建以来的总时间和帧与帧之间的时间差
				clock = new THREE.Clock();

				// ----- 3.3 创建透视相机 -----
				// 参数说明：
				// 1. 视野角度(FOV): 75度，角度越大看到的范围越广
				// 2. 宽高比: 窗口宽度除以高度，保持正确的比例
				// 3. 近裁剪面: 1，距离相机小于1的物体不会被渲染
				// 4. 远裁剪面: 1000，距离相机大于1000的物体不会被渲染
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
				
				// 设置相机位置：沿Z轴正方向移动12个单位
				// 在Three.js中，默认相机看向Z轴负方向，场景中心在(0,0,0)
				camera.position.z = 12;

				// ----- 3.4 创建性能监控器 -----
				// Stats对象会在屏幕左上角显示一个性能监控面板
				// 包括：FPS（帧率）、MS（每帧渲染时间）、MB（内存使用）等指标
				stats = new Stats();

				// ----- 3.5 将Three.js元素添加到DOM -----
				// 将渲染器的Canvas元素添加到页面body中
				// 这是实际显示3D图形的区域
				document.body.appendChild( renderer.domElement );
				
				// 将性能监控器的DOM元素添加到页面
				// 默认位置在左上角，可以通过CSS调整位置
				document.body.appendChild( stats.dom );

				// ----- 3.6 创建相机控制器 -----
				// OrbitControls提供直观的相机控制：
				// - 鼠标左键拖动：旋转视角
				// - 鼠标右键拖动：平移视角
				// - 鼠标滚轮：缩放视角
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置控制器的目标点，即相机围绕旋转的中心点
				controls.target.set( 0, 0, 0 );
				
				// 更新控制器内部状态，必须在修改参数后调用
				controls.update();

				// ----- 3.7 创建3D场景 -----
				// Scene是Three.js中所有3D对象的容器
				// 相当于一个虚拟的3D世界，包含所有物体、光源、相机等
				const scene = new THREE.Scene();
				
				// 设置场景背景颜色为深灰色（十六进制颜色代码）
				// 0x444444 表示 RGB 颜色 #444444
				scene.background = new THREE.Color( 0x444444 );

				// ----- 3.8 创建物体组和基本场景元素 -----
				
				// Group是一个特殊的Object3D，可以包含多个子对象
				// 用于将相关物体组织在一起，便于统一操作（如旋转、移动）
				group = new THREE.Group();
				
				// 创建地面：一个巨大的扁平盒子作为场景的地面
				// BoxGeometry参数：宽度(x), 高度(y), 深度(z)
				// 这里创建一个100x1x100的盒子，看起来像一个平面
				const floor = new THREE.Mesh( 
					new THREE.BoxGeometry( 100, 1, 100 ),  // 几何体定义形状
					new THREE.MeshPhongMaterial( {} )       // 材质定义外观（Phong着色模型）
				);
				
				// 将地面向下移动10个单位，使其位于场景下方
				floor.position.y = -10;
				
				// 创建点光源：向所有方向均匀发射光线的光源
				// 参数：光源颜色(白色)，光照强度(250)
				const light = new THREE.PointLight( 0xffffff, 250 );
				
				// 设置光源位置：在地面上方2个单位
				light.position.y = 2;
				
				// 将地面和光源添加到物体组
				// Group.add()可以一次添加多个对象
				group.add( floor, light );
				
				// 将物体组添加到场景中
				scene.add( group );

				// ----- 3.9 创建自定义着色器材质 -----
				/**
				 * ShaderMaterial允许使用自定义的GLSL着色器程序
				 * 与内置材质相比，提供完全的控制权和灵活性
				 * 这个材质基于顶点法线和UV坐标生成颜色
				 */
				const mat = new THREE.ShaderMaterial( {
					// uniforms：着色器的全局变量，可以从JavaScript中设置
					// 这里没有定义uniforms，表示所有计算都在着色器内部完成
					uniforms: {},
					
					/**
					 * 顶点着色器 (Vertex Shader):
					 * - 在每个顶点上执行
					 * - 主要任务：将3D顶点坐标转换为2D屏幕坐标
					 * - 可以修改顶点位置、计算并传递数据到片元着色器
					 */
					vertexShader: [
						// varying变量：在顶点着色器和片元着色器之间传递数据
						'varying vec2 vUV;',        // 传递纹理坐标(UV)
						'varying vec3 vNormal;',    // 传递顶点法线向量
						
						'void main() {',
						// 将顶点的UV坐标赋值给varying变量，传递给片元着色器
						'vUV = uv;',
						
						// 将顶点的法线向量赋值给varying变量
						// 注意：法线需要转换为视图空间或直接使用模型空间的法线
						'vNormal = vec3( normal );',
						
						// 计算顶点在屏幕上的最终位置：
						// 1. position: 顶点的本地坐标
						// 2. modelViewMatrix: 模型视图矩阵（模型变换+视图变换）
						// 3. projectionMatrix: 投影矩阵（透视/正交投影）
						// 这个公式是3D图形学中的标准顶点变换流程
						'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
						'}'
					].join( '\n' ),  // 将数组连接成一个字符串，用换行符分隔

					/**
					 * 片元着色器 (Fragment Shader):
					 * - 在每个像素上执行
					 * - 主要任务：计算像素的最终颜色
					 * - 可以接收从顶点着色器传递来的数据
					 */
					fragmentShader: [
						// 声明接收从顶点着色器传递来的数据
						'varying vec2 vUV;',      // 插值后的UV坐标
						'varying vec3 vNormal;',  // 插值后的法线向量
						
						'void main() {',
						// 计算颜色：基于法线的绝对值和UV坐标
						// - abs(vNormal): 取法线各分量的绝对值，确保颜色为正
						// - vec3(vUV, 0.0): 将2D UV坐标扩展为3D向量，Z分量为0
						// - 将两者相加得到RGB颜色
						// - 第四个分量是alpha通道，设为0.0（但实际为1.0，因为最终会标准化）
						'vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );',
						
						// 设置当前像素的最终颜色
						// gl_FragColor是GLSL的内置变量，表示片元的输出颜色
						'gl_FragColor = c;',
						'}'
					].join( '\n' )
				} );

				// ----- 3.10 创建多个随机分布的立方体 -----
				/**
				 * 使用循环创建50个立方体，丰富场景内容
				 * 每个立方体使用上面定义的自定义着色器材质
				 */
				for ( let i = 0; i < 50; ++ i ) {
					// 创建立方体网格对象
					// Mesh是Three.js中可渲染对象的基本单位，包含几何体和材质
					const mesh = new THREE.Mesh( 
						new THREE.BoxGeometry( 2, 2, 2 ),  // 2x2x2的立方体几何体
						mat  // 使用自定义着色器材质
					);
					
					// 设置随机位置：
					// Math.random() * 16 - 8 生成 -8 到 8 之间的随机数
					// 这样立方体会分散在16x16x16的立方体空间内
					mesh.position.set( 
						Math.random() * 16 - 8,  // X轴位置
						Math.random() * 16 - 8,  // Y轴位置
						Math.random() * 16 - 8   // Z轴位置
					);
					
					// 设置随机旋转：
					// Math.random() * Math.PI * 2 生成 0 到 2π 之间的随机数
					// 这样每个立方体都有随机的朝向
					mesh.rotation.set( 
						Math.random() * Math.PI * 2,  // 绕X轴旋转
						Math.random() * Math.PI * 2,  // 绕Y轴旋转
						Math.random() * Math.PI * 2   // 绕Z轴旋转
					);
					
					// 将立方体添加到物体组中
					// 后续可以通过操作group来统一控制所有立方体
					group.add( mesh );
				}

				// ========== 第四部分：后期处理效果设置 ==========
				
				/**
				 * 后期处理(Post-processing):
				 * - 在场景渲染完成后，对渲染结果进行额外的图像处理
				 * - 可以实现各种特殊效果：模糊、发光、颜色调整、半色调等
				 * - Three.js使用EffectComposer来管理多个后期处理效果
				 */

				// ----- 4.1 创建效果合成器 -----
				// EffectComposer是后期处理的核心，管理多个渲染通道(pass)
				composer = new EffectComposer( renderer );
				
				// ----- 4.2 创建渲染通道 -----
				// RenderPass是第一个通道，负责将3D场景渲染到纹理中
				// 后续的通道会基于这个纹理进行处理
				const renderPass = new RenderPass( scene, camera );
				
				// ----- 4.3 配置半色调效果参数 -----
				/**
				 * RGB半色调效果参数说明：
				 * - 模拟传统印刷中的分色网点效果
				 * - 将图像分解为CMYK四色（这里简化为RGB三色）的网点
				 * - 每个颜色通道的网点可以有不同角度，避免莫尔条纹
				 */
				const params = {
					shape: 1,                 // 网点形状：1=圆点, 2=椭圆, 3=线, 4=方形
					radius: 4,                // 网点半径（像素）
					rotateR: Math.PI / 12,    // 红色通道网点旋转角度：15度
					rotateB: Math.PI / 12 * 2, // 蓝色通道网点旋转角度：30度
					rotateG: Math.PI / 12 * 3, // 绿色通道网点旋转角度：45度
					scatter: 0,               // 网点散射程度：0=整齐排列, 1=完全随机
					blending: 1,              // 混合程度：0=无效果, 1=完全效果
					blendingMode: 1,          // 混合模式：1=线性, 2=相乘, 3=相加, 4=变亮, 5=变暗
					greyscale: false,         // 是否转换为灰度：false=彩色, true=黑白
					disable: false            // 是否禁用效果：false=启用, true=禁用
				};
				
				// ----- 4.4 创建半色调效果通道 -----
				// HalftonePass实现RGB半色调效果，基于上面配置的参数
				const halftonePass = new HalftonePass( params );
				
				// ----- 4.5 将通道添加到合成器 -----
				// 通道的执行顺序很重要：RenderPass -> HalftonePass
				// 每个通道的输出会作为下一个通道的输入
				composer.addPass( renderPass );    // 第一步：渲染场景
				composer.addPass( halftonePass );  // 第二步：应用半色调效果

				// ========== 第五部分：窗口大小变化处理 ==========
				
				/**
				 * 窗口大小变化事件处理函数
				 * 当用户调整浏览器窗口大小时，需要更新相关设置
				 * 以保持正确的显示比例和效果
				 */
				window.onresize = function () {
					// 更新渲染器尺寸，使其始终填充整个窗口
					renderer.setSize( window.innerWidth, window.innerHeight );
					
					// 更新效果合成器尺寸，确保后期处理效果正确应用
					composer.setSize( window.innerWidth, window.innerHeight );
					
					// 更新相机宽高比，避免图像拉伸变形
					camera.aspect = window.innerWidth / window.innerHeight;
					
					// 更新相机投影矩阵，应用新的宽高比设置
					// 修改相机参数后必须调用此方法
					camera.updateProjectionMatrix();
				};

				// ========== 第六部分：GUI控制面板设置 ==========
				
				/**
				 * GUI控制面板：
				 * - 允许用户实时调整半色调效果的参数
				 * - 无需修改代码即可预览不同参数的效果
				 * - 提升用户体验和交互性
				 */
				
				// ----- 6.1 创建GUI控制器对象 -----
				// 这个对象将GUI控件与着色器uniform变量连接起来
				const controller = {
					// 从HalftonePass获取初始值，并转换为合适的格式
					radius: halftonePass.uniforms[ 'radius' ].value,
					
					// 将弧度转换为角度（便于用户理解和调整）
					// 着色器中使用弧度，但GUI中显示角度
					rotateR: halftonePass.uniforms[ 'rotateR' ].value / ( Math.PI / 180 ),
					rotateG: halftonePass.uniforms[ 'rotateG' ].value / ( Math.PI / 180 ),
					rotateB: halftonePass.uniforms[ 'rotateB' ].value / ( Math.PI / 180 ),
					
					// 其他参数直接使用着色器中的值
					scatter: halftonePass.uniforms[ 'scatter' ].value,
					shape: halftonePass.uniforms[ 'shape' ].value,
					greyscale: halftonePass.uniforms[ 'greyscale' ].value,
					blending: halftonePass.uniforms[ 'blending' ].value,
					blendingMode: halftonePass.uniforms[ 'blendingMode' ].value,
					disable: halftonePass.uniforms[ 'disable' ].value
				};

				/**
				 * GUI参数改变回调函数
				 * 当用户在GUI中调整参数时，此函数会被调用
				 * 负责将GUI的值同步到着色器的uniform变量
				 */
				function onGUIChange() {
					// 更新所有uniform变量的值
					
					// 半径参数直接赋值
					halftonePass.uniforms[ 'radius' ].value = controller.radius;
					
					// 旋转参数：将角度转换回弧度
					halftonePass.uniforms[ 'rotateR' ].value = controller.rotateR * ( Math.PI / 180 );
					halftonePass.uniforms[ 'rotateG' ].value = controller.rotateG * ( Math.PI / 180 );
					halftonePass.uniforms[ 'rotateB' ].value = controller.rotateB * ( Math.PI / 180 );
					
					// 其他参数直接赋值
					halftonePass.uniforms[ 'scatter' ].value = controller.scatter;
					halftonePass.uniforms[ 'shape' ].value = controller.shape;
					halftonePass.uniforms[ 'greyscale' ].value = controller.greyscale;
					halftonePass.uniforms[ 'blending' ].value = controller.blending;
					halftonePass.uniforms[ 'blendingMode' ].value = controller.blendingMode;
					halftonePass.uniforms[ 'disable' ].value = controller.disable;
				}

				// ----- 6.2 创建GUI实例并添加控件 -----
				// 创建GUI对象，会在屏幕上显示一个可折叠的控制面板
				const gui = new GUI();
				
				// 添加网点形状选择控件
				// 选项包括：圆点、椭圆、线条、方形
				gui.add( controller, 'shape', { 
					'圆点': 1, 
					'椭圆': 2, 
					'线条': 3, 
					'方形': 4 
				} ).name('网点形状').onChange( onGUIChange );
				
				// 添加网点半径滑块控件
				// 范围：1到25像素，默认4
				gui.add( controller, 'radius', 1, 25 ).name('网点半径').onChange( onGUIChange );
				
				// 添加各颜色通道旋转角度滑块
				// 范围：0到90度，调整网点排列角度
				gui.add( controller, 'rotateR', 0, 90 ).name('红色通道角度').onChange( onGUIChange );
				gui.add( controller, 'rotateG', 0, 90 ).name('绿色通道角度').onChange( onGUIChange );
				gui.add( controller, 'rotateB', 0, 90 ).name('蓝色通道角度').onChange( onGUIChange );
				
				// 添加网点散射程度滑块
				// 范围：0到1，步长0.01，控制网点的随机分布程度
				gui.add( controller, 'scatter', 0, 1, 0.01 ).name('散射程度').onChange( onGUIChange );
				
				// 添加灰度模式复选框
				// 切换彩色和黑白显示
				gui.add( controller, 'greyscale' ).name('灰度模式').onChange( onGUIChange );
				
				// 添加混合程度滑块
				// 控制原始图像和半色调效果的混合比例
				gui.add( controller, 'blending', 0, 1, 0.01 ).name('混合程度').onChange( onGUIChange );
				
				// 添加混合模式选择控件
				// 不同混合模式会产生不同的视觉效果
				gui.add( controller, 'blendingMode', { 
					'线性混合': 1, 
					'相乘混合': 2, 
					'相加混合': 3, 
					'变亮混合': 4, 
					'变暗混合': 5 
				} ).name('混合模式').onChange( onGUIChange );
				
				// 添加效果启用/禁用复选框
				// 快速切换有无半色调效果，便于对比
				gui.add( controller, 'disable' ).name('禁用效果').onChange( onGUIChange );

				// ----- 6.3 可选的GUI优化 -----
				// 将相关控件分组，使界面更整洁
				const basicFolder = gui.addFolder('基本设置');
				basicFolder.add( controller, 'radius', 1, 25 ).name('网点半径').onChange( onGUIChange );
				basicFolder.add( controller, 'shape', { '圆点': 1, '椭圆': 2, '线条': 3, '方形': 4 } ).name('网点形状').onChange( onGUIChange );
				basicFolder.open(); // 默认展开这个文件夹
				
				const colorFolder = gui.addFolder('颜色设置');
				colorFolder.add( controller, 'rotateR', 0, 90 ).name('红色角度').onChange( onGUIChange );
				colorFolder.add( controller, 'rotateG', 0, 90 ).name('绿色角度').onChange( onGUIChange );
				colorFolder.add( controller, 'rotateB', 0, 90 ).name('蓝色角度').onChange( onGUIChange );
				colorFolder.add( controller, 'greyscale' ).name('灰度模式').onChange( onGUIChange );

			}

			// ========== 第七部分：动画循环函数 ==========
			
			/**
			 * 动画循环函数 - 每一帧都会执行
			 * 这是Three.js应用的核心循环，负责更新场景状态和重新渲染
			 * 使用renderer.setAnimationLoop()设置，替代传统的requestAnimationFrame
			 * 
			 * @returns {void}
			 */
			function animate() {
				// ----- 7.1 获取时间差 -----
				// 获取自上一帧以来的时间（秒）
				// 用于实现与帧率无关的平滑动画
				// 如果使用固定值，在高刷新率屏幕上动画会更快
				const delta = clock.getDelta();
				
				// ----- 7.2 更新性能监控器 -----
				// 更新FPS计数器和渲染时间显示
				stats.update();
				
				// ----- 7.3 更新场景动画 -----
				// 使整个物体组绕Y轴持续旋转
				// delta * rotationSpeed 确保旋转速度不受帧率影响
				group.rotation.y += delta * rotationSpeed;
				
				// ----- 7.4 渲染场景 -----
				// 使用效果合成器进行渲染，应用后期处理效果
				// 如果禁用后期处理，可以改为：renderer.render(scene, camera);
				composer.render( delta );
				
				// 注意：这里将delta传递给composer.render()
				// 某些后期处理效果可能需要时间信息来实现动态效果
			}

			// ========== 第八部分：可选的性能优化建议 ==========
			
			/**
			 * 性能优化提示（实际项目中可以考虑）：
			 * 1. 使用InstancedMesh替代多个单独的Mesh，减少draw call
			 * 2. 合并几何体，减少GPU内存使用
			 * 3. 使用纹理图集，减少纹理切换
			 * 4. 实现细节层次(LOD)，远处物体使用简化模型
			 * 5. 使用剔除技术，不渲染视锥外的物体
			 * 6. 在窗口失去焦点时暂停动画循环，节省资源
			 */
			
			// 示例：窗口可见性变化处理
			// document.addEventListener('visibilitychange', function() {
			//     if (document.hidden) {
			//         // 页面不可见时停止动画循环
			//         renderer.setAnimationLoop(null);
			//     } else {
			//         // 页面重新可见时恢复动画循环
			//         renderer.setAnimationLoop(animate);
			//     }
			// });

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