<!-- 代码功能描述
这是一个比特排序（Bitonic Sort）算法的可视化演示，使用Three.js WebGPU技术实现，通过双画布对比展示两种不同的GPU并行排序策略：

核心功能
1. 双画布并行对比

左侧画布：演示在GPU工作组本地内存中进行的比特排序

颜色方案：紫色（203, 64, 203）和青色（0, 215, 215）

利用GPU共享内存（shared memory），速度更快但容量有限

右侧画布：演示在GPU全局存储缓冲区中进行的比特排序

颜色方案：绿色（1, 150, 1）和红色（255, 0, 0）

使用全局存储（global memory），容量大但访问延迟较高

2. 排序数据规模

排序元素总数：16,384个（128×128网格）

每个元素为32位无符号整数

初始状态为随机打乱的0-16383连续整数

3. 交互控制

显示模式切换：可在"元素显示"和"交换区域高亮"之间切换

逐步执行：每100毫秒自动执行一个排序步骤

循环演示：排序完成后自动重置并重新开始

响应式布局：自适应窗口大小调整

4. 可视化效果

基础显示：根据元素值映射为灰度颜色

交换高亮：用不同颜色标识正在比较交换的元素对

信息面板：实时显示当前交换状态和颜色说明

主要技术点
1. 比特排序算法（Bitonic Sort）
算法特点：

并行友好：专为并行计算设计，所有比较操作可同时进行

确定性：固定数量的比较步骤，与输入数据无关

复杂度：时间复杂度O(n log²n)，空间复杂度O(n)

算法原理：

text
对于n个元素（n必须是2的幂）：
1. 构建比特序列（bitonic sequence）
2. 递归排序：
   - 翻转比较（Flip）：将两个有序序列合并
   - 分散比较（Disperse）：创建有序序列
步骤计算：

javascript
// 对于16384个元素：
n = log₂(16384) = 14
总步骤数 = (n × (n + 1)) / 2 = (14 × 15) / 2 = 105步
2. WebGPU计算着色器
核心优势：

通用计算：不限于图形渲染，可执行任意并行计算

现代API：比WebGL更高效，支持计算管线

内存模型：分层内存架构（全局、工作组、私有）

关键概念：

工作组（Workgroup）：并行执行的基本单位（本例使用64个线程）

存储缓冲区（Storage Buffer）：可读写的GPU内存区域

计算管线（Compute Pipeline）：专门用于计算的处理管线

3. Three.js TSL（Three.js Shader Language）
创新特性：

javascript
// 示例：使用TSL定义着色器函数
const getElementIndex = Fn(([uvNode, gridWidth, gridHeight]) => {
    const newUV = uvNode.mul(vec2(gridWidth, gridHeight));
    const pixel = uvec2(uint(floor(newUV.x)), uint(floor(newUV.y)));
    return uint(gridWidth).mul(pixel.y).add(pixel.x);
}, {
    uvNode: 'vec2',
    gridWidth: 'uint',
    gridHeight: 'uint',
    return: 'uint'
});
优势：

JavaScript语法：用熟悉的JS语法编写着色器

类型安全：编译时类型检查

可组合性：函数式编程，易于重用

4. GPU内存架构对比
内存类型	容量	速度	共享范围	用途
本地内存	小（KB级）	快（寄存器级）	工作组内	左侧画布
全局内存	大（MB/GB级）	慢（需要缓存）	所有线程	右侧画布
本地交换策略：

javascript
// 在工作组内共享内存中进行交换
// 优势：极快的数据交换速度
// 限制：只能在工作组内共享数据
全局交换策略：

javascript
// 通过存储缓冲区进行全局交换
// 优势：可以处理任意规模的数据
// 劣势：内存访问延迟较高
5. 并行计算模式
数据并行：

javascript
// 每个线程处理一个元素
const computeInitFn = Fn(() => {
    // instanceIndex是当前线程的索引（0-16383）
    randomizedElementsStorage.element(instanceIndex)
        .assign(currentElementsStorage.element(instanceIndex));
});
同步机制：

屏障（Barrier）：确保工作组内所有线程同步

原子操作：防止多线程数据竞争

双缓冲：使用临时缓冲区避免读写冲突

6. 可视化技术
颜色映射算法：

javascript
// 将元素值映射为颜色
const getColor = Fn(([colorChanger, gridWidth, gridHeight]) => {
    // 归一化：元素值 / 总元素数
    const subtracter = colorChanger.div(gridWidth.mul(gridHeight));
    // 反相：小值亮色，大值暗色
    return vec3(subtracter.oneMinus()).toVar();
});
交换区域高亮：

javascript
// 判断元素属于交换对的哪一侧
const boolCheck = int(elementIndex.mod(blockHeight).lessThan(blockHeight.div(2)));
// 左侧区域：红色通道
color.x.mulAssign(boolCheck);
// 右侧区域：绿色通道
color.y.mulAssign(abs(boolCheck.sub(1)));
7. 性能优化技术
PBO优化：

javascript
.setPBO(true)  // 启用Pixel Buffer Object
异步数据传输

减少CPU-GPU同步开销

提高缓冲区更新效率

内存访问优化：

合并访问：相邻线程访问相邻内存地址

银行冲突避免：优化共享内存访问模式

预取数据：提前加载需要的数据到寄存器

8. 架构设计模式
模块化设计：

text
比特排序系统架构：
1. 数据层：存储缓冲区管理
2. 算法层：BitonicSort类封装排序逻辑
3. 渲染层：Three.js场景和着色器
4. UI层：GUI控制和信息显示
事件驱动：

javascript
// 窗口大小调整
window.addEventListener('resize', onWindowResize);
// 定时执行排序步骤
setTimeout(stepAnimation, 100);
9. 错误处理与兼容性
WebGPU检测：

javascript
if (WebGPU.isAvailable() === false) {
    document.body.appendChild(WebGPU.getErrorMessage());
    throw new Error('No WebGPU support');
}
浏览器兼容性：

Chrome 113+（启用WebGPU标志）

Edge 113+

Firefox Nightly（实验性支持） -->


<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>

		<!-- 自定义CSS样式，用于美化界面 -->
		<style>
			/* 交换区域信息显示框样式 */
			.swap_area {
				position: absolute;       /* 绝对定位，相对于页面 */
				top: 150px;               /* 距离顶部150像素 */
				padding: 10px;            /* 内边距10像素 */
				background: rgba(0, 0, 0, 0.5); /* 黑色半透明背景，透明度50% */
				color: #fff;               /* 白色文字 */
				font-family: monospace;    /* 等宽字体，便于代码显示 */
				font-size: 12px;           /* 字体大小12像素 */
				line-height: 1.5;          /* 行高1.5倍 */
				pointer-events: none;      /* 禁止鼠标事件，防止遮挡下方画布交互 */
				text-align: left;          /* 文字左对齐 */
			}
		</style>

		<!-- 页面信息说明区域 -->
		<div id="info">
			<!-- Three.js官方链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a>
			<br /> 
			<!-- 示例主要功能说明 -->
			本示例演示了在GPU计算着色器中逐步执行的比特排序算法。
			<br /> 
			<!-- 左右画布功能区分说明 -->
			左侧画布（紫色/青色）：显示工作组内本地内存的交换过程，主要在GPU的共享内存中进行。
			<br /> 
			右侧画布（绿色/红色）：显示全局存储缓冲区的交换过程，数据在GPU的全局内存中传输。
			<br /> 
			<!-- 参考实现来源 -->
			算法参考实现：<a href="https://poniesandlight.co.uk/reflect/bitonic_merge_sort/">Tim Gfrerer的比特排序文章</a>
			<br />
			<!-- 左右两侧信息显示区域 -->
			<div id="local_swap" class="swap_area" style="left: 0;"></div>
			<div id="global_swap" class="swap_area" style="right: 0;"></div>
		</div>

		<!-- 导入映射配置（Import Map）：定义JavaScript模块的路径别名 -->
		<!-- 注：Import Map是现代浏览器支持的功能，用于管理模块导入路径 -->
		<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模块：包含所有排序算法和可视化逻辑 -->
		<script type="module">

			// =============== 模块导入部分 ===============

			// 导入Three.js的WebGPU核心模块
			import * as THREE from 'three/webgpu';

			// 导入Three.js着色器语言（TSL）的关键函数和类型
			// storage：创建存储缓冲区节点，用于GPU内存数据存储
			// If：条件判断语句，用于着色器中的流程控制
			// vec3、vec2：三维和二维向量类型
			// not：逻辑非操作
			// uniform：Uniform变量，CPU传递给GPU的常量数据
			// uv：纹理坐标（UV坐标）
			// uint、int：无符号整数和有符号整数类型
			// Fn：定义可重用的着色器函数
			// abs：绝对值函数
			// uvec2：无符号整数二维向量
			// floor：向下取整函数
			// instanceIndex：实例索引，在计算着色器中表示当前处理元素的索引
			import { storage, If, vec3, not, uniform, uv, uint, Fn, vec2, abs, int, uvec2, floor, instanceIndex } from 'three/tsl';

			// 导入比特排序算法相关工具
			// BitonicSort：比特排序算法的主要类
			// getBitonicDisperseIndices：获取分散交换模式下的索引对
			// getBitonicFlipIndices：获取翻转交换模式下的索引对
			import { BitonicSort, getBitonicDisperseIndices, getBitonicFlipIndices } from 'three/addons/gpgpu/BitonicSort.js';

			// 导入WebGPU能力检测模块，用于检查浏览器是否支持WebGPU
			import WebGPU from 'three/addons/capabilities/WebGPU.js';

			// 导入轻量级GUI库，用于创建参数调节界面
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// =============== 常量定义部分 ===============

			/**
			 * 排序步骤类型枚举
			 * 比特排序算法包含多种交换模式，这些模式在不同阶段使用
			 */
			const StepType = {
				NONE: 0,           // 无操作状态，排序完成或尚未开始
				SWAP_LOCAL: 1,     // 本地交换：在工作组内的共享内存中进行元素交换
				DISPERSE_LOCAL: 2, // 本地分散交换：工作组内更复杂的交换模式
				FLIP_GLOBAL: 3,    // 全局翻转交换：在全局存储缓冲区中进行块间交换
				DISPERSE_GLOBAL: 4, // 全局分散交换：在全局存储缓冲区中进行块内交换
			};

			// 获取DOM元素引用，用于动态显示排序状态信息
			const timestamps = {
				local_swap: document.getElementById('local_swap'),  // 左侧本地交换信息显示区域
				global_swap: document.getElementById('global_swap') // 右侧全局交换信息显示区域
			};

			// 定义可视化颜色方案
			const localColors = ['rgb(203, 64, 203)', 'rgb(0, 215, 215)'];  // 左侧画布颜色：紫色和青色
			const globalColors = ['rgb(1, 150, 1)', 'red'];                 // 右侧画布颜色：绿色和红色

			// 定义排序数据规模
			const size = 16384;                        // 排序元素总数：16384个元素（128×128网格）
			const gridDim = Math.sqrt(size);           // 网格维度：128（因为128×128=16384）

			/**
			 * 计算比特排序的总步骤数
			 * 比特排序的步骤数公式：(n * (n + 1)) / 2，其中n = log2(元素数量)
			 * 对于16384个元素：n = log2(16384) = 14，总步骤数 = (14×15)/2 = 105
			 * @returns {number} 排序所需的总步骤数
			 */
			const getNumSteps = () => {
				const n = Math.log2(size);             // 计算以2为底的对数
				return (n * (n + 1)) / 2;              // 返回总步骤数
			};

			// 存储计算得到的总步骤数
			const MAX_STEPS = getNumSteps();           // 对于16384个元素，MAX_STEPS = 105

			// =============== GUI控制参数定义 ===============

			/**
			 * 效果控制器对象
			 * 这些参数可以通过GUI界面动态调节
			 */
			const effectController = {
				gridWidth: uniform(gridDim),           // 网格宽度Uniform变量，传递给着色器
				gridHeight: uniform(gridDim),          // 网格高度Uniform变量，传递给着色器
				highlight: uniform(1),                 // 高亮显示开关：1=显示交换区域，0=显示原始元素
				stepBitonic: true,                     // 逐步执行开关：true=逐步执行，false=连续执行
				'显示模式': '交换区域高亮'                 // 显示模式选择，中文显示
			};

			// 创建GUI界面
			const gui = new GUI();
			
			/**
			 * 添加显示模式切换选项
			 * 用户可以在"元素显示"和"交换区域高亮"两种模式之间切换
			 */
			gui.add(effectController, '显示模式', ['元素显示', '交换区域高亮']).onChange(() => {
				// 根据选择的显示模式更新高亮Uniform值
				if (effectController['显示模式'] === '元素显示') {
					effectController.highlight.value = 0;  // 显示原始元素值对应的颜色
				} else {
					effectController.highlight.value = 1;  // 高亮显示交换区域
				}
			});

			// =============== WebGPU支持检测 ===============

			/**
			 * 检测浏览器是否支持WebGPU
			 * 如果浏览器不支持WebGPU，显示错误信息并抛出异常
			 */
			if (WebGPU.isAvailable() === false) {
				// 将错误信息添加到页面中
				document.body.appendChild(WebGPU.getErrorMessage());
				// 抛出错误，停止脚本执行
				throw new Error('当前浏览器不支持WebGPU，请使用Chrome 113+、Edge 113+或Firefox Nightly等支持WebGPU的浏览器');
			}

			// =============== 工具函数定义部分 ===============

			/**
			 * 计算像素坐标对应的元素索引
			 * 此函数将2D屏幕坐标转换为1D数据数组索引
			 * @param {vec2} uvNode - UV坐标，范围[0,1]
			 * @param {uint} gridWidth - 网格宽度（元素数量）
			 * @param {uint} gridHeight - 网格高度（元素数量）
			 * @returns {uint} 一维数组中的元素索引
			 * 
			 * 数学原理：
			 * 1. 将UV坐标[0,1]映射到像素坐标[0, gridWidth-1]和[0, gridHeight-1]
			 * 2. 使用floor函数取整，得到整数像素坐标
			 * 3. 使用公式 index = y × width + x 计算一维索引
			 */
			const getElementIndex = Fn(([uvNode, gridWidth, gridHeight]) => {
				// 将归一化的UV坐标转换为像素坐标
				const newUV = uvNode.mul(vec2(gridWidth, gridHeight));
				// 取整得到整数像素坐标
				const pixel = uvec2(uint(floor(newUV.x)), uint(floor(newUV.y)));
				// 计算一维索引：行索引×每行元素数+列索引
				const elementIndex = uint(gridWidth).mul(pixel.y).add(pixel.x);
				// 返回计算结果
				return elementIndex;
			}, {
				uvNode: 'vec2',     // 输入参数类型：二维浮点向量
				gridWidth: 'uint',  // 输入参数类型：无符号整数
				gridHeight: 'uint', // 输入参数类型：无符号整数
				return: 'uint'      // 返回值类型：无符号整数
			});

			/**
			 * 根据元素值计算显示颜色
			 * 此函数将元素值映射为RGB颜色，用于可视化
			 * @param {float} colorChanger - 元素值（通常为归一化的索引）
			 * @param {float} gridWidth - 网格宽度
			 * @param {float} gridHeight - 网格高度
			 * @returns {vec3} RGB颜色值，范围[0,1]
			 * 
			 * 颜色映射原理：
			 * 1. 将元素值除以总元素数，得到归一化的值subtracter（范围[0,1]）
			 * 2. 使用1-subtracter计算颜色，使小值显示为亮色，大值显示为暗色
			 * 3. 将结果复制到RGB三个通道，创建灰度图像
			 */
			const getColor = Fn(([colorChanger, gridWidth, gridHeight]) => {
				// 计算归一化的元素值
				const subtracter = colorChanger.div(gridWidth.mul(gridHeight));
				// 计算颜色：1-归一化值，然后复制到RGB三个通道
				return vec3(subtracter.oneMinus()).toVar();
			}, {
				colorChanger: 'float', // 输入参数类型：浮点数
				gridWidth: 'float',    // 输入参数类型：浮点数
				gridHeight: 'float',   // 输入参数类型：浮点数
				return: 'vec3'         // 返回值类型：三维浮点向量
			});

			/**
			 * 随机化数组元素（Fisher-Yates洗牌算法）
			 * 此函数将数组元素随机打乱，创建无序的测试数据
			 * @param {Array|TypedArray} array - 需要随机化的数组
			 * 
			 * 算法步骤：
			 * 1. 从最后一个元素开始向前遍历
			 * 2. 为每个位置生成一个随机索引（0到当前位置）
			 * 3. 交换当前位置和随机位置的元素
			 * 4. 继续处理前一个位置，直到第一个元素
			 * 
			 * 算法特点：
			 * - 时间复杂度：O(n)
			 * - 空间复杂度：O(1)
			 * - 每个排列出现的概率相等
			 */
			const randomizeDataArray = (array) => {
				let currentIndex = array.length;  // 从最后一个元素开始
				while (currentIndex !== 0) {
					// 生成随机索引：0到currentIndex-1之间的整数
					const randomIndex = Math.floor(Math.random() * currentIndex);
					currentIndex -= 1;  // 移动到前一个位置
					
					// 使用解构赋值交换元素
					[array[currentIndex], array[randomIndex]] = [
						array[randomIndex],  // 随机位置的元素
						array[currentIndex], // 当前位置的元素
					];
				}
			};

			/**
			 * 窗口大小调整回调函数
			 * 当浏览器窗口大小改变时，调整渲染器和相机参数
			 * @param {THREE.WebGPURenderer} renderer - WebGPU渲染器对象
			 * @param {THREE.Scene} scene - 三维场景对象
			 * @param {THREE.OrthographicCamera} camera - 正交投影相机对象
			 * 
			 * 调整逻辑：
			 * 1. 每个画布占据窗口宽度的一半
			 * 2. 根据新的宽高比调整相机的左右边界
			 * 3. 更新相机投影矩阵
			 * 4. 重新渲染场景
			 */
			const windowResizeCallback = (renderer, scene, camera) => {
				// 设置渲染器尺寸：宽度为窗口一半，高度为窗口高度
				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);
			};

			/**
			 * 构建交换区域信息显示的HTML内容
			 * 创建包含颜色示例的描述性HTML
			 * @param {boolean} isGlobal - 是否为全局交换（true=全局，false=本地）
			 * @param {Array} colorsArr - 颜色数组，包含两个颜色值
			 * @returns {string} 格式化后的HTML字符串
			 */
			const constructInnerHTML = (isGlobal, colorsArr) => {
				return `
				${isGlobal ? '全局' : '本地'}交换计算：
				<div style="display: flex; flex-direction:row; justify-content: center; align-items: center;">
					${isGlobal ? '全局交换' : '本地交换'} 比较区域&nbsp;
					<div style="background-color: ${colorsArr[0]}; width:12.5px; height: 1em; border-radius: 20%;"></div>
					&nbsp;与区域&nbsp;
					<div style="background-color: ${colorsArr[1]}; width:12.5px; height: 1em; border-radius: 20%;"></div>
				</div>`;
			};

			/**
			 * 创建显示网格（用于本地交换演示）
			 * 创建一个平面网格，使用自定义着色器显示排序过程
			 * @param {StorageNode} elementsStorage - 元素存储缓冲区节点
			 * @param {StorageNode|null} algoStorage - 算法信息存储缓冲区节点（可选）
			 * @param {StorageNode|null} blockHeightStorage - 块高度存储缓冲区节点（可选）
			 * @returns {THREE.Mesh} 配置好的网格对象
			 * 
			 * 功能说明：
			 * 1. 创建基础的平面网格（1×1单位）
			 * 2. 使用MeshBasicNodeMaterial，支持节点材质
			 * 3. 定义自定义显示函数，根据排序状态动态计算颜色
			 */
			const createDisplayMesh = (elementsStorage, algoStorage = null, blockHeightStorage = null) => {
				// 创建节点材质（支持着色器节点）
				const material = new THREE.MeshBasicNodeMaterial({ color: 0x00ff00 });

				/**
				 * 自定义显示函数（着色器代码）
				 * 此函数在GPU上执行，为每个像素计算颜色
				 */
				const display = Fn(() => {
					// 从效果控制器获取Uniform变量
					const { gridWidth, gridHeight, highlight } = effectController;

					// 计算当前像素对应的元素索引和基础颜色
					const elementIndex = getElementIndex(uv(), gridWidth, gridHeight);
					const color = getColor(elementsStorage.element(elementIndex), gridWidth, gridHeight).toVar();

					// 如果提供了算法信息且需要高亮显示
					if (algoStorage !== null && blockHeightStorage !== null) {
						// 条件：高亮开启且当前有排序操作
						If(highlight.equal(1).and(not(algoStorage.element(0).equal(StepType.NONE))), () => {
							// 判断当前元素属于交换对的哪一侧
							// blockHeight是当前交换块的大小
							// 如果elementIndex % blockHeight < blockHeight/2，属于左侧
							const boolCheck = int(elementIndex.mod(blockHeightStorage.element(0))
								.lessThan(blockHeightStorage.element(0).div(2)));
							
							// 根据算法类型设置蓝色通道
							// 本地操作时蓝色通道为1，全局操作时蓝色通道为0
							color.z.assign(algoStorage.element(0).lessThanEqual(StepType.DISPERSE_LOCAL));
							
							// 根据boolCheck调整颜色：
							// - 左侧区域(boolCheck=1)：红色分量×1，绿色分量×0
							// - 右侧区域(boolCheck=0)：红色分量×0，绿色分量×1
							color.x.mulAssign(boolCheck);        // 红色分量乘以boolCheck
							color.y.mulAssign(abs(boolCheck.sub(1))); // 绿色分量乘以(1-boolCheck)
						});
					}

					// 返回最终计算的颜色
					return color;
				});

				// 将显示函数设置为材质的颜色节点
				material.colorNode = display();
				
				// 创建平面几何体（1×1单位）和网格对象
				const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
				return plane;
			};

			/**
			 * 创建显示网格2（用于全局交换演示）
			 * 与createDisplayMesh类似，但使用不同的信息存储结构
			 * @param {StorageNode} elementsStorage - 元素存储缓冲区节点
			 * @param {StorageNode} infoStorage - 信息存储缓冲区节点
			 * @returns {THREE.Mesh} 配置好的网格对象
			 */
			const createDisplayMesh2 = (elementsStorage, infoStorage) => {
				const material = new THREE.MeshBasicNodeMaterial({ color: 0x00ff00 });

				/**
				 * 自定义显示函数（着色器代码）
				 */
				const display = Fn(() => {
					const { gridWidth, gridHeight, highlight } = effectController;

					// 计算当前像素对应的元素索引和基础颜色
					const elementIndex = getElementIndex(uv(), gridWidth, gridHeight);
					const color = getColor(elementsStorage.element(elementIndex), gridWidth, gridHeight).toVar();

					// 高亮显示交换区域（当不是本地交换时）
					If(highlight.equal(1).and(not(infoStorage.element(0).equal(StepType.SWAP_LOCAL))), () => {
						// 判断元素属于交换对的哪一侧
						// infoStorage.element(1)存储当前块高度
						const boolCheck = int(elementIndex.mod(infoStorage.element(1))
							.lessThan(infoStorage.element(1).div(2)));
						
						// 设置蓝色通道和调整红绿通道
						color.z.assign(infoStorage.element(0).lessThanEqual(StepType.DISPERSE_LOCAL));
						color.x.mulAssign(boolCheck);
						color.y.mulAssign(abs(boolCheck.sub(1)));
					});

					return color;
				});

				material.colorNode = display();
				const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), material);
				return plane;
			};
			
			/**
			 * 设置渲染器DOM元素的样式和位置
			 * 将渲染器的canvas元素添加到页面并设置样式
			 * @param {THREE.WebGPURenderer} renderer - WebGPU渲染器对象
			 * 
			 * 样式设置：
			 * - 绝对定位，固定在页面左上角
			 * - 宽度为50%，高度为100%（占据左半屏或右半屏）
			 */
			const setupDomElement = (renderer) => {
				// 将渲染器的canvas元素添加到body中
				document.body.appendChild(renderer.domElement);
				
				// 设置canvas元素的样式
				renderer.domElement.style.position = 'absolute';  // 绝对定位
				renderer.domElement.style.top = '0';               // 顶部对齐
				renderer.domElement.style.left = '0';              // 左侧对齐
				renderer.domElement.style.width = '50%';           // 宽度为页面50%
				renderer.domElement.style.height = '100%';         // 高度为页面100%
			};

			// =============== 比特排序算法初始化（左侧画布：本地交换演示） ===============

			/**
			 * 初始化比特排序算法（本地交换版本）
			 * 此函数设置左侧画布，演示在GPU共享内存中的排序过程
			 */
			async function initBitonicSort() {
				let currentStep = 0;  // 当前执行的排序步骤索引

				// =============== 1. 场景和相机设置 ===============

				/**
				 * 创建正交投影相机
				 * 正交相机没有透视效果，物体大小不随距离改变
				 * 适用于2D可视化场景
				 */
				const aspect = (window.innerWidth / 2) / window.innerHeight;  // 计算宽高比
				const camera = new THREE.OrthographicCamera(-aspect, aspect, 1, -1, 0, 2);
				camera.position.z = 1;  // 将相机沿Z轴移动1个单位

				// 创建三维场景
				const scene = new THREE.Scene();

				// =============== 2. 数据初始化 ===============

				/**
				 * 创建初始数据数组
				 * 包含0到size-1的连续整数，然后随机打乱
				 */
				const array = new Uint32Array(Array.from({ length: size }, (_, i) => i));
				randomizeDataArray(array);  // 随机打乱数组

				// =============== 3. 存储缓冲区创建 ===============

				/**
				 * 创建存储缓冲区（Storage Buffer）
				 * 存储缓冲区是GPU内存中的一段区域，可以在计算着色器中读写
				 * 这里创建三个缓冲区：
				 * 1. currentElementsBuffer：当前排序状态的元素缓冲区
				 * 2. randomizedElementsBuffer：随机化后的原始数据缓冲区（用于重置）
				 */

				// 当前元素缓冲区：存储正在排序的数据
				const currentElementsBuffer = new THREE.StorageInstancedBufferAttribute(array, 1);
				const currentElementsStorage = storage(currentElementsBuffer, 'uint', size)
					.setPBO(true)          // 启用Pixel Buffer Object，提高数据传输效率
					.setName('Elements');   // 设置名称，便于调试

				// 随机化元素缓冲区：存储原始随机数据，用于排序完成后的重置
				const randomizedElementsBuffer = new THREE.StorageInstancedBufferAttribute(size, 1);
				const randomizedElementsStorage = storage(randomizedElementsBuffer, 'uint', size)
					.setPBO(true)
					.setName('RandomizedElements');

				// =============== 4. 计算着色器函数定义 ===============

				/**
				 * 初始化计算着色器函数
				 * 将当前元素复制到随机化缓冲区
				 * 这个函数在GPU上并行执行，每个线程处理一个元素
				 */
				const computeInitFn = Fn(() => {
					// instanceIndex是当前线程处理的元素索引
					randomizedElementsStorage.element(instanceIndex)
						.assign(currentElementsStorage.element(instanceIndex));
				});

				/**
				 * 重置缓冲区计算着色器函数
				 * 排序完成后，从随机化缓冲区恢复原始数据
				 */
				const computeResetBuffersFn = Fn(() => {
					currentElementsStorage.element(instanceIndex)
						.assign(randomizedElementsStorage.element(instanceIndex));
				});

				// =============== 5. 渲染器初始化 ===============

				/**
				 * 创建WebGPU渲染器
				 * 参数说明：
				 * - antialias: false - 禁用抗锯齿，提高性能
				 */
				const renderer = new THREE.WebGPURenderer({ antialias: false });
				renderer.setPixelRatio(window.devicePixelRatio);  // 设置设备像素比
				renderer.setSize(window.innerWidth / 2, window.innerHeight);  // 设置画布尺寸

				// 异步初始化WebGPU渲染器
				await renderer.init();

				/**
				 * 动画循环函数
				 * 每一帧渲染场景
				 */
				const animate = () => {
					renderer.render(scene, camera);
				};
				
				// 设置动画循环
				renderer.setAnimationLoop(animate);
				
				// 设置DOM元素样式并添加场景背景
				setupDomElement(renderer);
				scene.background = new THREE.Color(0x313131);  // 深灰色背景

				// =============== 6. 比特排序模块初始化 ===============

				/**
				 * 创建比特排序模块
				 * BitonicSort类封装了完整的比特排序算法逻辑
				 * 参数说明：
				 * - renderer: WebGPU渲染器
				 * - currentElementsStorage: 要排序的数据存储
				 * - options: 配置选项，这里设置工作组大小为64
				 */
				const bitonicSortModule = new BitonicSort(
					renderer,
					currentElementsStorage,
					{
						workgroupSize: 64,  // 工作组大小：每个工作组64个线程
					}
				);

				// 添加显示网格到场景
				scene.add(createDisplayMesh2(currentElementsStorage, bitonicSortModule.infoStorage));

				// =============== 7. 计算着色器创建 ===============

				/**
				 * 创建计算着色器调用
				 * compute()方法将着色器函数编译为计算管线
				 * 参数size指定要调用的线程数量
				 */
				const computeInit = computeInitFn().compute(size);           // 初始化计算
				const computeReset = computeResetBuffersFn().compute(size);  // 重置计算

				// 执行初始化计算
				renderer.compute(computeInit);

				// =============== 8. 排序动画控制 ===============

				/**
				 * 逐步执行排序动画
				 * 这个函数控制排序的逐步执行，每100毫秒执行一步
				 */
				const stepAnimation = async function () {
					// 重置性能统计信息
					renderer.info.reset();

					// 判断是否还有未执行的排序步骤
					if (currentStep < bitonicSortModule.stepCount) {
						// 执行一个排序步骤
						bitonicSortModule.computeStep(renderer);
						currentStep++;  // 步骤索引加1
					} else {
						// 所有步骤完成，重置数据
						renderer.compute(computeReset);
						currentStep = 0;  // 重置步骤索引
					}

					// 更新左侧信息显示
					timestamps['local_swap'].innerHTML = constructInnerHTML(false, localColors);

					// 设置下一步执行的时间延迟
					if (currentStep === bitonicSortModule.stepCount) {
						// 排序完成后延迟1秒再重置，让用户看到排序结果
						setTimeout(stepAnimation, 1000);
					} else {
						// 步骤间延迟100毫秒，让用户能看到每一步的变化
						setTimeout(stepAnimation, 100);
					}
				};

				// 启动排序动画
				stepAnimation();

				// =============== 9. 窗口大小调整事件监听 ===============

				// 添加窗口大小调整事件监听器
				window.addEventListener('resize', onWindowResize);

				/**
				 * 窗口大小调整处理函数
				 */
				function onWindowResize() {
					windowResizeCallback(renderer, scene, camera);
				}
			}

			// 启动左侧本地交换演示
			initBitonicSort();

			// =============== 全局交换演示初始化（右侧画布） ===============

			/**
			 * 初始化全局交换演示
			 * 此函数设置右侧画布，演示在GPU全局内存中的排序过程
			 * 与左侧画布的主要区别：所有交换都在全局存储缓冲区中进行
			 */
			async function initGlobalSwapOnly() {
				let currentStep = 0;  // 当前执行的排序步骤索引

				// =============== 1. 场景和相机设置 ===============

				// 设置正交相机（与左侧相同）
				const aspect = (window.innerWidth / 2) / window.innerHeight;
				const camera = new THREE.OrthographicCamera(-aspect, aspect, 1, -1, 0, 2);
				camera.position.z = 1;
				const scene = new THREE.Scene();

				// =============== 2. 算法信息缓冲区创建 ===============

				/**
				 * 创建算法信息存储缓冲区
				 * 存储三个关键参数：
				 * [0]：当前算法类型（StepType枚举值）
				 * [1]：当前块高度（block height）
				 * [2]：最高块高度（highest block height）
				 * 
				 * 初始值：[3, 2, 2]
				 * - 3：StepType.FLIP_GLOBAL（全局翻转交换）
				 * - 2：初始块高度为2
				 * - 2：初始最高块高度为2
				 */
				const infoArray = new Uint32Array([3, 2, 2]);
				const infoBuffer = new THREE.StorageInstancedBufferAttribute(infoArray, 1);
				const infoStorage = storage(infoBuffer, 'uint', infoBuffer.count)
					.setPBO(true)
					.setName('TheInfo');

				/**
				 * 创建下一块高度存储缓冲区
				 * 存储下一个排序步骤使用的块高度
				 * 初始值为2
				 */
				const nextBlockHeightBuffer = new THREE.StorageInstancedBufferAttribute(
					new Uint32Array(1).fill(2), 1);
				const nextBlockHeightStorage = storage(nextBlockHeightBuffer, 'uint', nextBlockHeightBuffer.count)
					.setPBO(true)
					.setName('NextBlockHeight');
				
				// 创建只读版本，用于显示
				const nextBlockHeightRead = storage(nextBlockHeightBuffer, 'uint', nextBlockHeightBuffer.count)
					.setPBO(true)
					.setName('NextBlockHeight')
					.toReadOnly();  // 设置为只读，防止意外修改

				// =============== 3. 数据缓冲区创建 ===============

				// 创建并随机化初始数据
				const array = new Uint32Array(Array.from({ length: size }, (_, i) => i));
				randomizeDataArray(array);

				/**
				 * 创建多个存储缓冲区：
				 * 1. currentElementsStorage：当前排序状态的元素缓冲区
				 * 2. tempStorage：临时缓冲区，用于存储交换结果
				 * 3. randomizedElementsStorage：随机化原始数据缓冲区（用于重置）
				 */
				const currentElementsBuffer = new THREE.StorageInstancedBufferAttribute(array, 1);
				const currentElementsStorage = storage(currentElementsBuffer, 'uint', size)
					.setPBO(true)
					.setName('Elements');

				const tempBuffer = new THREE.StorageInstancedBufferAttribute(array, 1);
				const tempStorage = storage(tempBuffer, 'uint', size)
					.setPBO(true)
					.setName('Temp');

				const randomizedElementsBuffer = new THREE.StorageInstancedBufferAttribute(size, 1);
				const randomizedElementsStorage = storage(randomizedElementsBuffer, 'uint', size)
					.setPBO(true)
					.setName('RandomizedElements');

				// =============== 4. 全局比较和交换函数 ===============

				/**
				 * 全局比较和交换函数
				 * 比较两个元素，如果顺序错误则交换它们
				 * 结果存储在临时缓冲区中，避免读写冲突
				 * @param {uint} idxBefore - 第一个元素的索引
				 * @param {uint} idxAfter - 第二个元素的索引
				 * 
				 * 算法逻辑：
				 * 1. 比较idxAfter和idxBefore处的元素
				 * 2. 如果idxAfter < idxBefore，交换两个元素
				 * 3. 否则保持原顺序
				 * 4. 结果写入临时缓冲区
				 */
				const globalCompareAndSwap = (idxBefore, idxAfter) => {
					// 如果后一个元素小于前一个元素，需要交换
					If(currentElementsStorage.element(idxAfter).lessThan(currentElementsStorage.element(idxBefore)), () => {
						// 交换值：将较小的值放到idxBefore位置
						tempStorage.element(idxBefore).assign(currentElementsStorage.element(idxAfter));
						// 将较大的值放到idxAfter位置
						tempStorage.element(idxAfter).assign(currentElementsStorage.element(idxBefore));
					}).Else(() => {
						// 顺序正确，保持原值
						tempStorage.element(idxBefore).assign(currentElementsStorage.element(idxBefore));
						tempStorage.element(idxAfter).assign(currentElementsStorage.element(idxAfter));
					});
				};

				// =============== 5. 计算着色器函数定义 ===============

				/**
				 * 初始化函数：复制当前元素到随机化缓冲区
				 */
				const computeInitFn = Fn(() => {
					randomizedElementsStorage.element(instanceIndex)
						.assign(currentElementsStorage.element(instanceIndex));
				});

				/**
				 * 比特排序步骤函数
				 * 根据当前算法类型执行相应的全局交换操作
				 * 
				 * 比特排序的两个主要阶段：
				 * 1. FLIP_GLOBAL：翻转交换，用于合并两个有序序列
				 * 2. DISPERSE_GLOBAL：分散交换，用于创建有序序列
				 */
				const computeBitonicStepFn = Fn(() => {
					// 获取当前算法参数
					const nextBlockHeight = nextBlockHeightStorage.element(0).toVar();
					const nextAlgo = infoStorage.element(0).toVar();

					/**
					 * 根据算法类型选择交换模式
					 * 比特排序算法的核心：不同阶段使用不同的比较模式
					 */
					If(nextAlgo.equal(uint(StepType.FLIP_GLOBAL)), () => {
						/**
						 * 翻转交换（Flip）
						 * 比较相距blockHeight/2的两个元素
						 * 用于合并两个有序序列
						 */
						const idx = getBitonicFlipIndices(instanceIndex, nextBlockHeight);
						globalCompareAndSwap(idx.x, idx.y);
					}).ElseIf(nextAlgo.equal(uint(StepType.DISPERSE_GLOBAL)), () => {
						/**
						 * 分散交换（Disperse）
						 * 比较相距不同距离的元素
						 * 用于创建有序序列
						 */
						const idx = getBitonicDisperseIndices(instanceIndex, nextBlockHeight);
						globalCompareAndSwap(idx.x, idx.y);
					});
				});

				/**
				 * 设置下一步算法参数函数
				 * 更新块高度和算法类型，控制排序的进度
				 * 
				 * 比特排序的阶段控制逻辑：
				 * 1. 块高度逐渐减小：nextBlockHeight /= 2
				 * 2. 当块高度减到1时，进入下一阶段
				 * 3. 最高块高度逐渐增加：highestBlockHeight *= 2
				 * 4. 当最高块高度达到2*size时，排序完成
				 */
				const computeSetAlgoFn = Fn(() => {
					// 获取当前参数
					const nextBlockHeight = nextBlockHeightStorage.element(0).toVar();
					const nextAlgo = infoStorage.element(0);
					const highestBlockHeight = infoStorage.element(2).toVar();

					// 块高度减半（比特排序算法的核心）
					nextBlockHeight.divAssign(2);

					// 判断当前阶段是否完成
					If(nextBlockHeight.equal(1), () => {
						// 当前阶段完成，进入下一阶段
						highestBlockHeight.mulAssign(2);  // 最高块高度翻倍

						// 判断排序是否全部完成
						If(highestBlockHeight.equal(size * 2), () => {
							// 排序完成，设置算法类型为NONE
							nextAlgo.assign(StepType.NONE);
							nextBlockHeight.assign(0);
						}).Else(() => {
							// 开始新阶段的翻转交换
							nextAlgo.assign(StepType.FLIP_GLOBAL);
							nextBlockHeight.assign(highestBlockHeight);
						});
					}).Else(() => {
						// 继续当前阶段的分散交换
						nextAlgo.assign(StepType.DISPERSE_GLOBAL);
					});

					// 更新存储缓冲区中的参数
					nextBlockHeightStorage.element(0).assign(nextBlockHeight);
					infoStorage.element(2).assign(highestBlockHeight);
				});

				/**
				 * 同步当前缓冲区和临时缓冲区
				 * 将临时缓冲区中的交换结果复制回当前缓冲区
				 */
				const computeAlignCurrentFn = Fn(() => {
					currentElementsStorage.element(instanceIndex)
						.assign(tempStorage.element(instanceIndex));
				});

				/**
				 * 重置数据缓冲区函数
				 * 排序完成后，恢复原始随机数据
				 */
				const computeResetBuffersFn = Fn(() => {
					currentElementsStorage.element(instanceIndex)
						.assign(randomizedElementsStorage.element(instanceIndex));
				});

				/**
				 * 重置算法参数函数
				 * 排序完成后，重置算法状态到初始值
				 */
				const computeResetAlgoFn = Fn(() => {
					infoStorage.element(0).assign(StepType.FLIP_GLOBAL);  // 算法类型：全局翻转
					nextBlockHeightStorage.element(0).assign(2);          // 块高度：2
					infoStorage.element(2).assign(2);                     // 最高块高度：2
				});

				// =============== 6. 计算着色器创建 ===============

				/**
				 * 创建所有计算着色器调用
				 * 每个compute()调用创建一个计算管线
				 * 参数说明：
				 * - size：执行线程总数
				 * - size/2：每次比较处理一对元素，所以需要一半的线程
				 * - 1：只需要一个线程更新算法参数
				 */
				const computeInit = computeInitFn().compute(size);            // 初始化
				const computeBitonicStep = computeBitonicStepFn().compute(size / 2);  // 排序步骤
				const computeSetAlgo = computeSetAlgoFn().compute(1);         // 更新算法参数
				const computeAlignCurrent = computeAlignCurrentFn().compute(size);    // 同步缓冲区
				const computeResetBuffers = computeResetBuffersFn().compute(size);    // 重置数据
				const computeResetAlgo = computeResetAlgoFn().compute(1);             // 重置算法

				// =============== 7. 场景设置 ===============

				// 添加显示网格到场景
				scene.add(createDisplayMesh(currentElementsStorage, infoStorage, nextBlockHeightRead));

				// =============== 8. 渲染器初始化 ===============

				/**
				 * 创建第二个WebGPU渲染器（右侧画布）
				 * 与左侧画布使用不同的渲染器实例
				 */
				const renderer = new THREE.WebGPURenderer({ antialias: false });
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth / 2, window.innerHeight);
				
				// 异步初始化WebGPU
				await renderer.init();

				// 设置动画循环
				const animate = () => {
					renderer.render(scene, camera);
				};
				renderer.setAnimationLoop(animate);
				
				// 设置DOM元素样式（右侧画布）
				setupDomElement(renderer);
				renderer.domElement.style.left = '50%';  // 左侧位置为50%，占据右半屏
				scene.background = new THREE.Color(0x212121);  // 深灰色背景

				// =============== 9. 数据初始化 ===============

				// 执行初始化计算
				renderer.compute(computeInit);

				// =============== 10. 排序动画控制 ===============

				/**
				 * 逐步执行全局排序动画
				 * 与左侧类似，但执行全局交换操作
				 */
				const stepAnimation = async function () {
					// 判断是否还有未执行的排序步骤
					if (currentStep !== MAX_STEPS) {
						// 执行一个完整的排序步骤：
						// 1. 执行交换操作（结果写入临时缓冲区）
						renderer.compute(computeBitonicStep);
						// 2. 将结果同步回当前缓冲区
						renderer.compute(computeAlignCurrent);
						// 3. 更新算法参数，准备下一步
						renderer.compute(computeSetAlgo);
						currentStep++;  // 步骤索引加1
					} else {
						// 所有步骤完成，重置数据和算法状态
						renderer.compute(computeResetBuffers);  // 重置数据
						renderer.compute(computeResetAlgo);     // 重置算法
						currentStep = 0;  // 重置步骤索引
					}

					// 更新右侧信息显示
					timestamps['global_swap'].innerHTML = constructInnerHTML(true, globalColors);

					// 设置下一步执行的时间延迟
					if (currentStep === MAX_STEPS) {
						// 排序完成后延迟1秒
						setTimeout(stepAnimation, 1000);
					} else {
						// 步骤间延迟100毫秒
						setTimeout(stepAnimation, 100);
					}
				};

				// 启动排序动画
				stepAnimation();

				// =============== 11. 窗口大小调整事件监听 ===============

				// 添加窗口大小调整事件监听器
				window.addEventListener('resize', onWindowResize);

				/**
				 * 窗口大小调整处理函数
				 */
				function onWindowResize() {
					windowResizeCallback(renderer, scene, camera);
				}
			}

			// 启动右侧全局交换演示
			initGlobalSwapOnly();
		</script>
	</body>
</html>