<!-- 代码功能和技术点详解
🎯 核心功能概述
这是一个基于 Three.js WebGPU 的径向模糊效果演示，主要实现光线散射/光晕效果的模拟。通过在3D场景中心添加点光源，并应用径向模糊后处理效果，创造出从光源中心向外辐射的光线效果，常用于模拟体积光、镜头光斑等视觉效果。

🌟 主要技术亮点
1. WebGPU渲染架构
现代图形API：使用WebGPU替代传统的WebGL

性能优势：更低的CPU开销，更好的多线程支持

Three.js集成：通过WebGPURenderer类提供的高级抽象

2. 实例化渲染系统
高效批量渲染：使用InstancedMesh渲染100个四面体

共享资源：所有实例共享相同的几何体和材质

独立变换：每个实例有自己的位置、旋转、缩放和颜色

性能优化：单次绘制调用完成所有实例渲染

3. 径向模糊后处理
效果原理：以光源为中心，向外辐射模糊

实现方式：多步采样混合，模拟光线散射

核心参数：

权重(weight)：模糊强度控制

衰减(decay)：光线长度控制

采样数(count)：质量与性能平衡

曝光(exposure)：最终亮度调节

4. TSL（Three.js Shader Language）
声明式着色器：简化着色器编程

节点化系统：通过pass()、radialBlur()等函数构建处理管线

实时编译：支持运行时参数调整

5. 完整的技术栈
text
Three.js WebGPU → 实例化网格 → 后处理管线 → TSL着色器 → 交互式GUI
🔧 关键技术组件
渲染流程
场景构建：创建3D场景、相机、灯光和物体

实例化设置：配置100个随机分布的四面体

后处理初始化：设置径向模糊效果管线

动画循环：每帧更新并渲染

场景元素
透视相机：45度视场角，提供3D视角

光照系统：

半球光：环境照明

点光源：径向模糊效果中心

实例物体：100个随机位置、大小、旋转和颜色的四面体

效果参数系统
javascript
// 可调节参数
const params = {
    enabled: true,   // 启用/禁用效果
    animated: true   // 启用/禁用动画
};

// Uniform变量（可通过GUI调节）
weight: 0.9      // 模糊强度
decay: 0.95      // 衰减率
count: 32        // 采样数量
exposure: 5      // 曝光度
📊 性能优化策略
1. 实例化渲染优化
减少绘制调用次数

降低GPU内存占用

提高批量处理效率

2. 智能采样策略
可调节采样数量平衡质量与性能

距离衰减减少远处细节的采样需求

3. 自适应渲染
响应式窗口大小调整

设备像素比适配

帧率无关动画

🎨 视觉效果特点
径向模糊特性
中心辐射：效果从光源位置向外扩散

光线拖尾：产生类似光线的长条状模糊

亮度渐变：从中心向外亮度逐渐衰减

颜色混合：与场景物体颜色进行混合

交互体验
实时调节：所有参数可即时调整并预览

效果对比：可随时启用/禁用效果进行对比

动画控制：可暂停/继续场景旋转

🔍 技术细节深度解析
径向模糊算法核心
javascript
// 伪代码表示径向模糊处理流程
for each pixel in output:
    color = black
    strength = 1.0
    samplePos = pixelPosition
    
    for i = 0 to sampleCount:
        // 向光源中心移动
        samplePos = moveTowardsCenter(samplePos)
        // 采样纹理颜色
        sampleColor = textureSample(samplePos)
        // 应用衰减和权重
        color += sampleColor * strength
        strength *= decay
    
    // 应用曝光并输出
    outputColor = color * exposure
实例化渲染优势
传统方式：100次绘制调用，100次状态切换

实例化方式：1次绘制调用，GPU自动处理实例变换

性能提升：10-100倍（取决于硬件和场景复杂度）

🛠️ 开发工具集成
调试支持
Three.js Inspector：内置场景调试器

GUI参数面板：实时效果调节

性能监控：帧率、绘制调用等

模块化管理
ES6模块：现代JavaScript模块系统

导入映射：简化模块路径管理

依赖分离：核心库、TSL、附加组件分离

📱 响应式设计
多设备适配
视口配置：移动设备友好

像素比适配：高DPI屏幕支持

窗口大小响应：自适应布局

性能自适应
采样数可调：根据设备性能调整质量

帧率稳定：时间差(delta time)确保动画一致性 -->


<!DOCTYPE html>
<!-- 文档类型声明，HTML5标准 -->
<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.0（100%）
			maximum-scale=1.0: 最大缩放比例为1.0（100%）
			这些设置确保页面在移动设备上正确显示，且保持固定比例
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 外部CSS样式表链接：引入页面样式 -->
		<!-- 
			type="text/css": 指定文件类型为CSS
			rel="stylesheet": 定义与当前文档的关系为样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>
		<!-- 页面主体开始 -->

		<!-- 
			信息显示区域：包含标题、描述和控制信息
			id="info": 用于CSS样式和JavaScript操作的唯一标识
		-->
		<div id="info">
			<!-- 
				Three.js官方Logo链接
				href: 链接到Three.js官网
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全属性，防止新页面访问原页面的window.opener属性
				class="logo-link": CSS类名，用于样式控制，可能包含背景图片显示Three.js logo
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器：用于组织标题元素的布局 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：可点击的Three.js链接
					同样在新标签页中打开Three.js官网
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：显示当前示例的具体名称 -->
				<span>径向模糊效果演示</span>
			</div>

			<!-- 
				示例描述文本：简要说明本示例的功能
				<small>标签：表示旁注或小号文字，通常用于次要信息
				描述内容：展示如何使用径向模糊技术模拟光线散射/光晕效果
			-->
			<small>使用径向模糊技术模拟光线散射和光晕效果</small>
		</div>

		<!-- 
			导入映射表：现代JavaScript模块导入系统的一部分
			type="importmap": 定义模块路径映射，允许使用简洁的模块名
			作用：将模块标识符映射到实际文件路径，简化import语句
		-->
		<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模块：包含所有Three.js WebGPU示例代码
			type="module": 标识这是一个ES6模块，支持模块化导入导出
		-->
		<script type="module">

			// ========== 模块导入部分 ==========
			
			// 导入Three.js WebGPU版本的核心库
			// * as THREE: 将所有导出内容作为THREE对象的属性
			import * as THREE from 'three/webgpu';
			
			// 从Three.js着色器语言(TSL)模块导入特定功能
			// float: TSL中的浮点数类型构造函数
			// int: TSL中的整数类型构造函数
			// pass: 创建渲染通道的函数，用于后处理管线
			// uniform: 创建着色器uniform变量的函数
			import { float, int, pass, uniform } from 'three/tsl';
			
			// 导入径向模糊效果函数
			// 这是一个预实现的TSL效果，用于创建径向模糊后处理效果
			import { radialBlur } from 'three/addons/tsl/display/radialBlur.js';
			
			// 导入调试检查器
			// Inspector: 用于创建GUI界面，实时调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量和参数配置 ==========
			
			// 控制参数对象：存储示例的可配置选项
			const params = {
				// 是否启用径向模糊效果
				// true: 启用，false: 禁用（显示原始场景）
				enabled: true,
				
				// 是否启用动画
				// true: 场景中的物体会旋转，false: 静止
				animated: true
			};

			// 全局变量声明（在init函数中初始化）
			let camera;          // 3D相机，定义视图和投影
			let scene;           // 3D场景，包含所有对象、灯光等
			let renderer;        // WebGPU渲染器，负责将3D场景渲染到2D屏幕
			let timer;           // 计时器对象，用于控制动画和时间相关计算
			let group;           // 包含所有四面体实例的组对象
			let postProcessing;  // 后处理对象，管理后处理效果管线

			// 程序入口：调用初始化函数
			init();

			// ========== 初始化函数（异步） ==========
			
			/**
			 * 异步初始化函数
			 * 负责设置整个Three.js场景、渲染器、物体、灯光和后处理效果
			 * async关键字：表示函数内部可能包含异步操作
			 */
			async function init() {

				// ========== 相机设置 ==========
				
				/**
				 * 创建透视投影相机
				 * 参数说明：
				 *   1. fov (45): 垂直视场角（度），决定相机能看到多少场景
				 *   2. aspect (window.innerWidth / window.innerHeight): 宽高比
				 *   3. near (0.1): 近裁剪面，距离相机多近的物体开始渲染
				 *   4. far (200): 远裁剪面，距离相机多远的物体停止渲染
				 * 
				 * 透视投影特点：近大远小，符合人眼视觉
				 */
				camera = new THREE.PerspectiveCamera( 
					45, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					200 
				);
				
				// 设置相机位置：沿Z轴正方向移动50个单位
				// 这样相机位于场景前方，可以观察到原点附近的物体
				camera.position.z = 50;

				// ========== 场景设置 ==========
				
				/**
				 * 创建3D场景
				 * 场景是所有3D对象（网格、灯光、相机等）的容器
				 * 类似于一个虚拟的3D舞台
				 */
				scene = new THREE.Scene();
				
				// 设置场景背景颜色为黑色（十六进制颜色代码）
				// 黑色背景使径向模糊的光线效果更加明显
				scene.background = new THREE.Color( 0x000000 );

				// ========== 计时器设置 ==========
				
				/**
				 * 创建Three.js计时器
				 * 用途：
				 *   1. 提供精确的时间测量
				 *   2. 计算帧与帧之间的时间差（delta time）
				 *   3. 确保动画在不同刷新率的设备上保持一致性
				 */
				timer = new THREE.Timer();

				// ========== 光照系统设置 ==========

				/**
				 * 创建半球光（环境光）
				 * 半球光模拟天空和地面的环境光照
				 * 参数说明：
				 *   1. skyColor (0xffffff): 天空颜色（白色）
				 *   2. groundColor (0x8d8d8d): 地面颜色（灰色）
				 * 效果：提供柔和的全局光照，减少阴影的硬边
				 */
				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
				
				// 设置半球光位置：Y轴正方向1000个单位（上方）
				hemiLight.position.set( 0, 1000, 0 );
				
				// 将半球光添加到场景中
				scene.add( hemiLight );

				/**
				 * 创建点光源（径向模糊的光源中心）
				 * 点光源从一个点向所有方向发射光线
				 * 参数说明：
				 *   1. color (0xffffff): 光源颜色（白色）
				 *   2. intensity (1000): 光照强度，值越大越亮
				 * 
				 * 注意：这个点光源位于原点(0,0,0)，也是径向模糊效果的中心点
				 * 径向模糊效果会以这个点为中心向外辐射
				 */
				const pointLight = new THREE.PointLight( 0xffffff, 1000 );
				
				// 设置点光源位置为原点(0,0,0)
				// 这是径向模糊效果的中心，所有光线从这个点向外散射
				pointLight.position.set( 0, 0, 0 );
				
				// 将点光源添加到场景中
				scene.add( pointLight );

				// ========== 场景物体创建 ==========

				/**
				 * 创建组对象
				 * 组是Object3D的子类，可以包含多个子对象
				 * 用途：将100个四面体实例组织在一起，方便整体操作（如旋转）
				 */
				group = new THREE.Group();

				/**
				 * 创建四面体几何体
				 * TetrahedronGeometry: 生成一个四面体（四个三角形的多面体）
				 * 四面体是最简单的多面体，由四个等边三角形组成
				 */
				const geometry = new THREE.TetrahedronGeometry();
				
				/**
				 * 创建标准网格材质
				 * MeshStandardMaterial: 基于物理的渲染(PBR)材质
				 * 参数说明：
				 *   flatShading: true - 启用平面着色
				 *     平面着色：每个多边形使用单一颜色，而不是平滑渐变
				 *     效果：产生面片化的外观，适合低多边形风格
				 */
				const material = new THREE.MeshStandardMaterial( { flatShading: true } );

				/**
				 * 创建实例化网格
				 * InstancedMesh: 高效渲染大量相同几何体的技术
				 * 优势：所有实例共享相同的几何体和材质，但可以有独立的变换矩阵和颜色
				 * 参数说明：
				 *   1. geometry: 共享的几何体（四面体）
				 *   2. material: 共享的材质
				 *   3. count (100): 实例数量，创建100个四面体
				 */
				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
				
				// 创建虚拟对象，用于计算每个实例的变换矩阵
				const dummy = new THREE.Object3D();
				
				// 创建颜色对象，用于设置每个实例的颜色
				const col = new THREE.Color();
				
				// 创建2D向量，用于检查实例是否太靠近原点
				const center = new THREE.Vector2();

				/**
				 * 循环设置每个实例的属性
				 * 为100个四面体实例分别设置位置、旋转、缩放和颜色
				 */
				for ( let i = 0; i < mesh.count; i ++ ) {

					// 1. 设置随机位置
					// Math.random()生成0-1之间的随机数
					// * 50 - 25 将范围转换为-25到25之间
					dummy.position.x = Math.random() * 50 - 25;
					dummy.position.y = Math.random() * 50 - 25;
					dummy.position.z = Math.random() * 50 - 25;

					// 2. 将3D位置转换为2D中心点（忽略Z轴）
					// 用于检查实例是否太靠近径向模糊中心（原点）
					center.set( dummy.position.x, dummy.position.y );

					// 3. 安全检查：确保四面体不在原点附近
					// 如果距离原点小于6个单位，需要调整位置
					// 目的：避免物体遮挡径向模糊的光源中心
					if ( center.length() < 6 ) {
						
						// 将实例向外推离到半径为6的圆上
						// normalize(): 将向量转换为单位向量（长度为1）
						// multiplyScalar(6): 将单位向量长度乘以6
						center.normalize().multiplyScalar( 6 );
						
						// 更新实例的X和Y坐标
						dummy.position.x = center.x;
						dummy.position.y = center.y;
					}

					// 4. 设置随机缩放
					// Math.random() * 2 + 1：生成1到3之间的随机数
					// setScalar：在所有轴上应用相同的缩放值（均匀缩放）
					dummy.scale.setScalar( Math.random() * 2 + 1 );

					// 5. 设置随机旋转
					// 每个轴旋转0到π弧度（0到180度）
					dummy.rotation.x = Math.random() * Math.PI;
					dummy.rotation.y = Math.random() * Math.PI;
					dummy.rotation.z = Math.random() * Math.PI;

					// 6. 更新变换矩阵并应用到实例
					// updateMatrix: 根据位置、旋转、缩放计算变换矩阵
					// setMatrixAt: 将变换矩阵存储到实例化网格的指定索引
					dummy.updateMatrix();
					mesh.setMatrixAt( i, dummy.matrix );

					// 7. 设置渐变色
					// HSL颜色模型：色相(H)、饱和度(S)、亮度(L)
					// 0.55 + (i / mesh.count) * 0.15：色相从0.55渐变到0.7
					// 1：最大饱和度，颜色鲜艳
					// 0.2：较低的亮度，颜色较暗
					col.setHSL( 0.55 + ( i / mesh.count ) * 0.15, 1, 0.2 );
					
					// 将颜色应用到当前实例
					mesh.setColorAt( i, col );

				}

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

				// ========== 渲染器设置 ==========

				/**
				 * 创建WebGPU渲染器
				 * WebGPURenderer: Three.js的WebGPU后端渲染器
				 * 特点：现代图形API，更好的性能和更低的CPU开销
				 */
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比
				// window.devicePixelRatio: 物理像素与CSS像素的比率
				// 高DPI屏幕（如Retina）上值大于1，确保渲染清晰
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 创建并附加调试检查器到渲染器
				// Inspector: 提供GUI界面，用于实时调整参数
				renderer.inspector = new Inspector();
				
				// 设置色调映射
				// NeutralToneMapping: 中性的色调映射算法
				// 作用：将HDR（高动态范围）颜色转换为显示器能显示的LDR范围
				renderer.toneMapping = THREE.NeutralToneMapping;
				
				// 将渲染器的canvas元素添加到页面body中
				// domElement: 渲染器对应的HTMLCanvasElement
				document.body.appendChild( renderer.domElement );

				// ========== 后处理管线设置 ==========

				/**
				 * 创建后处理对象
				 * PostProcessing: Three.js的后处理管理器
				 * 作用：将渲染结果传递给一系列后期效果进行处理
				 * 参数：renderer - 需要后处理的渲染器
				 */
				postProcessing = new THREE.PostProcessing( renderer );

				/**
				 * 创建场景渲染通道
				 * pass(): TSL函数，创建一个渲染通道
				 * 作用：将场景和相机绑定，创建一个可重用的渲染节点
				 * 这是后处理管线的输入：原始场景渲染结果
				 */
				const scenePass = pass( scene, camera );

				/**
				 * 创建径向模糊效果的参数uniform变量
				 * uniform(): TSL函数，创建着色器uniform变量
				 * uniform变量：在着色器中保持不变的值，可由CPU端设置
				 * 
				 * 参数说明：
				 * 1. weightUniform: 权重参数，控制模糊效果的强度
				 *    float(0.9): 创建浮点数0.9，初始权重为0.9
				 *    范围：0（无模糊）到1（最大模糊）
				 * 
				 * 2. decayUniform: 衰减参数，控制每次采样迭代的强度衰减
				 *    float(0.95): 初始衰减值0.95
				 *    范围：0（快速衰减）到1（缓慢衰减）
				 *    较高的值产生更长的光线拖尾效果
				 * 
				 * 3. exposureUniform: 曝光参数，控制最终效果的亮度
				 *    int(5): 创建整数5，初始曝光值为5
				 *    作用：将模糊效果乘以曝光值，增加亮度
				 * 
				 * 4. countUniform: 采样数量，影响模糊质量和性能
				 *    int(32): 初始采样数为32
				 *    每次径向模糊需要采样多个点，值越高效果越平滑，性能消耗越大
				 */
				const weightUniform = uniform( float( 0.9 ) );
				const decayUniform = uniform( float( 0.95 ) );
				const exposureUniform = uniform( int( 5 ) );
				const countUniform = uniform( int( 32 ) );

				/**
				 * 创建径向模糊通道
				 * radialBlur(): 导入的径向模糊效果函数
				 * 参数说明：
				 *   1. scenePass: 输入渲染通道（原始场景）
				 *   2. 配置对象：包含径向模糊的各种参数
				 * 
				 * 径向模糊原理：
				 *   1. 以点光源位置（原点）为中心
				 *   2. 从每个像素向中心方向采样多个点
				 *   3. 将这些采样点的颜色混合，产生光线散射效果
				 *   4. 模拟光线在介质（如雾气、灰尘）中的散射
				 */
				const blurPass = radialBlur( scenePass, { 
					weight: weightUniform,     // 模糊强度
					decay: decayUniform,       // 衰减率
					count: countUniform,       // 采样次数
					exposure: exposureUniform  // 曝光度
				} );

				// 设置后处理管线的输出节点为径向模糊通道
				// 这意味着：场景渲染 → 径向模糊处理 → 最终输出到屏幕
				postProcessing.outputNode = blurPass;

				// ========== 事件监听设置 ==========

				/**
				 * 窗口大小变化事件监听
				 * 当浏览器窗口大小改变时，调用onWindowResize函数
				 * 确保3D场景正确适应新的窗口尺寸
				 */
				window.addEventListener( 'resize', onWindowResize );

				// ========== GUI调试界面设置 ==========

				/**
				 * 创建GUI参数面板
				 * createParameters(): 在检查器中创建参数控制面板
				 * 'Settings': 面板标题
				 */
				const gui = renderer.inspector.createParameters( 'Settings' );
				
				// 添加权重参数控制滑块
				// add(): 向GUI添加一个可控制的参数
				// 参数说明：
				//   weightUniform.value: 控制uniform变量的值
				//   0, 1: 滑块的最小值和最大值
				//   'weight': 在GUI中显示的名称
				gui.add( weightUniform, 'value', 0, 1 ).name( '权重' );
				
				// 添加衰减参数控制滑块
				gui.add( decayUniform, 'value', 0, 1 ).name( '衰减率' );
				
				// 添加采样数量控制滑块
				// 参数说明：
				//   16, 64: 滑块范围从16到64
				//   1: 步长，每次增减1
				gui.add( countUniform, 'value', 16, 64, 1 ).name( '采样数量' );
				
				// 添加曝光参数控制滑块
				gui.add( exposureUniform, 'value', 1, 10 ).name( '曝光度' );
				
				// 添加启用/禁用径向模糊效果的开关
				// onChange(): 当开关状态改变时执行的回调函数
				gui.add( params, 'enabled' ).name( '启用径向模糊' ).onChange( ( value ) => {
					
					// 根据开关状态切换后处理输出节点
					if ( value === true ) {
						// 启用径向模糊：输出经过模糊处理的结果
						postProcessing.outputNode = blurPass;
					} else {
						// 禁用径向模糊：直接输出原始场景渲染结果
						postProcessing.outputNode = scenePass;
					}
					
					// 标记后处理管线需要更新
					// 当outputNode改变时，需要重新编译着色器或更新管线状态
					postProcessing.needsUpdate = true;
					
				} );
				
				// 添加动画启用/禁用开关
				gui.add( params, 'animated' ).name( '启用动画' );

			}

			// ========== 窗口大小变化处理函数 ==========
			
			/**
			 * 响应窗口大小变化的函数
			 * 当浏览器窗口被调整大小时自动调用
			 * 作用：保持3D渲染的正确比例和尺寸
			 */
			function onWindowResize() {
				
				// 更新相机的宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新相机投影矩阵
				 * 当相机参数（如宽高比）改变后，必须调用此方法
				 * 否则渲染会出现变形或比例错误
				 */
				camera.updateProjectionMatrix();

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

			// ========== 动画循环函数 ==========
			
			/**
			 * 每一帧调用的动画函数
			 * 由renderer.setAnimationLoop()设置为动画循环回调
			 * 每秒调用约60次（取决于显示器刷新率）
			 */
			function animate() {
				
				// 更新计时器
				// 记录当前时间，计算时间差
				timer.update();
				
				/**
				 * 获取时间差（delta time）
				 * 从上一帧到当前帧经过的时间（秒）
				 * 用途：实现帧率无关的动画
				 * 无论帧率高低，动画速度保持一致
				 */
				const delta = timer.getDelta();

				// 如果启用了动画，旋转场景中的物体组
				if ( params.animated === true ) {
					
					/**
					 * 绕Y轴旋转物体组
					 * 旋转速度：每帧旋转 delta * 0.1 弧度
					 * 由于delta通常约为1/60秒，所以每秒旋转约0.1弧度
					 * 产生缓慢、平滑的旋转效果
					 */
					group.rotation.y += delta * 0.1;
				}

				/**
				 * 执行后处理渲染
				 * postProcessing.render(): 执行完整的后处理管线
				 * 流程：
				 *   1. 使用原始相机渲染场景到纹理
				 *   2. 将纹理传递给径向模糊效果进行处理
				 *   3. 将处理结果输出到屏幕
				 * 
				 * 注意：这替代了传统的renderer.render(scene, camera)
				 * 因为所有渲染都通过后处理管线完成
				 */
				postProcessing.render();
			}

		</script>

	</body>
</html>