<!-- WebGPU并行归约算法演示系统 - 功能与技术点分析
🎯 整体功能
这是一个基于Three.js和WebGPU的并行归约算法可视化对比系统，主要功能包括：

1. 算法对比演示
双面板对比：左右两侧可独立选择不同的归约算法

实时性能统计：显示每个算法的执行时间和计算通道数

正确性验证：通过颜色高亮（绿色正确/红色错误）验证结果

多种显示模式：网格、对数、单值等多种数据可视化方式

2. 子组归约可视化
交互式动画：鼠标悬停展示subgroupAdd()操作过程

线程级模拟：用CSS动画模拟GPU线程的数据归约

原理教学：直观展示子组内并行计算的工作原理

3. 算法库实现
实现了5种不同优化级别的归约算法：

从最简单的二分归约到最优化的子组向量化归约

每种算法都有详细的实现注释和性能说明

🚀 主要技术点
1. WebGPU并行计算架构
核心特性：
工作组（Workgroup）：GPU调度的基本单位

子组（Subgroup）：硬件加速的SIMD执行单元

共享内存（Shared Memory）：工作组内线程通信

屏障同步（Barrier）：确保线程执行顺序

关键技术：
javascript
// 工作组共享内存
const tSum = workgroupArray('uint', workgroupSize);

// 子组硬件加速归约
total.assign(subgroupAdd(total));

// 工作组同步
workgroupBarrier();
2. 多层次归约策略
算法演进路径：
算法	技术特点	优化级别
算法0	朴素二分归约	基础级
算法1	线程累加归约	改进级
算法2	工作组共享内存归约	优化级
算法3	子组硬件加速归约	高效级
算法4	向量化+子组优化	最优级
关键技术实现：
向量化访问：使用uvec4一次处理4个元素

内存访问优化：合并内存访问，减少带宽压力

边界处理：安全处理非对齐数据大小

动态调度：根据数据大小动态计算工作组数量

3. Three.js TSL着色语言
创新应用：
计算着色器：使用TSL编写GPU计算内核

动态材质：根据显示模式动态切换着色器

统一变量：实时传递算法参数到GPU

javascript
// TSL函数定义示例
const pow2Ceil = Fn(([x]) => {
    // GPU端执行的2的幂对齐函数
    If(x.equal(uint(0)), () => { return uint(1); });
    const val = x.sub(1).toVar('val');
    // 位操作优化...
    return val.add(1);
});
4. 可视化渲染系统
多层次可视化：
CSS动画层：子组归约原理演示

WebGPU渲染层：算法结果可视化

GUI控制层：参数实时调整

显示模式：
网格模式：二维展示数据分布

对数模式：展示归约过程中的关键节点

单值模式：直接显示归约结果

工作组模式：显示中间结果分布

5. 状态机驱动的执行流程
javascript
// 三状态循环
状态循环: '运行算法' → '验证结果' → '重置数据'
           ↑______________________________|
每个状态执行不同的操作：

运行算法：执行选择的归约算法

验证结果：检查归约正确性并高亮显示

重置数据：恢复初始数据准备下一轮

6. 性能测量系统
javascript
// 时间戳查询
renderer.resolveTimestampsAsync(THREE.TimestampQuery.COMPUTE);

// 性能统计
`${renderer.info.compute.frameCalls}个计算通道，耗时${timestamp}毫秒`
7. 响应式交互设计
用户交互：
算法选择：左右侧独立选择对比算法

显示切换：实时切换数据可视化方式

参数调整：通过GUI调整算法参数

调试工具：缓冲区查看、数据记录

自适应布局：
双屏对比：左右各占50%窗口宽度

响应式设计：适应不同屏幕尺寸

面板控制：底部固定演示面板

💡 核心技术亮点
1. 子组优化技术
硬件加速：利用GPU的subgroup指令集

减少同步：子组内免同步通信

向量化计算：单指令多数据流处理

2. 内存层次优化
text
全局内存 → 工作组共享内存 → 子组寄存器
      ↓           ↓              ↓
   高延迟      中等延迟        低延迟
   大容量      中等容量        小容量
3. 边界安全处理
javascript
// 安全的边界检查
const val = select(
    startThread.lessThan(uint(vecSize)),
    inputBuffer.element(startThread),
    uvec4(0)
).uniformFlow();
4. 动态调度策略
根据数据大小自动计算最佳工作组数量

处理任意大小的输入数据

支持非2的幂数据大小

🎓 教育价值
1. 并行计算概念教学
GPU并行执行模型

内存层次结构

同步与通信机制

2. 算法优化路径展示
从简单到复杂的优化路线图：

text
朴素实现 → 内存优化 → 并行优化 → 硬件特性利用
3. 可视化学习工具
直观展示算法执行过程

实时性能对比

错误检测和调试

4. 现代WebGPU编程
WebGPU API实践

计算着色器编写

高性能Web图形应用开发

🔧 技术栈总结
技术领域	使用技术	主要用途
图形API	WebGPU	GPU计算和渲染
框架	Three.js + TSL	3D渲染和着色器
并行计算	WGSL计算着色器	算法GPU实现
可视化	CSS动画 + Canvas	多层级可视化
UI控制	lil-gui	参数交互控制
响应式	CSS Flex/Grid	自适应布局 -->


<html lang="zh-CN">
	<head>
		<title>Three.js WebGPU - 并行归约算法演示与性能对比</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

	<style>
		/* 
		 * 归约算法演示面板样式
		 * 位于页面底部，展示GPU子组归约算法的可视化效果
		 */
		#reduction-panel {
			background-color: #111;          /* 深色背景 */
			width: 100%;                     /* 全宽 */
			display: flex;                   /* 弹性布局 */
			position: fixed;                 /* 固定定位 */
			height: auto;                    /* 自动高度 */
			bottom: 0px;                     /* 贴底 */
			z-index: 99;                     /* 较高层级，确保在最前 */
			flex-direction: column;          /* 垂直排列 */
			justify-content: center;         /* 垂直居中 */
			align-items: center;             /* 水平居中 */
			border-left: 2px solid #222;     /* 左侧边框 */
			text-align: center;              /* 文本居中 */
		}

		/* 面板标题样式 */
		#panel-title {
			width: fit-content;              /* 根据内容自适应宽度 */
		}

		/* 线程行布局 - 水平排列多个线程 */
		.thread-row {
			display: flex;                   /* 弹性布局 */
			flex-direction: row;             /* 水平方向 */
			align-items: center;             /* 垂直居中 */
			margin: 4px 0;                   /* 上下边距 */
			position: relative;              /* 相对定位 */
		}

		/* 单个线程显示块基础样式 */
		.thread {
			width: 16px;                     /* 固定宽度 */
			height: 16px;                    /* 固定高度 */
			background-color: #444;          /* 默认背景色 */
			margin-right: 2px;               /* 右侧间距 */
			transition: background-color 0.5s, transform 0.5s; /* 过渡动画 */
		}

		/* 归约阶段显示容器 */
		.stage-display {
			display: flex;                   /* 弹性布局 */
			flex-direction: column;          /* 垂直排列 */
			justify-content: center;         /* 垂直居中 */
			margin-bottom: 5px;              /* 底部边距 */
		}

		/* 阶段标签样式 */
		.stage-label {
			font-size: 1.2em;                /* 字体大小 */
			color: #aaa;                     /* 浅灰色 */
			font-style: bold;                /* 粗体 */
			margin-top: 6px;                 /* 上边距 */
			margin-bottom: 20px;             /* 下边距 */
		}

		/* 改进后的线程样式 - 显示数值 */
		.thread {
			display: flex;                   /* 弹性布局 */
			justify-content: center;         /* 水平居中 */
			align-items: center;             /* 垂直居中 */
			width: 40px;                     /* 宽度 */
			height: 40px;                    /* 高度 */
			margin: 2px;                     /* 边距 */
			border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明白色边框 */
			border-radius: 4px;              /* 圆角 */
			background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2)); /* 渐变背景 */
			box-shadow: inset 0 0 2px rgba(255,255,255,0.1); /* 内阴影 */
			font-family: monospace;          /* 等宽字体 */
			color: white;                    /* 白色文字 */
		}

		/* 线程内部数据显示样式 */
		.thread_data {
			display: block;                  /* 块级显示 */
			max-width: 100%;                 /* 最大宽度 */
			padding: 0 2px;                  /* 左右内边距 */
			white-space: nowrap;             /* 不换行 */
			overflow: hidden;                /* 溢出隐藏 */
			text-overflow: ellipsis;         /* 文本溢出显示省略号 */
			font-size: clamp(8px, 2vw, 14px); /* 响应式字体大小 */
			text-align: center;              /* 文本居中 */
		}

		/* 子组（subgroup）容器样式 */
		.subgroup {
			display: flex;                   /* 弹性布局 */
			position: relative;              /* 相对定位，用于伪元素定位 */
			margin-left: 10px;               /* 左外边距 */
			margin-right: 10px;              /* 右外边距 */
		}

		/* 子组操作标签（subgroupAdd()）伪元素样式 */
		.subgroup::before {
			content: "subgroupAdd()";        /* 显示子组归约操作名称 */
			position: absolute;              /* 绝对定位 */
			top: -20px;                      /* 位于元素上方 */
			opacity: 0;                      /* 初始完全透明（隐藏） */
			z-index: 100;                    /* 较高层级 */
			transition: opacity 0.5s ease;   /* 透明度过渡动画 */
			font-weight: bold;               /* 粗体 */
			color: white;                    /* 白色 */
			width: 100%;                     /* 全宽 */
		}

		/* 子组范围标签伪元素样式 */
		.subgroup::after {
			content: attr(data-label);       /* 从data-label属性获取内容 */
			position: absolute;              /* 绝对定位 */
			bottom: -20px;                   /* 位于元素下方 */
			opacity: 1;                      /* 完全显示 */
			z-index: 100;                    /* 较高层级 */
			color: gray;                     /* 灰色 */
			width: 100%;                     /* 全宽 */
		}

		/* 归约阶段容器 */
		.reduction-stage {
			margin-bottom: 20px;             /* 底部外边距 */
		}

		/* 
		 * 标签吸收动画关键帧
		 * 用于演示subgroupAdd()操作时的视觉反馈
		 */
		@keyframes labelAbsorb {
			0% {
				opacity: 0;                  /* 完全透明 */
				transform: translateY(-50%); /* 向上偏移50% */
			}
			40% {
				opacity: 1;                  /* 完全显示 */
				transform: translateY(0%);   /* 回到原位 */
			}
			60% {
				opacity: 1;                  /* 保持显示 */
				transform: translateY(0%);   /* 保持原位 */
			}
			80% {
				opacity: 1;                  /* 保持显示 */
				transform: translate(0%, -20%); /* 轻微上移 */
			}
			100% {
				opacity: 0;                  /* 完全透明 */
				transform: translate(0%, 100%); /* 向下移动并消失 */
			}
		}

		/* 动画激活状态下的子组样式 */
		.subgroup.anim::before {
			opacity: 0;                      /* 初始透明 */
			animation-name: labelAbsorb;     /* 应用关键帧动画 */
			animation-duration: 1.5s;        /* 动画时长1.5秒 */
			transition: transform 0.6s ease-out, opacity 0.3s ease-in 0.3s; /* 过渡效果 */
		}
	</style>

		<!-- 
		 * 页面信息显示区域
		 * 展示Three.js链接、示例说明和参考来源
		 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js 官网</a>
			<br /> 本示例演示了多种并行归约算法的性能对比与实现原理。
			<br /> 参考实现基于以下书籍和代码库中的CUDA/WGSL代码翻译而来：
			<br /> 算法0-2: <a href="https://www.cambridge.org/core/books/programming-in-parallel-with-cuda/C43652A69033C25AD6933368CDBE084C"><i>《使用CUDA进行并行编程》</i></a> 作者：<a href="https://people.bss.phy.cam.ac.uk/~rea1/">Richard Ansorge</a>
			<br /> 算法3: <a href="https://github.com/frost-beta/betann/blob/main/betann/wgsl/reduce_all.wgsl"><i>betann reduce_all 内核</i></a> 作者：<a href="https://github.com/zcbenz">zcbenz</a>
			<br /> 算法4: <a href="https://github.com/b0nes164/GPUPrefixSums/blob/main/GPUPrefixSumsWebGPUapis/SharedShaders/rts.wgsl"><i>GPUPrefixSums 归约方法</i></a> 作者：<a href="https://github.com/b0nes164">b0nes164</a>
			
			<!-- 左侧显示面板 - 用于展示算法性能和状态信息 -->
			<div id="left_side_display" style="position: absolute;top: 150px;left: 0;padding: 10px;background: rgba( 0, 0, 0, 0.5 );color: #fff;font-family: monospace;font-size: 12px;line-height: 1.5;pointer-events: none;text-align: left;">
				<!-- 左侧GPU归约算法性能信息将动态显示在这里 -->
			</div>
			
			<!-- 右侧显示面板 - 用于展示算法性能和状态信息 -->
			<div id="right_side_display" style="position: absolute;top: 150px;right: 0;padding: 10px;background: rgba( 0, 0, 0, 0.5 );color: #fff;font-family: monospace;font-size: 12px;line-height: 1.5;pointer-events: none;text-align: left;">
				<!-- 右侧GPU归约算法性能信息将动态显示在这里 -->
			</div>
		</div>

		<!-- 
		 * 子组归约算法演示面板
		 * 可视化展示GPU子组归约的工作原理
		 -->
		<div id="reduction-panel">
			<h3 id="panel-title" style="flex: 0 0 auto;">子组归约算法原理演示</h3>
			<div class="reduction-stage" id="subgroup-reduction-stage">
    			<!-- 说明文字：提示用户鼠标悬停查看动画效果 -->
    			<div class="stage-label">使用 subgroupAdd() 函数捕获每个工作组的子组归约结果（鼠标悬停查看动画效果）</div>
				<div class="stage-display">
					<!-- 工作组线程可视化区域 -->
					<div id="workgroup_threads" style="display: flex; justify-content: center; margin-bottom: 20px;">
						<!-- 工作组线程将动态生成在这里 -->
					</div>
					<!-- 子组归约结果可视化区域 -->
					<div id="subgroup_reduction" style="display: flex; justify-content: center; margin-bottom: 5px;">
						<!-- 子组归约结果将动态显示在这里 -->
					</div>
				</div>
			</div>
		</div>

		<!-- 
		 * 导入映射配置 (Import Map)
		 * 定义模块导入的路径映射关系
		 * 这是现代JavaScript模块系统的配置，用于浏览器中的ES模块导入
		 -->
		<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模块
		 * 包含所有的GPU归约算法实现、可视化逻辑和交互控制
		 * type="module" 表示这是一个ES6模块，支持import/export语法
		 -->
		<script type="module">
			// ===================================================================
			// 导入依赖模块
			// ===================================================================
			
			// 导入Three.js的WebGPU版本和相关模块
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色语言（TSL）的函数和类型
			// TSL是Three.js的着色器语言，用于编写GPU着色器和计算着色器
			import { 
				instancedArray,      // 创建实例化数组缓冲区的函数
				Loop,                // 循环控制结构
				If,                  // 条件判断结构
				vec3,                // 三维向量类型
				dot,                 // 点积运算
				clamp,               // 钳制函数（限制数值范围）
				storage,             // 存储缓冲区声明
				uvec4,               // 无符号四维整数向量
				subgroupAdd,         // 子组内加法归约函数（硬件加速）
				uniform,             // 统一变量声明
				uv,                  // UV坐标
				uint,                // 无符号整数类型
				float,               // 浮点数类型
				Fn,                  // 函数定义
				vec2,                // 二维向量
				invocationLocalIndex, // 调用局部索引（工作组内线程索引）
				invocationSubgroupIndex, // 调用子组索引（子组内线程索引）
				uvec2,               // 无符号二维整数向量
				floor,               // 向下取整
				instanceIndex,       // 实例索引
				workgroupId,         // 工作组ID
				workgroupBarrier,    // 工作组屏障（同步工作组内所有线程）
				workgroupArray,      // 工作组共享数组
				subgroupSize,        // 子组大小（硬件决定）
				select,              // 选择函数（类似三元运算符）
				countTrailingZeros   // 计算尾部零位数
			} from 'three/tsl';

			// 导入WebGPU能力检测模块
			import WebGPU from 'three/addons/capabilities/WebGPU.js';

			// 导入GUI库（lil-gui）用于创建控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ===================================================================
			// 全局变量和常量定义
			// ===================================================================
			
			// 获取时间戳显示元素的引用
			// 这些元素用于显示左右两侧GPU计算的性能信息
			const timestamps = {
				left_side_display: document.getElementById( 'left_side_display' ),
				right_side_display: document.getElementById( 'right_side_display' )
			};

			/**
			 * 向上取整的除法函数
			 * 用于计算所需的工作组数量或线程数量
			 * 例如：如果有1025个元素，工作组大小为256，则需要5个工作组
			 * 
			 * @param {number} size - 总元素数量
			 * @param {number} part_size - 每个部分的大小（如工作组大小）
			 * @returns {number} 向上取整后的部分数量
			 */
			const divRoundUp = ( size, part_size ) => {
				// 公式：(size + part_size - 1) // part_size
				// 这是计算向上取整除法的常用技巧
				return Math.floor( ( size + part_size - 1 ) / part_size );
			};

			// ===================================================================
			// 子组归约可视化部分（CSS/HTML可视化）
			// ===================================================================
			
			// 可视化参数配置（与实际的GPU参数无关，仅用于界面演示）
			const cssSubgroupSize = 4;      // CSS可视化中的子组大小（模拟值）
			const cssWorkgroupSize = 16;    // CSS可视化中的工作组大小（模拟值）

			// 获取DOM元素引用
			const workgroupThreadsContainer = document.getElementById( 'workgroup_threads' );
			const subgroupReductionContainer = document.getElementById( 'subgroup_reduction' );

			// 更新面板标题，显示模拟的子组和工作组大小
			document.getElementById( 'panel-title' ).textContent += ` (子组大小: ${cssSubgroupSize}, 工作组大小: ${cssWorkgroupSize})`;

			/**
			 * 创建带数据的线程元素
			 * 用于在网页上可视化显示GPU线程及其数据
			 * 
			 * @param {string|number} data - 线程显示的数据值
			 * @returns {HTMLElement} 创建好的线程DOM元素
			 */
			const createThreadWithData = ( data ) => {
				// 创建线程容器div
				const threadEle = document.createElement( 'div' );
				threadEle.className = 'thread';  // 应用线程样式
				
				// 创建数据展示span
				const threadData = document.createElement( 'span' );
				threadData.textContent = data;   // 设置显示内容（使用textContent更安全）
				threadData.className = 'thread_data';  // 应用数据样式
				
				// 将数据span添加到线程容器
				threadEle.append( threadData );
				
				return threadEle;
			};

			// 存储线程和子组的引用，用于后续动画控制
			const workgroupThreads = [];      // 所有线程元素的数组
			const initialSubgroups = [];      // 所有子组容器的数组
			const initialData = [];           // 每个线程的初始数据值
			let currentSubgroupDiv = null;    // 当前正在处理的子组容器
			
			// 初始化线程和子组可视化
			for ( let i = 0; i < cssWorkgroupSize; i ++ ) {
				// 每cssSubgroupSize个线程创建一个新的子组
				if ( i % cssSubgroupSize === 0 ) {
					// 计算当前子组的索引
					const currentSubgroupIndex = Math.floor( i / cssSubgroupSize );

					// 创建子组归约结果显示元素
					// 这个元素将显示该子组所有线程数据的总和
					const subgroupReductionThread = createThreadWithData( 0 );
					subgroupReductionThread.id = `subgroup_reduction_element_${currentSubgroupIndex}`;
					subgroupReductionContainer.appendChild( subgroupReductionThread );

					// 创建子组容器div
					currentSubgroupDiv = document.createElement( 'div' );
					currentSubgroupDiv.className = 'subgroup';  // 应用子组样式
					
					// 设置子组标签，显示线程范围
					// 例如："Threads 0-3" 表示包含线程0到3
					currentSubgroupDiv.setAttribute( 'data-label', `线程 ${currentSubgroupIndex * cssSubgroupSize}-${( currentSubgroupIndex + 1 ) * cssSubgroupSize - 1}` );
					
					// 保存子组引用并添加到容器
					initialSubgroups.push( currentSubgroupDiv );
					workgroupThreadsContainer.appendChild( currentSubgroupDiv );
				}

				// 为每个线程生成随机数据（1到9之间）
				const data = Math.floor( Math.random() * 9 ) + 1;
				initialData.push( data );  // 保存初始数据
				
				// 创建线程元素并添加到当前子组
				const thread = createThreadWithData( data );
				workgroupThreads.push( thread );  // 保存线程引用
				currentSubgroupDiv.appendChild( thread );  // 添加到子组容器
			}

			/**
			 * 停用标签动画
			 * 移除动画类并重置显示值
			 * 
			 * @param {HTMLElement} subgroupDiv - 子组DOM元素
			 * @param {number} idx - 子组索引
			 */
			const deactivateLabelAnimation = ( subgroupDiv, idx ) => {
				// 移除动画类，停止动画
				subgroupDiv.classList.remove( 'anim' );

				// 获取对应的子组归约结果显示元素
				const subgroupReductionBufferElement = document.getElementById( `subgroup_reduction_element_${idx}` ).querySelector( '.thread_data' );

				// 重置显示值为0
				subgroupReductionBufferElement.innerHTML = 0;
			};

			/**
			 * 激活标签动画
			 * 启动子组归约动画并计算显示总和
			 * 
			 * @param {HTMLElement} subgroupDiv - 子组DOM元素
			 * @param {number} idx - 子组索引
			 */
			const activateLabelAnimation = ( subgroupDiv, idx ) => {
				// 获取子组内的所有线程元素
				const threads = Array.from( subgroupDiv.children );
				let total = 0;  // 子组内所有线程数据的累加和

				// 计算子组内所有线程数据的累加和
				for ( let i = idx * cssSubgroupSize; i < idx * cssSubgroupSize + cssSubgroupSize; i ++ ) {
					total += initialData[ i ];
				}

				// 添加动画类，启动CSS动画
				subgroupDiv.classList.add( 'anim' );

				// 延迟1秒后更新显示（等待动画进行到一半）
				setTimeout( () => {
					// 更新子组内每个线程的显示值
					// 模拟subgroupAdd()操作后，所有线程都获得相同的总和
					threads.forEach( t => {
						t.querySelector( '.thread_data' ).textContent = total;
					} );

					// 更新子组归约结果区域的显示
					const subgroupReductionBufferElement = document.getElementById( `subgroup_reduction_element_${idx}` ).querySelector( '.thread_data' );
					subgroupReductionBufferElement.innerHTML = total;

				}, 1000 );  // 1秒延迟，与动画时间配合

				// 动画结束后移除动画类，以便可以再次触发
				setTimeout( () => {
					subgroupDiv.classList.remove( 'anim' );
				}, 1500 );  // 1.5秒后移除，匹配CSS动画时长
			};

			// 添加鼠标事件监听器，实现交互式动画演示
			
			// 鼠标进入演示区域时，激活所有子组的动画
			document.getElementById( 'subgroup-reduction-stage' ).addEventListener( 'mouseenter', () => {
				initialSubgroups.forEach( ( subgroupDiv, idx ) => {
					activateLabelAnimation( subgroupDiv, idx );
				} );
			} );

			// 鼠标离开演示区域时，停用所有子组的动画并恢复原始数据
			document.getElementById( 'subgroup-reduction-stage' ).addEventListener( 'mouseleave', () => {
				initialSubgroups.forEach( ( subgroupDiv, idx ) => {
					deactivateLabelAnimation( subgroupDiv, idx );
				} );

				// 恢复所有线程的原始数据值
				workgroupThreads.forEach( ( thread, idx ) => {
					thread.querySelector( '.thread_data' ).textContent = initialData[ idx ];
				} );
			} );

			// ===================================================================
			// WebGPU环境检测和初始化
			// ===================================================================
			
			// 检查WebGPU是否可用
			if ( WebGPU.isAvailable() === false ) {
				// 如果不支持WebGPU，显示错误信息并抛出异常
				document.body.appendChild( WebGPU.getErrorMessage() );
				throw new Error( '浏览器不支持WebGPU' );
			}

			// ===================================================================
			// 算法参数和配置
			// ===================================================================
			
			// 数据规模配置
			const size = 262144;                    // 总元素数量：2^18 = 262144
			const vecSize = divRoundUp( size, 4 );  // 向量化后的尺寸（每个vec4包含4个元素）
			const gridDim = Math.sqrt( size );      // 网格显示尺寸（用于二维可视化）
			
			// 最大工作组大小（初始设为64，实际值将从GPU设备获取）
			let maxWorkgroupSize = 64;

			// 归约算法列表（按性能从低到高排序）
			const algorithms = [
				'Reduce 0 (N/2)',                // 算法0：基础二分归约
				'Reduce 1 (朴素累加)',           // 算法1：朴素累加归约
				'Reduce 2 (工作组归约)',         // 算法2：工作组级归约
				'Reduce 3 (子组归约)',           // 算法3：子组级归约
				'Reduce 4 (优化子组归约)',       // 算法4：优化子组归约
				'错误基线（对比用）',             // 错误基线：用于验证正确性检查
			];

			// 数据显示模式
			const displayModes = [ 
				'输入网格',       // 模式1：二维网格显示输入数据
				'输入对数视图',   // 模式2：对数刻度显示数据
				'元素0值',       // 模式3：只显示第一个元素的值（归约结果）
				'工作组和网格'    // 模式4：显示工作组累加和网格
			];

			// ===================================================================
			// 效果控制器（控制面板参数）
			// ===================================================================
			
			/**
			 * 统一效果控制器
			 * 包含左右两侧显示共享的参数
			 */
			const unifiedEffectController = {
				gridElementWidth: uniform( gridDim ),      // 网格元素宽度（着色器uniform）
				gridElementHeight: uniform( gridDim ),     // 网格元素高度（着色器uniform）
				gridDisplayWidth: uniform( gridDim ),      // 网格显示宽度（着色器uniform）
				gridDisplayHeight: uniform( gridDim ),     // 网格显示高度（着色器uniform）
				'显示模式': '输入对数视图',               // 当前显示模式
				loggedBuffer: '输入缓冲区',               // 控制台要记录的缓冲区
				elementsReduced: size,                    // 已归约元素数量
			};

			/**
			 * 左侧效果控制器
			 * 控制左侧显示的算法和状态
			 */
			const leftEffectController = {
				algo: 'Reduce 0 (N/2)',        // 当前选择的算法
				highlight: uniform( 0 ),       // 高亮标记（用于验证模式）
				currentAlgo: uniform( 0 ),     // 当前算法索引（着色器uniform）
				state: '运行算法',             // 当前状态：运行算法/验证/重置
				displayMode: '输入对数视图',   // 显示模式
				numThreadsDispatched: uniform( size / 2 ), // 分发的线程数（算法0专用）
			};

			/**
			 * 右侧效果控制器
			 * 控制右侧显示的算法和状态（默认使用最优算法）
			 */
			const rightEffectController = {
				algo: 'Reduce 4 (优化子组归约)',  // 默认使用最高效的算法
				currentAlgo: uniform( 3 ),      // 对应算法3（实际是算法4，但索引可能不同）
				highlight: uniform( 0 ),        // 高亮标记
				displayMode: '元素0值',        // 显示模式：直接显示归约结果
				state: '运行算法',              // 当前状态
				numThreadsDispatched: uniform( size / 2 ) // 分发的线程数
			};

			// ===================================================================
			// 材质和显示节点
			// ===================================================================
			
			// 创建左右两侧的材质（使用NodeMaterial支持TSL着色器）
			const leftMaterial = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } );
			const rightMaterial = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } );
			
			// 存储左右两侧的显示节点（不同显示模式对应的着色器）
			const leftDisplayColorNodes = {};
			const rightDisplayColorNodes = {};

			// ===================================================================
			// GUI控制面板创建
			// ===================================================================
			
			// 创建GUI控制面板实例
			const gui = new GUI();

			// 算法选择控制
			gui.add( leftEffectController, 'algo', algorithms ).onChange( () => {
				// 当左侧算法改变时，更新对应的uniform值
				leftEffectController.currentAlgo.value = algorithms.findIndex( val => val === leftEffectController.algo );
			} );

			gui.add( rightEffectController, 'algo', algorithms ).onChange( () => {
				// 当右侧算法改变时，更新对应的uniform值
				rightEffectController.currentAlgo.value = algorithms.findIndex( val => val === rightEffectController.algo );
			} );

			// 显示模式控制
			gui.add( leftEffectController, 'displayMode', displayModes ).name( '左侧显示模式' ).onChange( () => {
				// 更新左侧材质的着色器节点
				leftMaterial.colorNode = leftDisplayColorNodes[ leftEffectController.displayMode ];
				leftMaterial.needsUpdate = true;  // 标记材质需要更新
			} );
			
			gui.add( rightEffectController, 'displayMode', displayModes ).name( '右侧显示模式' ).onChange( () => {
				// 更新右侧材质的着色器节点
				rightMaterial.colorNode = rightDisplayColorNodes[ rightEffectController.displayMode ];
				rightMaterial.needsUpdate = true;  // 标记材质需要更新
			} );

			// 调试面板文件夹
			const debugFolder = gui.addFolder( '调试选项' );
			
			// 已归约元素数量显示（只读）
			const elementsReducedController = debugFolder.add( unifiedEffectController, 'elementsReduced' ).name( '已归约元素' );
			elementsReducedController.disable();  // 禁用编辑
			
			// 状态显示（只读）
			const stateLeftController = debugFolder.add( leftEffectController, 'state' ).name( '左侧状态' );
			const stateRightController = debugFolder.add( rightEffectController, 'state' ).name( '右侧状态' );
			stateLeftController.disable();  // 禁用编辑
			stateRightController.disable(); // 禁用编辑
			
			// 缓冲区记录选择
			debugFolder.add( unifiedEffectController, 'loggedBuffer', [ '输入缓冲区', '输入向量化缓冲区', '工作组和缓冲区', '调试缓冲区' ] ).name( '记录缓冲区' );
			
			debugFolder.close();  // 默认关闭调试面板

			// ===================================================================
			// 辅助函数定义
			// ===================================================================
			
			/**
			 * pow2Ceil函数 - 计算不小于x的最小2的幂
			 * 这是一个TSL函数，将在GPU着色器中执行
			 * 用于将工作组大小对齐到2的幂，便于二叉树归约
			 * 
			 * 算法原理：通过位操作将最高位1之后的所有位都设为1，然后加1
			 * 例如：x=5 (0101) -> val=7 (0111) -> 返回8 (1000)
			 */
			const pow2Ceil = Fn( ( [ x ] ) => {
				// 特殊情况处理：如果x为0，返回1
				If( x.equal( uint( 0 ) ), () => {
					return uint( 1 );
				} );

				// 核心算法：将x-1的最高位1之后的所有位都设置为1
				const val = x.sub( 1 ).toVar( 'val' );
				
				// 通过一系列右移和位或操作，填充所有低位
				val.assign( val.bitOr( val.shiftRight( 1 ) ) );   // 填充1位
				val.assign( val.bitOr( val.shiftRight( 2 ) ) );   // 填充2位
				val.assign( val.bitOr( val.shiftRight( 4 ) ) );   // 填充4位
				val.assign( val.bitOr( val.shiftRight( 8 ) ) );   // 填充8位
				val.assign( val.bitOr( val.shiftRight( 16 ) ) );  // 填充16位
				
				// 加1得到2的幂
				return val.add( 1 );
			} ).setLayout( {
				name: 'pow2Ceil',           // 函数名称
				type: 'uint',               // 返回类型：无符号整数
				inputs: [
					{ name: 'x', type: 'uint' }  // 输入参数：无符号整数x
				]
			} );

			// ===================================================================
			// 归约算法实现
			// ===================================================================
			
			// ------------------------- 算法1：朴素累加归约 -------------------------
			/**
			 * 算法1：朴素累加归约
			 * 特点：每个线程累加多个分散的元素，存在内存访问不连续问题
			 * 性能：中等，适用于简单场景
			 * 
			 * 执行流程：
			 * 1. 每个线程计算自己负责的多个元素的总和
			 * 2. 将结果写回缓冲区
			 * 3. 需要多轮归约才能得到最终结果
			 */
			const createReduce1Fn = ( createReduce1FnProps ) => {
				// 解构参数
				const { dispatchSize, numElements, inputBuffer, workgroupSize } = createReduce1FnProps;

				// 定义TSL计算着色器函数
				const fnDef = Fn( () => {
					// 声明变量：dispatch大小（线程间隔）
					const dispatch = uint( dispatchSize ).toVar( 'dispatchSize' );
					const tSum = uint( 0 ).toVar();  // 线程局部累加和
					const k = instanceIndex.toVar( 'k' );  // 起始索引

					// 循环累加：每个线程处理多个元素
					Loop( k.lessThan( uint( numElements ) ), ( ) => {
						// 累加当前元素值
						tSum.addAssign( inputBuffer.element( k ) );
						// 跳转到下一个由该线程负责的元素
						k.addAssign( uint( dispatch ) );
					} );

					// 将累加结果写回缓冲区
					inputBuffer.element( instanceIndex ).assign( tSum );
				} )().compute( dispatchSize, [ workgroupSize ] );  // 配置计算调度

				return fnDef;
			};

			// ------------------------- 算法2：工作组归约 -------------------------
			/**
			 * 算法2：工作组归约
			 * 特点：使用工作组共享内存，减少全局内存访问
			 * 性能：较好，利用了GPU的层次化内存体系
			 * 
			 * 执行流程：
			 * 1. 每个线程累加分散元素到共享内存
			 * 2. 在工作组内进行二叉树归约
			 * 3. 第一个线程写入工作组结果
			 */
			const createReduce2Fn = ( createReduce2FnProps ) => {
				const { workgroupSize, dispatchSize, numElements, inputBuffer } = createReduce2FnProps;

				const fnDef = Fn( () => {
					// 创建工作组共享内存数组
					// 每个线程在共享内存中有一个位置
					const tSum = workgroupArray( 'uint', workgroupSize );

					const k = instanceIndex.toVar( 'k' );
					// 初始化共享内存位置为0
					tSum.element( invocationLocalIndex ).assign( uint( 0 ) );

					// 第一阶段：每个线程累加分散的元素
					Loop( k.lessThan( uint( numElements ) ), () => {
						// 累加到共享内存
						tSum.element( invocationLocalIndex ).addAssign( inputBuffer.element( k ) );
						// 跳转到下一个元素
						k.addAssign( uint( dispatchSize ) );
					} );

					// 工作组屏障：确保所有线程完成第一阶段
					workgroupBarrier();

					// 第二阶段：工作组内二叉树归约
					// 计算归约的起始跨度（对齐到2的幂）
					k.assign( pow2Ceil( uint( workgroupSize ) ).div( 2 ) );
					
					Loop( k.greaterThan( 0 ), () => {
						// 成对归约：前一半线程累加后一半线程的数据
						If( invocationLocalIndex.lessThan( k ).and( invocationLocalIndex.add( k ).lessThan( workgroupSize ) ), () => {
							tSum.element( invocationLocalIndex ).addAssign( tSum.element( invocationLocalIndex.add( k ) ) );
						} );
						
						// 每步后都需要同步
						workgroupBarrier();
						// 跨度减半，继续下一轮归约
						k.divAssign( 2 );
					} );

					// 第三阶段：第一个线程写入最终结果
					If( invocationLocalIndex.equal( uint( 0 ) ), () => {
						// 将工作组结果写入全局内存
						inputBuffer.element( workgroupId.x ).assign( tSum.element( uint( 0 ) ) );
					} );
				} )().compute( dispatchSize, [ workgroupSize ] );

				return fnDef;
			};

			// ------------------------- 子组数组创建函数 -------------------------
			/**
			 * 创建子组数组（工作组共享内存）
			 * 用于存储每个子组的归约结果
			 * 
			 * @param {string} type - 数据类型（如'uint'）
			 * @param {number} workgroupSize - 工作组大小
			 * @param {number} minSubgroupSize - 最小子组大小（默认4）
			 * @returns {*} TSL工作组数组对象
			 */
			const createSubgroupArray = ( type, workgroupSize, minSubgroupSize = 4 ) => {
				// 计算数组大小：工作组大小 / 最小子组大小
				// 每个子组在数组中有一个位置
				return workgroupArray( 'uint', workgroupSize / minSubgroupSize );
			};

			// ------------------------- 行归约函数 -------------------------
			/**
			 * 行归约函数（基于zcbenz的实现）
			 * 特点：按行处理数据，支持向量化操作
			 * 用于算法3和4的第一阶段
			 * 
			 * @param {Object} rowReduceProps - 行归约参数
			 */
			const RowReduce = ( rowReduceProps ) => {
				const { workgroupSize, inputBuffer, total, rowOffset, currentRowSize, workPerThread, vectorized } = rowReduceProps;

				// 计算每个工作组处理的块大小
				// workPerThread：每个线程处理的元素数量
				const blockSize = uint( workgroupSize ).mul( workPerThread );
				const block = uint( 0 ).toVar( 'block' );

				// 计算需要处理的块数量
				const blockLimiter = currentRowSize.div( blockSize ).toVar( 'blockLimiter' );
				
				// 循环处理每个块
				Loop( block.lessThan( blockLimiter ), () => {
					// 计算当前块的偏移量
					const blockOffset = block.mul( blockSize );
					// 计算当前线程的起始位置
					const startThread = blockOffset.add( invocationLocalIndex.mul( workPerThread ) );
					const localThreadOffset = uint( 0 ).toVar( 'localThreadOffset' );
					
					// 每个线程处理workPerThread个元素
					Loop( localThreadOffset.lessThan( workPerThread ), () => {
						// 获取输入元素（vectorized参数决定如何访问）
						const inputElement = inputBuffer.element( rowOffset.add( startThread ).addLocal );

						if ( vectorized ) {
							// 向量化版本：输入是vec4，计算其所有分量的和
							// dot(uvec4(1), vec4) 相当于 vec4.x + vec4.y + vec4.z + vec4.w
							const value = dot( inputElement, uvec4( 1 ) );
							total.addAssign( value );
						} else {
							// 非向量化版本：直接累加标量值
							const inputElement = inputBuffer.element( rowOffset.add( startThread ).add( localThreadOffset ) );
							total.addAssign( inputElement );
						}

						// 处理下一个元素
						localThreadOffset.addAssign( 1 );
					} );

					// 处理下一个块
					block.addAssign( 1 );
				} );

				// 注意：此实现忽略了剩余元素的处理，假设数据大小是块大小的整数倍
			};

			// ------------------------- 工作组归约函数 -------------------------
			/**
			 * 工作组归约函数
			 * 特点：使用子组指令进行高效归约
			 * 用于算法3和4的第二阶段
			 * 
			 * @param {Object} workgroupReduceProps - 工作组归约参数
			 */
			const WorkgroupReduce = ( workgroupReduceProps ) => {
				const { total, workgroupSize } = workgroupReduceProps;

				// 创建子组共享内存数组
				// 用于存储每个子组的归约结果
				const subgroupSums = createSubgroupArray( 'uint', workgroupSize );

				// 第一步：子组内归约（使用硬件加速的subgroupAdd）
				// subgroupAdd是WGSL内置函数，在子组内高效求和
				total.assign( subgroupAdd( total ) );

				// 计算工作组内的子组数量
				const delta = uint( workgroupSize ).div( subgroupSize ).toVar( 'delta' );
				// 计算当前线程所在的子组在工作组内的索引
				const subgroupMetaRank = invocationLocalIndex.div( subgroupSize );

				// 第二步：跨子组合并（当有多个子组时）
				Loop( float( delta ).greaterThan( 1.0 ), () => {
					// 每个子组的第一个线程存储子组和到共享内存
					If( invocationSubgroupIndex.equal( 0 ), () => {
						subgroupSums.element( subgroupMetaRank ).assign( total );
					} );

					// 同步：确保所有子组都写入了共享内存
					workgroupBarrier();

					// 再次使用子组归约合并子组结果
					total.assign( select( invocationLocalIndex.lessThan( delta ), subgroupSums.element( invocationLocalIndex ), 0 ).uniformFlow() );
					total.assign( subgroupAdd( total ) );

					// 更新delta（剩余需要合并的子组数量）
					delta.divAssign( subgroupSize );
				} );
			};

			// ------------------------- 算法3：子组归约 -------------------------
			/**
			 * 算法3：子组归约（结合行归约和工作组归约）
			 * 特点：充分利用GPU的子组硬件特性
			 * 性能：优秀，是现代GPU推荐的做法
			 */
			const createReduce3Fn = ( createReduce3FnProps ) => {
				const { workgroupSize, workPerThread, inputBuffer, intermediateBuffer, rowSize } = createReduce3FnProps;

				const fnDef = Fn( () => {
					// 获取输入缓冲区的大小
					const inputSize = uint( inputBuffer.bufferCount.length );
					// 计算当前行在工作组中的偏移量
					const rowOffset = workgroupId.x.mul( rowSize );

					// 计算当前行的有效大小（处理边界情况）
					const currentRowSize = select(
						( rowOffset.add( rowSize ) ).greaterThan( inputSize ),  // 是否超出边界
						select( inputSize.greaterThan( rowOffset ), inputSize.sub( rowOffset ), 0 ).uniformFlow(), // 超出：计算剩余大小
						rowSize,  // 未超出：使用完整行大小
					).uniformFlow();

					// 线程局部累加和
					const total = uint( 0 ).toVar( 'total' );

					// 第一步：行归约（累加当前行内的元素）
					RowReduce( {
						inputBuffer: inputBuffer,
						total: total,
						rowOffset: rowOffset,
						currentRowSize: currentRowSize,
						workPerThread: workPerThread,
						workgroupSize: workgroupSize,
					} );

					// 第二步：工作组归约（使用子组加速）
					WorkgroupReduce( {
						total: total,
						workgroupSize: workgroupSize,
					} );

					// 第三步：存储结果（每个工作组一个结果）
					If( invocationLocalIndex.equal( 0 ), () => {
						intermediateBuffer.element( workgroupId.x ).assign( total );
					} );
				} )();

				return fnDef;
			};

			// ------------------------- 算法4：优化子组归约 -------------------------
			/**
			 * 算法4：优化子组归约（基于b0nes164的实现）
			 * 特点：使用vec4向量化和更优的子组处理策略
			 * 性能：最优，充分利用现代GPU架构
			 */
			const createReduce4Fn = ( props ) => {
				const { size, workPerThread, workgroupSize, inputBuffer, intermediateBuffer } = props;

				// 常量定义
				const ELEMENTS_PER_VEC4 = 4;  // 每个vec4包含4个元素
				
				// 计算每个工作组处理的元素数量
				const partitionSize = workgroupSize * workPerThread * ELEMENTS_PER_VEC4;
				// 向量化后的缓冲区大小
				const vecSize = divRoundUp( size, ELEMENTS_PER_VEC4 );
				// 计算所需的工作组数量
				const numWorkgroups = divRoundUp( size, partitionSize );
				// 计算总调用数（工作组数量 × 工作组大小）
				const numInvocations = numWorkgroups * workgroupSize;

				const fnDef = Fn( () => {
					// 创建子组归约数组（共享内存）
					const perSubgroupReductionArray = createSubgroupArray( 'uint', workgroupSize );

					// 计算当前线程所在的子组在工作组内的索引
					const subgroupMetaRank = invocationLocalIndex.div( subgroupSize );

					// 计算子组偏移量：考虑每个线程处理的多个子组
					const subgroupOffset = subgroupMetaRank.mul( subgroupSize ).mul( workPerThread );
					subgroupOffset.addAssign( invocationSubgroupIndex );

					// 计算工作组偏移量
					const workgroupOffset = workgroupId.x.mul( uint( maxWorkgroupSize ).mul( workPerThread ) );
					const startThread = subgroupOffset.add( workgroupOffset );

					// 子组归约结果变量
					const subgroupReduction = uint( 0 );

					// 第一部分：正常工作组处理（非最后一个工作组）
					If( workgroupId.x.lessThan( uint( numWorkgroups ).sub( 1 ) ), () => {
						// 每个线程处理workPerThread个子组
						Loop( {
							start: uint( 0 ),
							end: workPerThread,
							type: 'uint',
							condition: '<',
							name: 'currentSubgroupInBlock'
						}, () => {
							// 从向量化缓冲区读取vec4数据
							const val = inputBuffer.element( startThread );
							// 计算vec4内所有元素的和（使用点积技巧）
							subgroupReduction.addAssign( dot( uvec4( 1 ), val ) );
							// 移动到下一个子组
							startThread.addAssign( subgroupSize );
						} );
					} );

					// 第二部分：最后一个工作组的边界处理
					// 防止访问超出缓冲区边界
					If( workgroupId.x.equal( uint( numWorkgroups ).sub( 1 ) ), () => {
						Loop( {
							start: uint( 0 ),
							end: workPerThread,
							type: 'uint',
							condition: '<',
							name: 'currentSubgroupInBlock'
						}, () => {
							// 边界检查：确保索引有效
							const val = select( startThread.lessThan( uint( vecSize ) ), inputBuffer.element( startThread ), uvec4( 0 ) ).uniformFlow();
							subgroupReduction.addAssign( dot( val, uvec4( 1 ) ) );
							startThread.addAssign( subgroupSize );
						} );
					} );

					// 子组内归约（硬件加速）
					subgroupReduction.assign( subgroupAdd( subgroupReduction ) );

					// 存储子组结果到共享内存
					// 每个子组的第一个线程负责写入
					If( invocationSubgroupIndex.equal( uint( 0 ) ), () => {
						perSubgroupReductionArray.element( subgroupMetaRank ).assign( subgroupReduction );
					} );

					// 工作组屏障：确保所有子组都写入了共享内存
					workgroupBarrier();

					// ========== 工作组级归约（第二阶段） ==========

					// 计算子组大小的对数（用于对齐和循环控制）
					const subgroupSizeLog = countTrailingZeros( subgroupSize ).toVar( 'subgroupSizeLog' );
					// 计算"脊柱"大小（需要合并的子组数量）
					const spineSize = uint( workgroupSize ).shiftRight( subgroupSizeLog );
					const spineSizeLog = countTrailingZeros( spineSize ).toVar( 'spineSizeLog' );

					// 对齐到子组大小的幂（优化内存访问）
					const squaredSubgroupLog = ( spineSizeLog.add( subgroupSizeLog ).sub( 1 ) );
					squaredSubgroupLog.divAssign( subgroupSizeLog );
					squaredSubgroupLog.mulAssign( subgroupSizeLog );
					const alignedSize = ( uint( 1 ).shiftLeft( squaredSubgroupLog ) ).toVar( 'alignedSize' );

					const offset = uint( 0 );

					// 多级归约：合并多个子组的结果
					Loop( { 
						start: subgroupSize, 
						end: alignedSize, 
						condition: '<=', 
						name: 'j', 
						type: 'uint', 
						update: '<<= subgroupSizeLog'  // 每次迭代跨度乘以子组大小
					}, () => {
						// 计算当前线程负责合并的子组索引
						const subgroupIndex = ( ( invocationLocalIndex.add( 1 ) ).shiftLeft( offset ) ).sub( 1 );
						const isValidSubgroupIndex = subgroupIndex.lessThan( spineSize ).toVar( 'isValidSubgroupIndex' );

						// 使用子组归约合并多个子组的结果
						const t = subgroupAdd(
							select(
								isValidSubgroupIndex,
								perSubgroupReductionArray.element( subgroupIndex ),
								0  // 无效索引返回0
							).uniformFlow()
						).toVar( 't' );

						// 将合并结果写回共享内存
						If( isValidSubgroupIndex, () => {
							perSubgroupReductionArray.element( subgroupIndex ).assign( t );
						} );

						// 同步：确保所有线程完成当前级别的归约
						workgroupBarrier();
						// 更新偏移量，准备下一级归约
						offset.addAssign( subgroupSizeLog );
					} );

					// 最终结果：每个工作组一个归约值
					// 由工作组的第一个线程写入全局内存
					If( invocationLocalIndex.equal( uint( 0 ) ), () => {
						const reducedWorkgroupSum = perSubgroupReductionArray.element( uint( spineSize ).sub( 1 ) );
						intermediateBuffer.element( workgroupId.x ).assign( reducedWorkgroupSum );
					} );
				} )().compute( numInvocations, [ maxWorkgroupSize ] );

				return fnDef;
			};

			// ------------------------- 错误基线算法 -------------------------
			/**
			 * 错误基线算法（用于对比验证）
			 * 特点：故意给出错误结果，用于测试正确性检查功能
			 * 目的：验证验证逻辑是否能正确检测错误结果
			 */
			const createIncorrectBaselineFn = ( incorrectBaselineProps ) => {
				const { inputBuffer } = incorrectBaselineProps;

				const fnDef = Fn( () => {
					// 故意写入错误值99999，而不是正确的归约结果
					inputBuffer.element( instanceIndex ).assign( 99999 );
				} )();

				return fnDef;
			};

			// ===================================================================
			// 主初始化函数
			// ===================================================================
			
			/**
			 * 初始化函数 - 设置一侧的WebGPU渲染和计算环境
			 * 这个函数会被调用两次：一次用于左侧，一次用于右侧
			 * 
			 * @param {boolean} leftSideDisplay - 是否为左侧显示（true=左侧，false=右侧）
			 */
			async function init( leftSideDisplay = true ) {
				// 根据参数选择使用哪个效果控制器
				const effectController = leftSideDisplay ? leftEffectController : rightEffectController;

				// ========== 相机设置 ==========
				// 使用正交相机，适合2D数据可视化
				const aspect = ( window.innerWidth / 2 ) / window.innerHeight;  // 计算宽高比（一半宽度）
				const camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 2 );
				camera.position.z = 1;  // 沿Z轴移动，确保在视野内

				// ========== 场景设置 ==========
				const scene = new THREE.Scene();

				// ========== 数据缓冲区初始化 ==========
				
				// 创建输入数据数组（全部为1）
				// 使用全1数组方便验证：归约结果应该等于元素数量
				const array = new Uint32Array( Array.from( { length: size }, () => {
					return 1;
				} ) );

				// 创建标量存储缓冲区（每个元素一个uint）
				const inputStorage = instancedArray( array, 'uint' )
					.setPBO( true )  // 启用PBO（Pixel Buffer Object）优化
					.setName( `Current_${leftSideDisplay ? 'Left' : 'Right'}` );
				
				// 创建向量化存储缓冲区（每4个元素打包为一个uvec4）
				// 向量化可以提高内存访问效率
				const inputVec4BufferAttribute = new THREE.StorageInstancedBufferAttribute( array, 4 );
				const inputVectorizedStorage = storage( inputVec4BufferAttribute, 'uvec4', vecSize )
					.setPBO( true )
					.setName( `CurrentVectorized_${leftSideDisplay ? 'Left' : 'Right'}` );

				// ========== 算法3和4的中间缓冲区 ==========
				
				// 计算行归约参数
				const workPerThread = 4;     // 每个线程处理的元素数量
				const numRows = workPerThread * 32;  // 行数
				const rowSize = divRoundUp( size, numRows );  // 每行的元素数量
				
				// 工作组和缓冲区：存储每个工作组的归约结果
				const workgroupSumsArray = new Uint32Array( numRows );
				const workgroupSumsStorage = instancedArray( workgroupSumsArray, 'uint' )
					.setPBO( true )
					.setName( `WorkgroupSums_${leftSideDisplay ? 'Left' : 'Right'}` );
				
				// 调试缓冲区：用于存储调试信息
				const debugArray = new Uint32Array( 1024 );
				const debugStorage = instancedArray( debugArray, 'uint' )
					.setPBO( true )
					.setName( `Debug_${leftSideDisplay ? 'Left' : 'Right'}` );

				// 缓冲区映射表：用于GUI选择和调试输出
				const buffers = {
					'输入缓冲区': inputStorage,
					'输入向量化缓冲区': inputVectorizedStorage,
					'工作组和缓冲区': workgroupSumsStorage,
					'调试缓冲区': debugStorage,
				};

				// ========== 调试功能 ==========
				
				// 创建日志函数对象
				const logFunctionName = `记录 ${leftSideDisplay ? '左侧' : '右侧'} 数据`;
				const functionObj = {};
				functionObj[ logFunctionName ] = async() => {
					// 获取选择的缓冲区
					const selectedBuffer = buffers[ unifiedEffectController.loggedBuffer ];
					// 从GPU读取缓冲区数据并在控制台输出
					console.log( new Uint32Array( await renderer.getArrayBufferAsync( selectedBuffer.value ) ) );
				};

				// 将日志函数添加到调试面板
				debugFolder.add( functionObj, `记录 ${leftSideDisplay ? '左侧' : '右侧'} 数据` );

				// ========== 重置函数定义 ==========
				
				// 重置输入缓冲区的计算着色器
				const computeResetBufferFn = Fn( () => {
					// 将所有元素重置为1
					inputStorage.element( instanceIndex ).assign( 1 );
				} );

				// 重置工作组和缓冲区的计算着色器
				const computeResetWorkgroupSumsFn = Fn( () => {
					// 将所有工作组和重置为0
					workgroupSumsStorage.element( instanceIndex ).assign( 0 );
				} );

				// 创建计算调度
				const computeResetBuffer = computeResetBufferFn().compute( size );
				const computeResetWorkgroupSums = computeResetWorkgroupSumsFn().compute( 256 );

				// ========== 渲染器初始化 ==========
				
				const renderer = new THREE.WebGPURenderer( { 
					antialias: false,        // 禁用抗锯齿（计算应用不需要）
					trackTimestamp: true     // 启用时间戳跟踪，用于性能测量
				} );
				
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth / 2, window.innerHeight );
				
				// 初始化渲染器（异步）
				await renderer.init();

				// 获取设备实际的最大工作组大小限制
				// 需要先执行一个计算着色器来获取设备上下文
				renderer.compute( computeResetBuffer );
				if ( renderer.backend.device !== null ) {
					maxWorkgroupSize = renderer.backend.device.limits.maxComputeWorkgroupSizeX;
				}

				// ========== 算法调用链创建 ==========
				
				// 算法0：N/2二分归约的计算着色器
				const computeReduce0Fn = Fn( () => {
					const { numThreadsDispatched } = effectController;
					// 每个线程将两个元素相加：data[i] += data[i + stride]
					inputStorage.element( instanceIndex ).addAssign( inputStorage.element( instanceIndex.add( numThreadsDispatched ) ) );
				} )();

				// 创建算法0的多级归约调用链
				const reduce0Calls = [];
				// 从size/2开始，每次减半，直到1
				for ( let i = size / 2; i >= 1; i /= 2 ) {
					const reduce0 = computeReduce0Fn.compute( i, [ maxWorkgroupSize ] );
					reduce0Calls.push( reduce0 );
				}

				// 算法1调用链（3个阶段）
				const reduce1Calls = [
					// 第一阶段：多个工作组并行累加
					createReduce1Fn( {
						dispatchSize: maxWorkgroupSize * maxWorkgroupSize,
						workgroupSize: maxWorkgroupSize,
						numElements: size,
						inputBuffer: inputStorage,
					} ),
					// 第二阶段：单个工作组内累加
					createReduce1Fn( {
						dispatchSize: maxWorkgroupSize,
						numElements: maxWorkgroupSize * maxWorkgroupSize,
						workgroupSize: maxWorkgroupSize,
						inputBuffer: inputStorage,
					} ),
					// 第三阶段：最终归约（单个线程）
					createReduce1Fn( {
						dispatchSize: 1,
						numElements: maxWorkgroupSize,
						workgroupSize: 1,
						inputBuffer: inputStorage
					} ),
				];

				// 算法2调用链（2个阶段）
				const reduce2Calls = [
					// 第一阶段：工作组内归约
					createReduce2Fn( {
						workgroupSize: maxWorkgroupSize,
						dispatchSize: maxWorkgroupSize * maxWorkgroupSize,
						numElements: size,
						inputBuffer: inputStorage,
					} ),
					// 第二阶段：最终工作组归约
					createReduce2Fn( {
						workgroupSize: maxWorkgroupSize,
						dispatchSize: maxWorkgroupSize,
						numElements: maxWorkgroupSize,
						inputBuffer: inputStorage,
					} ),
				];

				// 算法3调用链（2个阶段）
				const reduce3Calls = [
					// 第一阶段：行归约+子组归约
					createReduce3Fn( {
						inputBuffer: inputStorage,
						intermediateBuffer: workgroupSumsStorage,
						workgroupSize: maxWorkgroupSize,
						workPerThread: 4,
						rowSize: rowSize,
						vectorized: false,
					} ).compute( maxWorkgroupSize * numRows, [ maxWorkgroupSize ] ),
					// 第二阶段：最终归约
					createReduce3Fn( {
						inputBuffer: workgroupSumsStorage,
						intermediateBuffer: inputStorage,
						workgroupSize: 32,
						workPerThread: 4,
						rowSize: rowSize,
						vectorized: false
					} ).compute( 32, [ 32 ] )
				];

				// 算法4调用链（2个阶段）
				const reduce4Calls = [
					// 第一阶段：优化子组归约
					createReduce4Fn( {
						size: size,
						inputBuffer: inputVectorizedStorage,
						intermediateBuffer: workgroupSumsStorage,
						workgroupSize: maxWorkgroupSize,
						workPerThread: 4,
					} ),
					// 第二阶段：最终归约（复用算法3的第二阶段）
					createReduce3Fn( {
						inputBuffer: workgroupSumsStorage,
						intermediateBuffer: inputStorage,
						workgroupSize: 32,
						workPerThread: 4,
						rowSize: rowSize,
						vectorized: false
					} ).compute( 32, [ 32 ] )
				];

				// 错误基线调用
				const incorrectBaselineCalls = [
					createIncorrectBaselineFn( {
						inputBuffer: inputStorage,
					} ).compute( size ),
				];

				// 算法调用映射表
				const calls = {
					'Reduce 0 (N/2)': reduce0Calls,
					'Reduce 1 (朴素累加)': reduce1Calls,
					'Reduce 2 (工作组归约)': reduce2Calls,
					'Reduce 3 (子组归约)': reduce3Calls,
					'Reduce 4 (优化子组归约)': reduce4Calls,
					'错误基线（对比用）': incorrectBaselineCalls
				};

				// ========== 着色器显示节点创建 ==========
				
				/**
				 * 获取颜色值的通用函数
				 * 根据缓冲区数据和验证状态返回不同的颜色
				 * 
				 * @param {*} bufferToCheck - 要检查的缓冲区
				 * @param {*} colorChanger - 颜色变化因子（基于数据值）
				 * @param {*} width - 网格宽度（用于归一化）
				 * @param {*} height - 网格高度（用于归一化）
				 * @returns {vec3} RGB颜色值
				 */
				const getColor = ( bufferToCheck, colorChanger, width, height ) => {
					// 计算颜色变化因子（归一化到0-1）
					const subtracter = float( colorChanger ).div( width.mul( height ) );
					const color = vec3( subtracter.oneMinus() ).toVar();
					const { highlight } = effectController;

					// 验证模式：检查归约结果是否正确
					If( highlight.equal( 1 ), () => {
						// 检查第一个元素（归约结果）是否等于总元素数量
						If( ( bufferToCheck.element( 0 ) ).equal( size ), () => {
							// 正确：显示绿色
							color.assign( vec3( 0.0, subtracter.oneMinus(), 0.0 ) );
						} ).Else( () => {
							// 错误：显示红色
							color.assign( vec3( subtracter.oneMinus(), 0.0, 0.0 ) );
						} );
					} );

					return color;
				};

				// 获取当前侧的显示节点映射
				const displayNodes = leftSideDisplay ? leftDisplayColorNodes : rightDisplayColorNodes;

				// 模式1：网格显示
				displayNodes[ '输入网格' ] = Fn( () => {
					const { gridElementWidth, gridElementHeight, gridDisplayWidth, gridDisplayHeight } = unifiedEffectController;

					// 将UV坐标映射到网格坐标
					const newUV = uv().mul( vec2( gridDisplayWidth, gridDisplayHeight ) );
					const pixel = uvec2( uint( floor( newUV.x ) ), uint( floor( newUV.y ) ) );
					// 计算一维索引
					const elementIndex = uint( gridDisplayWidth ).mul( pixel.y ).add( pixel.x );

					const colorChanger = uint( 0 ).toVar();
					const color = vec3( 0 ).toVar( 'color' );

					// 获取对应元素的值
					colorChanger.assign( inputStorage.element( elementIndex ) );
					// 计算颜色
					color.assign( getColor( inputStorage, colorChanger, gridElementWidth, gridElementHeight ) );

					return color;
				} )();

				// 模式2：对数显示
				displayNodes[ '输入对数视图' ] = Fn( () => {
					const { gridElementWidth, gridElementHeight } = unifiedEffectController;

					// 将对数刻度映射到UV坐标
					const newUV = uv().mul( vec2( Math.log2( size ) ), 1 );
					const colorChanger = uint( 0 ).toVar();
					const color = vec3( 0 ).toVar( 'color' );

					// 显示2的幂次位置的元素
					colorChanger.assign( inputStorage.element( uint( 1 ).shiftLeft( newUV.x ) ) );
					color.assign( getColor( inputStorage, colorChanger, gridElementWidth, gridElementHeight ) );

					return color;
				} )();

				// 模式3：单元素显示
				displayNodes[ '元素0值' ] = Fn( () => {
					const { gridElementWidth, gridElementHeight } = unifiedEffectController;

					const colorChanger = uint( 0 ).toVar();
					const color = vec3( 0 ).toVar( 'color' );

					// 显示第一个元素的值（归约结果）
					// 使用clamp限制显示范围，确保颜色可读
					colorChanger.assign( clamp( inputStorage.element( 0 ), 0, size / 2 ) );
					color.assign( getColor( inputStorage, colorChanger, gridElementWidth, gridElementHeight ) );
					return color;
				} )();

				// 模式4：工作组和网格显示
				displayNodes[ '工作组和网格' ] = Fn( () => {
					// 固定网格大小：8x16 = 128个工作组
					const width = uint( 8 );
					const height = uint( 16 );

					const newUV = uv().mul( vec2( width, height ) );
					const pixel = uvec2( uint( floor( newUV.x ) ), uint( floor( newUV.y ) ) );
					const elementIndex = uint( width ).mul( pixel.y ).add( pixel.x );

					const colorChanger = uint( 0 ).toVar();
					const color = vec3( 0 ).toVar( 'color' );

					// 获取工作组和值
					colorChanger.assign( workgroupSumsStorage.element( elementIndex ) );
					color.assign( getColor( inputStorage, colorChanger, width, height ) );

					return color;
				} )();

				// ========== 材质设置 ==========
				
				// 设置当前侧的材质着色器节点
				( leftSideDisplay ? leftMaterial : rightMaterial ).colorNode = displayNodes[ effectController.displayMode ];
				( leftSideDisplay ? leftMaterial : rightMaterial ).needsUpdate = true;

				// 创建显示平面（全屏四边形）
				const plane = new THREE.Mesh( 
					new THREE.PlaneGeometry( 1, 1 ),  // 单位平面
					( leftSideDisplay ? leftMaterial : rightMaterial ) 
				);
				scene.add( plane );

				// ========== 动画循环 ==========
				
				const animate = () => {
					renderer.render( scene, camera );
				};

				// 设置动画循环
				renderer.setAnimationLoop( animate );

				// ========== DOM元素布局 ==========
				
				// 将渲染器画布添加到页面
				document.body.appendChild( renderer.domElement );
				renderer.domElement.style.position = 'absolute';
				renderer.domElement.style.top = '0';
				renderer.domElement.style.left = '0';
				renderer.domElement.style.width = '50%';   // 占据一半宽度
				renderer.domElement.style.height = '100%'; // 全高

				// 区分左右两侧布局和背景色
				if ( ! leftSideDisplay ) {
					// 右侧：从50%位置开始
					renderer.domElement.style.left = '50%';
					scene.background = new THREE.Color( 0x212121 );  // 深灰色背景
				} else {
					// 左侧：从0位置开始
					scene.background = new THREE.Color( 0x313131 );  // 浅灰色背景
				}

				// 禁用Three.js的info自动重置，以便手动控制
				renderer.info.autoReset = false;

				// ========== 算法执行状态机 ==========
				
				/**
				 * 单步动画函数 - 状态机实现
				 * 控制算法的执行、验证和重置流程
				 */
				const stepAnimation = async function () {
					const currentAlgorithm = effectController.algo;
					const state = effectController.state;
					const stateController = leftSideDisplay ? stateLeftController : stateRightController;

					// 状态机处理
					if ( state === '重置' ) {
						// 重置状态：恢复初始数据
						renderer.compute( computeResetBuffer );
						renderer.compute( computeResetWorkgroupSums );

					} else if ( state === '运行算法' ) {
						// 运行算法状态
						renderer.info.reset();  // 重置性能计数器

						const cpuTime = 0;  // 预留CPU时间变量

						// 根据选择的算法执行不同的调用链
						switch ( currentAlgorithm ) {
							case 'Reduce 0 (N/2)': {
								// 算法0：多级二分归约
								let m = size / 2;
								for ( let i = 0; i < reduce0Calls.length; i ++ ) {
									// 更新uniform值
									effectController.numThreadsDispatched.value = m;
									const reduce0 = reduce0Calls[ i ];
									// 执行归约步骤
									renderer.compute( reduce0 );
									// 解析时间戳（异步性能测量）
									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
									m /= 2;  // 跨度减半
								}
								break;
							}

							default: {
								// 其他算法：执行完整的调用链
								const currentAlgoCalls = calls[ currentAlgorithm ];
								for ( let i = 0; i < currentAlgoCalls.length; i ++ ) {
									renderer.compute( currentAlgoCalls[ i ] );
									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
								}
								break;
							}
						}

						// 构建性能信息字符串
						let passInfoString = '';
						
						// 预留CPU算法支持（当前未实现）
						if ( effectController.algo.substring( 0, 3 ) === 'CPU' ) {
							passInfoString = `运行时间 ${cpuTime}毫秒<br>`;
						} else {
							// GPU算法：显示计算通道数和耗时
							passInfoString = `${renderer.info.compute.frameCalls} 个计算通道，耗时 ${renderer.info.compute.timestamp.toFixed( 6 )}毫秒<br>`;
						}

						// 更新显示信息
						timestamps[ leftSideDisplay ? 'left_side_display' : 'right_side_display' ].innerHTML = `
							${effectController.algo} 算法：${passInfoString}`;
					}

					// 执行渲染
					renderer.render( scene, camera );
					// 解析渲染时间戳
					renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );

					// 状态转换逻辑
					if ( state === '运行算法' ) {
						// 运行算法 → 验证
						stateController.setValue( '验证' );
						effectController.highlight.value = 1; // 启用验证高亮

					} else if ( state === '验证' ) {
						// 验证 → 重置
						stateController.setValue( '重置' );
						effectController.highlight.value = 0; // 禁用验证高亮

					} else if ( state === '重置' ) {
						// 重置 → 运行算法
						stateController.setValue( '运行算法' );
					}

					// 每秒执行一次状态转换（1秒循环）
					setTimeout( stepAnimation, 1000 );
				};

				// ========== 窗口大小变化处理 ==========
				
				window.addEventListener( 'resize', onWindowResize );

				/**
				 * 窗口大小变化处理函数
				 * 调整渲染器和相机以适配新窗口大小
				 */
				function onWindowResize() {
					// 更新渲染器尺寸（始终占据一半宽度）
					renderer.setSize( window.innerWidth / 2, window.innerHeight );

					// 重新计算相机投影
					const aspect = ( window.innerWidth / 2 ) / window.innerHeight;
					const frustumHeight = camera.top - camera.bottom;
					camera.left = - frustumHeight * aspect / 2;
					camera.right = frustumHeight * aspect / 2;
					camera.updateProjectionMatrix();

					// 重新渲染
					renderer.render( scene, camera );
				}

				// 启动算法执行循环（延迟1秒开始）
				setTimeout( stepAnimation, 1000 );
			}

			// ===================================================================
			// 启动应用程序
			// ===================================================================
			
			// 初始化左侧显示（默认参数为true）
			init();
			
			// 初始化右侧显示（参数为false）
			init( false );

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