<!-- Three.js WebGPU 像素化后处理效果演示
🎯 整体功能描述
这是一个基于 Three.js WebGPU 的交互式3D像素化后处理效果演示。它创建了一个包含多个几何物体（立方体、平面、水晶）的3D场景，并应用了实时的像素化滤镜，允许用户交互式调整像素化参数，体验类似复古游戏或像素艺术的视觉效果。

主要视觉特征：
实时像素化效果：将3D场景渲染为像素化风格

可调节参数：像素大小、边缘检测强度等

动态水晶动画：自发光脉动、旋转和浮动效果

交互式控制：用户可通过鼠标旋转、缩放和平移场景

GUI参数调整：实时调整效果参数

🛠️ 主要技术点详解
1. WebGPU渲染技术
javascript
import * as THREE from 'three/webgpu';
renderer = new THREE.WebGPURenderer();
技术优势：WebGPU是下一代Web图形API，相比WebGL提供：

更低的CPU开销

更好的多线程支持

更现代的GPU特性访问

更一致的跨平台性能

2. 正交投影相机（OrthographicCamera）
javascript
camera = new THREE.OrthographicCamera(-aspectRatio, aspectRatio, 1, -1, 0.1, 10);
为什么使用正交相机？

没有透视变形（物体大小不随距离改变）

保持像素边缘清晰锐利

适合2D游戏和像素艺术风格

避免透视导致的远处像素模糊

3. TSL（Three.js Shading Language）节点系统
javascript
import { uniform } from 'three/tsl';
import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';
节点化着色器：可视化、模块化的着色器编程

统一变量（Uniform）：在JS和着色器间传递数据

后处理节点链：scene → pixelationPass → output

4. 像素化后处理算法
javascript
const scenePass = pixelationPass(scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength);
核心算法：

下采样：将高分辨率图像降低到目标像素分辨率

像素化：将每个"超级像素"区域的颜色统一

边缘检测：

法线边缘：基于表面法线变化的边缘

深度边缘：基于场景深度变化的边缘

上采样：将像素化图像放大回屏幕分辨率

5. 像素对齐技术（Pixel Alignment）
javascript
function pixelAlignFrustum(camera, aspectRatio, pixelsPerScreenWidth, pixelsPerScreenHeight)
解决的问题：相机移动时的"子像素抖动"

实现原理：

计算像素的世界空间尺寸

将相机位置投影到像素网格

调整相机视锥使其对齐到整数像素边界

确保每个屏幕像素对应完整的场景像素

6. 多重光照与阴影系统
javascript
// 三种光照类型组合
scene.add(new THREE.AmbientLight(0x757f8e, 3));  // 环境光
const directionalLight = new THREE.DirectionalLight(0xfffecd, 1.5);  // 平行光
const spotLight = new THREE.SpotLight(0xffc100, 10, 10, Math.PI/16, .02, 2);  // 聚光灯
阴影映射：2048×2048分辨率的阴影贴图

阴影偏移（Bias）：防止阴影失真（阴影痤疮）

多重光源：环境光+方向光+聚光灯的完整照明

7. 自定义缓动动画系统
javascript
function stopGoEased(x, downtime, period) { ... }
function easeInOutCubic(x) { ... }
stopGoEased函数：创建"运动-暂停-运动"的动画模式

easeInOutCubic：缓入缓出三次方缓动函数

基于时间的动画：使用clock.getElapsedTime()确保动画速度与时间而非帧率相关

8. 纹理像素化处理
javascript
function pixelTexture(texture) {
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;
    texture.generateMipmaps = false;
}
最近邻过滤（NearestFilter）：保持纹理的硬边缘

禁用Mipmaps：防止远处纹理模糊

重复包裹（RepeatWrapping）：小纹理平铺到大表面

9. 交互控制系统
javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Inspector } from 'three/addons/inspector/Inspector.js';
轨道控制器：鼠标拖拽旋转、滚轮缩放、右键平移

GUI调试面板：实时调整所有效果参数

响应式设计：自动适应窗口大小变化

10. 模块化架构
html
<script type="importmap"> ... </script>
<script type="module"> ... </script>
ES6模块系统：代码模块化，避免全局污染

导入映射表：简化模块路径引用

分离的职责：初始化、动画、工具函数清晰分离

🔧 核心算法流程
渲染管线流程：
text
1. 场景几何渲染 → 2. 深度/法线缓冲生成 → 
3. 像素化下采样 → 4. 边缘检测处理 → 
5. 像素上采样 → 6. 屏幕输出
像素对齐算法步骤：
计算像素尺寸：像素宽度 = 屏幕宽度(世界单位) / 水平像素数

投影相机位置：将相机位置转换到像素网格坐标系

计算偏移量：分数偏移 = 相机位置(像素单位) - 最近的整数像素

调整视锥：新边界 = 原始边界 - (分数偏移 × 像素尺寸)

更新投影：应用调整后的相机参数

🎨 视觉效果层次
基础层：
场景几何：立方体、平面、二十面体

纹理贴图：棋盘格图案，像素化过滤

基础光照：三种光源，硬阴影

效果层：
像素化处理：统一颜色块，复古风格

边缘增强：黑色轮廓线，卡通化效果

动态动画：水晶脉动、旋转、浮动

交互层：
实时参数调整：即时反馈参数变化

视角控制：自由探索场景

像素对齐切换：对比对齐/不对齐效果

💡 技术亮点总结
现代图形API：采用WebGPU而非传统的WebGL

着色器节点化：使用TSL实现可视化着色器编程

精确像素控制：像素对齐算法消除渲染抖动

多重边缘检测：结合法线和深度信息的智能边缘

物理精确动画：基于时间的缓动函数系统

完整交互系统：从相机控制到参数调整的完整交互

模块化架构：易于扩展和维护的代码结构 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面元数据 -->
		<title>Three.js WebGPU 像素化后处理效果演示</title>
		<!-- 设置文档字符编码为UTF-8，支持多语言字符显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置，响应式网页设计的关键：
			width=device-width - 视口宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（保持像素效果的准确性）
			minimum-scale=1.0 - 最小缩放比例为1倍
			maximum-scale=1.0 - 最大缩放比例为1倍
			这些设置确保像素化效果在不同设备上保持一致性
		-->
		<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="example.css">
	</head>

<body>
	<!-- 
		信息展示面板
		id="info" 用于CSS样式和JavaScript选择器标识
		这个div包含页面标题、作者信息和Three.js链接
	-->
	<div id="info">
		<!-- 
			Three.js官方徽标链接
			target="_blank" - 在新标签页打开链接
			rel="noopener" - 安全属性，防止新打开的页面访问原页面的window对象
			class="logo-link" - CSS类名，用于样式控制（可能包含背景图片）
		-->
		<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

		<!-- 标题包装器，用于样式布局 -->
		<div class="title-wrapper">
			<!-- 主标题链接到Three.js官网 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
			<!-- 副标题：当前演示的名称 -->
			<span>像素化后处理效果演示</span>
		</div>

		<!-- 
			详细描述区域
			<small>标签表示次要信息，通常显示较小字体
			包含技术说明和作者信息
		-->
		<small>基于节点的像素化后处理通道，支持单像素轮廓线效果 | 作者：<a href="https://github.com/KodyJKing" target="_blank" rel="noopener">Kody King</a></small>
	</div>

	<!-- 
		导入映射表 (Import Map)
		现代JavaScript模块系统的配置部分
		定义模块名称到实际文件路径的映射关系
		允许使用简化的模块导入语句
	-->
	<script type="importmap">
		{
			"imports": {
				"three": "../build/three.webgpu.js",
				"three/webgpu": "../build/three.webgpu.js",
				"three/tsl": "../build/three.tsl.js",
				"three/addons/": "./jsm/"
			}
		}
	</script>
	

	<!-- 
		主JavaScript模块
		type="module" 表示这是一个ES6模块，支持import/export语法
		模块作用域，避免污染全局命名空间
	-->
	<script type="module">

		// ==================== 模块导入区域 ====================
		// 导入Three.js核心库的WebGPU版本
		// WebGPU是新一代图形API，比WebGL更高效，支持现代GPU特性
		import * as THREE from 'three/webgpu';

		// 导入轨道控制器 - 允许用户用鼠标拖拽、缩放来交互式控制相机
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		// 导入调试检查器 - 用于创建可视化参数调整界面（GUI）
		import { Inspector } from 'three/addons/inspector/Inspector.js';

		// 导入Three.js着色器语言（TSL）工具函数
		// uniform函数用于创建着色器统一变量，可以在JavaScript和着色器之间传递数据
		import { uniform } from 'three/tsl';
		// 导入像素化后处理节点 - 核心效果实现
		import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';

		// ==================== 全局变量声明 ====================
		// camera: 相机对象，决定场景的观察视角
		// scene: 场景对象，包含所有3D物体、光源等
		// renderer: 渲染器对象，负责将3D场景绘制到2D画布
		// postProcessing: 后处理对象，管理后期效果管线
		// crystalMesh: 水晶网格对象，是场景中的主要动画元素
		// clock: 时钟对象，用于精确的时间控制和动画计时
		let camera, scene, renderer, postProcessing, crystalMesh, clock;
		
		// effectController: 效果控制器对象，存储所有可调参数
		// 这些参数可以通过GUI界面实时调整，即时看到效果变化
		let effectController;

		// ==================== 初始化调用 ====================
		// 程序入口点，页面加载完成后立即执行
		init();

		// ==================== 初始化函数定义 ====================
		/**
		 * 初始化函数 - 整个Three.js应用的启动点
		 * 负责创建所有必要的3D对象、设置场景、初始化渲染器等
		 * 这个函数只会在页面加载时执行一次
		 */
		function init() {

			// 计算屏幕的宽高比（宽度/高度）
			// 宽高比对于正确设置相机投影和保持物体比例很重要
			const aspectRatio = window.innerWidth / window.innerHeight;

			// ========== 相机设置 ==========
			/**
			 * 创建正交投影相机 (OrthographicCamera)
			 * 正交相机特点：没有透视变形，物体大小不受距离影响
			 * 参数说明（按顺序）：
			 * 1. left: 左裁剪平面位置 = -宽高比
			 * 2. right: 右裁剪平面位置 = 宽高比
			 * 3. top: 上裁剪平面位置 = 1
			 * 4. bottom: 下裁剪平面位置 = -1
			 * 5. near: 近裁剪平面距离 = 0.1
			 * 6. far: 远裁剪平面距离 = 10
			 * 
			 * 使用正交相机的原因：
			 * 1. 像素化效果需要保持像素的清晰边缘
			 * 2. 透视相机会使远处的像素模糊，影响像素化效果
			 * 3. 正交相机适合2D游戏和像素艺术风格
			 */
			camera = new THREE.OrthographicCamera( - aspectRatio, aspectRatio, 1, - 1, 0.1, 10 );
			
			// 设置相机初始位置
			// Y轴位置：基于30度视角（π/6弧度）计算，确保场景在视图中居中
			camera.position.y = 2 * Math.tan( Math.PI / 6 );
			// Z轴位置：相机沿Z轴后退2个单位，与场景保持适当距离
			camera.position.z = 2;

			// ========== 场景设置 ==========
			// 创建场景对象 - 所有3D对象的容器
			scene = new THREE.Scene();
			// 设置场景背景颜色为深蓝色（十六进制颜色码：0x151729）
			// 深色背景有助于突出显示前景物体和发光效果
			scene.background = new THREE.Color( 0x151729 );

			// ========== 时钟初始化 ==========
			// 创建Clock对象，用于精确的时间测量和动画控制
			// Clock可以获取自创建以来经过的时间，用于基于时间的动画
			clock = new THREE.Clock();

			// ========== 纹理加载与处理 ==========
			// 创建纹理加载器实例，用于从URL加载图像文件作为纹理
			const loader = new THREE.TextureLoader();
			
			// 加载棋盘格纹理并应用像素化处理
			// 第一个纹理：用于地面平面，重复3x3次
			const texChecker = pixelTexture( loader.load( 'textures/checker.png' ) );
			// 第二个纹理：用于盒子，重复1.5x1.5次
			const texChecker2 = pixelTexture( loader.load( 'textures/checker.png' ) );
			
			// 设置纹理重复模式
			// 纹理重复可以让小纹理覆盖大表面而不失真
			texChecker.repeat.set( 3, 3 );   // 水平重复3次，垂直重复3次
			texChecker2.repeat.set( 1.5, 1.5 ); // 水平重复1.5次，垂直重复1.5次

			// ========== 网格对象创建 ==========
			// 创建盒子材质，使用第二个棋盘格纹理
			// MeshPhongMaterial是具有高光反射的材质类型
			const boxMaterial = new THREE.MeshPhongMaterial( { map: texChecker2 } );

			/**
			 * 辅助函数：在场景中添加一个立方体盒子
			 * @param {number} boxSideLength - 盒子的边长
			 * @param {number} x - X轴位置
			 * @param {number} z - Z轴位置  
			 * @param {number} rotation - Y轴旋转角度（弧度）
			 * @returns {THREE.Mesh} 返回创建的网格对象
			 */
			function addBox( boxSideLength, x, z, rotation ) {

				// 创建立方体几何体，边长由参数指定
				const geometry = new THREE.BoxGeometry( boxSideLength, boxSideLength, boxSideLength );
				
				// 创建网格对象，组合几何体和材质
				const mesh = new THREE.Mesh( geometry, boxMaterial );
				
				// 启用阴影投射：这个物体会在其他物体上产生阴影
				mesh.castShadow = true;
				// 启用阴影接收：这个物体会显示其他物体投射的阴影
				mesh.receiveShadow = true;
				
				// 设置网格旋转（绕Y轴）
				mesh.rotation.y = rotation;
				
				// 设置网格位置
				// Y轴位置：盒子高度的一半（使盒子底部接触地面）
				// 加0.0001微小偏移：防止Z-fighting（深度冲突）现象
				// Z-fighting：当两个表面过于接近时，GPU无法确定哪个在前
				mesh.position.y = boxSideLength / 2;
				mesh.position.set( x, boxSideLength / 2 + .0001, z );
				
				// 将网格添加到场景中
				scene.add( mesh );
				
				// 返回网格对象，方便后续引用
				return mesh;

			}

			// 在场景中添加两个不同大小和位置的盒子
			// 第一个盒子：边长0.4，位于原点，旋转45度
			addBox( .4, 0, 0, Math.PI / 4 );
			// 第二个盒子：边长0.5，位置(-0.5, -0.5)，旋转45度
			addBox( .5, - .5, - .5, Math.PI / 4 );

			// 创建地面平面
			const planeSideLength = 2;  // 平面边长
			// 创建平面网格
			const planeMesh = new THREE.Mesh(
				// 平面几何体：宽度和高度都为2
				new THREE.PlaneGeometry( planeSideLength, planeSideLength ),
				// 平面材质：使用第一个棋盘格纹理（3x3重复）
				new THREE.MeshPhongMaterial( { map: texChecker } )
			);
			// 地面接收阴影（显示盒子和水晶的阴影）
			planeMesh.receiveShadow = true;
			// 旋转平面：绕X轴旋转-90度，使平面水平放置（默认平面是垂直的）
			planeMesh.rotation.x = - Math.PI / 2;
			// 将地面添加到场景
			scene.add( planeMesh );

			// 创建水晶物体（二十面体）
			const radius = .2;  // 水晶半径
			// 创建二十面体几何体：由20个等边三角形组成的多面体
			const geometry = new THREE.IcosahedronGeometry( radius );
			// 创建水晶网格
			crystalMesh = new THREE.Mesh(
				geometry,
				// 自定义Phong材质，具有发光效果
				new THREE.MeshPhongMaterial( {
					color: 0x68b7e9,        // 基础颜色：浅蓝色 (#68b7e9)
					emissive: 0x4f7e8b,     // 自发光颜色：深蓝绿色 (#4f7e8b)
					shininess: 10,          // 高光强度：值越小高光越分散
					specular: 0xffffff      // 高光颜色：白色
				} )
			);
			// 水晶物体特性设置
			crystalMesh.receiveShadow = true;  // 接收阴影
			crystalMesh.castShadow = true;     // 投射阴影
			// 将水晶添加到场景
			scene.add( crystalMesh );

			// ========== 光照系统设置 ==========
			// 1. 环境光 - 提供整体基础照明，没有方向性
			// 参数：颜色(#757f8e)，强度(3)
			scene.add( new THREE.AmbientLight( 0x757f8e, 3 ) );

			// 2. 平行光 - 模拟太阳光，所有光线平行
			const directionalLight = new THREE.DirectionalLight( 0xfffecd, 1.5 );
			directionalLight.position.set( 100, 100, 100 );  // 设置光源位置
			directionalLight.castShadow = true;  // 启用阴影投射
			// 设置阴影贴图分辨率：更高的分辨率=更清晰的阴影，但性能消耗更大
			directionalLight.shadow.mapSize.set( 2048, 2048 );
			// 阴影偏移：防止阴影失真（阴影痤疮现象）
			directionalLight.shadow.bias = - 0.0001;
			scene.add( directionalLight );

			// 3. 聚光灯 - 局部照明，有明确的照射方向和范围
			const spotLight = new THREE.SpotLight( 0xffc100, 10, 10, Math.PI / 16, .02, 2 );
			// 参数说明：
			// 1. 颜色 (#ffc100)
			// 2. 强度 (10)
			// 3. 距离 (10)
			// 4. 角度 (π/16 ≈ 11.25度)
			// 5. 衰减 (0.02)
			// 6. 锥形衰减 (2)
			
			spotLight.position.set( 2, 2, 0 );  // 设置聚光灯位置
			const target = spotLight.target;    // 获取聚光灯的目标点
			scene.add( target );                // 将目标点添加到场景
			target.position.set( 0, 0, 0 );     // 设置目标点位置（场景中心）
			spotLight.castShadow = true;        // 启用阴影投射
			spotLight.shadow.bias = - 0.001;    // 阴影偏移
			scene.add( spotLight );             // 将聚光灯添加到场景

			// ========== 渲染器初始化 ==========
			// 创建WebGPU渲染器实例
			// WebGPU是新一代Web图形API，提供比WebGL更好的性能和更多功能
			renderer = new THREE.WebGPURenderer();
			
			// 设置渲染器尺寸为浏览器窗口大小
			renderer.setSize( window.innerWidth, window.innerHeight );
			
			// 设置动画循环回调函数
			// animate函数将在每一帧被调用，实现平滑动画
			renderer.setAnimationLoop( animate );
			
			// 附加调试检查器，用于创建GUI控制面板
			renderer.inspector = new Inspector();
			
			// 启用阴影映射系统
			renderer.shadowMap.enabled = true;
			// 设置阴影类型为基本阴影映射
			// BasicShadowMap: 性能最好，质量最低
			// 其他选项：PCFShadowMap, PCFSoftShadowMap, VSMShadowMap
			renderer.shadowMap.type = THREE.BasicShadowMap;
			
			// 将渲染器的canvas元素添加到网页body中
			// renderer.domElement是<canvas>元素的引用
			document.body.appendChild( renderer.domElement );

			// ========== 效果控制器初始化 ==========
			/**
			 * effectController对象存储所有可调效果参数
			 * uniform()函数创建着色器统一变量，可以在JS和着色器之间同步数据
			 */
			effectController = {
				pixelSize: uniform( 6 ),          // 像素大小：控制像素化程度，值越大像素越明显
				normalEdgeStrength: uniform( 0.3 ), // 法线边缘强度：基于表面法线变化的边缘检测强度
				depthEdgeStrength: uniform( 0.4 ),  // 深度边缘强度：基于深度变化的边缘检测强度
				pixelAlignedPanning: true          // 像素对齐平移：启用后相机会对齐到像素网格
			};

			// ========== 后处理系统初始化 ==========
			// 创建后处理管线管理器
			postProcessing = new THREE.PostProcessing( renderer );
			
			// 创建像素化后处理节点
			// 参数：场景、相机、像素大小、法线边缘强度、深度边缘强度
			const scenePass = pixelationPass( 
				scene, 
				camera, 
				effectController.pixelSize, 
				effectController.normalEdgeStrength, 
				effectController.depthEdgeStrength 
			);
			
			// 设置后处理管线的输出节点
			postProcessing.outputNode = scenePass;

			// ========== 事件监听器设置 ==========
			// 监听窗口大小变化事件
			// 当用户调整浏览器窗口大小时，重新调整相机和渲染器
			window.addEventListener( 'resize', onWindowResize );

			// ========== 用户交互控制 ==========
			// 创建轨道控制器
			// 允许用户通过鼠标拖拽旋转视图，滚轮缩放，右键拖拽平移
			const controls = new OrbitControls( camera, renderer.domElement );
			controls.maxZoom = 2;  // 设置最大缩放限制

			// ========== GUI控制面板创建 ==========
			// 使用检查器创建参数控制面板，标题为"Settings"
			const gui = renderer.inspector.createParameters( '设置' );
			
			// 添加像素大小控制滑块
			// 参数：对象、属性名、最小值、最大值、步长
			gui.add( effectController.pixelSize, 'value', 1, 16, 1 ).name( '像素大小' );
			
			// 添加法线边缘强度控制滑块
			gui.add( effectController.normalEdgeStrength, 'value', 0, 2, 0.05 ).name( '法线边缘强度' );
			
			// 添加深度边缘强度控制滑块
			gui.add( effectController.depthEdgeStrength, 'value', 0, 1, 0.05 ).name( '深度边缘强度' );
			
			// 添加像素对齐平移复选框
			gui.add( effectController, 'pixelAlignedPanning' ).name( '像素对齐平移' );

		}

		// ==================== 窗口大小变化处理函数 ====================
		/**
		 * 处理浏览器窗口大小变化事件
		 * 当用户调整窗口大小或设备旋转时调用
		 * 确保3D场景正确适应新的窗口尺寸
		 */
		function onWindowResize() {

			// 重新计算当前窗口的宽高比
			const aspectRatio = window.innerWidth / window.innerHeight;
			
			// 更新正交相机的左右裁剪平面
			// 保持相机视野与窗口比例一致，避免图像拉伸
			camera.left = - aspectRatio;   // 左边界 = -宽高比
			camera.right = aspectRatio;    // 右边界 = 宽高比
			
			// 更新相机投影矩阵
			// 当相机参数改变后，必须调用此函数重新计算投影矩阵
			camera.updateProjectionMatrix();

			// 更新渲染器尺寸，匹配新的窗口大小
			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		// ==================== 动画循环函数 ====================
		/**
		 * 动画循环函数 - 每一帧调用一次
		 * 这是Three.js应用的核心循环，负责更新动画状态和渲染场景
		 * 使用requestAnimationFrame实现，与显示器刷新率同步（通常60fps）
		 */
		function animate() {

			// 获取自时钟创建以来经过的时间（秒）
			// 使用经过时间而不是帧数，确保动画速度与时间而不是帧率相关
			const t = clock.getElapsedTime();

			// ========== 水晶动画更新 ==========
			// 1. 更新水晶自发光强度
			// 使用正弦函数创建脉动效果：sin(t*3)产生周期变化
			// *0.5+0.5将取值范围从[-1,1]映射到[0,1]
			crystalMesh.material.emissiveIntensity = Math.sin( t * 3 ) * .5 + .5;
			
			// 2. 更新水晶的Y轴位置（上下浮动）
			// 基础高度0.7 + 正弦波动*0.05
			crystalMesh.position.y = .7 + Math.sin( t * 2 ) * .05;
			
			// 3. 更新水晶的旋转角度
			// 使用stopGoEased函数创建"旋转-暂停-旋转"的动画模式
			// 乘以2π将归一化值转换为完整圆周（弧度）
			crystalMesh.rotation.y = stopGoEased( t, 2, 4 ) * 2 * Math.PI;

			// ========== 像素对齐处理 ==========
			// 获取渲染器的当前尺寸（像素）
			const rendererSize = renderer.getSize( new THREE.Vector2() );
			// 重新计算渲染器的宽高比
			const aspectRatio = rendererSize.x / rendererSize.y;

			// 检查是否启用了像素对齐平移选项
			if ( effectController.pixelAlignedPanning ) {

				// 获取当前像素大小设置
				const pixelSize = effectController.pixelSize.value;

				// 调用像素对齐函数，调整相机视锥
				// 参数说明：
				// 1. 相机对象
				// 2. 宽高比
				// 3. 水平方向像素数（渲染器宽度/像素大小）
				// 4. 垂直方向像素数（渲染器高度/像素大小）
				pixelAlignFrustum( 
					camera, 
					aspectRatio, 
					Math.floor( rendererSize.x / pixelSize ),
					Math.floor( rendererSize.y / pixelSize ) 
				);

			} else if ( camera.left != - aspectRatio || camera.top != 1.0 ) {
				
				// 如果像素对齐平移被禁用，但相机参数已被修改
				// 则重置相机参数到默认状态
				camera.left = - aspectRatio;   // 左边界
				camera.right = aspectRatio;    // 右边界
				camera.top = 1.0;              // 上边界
				camera.bottom = - 1.0;         // 下边界
				camera.updateProjectionMatrix();  // 更新投影矩阵

			}

			// ========== 执行渲染 ==========
			// 调用后处理系统的渲染方法
			// 这会执行完整的渲染管线：场景渲染 + 后处理效果
			postProcessing.render();

		}

		// ==================== 辅助函数定义 ====================

		/**
		 * 纹理像素化处理函数
		 * 将普通纹理转换为适合像素化效果的纹理设置
		 * @param {THREE.Texture} texture - 输入的纹理对象
		 * @returns {THREE.Texture} 处理后的纹理对象
		 */
		function pixelTexture( texture ) {

			// 设置纹理缩小过滤器为最近邻过滤
			// NearestFilter：选择最接近的纹素，保持硬边缘，适合像素艺术
			// 对比：LinearFilter会进行线性插值，产生模糊效果
			texture.minFilter = THREE.NearestFilter;
			
			// 设置纹理放大过滤器为最近邻过滤
			texture.magFilter = THREE.NearestFilter;
			
			// 禁用Mipmap生成
			// Mipmap是预先计算的不同分辨率纹理，用于远处物体
			// 禁用Mipmap可以保持像素的清晰边缘
			texture.generateMipmaps = false;
			
			// 设置纹理包裹模式为重复包裹
			// RepeatWrapping：纹理在超出范围时重复平铺
			// 对比：ClampToEdgeWrapping会拉伸边缘像素
			texture.wrapS = THREE.RepeatWrapping;  // 水平方向
			texture.wrapT = THREE.RepeatWrapping;  // 垂直方向
			
			// 设置纹理颜色空间为sRGB
			// sRGB是标准颜色空间，提供更准确的颜色显示
			// 对比：LinearSRGBColorSpace是线性颜色空间
			texture.colorSpace = THREE.SRGBColorSpace;
			
			// 返回处理后的纹理
			return texture;

		}

		/**
		 * 缓入缓出三次方缓动函数
		 * 创建平滑的加速度和减速度效果
		 * @param {number} x - 输入值，范围[0,1]
		 * @returns {number} 缓动后的值，范围[0,1]
		 */
		function easeInOutCubic( x ) {

			// 缓入缓出三次方公式：3x² - 2x³
			// 特性：起点和终点速度为0，中间速度最快
			// 对比线性函数：y = x
			return x ** 2 * 3 - x ** 3 * 2;

		}

		/**
		 * 线性步进函数
		 * 在指定范围内进行线性插值，并在范围外钳制到[0,1]
		 * @param {number} x - 输入值
		 * @param {number} edge0 - 范围起始值
		 * @param {number} edge1 - 范围结束值
		 * @returns {number} 插值并钳制后的值，范围[0,1]
		 */
		function linearStep( x, edge0, edge1 ) {

			// 计算范围宽度
			const w = edge1 - edge0;
			// 计算斜率（变化率）
			const m = 1 / w;
			// 计算Y轴截距，确保当x=edge0时y=0
			const y0 = - m * edge0;
			// 计算线性插值，并用clamp函数限制到[0,1]范围
			return THREE.MathUtils.clamp( y0 + m * x, 0, 1 );

		}

		/**
		 * 带停顿的缓动函数
		 * 创建"运动-暂停-运动"的动画模式
		 * 用于水晶的旋转动画，使其不是连续旋转
		 * @param {number} x - 输入时间值
		 * @param {number} downtime - 每次循环中的暂停时间
		 * @param {number} period - 完整循环周期
		 * @returns {number} 缓动后的值
		 */
		function stopGoEased( x, downtime, period ) {

			// 计算当前处于第几个循环周期
			// | 0 是位运算，相当于Math.floor()，但更快
			const cycle = ( x / period ) | 0;
			
			// 计算当前周期内的时间（去除完整周期部分）
			const tween = x - cycle * period;
			
			// 应用线性步进和缓动函数
			// 1. 先使用linearStep将时间映射到[0,1]范围
			// 2. 再应用easeInOutCubic进行平滑处理
			const linStep = easeInOutCubic( linearStep( tween, downtime, period ) );
			
			// 返回结果：周期数 + 当前周期的缓动值
			// 例如：cycle=2, linStep=0.5 → 返回2.5
			return cycle + linStep;

		}

		/**
		 * 像素对齐视锥函数
		 * 调整相机参数，使相机移动时对齐到像素网格
		 * 防止像素化效果在相机移动时出现"抖动"或"子像素偏移"
		 * @param {THREE.OrthographicCamera} camera - 正交相机对象
		 * @param {number} aspectRatio - 屏幕宽高比
		 * @param {number} pixelsPerScreenWidth - 水平方向像素数
		 * @param {number} pixelsPerScreenHeight - 垂直方向像素数
		 */
		function pixelAlignFrustum( camera, aspectRatio, pixelsPerScreenWidth, pixelsPerScreenHeight ) {

			// ========== 步骤0：计算像素网格的世界单位 ==========
			// 计算世界空间中的屏幕宽度（考虑相机缩放）
			const worldScreenWidth = ( ( camera.right - camera.left ) / camera.zoom );
			// 计算世界空间中的屏幕高度
			const worldScreenHeight = ( ( camera.top - camera.bottom ) / camera.zoom );
			// 计算单个像素在世界空间中的宽度
			const pixelWidth = worldScreenWidth / pixelsPerScreenWidth;
			// 计算单个像素在世界空间中的高度
			const pixelHeight = worldScreenHeight / pixelsPerScreenHeight;

			// ========== 步骤1：获取相机的位置和旋转信息 ==========
			// 创建向量存储相机世界位置
			const camPos = new THREE.Vector3(); 
			// 获取相机的世界空间位置
			camera.getWorldPosition( camPos );
			
			// 创建四元数存储相机旋转
			const camRot = new THREE.Quaternion(); 
			// 获取相机的世界空间旋转
			camera.getWorldQuaternion( camRot );
			
			// 计算相机局部坐标系的右方向向量（X轴正方向）
			// 应用相机旋转到标准右向量(1,0,0)
			const camRight = new THREE.Vector3( 1.0, 0.0, 0.0 ).applyQuaternion( camRot );
			
			// 计算相机局部坐标系的上方向向量（Y轴正方向）
			const camUp = new THREE.Vector3( 0.0, 1.0, 0.0 ).applyQuaternion( camRot );
			
			// 计算相机位置在右方向上的投影分量
			const camPosRight = camPos.dot( camRight );
			// 计算相机位置在上方向上的投影分量
			const camPosUp = camPos.dot( camUp );

			// ========== 步骤2：将相机位置转换为像素单位 ==========
			// 相机右方向位置（像素单位）= 世界单位位置 / 单个像素宽度
			const camPosRightPx = camPosRight / pixelWidth;
			// 相机上方向位置（像素单位）= 世界单位位置 / 单个像素高度
			const camPosUpPx = camPosUp / pixelHeight;

			// ========== 步骤3：计算分数像素偏移 ==========
			// 计算右方向的分数像素偏移（与最近整数像素的差值）
			const fractX = camPosRightPx - Math.round( camPosRightPx );
			// 计算上方向的分数像素偏移
			const fractY = camPosUpPx - Math.round( camPosUpPx );

			// ========== 步骤4：调整相机视锥实现像素对齐 ==========
			// 调整左裁剪平面：减去分数像素偏移对应的世界单位
			camera.left = - aspectRatio - ( fractX * pixelWidth );
			// 调整右裁剪平面：同样减去分数像素偏移
			camera.right = aspectRatio - ( fractX * pixelWidth );
			// 调整上裁剪平面
			camera.top = 1.0 - ( fractY * pixelHeight );
			// 调整下裁剪平面
			camera.bottom = - 1.0 - ( fractY * pixelHeight );
			
			// 更新相机投影矩阵，应用新的裁剪平面设置
			camera.updateProjectionMatrix();

		}

	</script>
</body>

</html>