<!-- 代码功能与主要技术点详解
🎯 项目概述
这是一个基于 Three.js WebGPU + Web Audio API 的实时音频处理与可视化Web应用。它展示了如何在浏览器中利用GPU进行高效的音频信号处理，并创建沉浸式的音频可视化体验。

🎵 核心功能
1. 实时音频处理
音高调整：动态改变音频播放速度（0.5x-2.0x）

多重延迟回声：创建6层递减的延迟效果，模拟空间混响

GPU加速处理：所有音频样本在GPU上并行处理

2. 音频可视化
实时频谱显示：将音频频率数据映射为动态蓝色渐变背景

交互式控制：通过GUI界面实时调整处理参数

视觉反馈：频谱强度直接影响背景亮度

3. 用户交互
一键启动：点击按钮初始化应用

点击重处理：每次点击屏幕重新处理并播放音频

实时参数调节：滑动条控制音高、延迟音量、延迟时间

🚀 主要技术点
前端架构
text
HTML + CSS + JavaScript (ES6模块)
├── Three.js WebGPU 渲染器
├── Web Audio API
└── 现代浏览器API
1. WebGPU 计算着色器
javascript
// GPU并行处理音频数据
const computeShaderFn = Fn(() => {
    const index = float(instanceIndex);  // 当前样本索引
    const time = index.mul(pitch);       // 时间伸缩
    
    // 延迟效果叠加
    for (let i = 1; i < 7; i++) {
        const waveOffset = originalWave.element(
            index.sub(delayOffset.mul(sampleRate).mul(i)).mul(pitch)
        );
        wave = wave.add(waveOffset.mul(delayVolume.div(i * i)));
    }
});
并行处理：同时处理所有音频样本（~数十万并发）

计算节点：将着色器编译为可执行单元

数据传输：通过PBO实现GPU↔CPU高效数据交换

2. Three.js 着色器语言 (TSL)
javascript
import { Fn, uniform, instancedArray, float } from 'three/tsl';
声明式编程：类似React的组件化着色器定义

类型安全：明确的浮点、向量类型

节点化系统：构建复杂的着色器管线

3. Web Audio API 集成
javascript
// 音频处理管道
AudioBuffer → GPU处理 → Float32Array → AudioContext → 播放
         ↓
    AnalyserNode → 频谱数据 → DataTexture → 可视化
4. 数据传输机制
javascript
// GPU到CPU数据传输（关键优化点）
waveArray.setPBO(true);  // 启用像素缓冲对象
const wave = new Float32Array(
    await renderer.getArrayBufferAsync(waveArray.value)
);
异步传输：不阻塞主线程

缓冲区复用：避免每帧创建新ArrayBuffer

内存优化：使用Float32Array存储音频数据

5. 可视化系统
javascript
// 频谱可视化着色器
const spectrum = texture(analyserTexture, screenUV.x).x.mul(screenUV.y);
const backgroundNode = color(0x0000FF).mul(spectrum);
实时纹理更新：每帧更新频谱数据

UV映射：屏幕坐标映射到频谱数据

颜色混合：蓝色基础色×频谱强度

🔧 技术架构详解
处理流程
graph LR
A[加载MP3音频] -> B[解码为AudioBuffer]
B -> C[上传到GPU]
C -> D[GPU并行处理]
D -> E[下载到CPU]
E -> F[Web Audio播放]
F -> G[频谱分析]
G -> H[可视化渲染]
H -> D


性能优化策略
GPU并行化：避免CPU单线程瓶颈

缓冲区重用：减少内存分配开销

异步操作：非阻塞UI响应

适量FFT：平衡分辨率与性能

音频处理算法
音高变换：基于时间伸缩的变调算法

延迟反馈：模拟物理空间的回声衰减

信号叠加：原始信号与多个延迟信号混合

🎨 创新亮点
技术层面
浏览器端实时GPU音频处理

WebGPU + Web Audio的无缝集成

声明式着色器编程模型

实时参数调整的即时反馈

应用层面
专业级音频效果实现

沉浸式可视化体验

教育价值：展示Web多媒体处理能力

性能标杆：展示现代Web平台潜力

📊 技术规格
系统要求
支持WebGPU的浏览器（Chrome 113+、Edge 113+）

现代显卡和驱动程序

音频输出设备

性能指标
音频样本：原始+200000静音样本

并行处理：GPU同时处理所有样本

帧率：60fps稳定渲染

延迟：<100ms端到端处理

🔍 学习价值
这个项目展示了多个前沿Web技术的集成应用：

WebGPU：下一代图形和计算API

Three.js TSL：高级着色器抽象

Web Audio：专业音频处理能力

实时可视化：数据到视觉的映射

🚀 扩展可能性
功能扩展
添加更多音频效果（滤波器、失真、混响）

支持用户上传音频文件

添加3D可视化场景

实现音频录制功能

技术优化
使用Web Workers分担计算负载

实现WebAssembly音频处理

添加PWA支持离线使用

优化移动设备适配 -->


<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGPU音频处理示例 -->
		<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">
		<!-- 外部CSS样式表链接 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 初始启动覆盖层 -->
		<!-- 功能：在页面加载时显示，防止用户直接与Three.js场景交互，直到点击开始按钮 -->
		<div id="overlay">
			<!-- 开始按钮：用户点击后初始化整个应用程序 -->
			<button id="startButton">开始音频处理体验</button>
		</div>

		<!-- 页面信息显示区域 -->
		<!-- 功能：显示Three.js品牌信息和当前示例的描述 -->
		<div id="info">
			<!-- Three.js官方Logo链接 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 注意：实际logo可能通过CSS背景图实现 -->
			</a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 主标题链接到Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题显示当前示例名称 -->
				<span>WebGPU音频处理演示</span>
			</div>

			<!-- 操作提示说明文字 -->
			<small>使用说明：点击屏幕任意位置，使用WebGPU技术实时处理音频并生成视觉效果</small>
			<!-- 额外功能说明（可根据需要添加） -->
			<br>
		</div>

		<!-- 浏览器模块导入映射配置（Import Maps） -->
		<!-- 功能：为JavaScript模块指定导入别名，简化模块导入路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主应用程序JavaScript模块 -->
		<!-- type="module" 表示这是一个ES6模块，支持顶级await等现代JS特性 -->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// 导入Three.js的WebGPU版本核心功能
			// 注意：这里导入的是专门针对WebGPU优化的版本，与标准的WebGL版本不同
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）的关键函数和节点
			// Fn: 定义着色器函数的主要构造器
			// uniform: 创建可在CPU端动态更新的着色器参数
			// instanceIndex: 获取当前计算着色器调用的实例索引（类似for循环的i）
			// instancedArray: 创建实例化数组缓冲区，用于存储大量数据
			// float: 将数值转换为浮点类型（WebGPU着色器中需要明确类型）
			// texture: 纹理采样节点，用于读取纹理数据
			// screenUV: 获取屏幕空间UV坐标（范围0-1）
			// color: 颜色节点构造器
			import { Fn, uniform, instanceIndex, instancedArray, float, texture, screenUV, color } from 'three/tsl';
			
			// 导入调试检查器工具，用于创建参数调节GUI界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ==================== 全局变量声明 ====================
			// Three.js核心场景对象变量
			let camera;      // 相机：决定观察场景的视角和投影方式
			let scene;       // 场景：包含所有3D对象、灯光和背景的容器
			let renderer;    // 渲染器：负责将3D场景绘制到2D画布上
			
			// WebGPU计算相关变量
			let computeNode; // 计算着色器节点：定义GPU并行计算逻辑的TSL节点
			
			// 音频数据处理变量
			let waveBuffer;  // 原始音频波形数据（Float32Array格式）
			let sampleRate;  // 音频采样率（每秒样本数）
			let waveArray;   // WebGPU缓冲区包装对象，用于存储处理后的音频数据
			
			// 音频播放和分析变量
			let currentAudio;      // 当前正在播放的音频源对象
			let currentAnalyser;   // 音频分析器，用于获取实时频谱数据
			const analyserBuffer = new Uint8Array( 1024 ); // 频谱数据缓冲区，长度1024
			// 注意：Uint8Array表示8位无符号整数数组，适合WebGL纹理数据格式
			let analyserTexture;   // 将频谱数据转换为Three.js纹理，用于可视化

			// ==================== 事件监听器设置 ====================
			// 获取开始按钮DOM元素
			const startButton = document.getElementById( 'startButton' );
			// 为开始按钮添加点击事件监听器
			// 当用户点击按钮时，调用init()函数初始化整个应用程序
			startButton.addEventListener( 'click', init );

			/**
			 * 播放处理后的音频缓冲区
			 * 异步函数，执行完整的音频处理-播放-可视化流程
			 * 
			 * 处理流程：
			 * 1. 停止当前可能正在播放的音频（避免重叠播放）
			 * 2. 在GPU上执行音频处理计算（并行处理所有音频样本）
			 * 3. 等待GPU计算完成并将处理后的数据异步传输回CPU
			 * 4. 创建新的音频上下文和缓冲区
			 * 5. 将处理后的音频数据填充到音频缓冲区
			 * 6. 创建音频源节点并开始播放
			 * 7. 设置音频分析器用于实时频谱可视化
			 * 
			 * @returns {Promise<void>} 无返回值，但函数是异步的
			 */
			async function playAudioBuffer() {

				// 第一步：停止当前音频（如果存在）
				// 避免多个音频同时播放造成混乱
				if ( currentAudio ) {
					currentAudio.stop(); // 停止音频播放
					// 注意：这里没有断开连接或释放资源，简化实现
				}

				// 第二步：在GPU上执行音频处理计算
				// renderer.compute()触发计算着色器的执行
				// computeNode包含了我们定义的所有音频处理逻辑
				// 这个调用是异步的，会在GPU上并行处理所有样本
				renderer.compute( computeNode );

				// 第三步：获取GPU处理后的数据
				// renderer.getArrayBufferAsync()是异步函数，原因：
				// 1. GPU计算需要时间完成
				// 2. 数据从GPU传输到CPU需要时间（通过PBO）
				// 3. 使用await等待数据传输完成
				const wave = new Float32Array( await renderer.getArrayBufferAsync( waveArray.value ) );
				// waveArray.value是底层WebGPU缓冲区对象
				// 返回的是ArrayBuffer，需要包装为Float32Array以便使用

				// 第四步：创建音频上下文和缓冲区
				// 使用与原始音频相同的采样率创建音频上下文
				const audioOutputContext = new AudioContext( { sampleRate } );
				// 创建单声道音频缓冲区，长度等于处理后的样本数
				const audioOutputBuffer = audioOutputContext.createBuffer( 1, wave.length, sampleRate );

				// 第五步：将处理后的波形数据复制到音频缓冲区
				// copyToChannel()将Float32Array数据复制到指定声道
				// 参数1：源数据（处理后的波形）
				// 参数2：声道索引（0表示单声道）
				// 参数3（可选）：缓冲区中的起始位置（默认为0）
				audioOutputBuffer.copyToChannel( wave, 0 );

				// 第六步：创建音频源节点并开始播放
				// 创建BufferSource节点，这是Web Audio API的核心组件
				const source = audioOutputContext.createBufferSource();
				// 将音频源连接到音频上下文的输出目标（通常是扬声器）
				source.connect( audioOutputContext.destination );
				// 设置音频源使用的缓冲区数据
				source.buffer = audioOutputBuffer;
				// 立即开始播放（参数可指定延迟时间）
				source.start();

				// 保存当前音频对象引用，以便后续控制
				currentAudio = source;

				// 第七步：设置音频分析器用于频谱可视化
				// 创建AnalyserNode，用于实时分析音频频率数据
				currentAnalyser = audioOutputContext.createAnalyser();
				// 设置FFT（快速傅里叶变换）大小，决定频率分辨率
				// 值越大，频率分辨率越高，但计算成本也越高
				// 2048表示使用2048个样本进行频率分析
				currentAnalyser.fftSize = 2048;
				// 注意：analyserBuffer长度是1024，因为FFT返回的是频域数据的bin数
				// bin数 = fftSize / 2 = 2048 / 2 = 1024

				// 将音频源连接到分析器
				// 分析器会实时分析通过它的音频数据
				source.connect( currentAnalyser );

				// 注意：分析器没有连接到destination，它只是"监听"音频流
				// 音频仍然直接流向扬声器

			}

			/**
			 * 初始化整个应用程序
			 * 这是主要的初始化入口函数，负责：
			 * 1. 移除启动覆盖层，显示主界面
			 * 2. 加载和准备音频数据
			 * 3. 设置WebGPU计算着色器和缓冲区
			 * 4. 初始化Three.js场景、相机和渲染器
			 * 5. 设置用户界面和事件监听器
			 * 6. 首次播放处理后的音频
			 * 
			 * 这是一个异步函数，因为：
			 * 1. 需要加载外部音频文件
			 * 2. WebGPU渲染器需要异步初始化
			 * 3. 音频解码是异步操作
			 * 
			 * @returns {Promise<void>} 无返回值
			 */
			async function init() {

				// 第一步：移除启动覆盖层
				// 获取覆盖层DOM元素
				const overlay = document.getElementById( 'overlay' );
				// 从DOM中移除覆盖层，显示下方的Three.js场景
				overlay.remove();

				// ==================== 音频数据准备阶段 ====================
				
				// 加载外部MP3音频文件
				// 使用fetch API异步获取音频文件
				const soundBuffer = await fetch( 'sounds/webgpu-audio-processing.mp3' ).then( res => res.arrayBuffer() );
				// 注意：这里创建的是临时音频上下文，仅用于解码
				// 后续播放会创建新的音频上下文
				const audioContext = new AudioContext();

				// 解码音频数据
				// decodeAudioData()将ArrayBuffer解码为AudioBuffer对象
				const audioBuffer = await audioContext.decodeAudioData( soundBuffer );

				// 获取音频波形的原始数据
				// getChannelData(0)获取第一个声道的数据（单声道）
				// 返回的是Float32Array，每个值在-1.0到1.0之间
				waveBuffer = audioBuffer.getChannelData( 0 );

				// 添加额外的静音段到音频末尾
				// 目的：为延迟效果提供"空白"时间，避免延迟回声超出音频长度
				// 200000个静音样本大约对应：200000 / 44100Hz ≈ 4.5秒静音
				waveBuffer = new Float32Array( [ ...waveBuffer, ...new Float32Array( 200000 ) ] );
				// 使用扩展运算符(...)合并两个数组

				// 计算有效的采样率
				// 实际采样率 = 原始采样率 / 声道数
				// 因为我们只取了一个声道，所以需要调整采样率
				sampleRate = audioBuffer.sampleRate / audioBuffer.numberOfChannels;

				// ==================== WebGPU缓冲区设置 ====================
				
				// 创建可写的WebGPU缓冲区
				// instancedArray()将Float32Array包装为WebGPU缓冲区
				// 这个缓冲区将存储GPU处理后的音频数据
				waveArray = instancedArray( waveBuffer );

				// 创建只读的WebGPU缓冲区
				// 存储原始音频数据，计算着色器将读取这些数据
				// toReadOnly()将缓冲区标记为只读，优化GPU内存访问
				const originalWave = instancedArray( waveBuffer ).toReadOnly();

				// 为两个缓冲区启用PBO（Pixel Buffer Object）支持
				// PBO在WebGL2回退方案中用于GPU到CPU的数据传输
				// 在纯WebGPU实现中可能不是必需的，但为了兼容性保留
				originalWave.setPBO( true );
				waveArray.setPBO( true );

				// ==================== 音频处理参数设置 ====================
				
				// 创建可在运行时调节的着色器参数（uniforms）
				// uniform()创建可在CPU端更新、GPU端读取的参数
				const pitch = uniform( 1.5 );        // 音高参数，默认1.5倍（加速播放）
				const delayVolume = uniform( .2 );   // 延迟效果音量，默认0.2（20%音量）
				const delayOffset = uniform( .55 );  // 延迟时间偏移，默认0.55秒

				// ==================== 计算着色器定义 ====================
				
				/**
				 * 计算着色器函数
				 * 使用TSL（Three.js Shading Language）定义GPU并行计算逻辑
				 * 这个函数会在GPU上为每个音频样本并行执行一次
				 * 
				 * 处理逻辑：
				 * 1. 音高调整（时间伸缩）
				 * 2. 6层递减延迟回声效果
				 * 
				 * 返回：一个可执行的计算节点
				 */
				const computeShaderFn = Fn( () => {

					// 获取当前处理的样本索引
					// instanceIndex是内置变量，表示当前计算着色器调用的索引
					// float()确保索引是浮点数类型
					const index = float( instanceIndex );

					// ===== 音高处理部分 =====
					// 原理：通过调整时间索引实现音高变化
					// time = index × pitch
					// 当pitch>1时，时间被压缩，音调变高，播放速度加快
					// 当pitch<1时，时间被拉伸，音调变低，播放速度减慢
					const time = index.mul( pitch );

					// 从原始音频获取当前时间点的样本值
					// originalWave.element(time)相当于读取数组的time索引处的值
					// 注意：time可能是小数，需要插值（GPU硬件自动处理）
					let wave = originalWave.element( time );

					// ===== 延迟效果处理部分 =====
					// 创建6层递减的延迟回声效果
					// 原理：将当前样本与之前的样本（经过不同延迟）混合
					for ( let i = 1; i < 7; i ++ ) {

						// 计算延迟偏移的样本位置：
						// 1. delayOffset × sampleRate 将秒转换为样本数
						// 2. 乘以i得到不同层级的延迟
						// 3. 从当前索引减去延迟量，得到过去的时间点
						// 4. 乘以pitch应用相同的音高调整
						const waveOffset = originalWave.element( 
							index.sub( delayOffset.mul( sampleRate ).mul( i ) ).mul( pitch ) 
						);
						
						// 计算延迟层的音量：
						// 1. delayVolume是基础音量参数
						// 2. 除以i×i实现音量随延迟层级递减
						// 3. 平方衰减产生更自然的回声衰减效果
						const waveOffsetVolume = waveOffset.mul( delayVolume.div( i * i ) );

						// 将延迟层叠加到主波形上
						// 加法操作将回声混合到原始声音中
						wave = wave.add( waveOffsetVolume );

					}

					// ===== 结果存储部分 =====
					// 获取输出缓冲区中对应索引的元素引用
					const waveStorageElementNode = waveArray.element( instanceIndex );
					// 将处理后的样本值赋值到输出缓冲区
					// assign()将计算得到的wave值存储到GPU缓冲区
					waveStorageElementNode.assign( wave );

				} );

				// ==================== 计算节点创建 ====================
				
				// 创建计算节点，指定工作负载大小
				// compute()将着色器函数编译为可执行的计算节点
				// 参数：需要处理的样本总数（每个样本并行处理一次）
				computeNode = computeShaderFn().compute( waveBuffer.length );

				// ==================== Three.js渲染器设置 ====================
				
				// 创建容器元素并添加到页面
				// 这个div将包含Three.js的canvas元素
				const container = document.createElement( 'div' );
				document.body.appendChild( container );

				// 创建透视相机
				// 参数说明：
				// 1. 45 - 垂直视野角度（度）
				// 2. window.innerWidth / window.innerHeight - 宽高比
				// 3. 0.01 - 近裁剪面距离
				// 4. 30 - 远裁剪面距离
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 30 );

				// ==================== 可视化节点设置 ====================
				
				// 创建用于频谱可视化的数据纹理
				// DataTexture允许我们直接使用JavaScript数组作为纹理数据
				// 参数说明：
				// 1. analyserBuffer - 纹理数据源（Uint8Array）
				// 2. analyserBuffer.length - 纹理宽度（1024像素）
				// 3. 1 - 纹理高度（1像素，创建1D纹理效果）
				// 4. THREE.RedFormat - 纹理格式（只使用红色通道）
				analyserTexture = new THREE.DataTexture( analyserBuffer, analyserBuffer.length, 1, THREE.RedFormat );

				// 创建背景着色器节点
				// 使用TSL节点系统定义动态背景效果
				// 效果：基于音频频谱数据生成蓝色渐变背景
				const spectrum = texture( analyserTexture, screenUV.x )  // 采样纹理：x坐标对应频率
					.x  // 获取红色通道值（频谱强度）
					.mul( screenUV.y );  // 乘以y坐标，创建垂直渐变
				const backgroundNode = color( 0x0000FF )  // 创建蓝色基础色
					.mul( spectrum );  // 乘以频谱值，产生亮度变化

				// ==================== Three.js场景设置 ====================
				
				// 创建场景对象
				scene = new THREE.Scene();
				// 设置场景的动态背景节点
				// backgroundNode会在每一帧根据频谱数据重新计算
				scene.backgroundNode = backgroundNode;

				// ==================== 渲染器初始化 ====================
				
				// 创建WebGPU渲染器实例
				// 参数：{ antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比
				// 确保在高DPI屏幕（如Retina）上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// 每帧自动调用render()函数，实现动画效果
				renderer.setAnimationLoop( render );
				
				// 创建并附加调试检查器
				// Inspector提供GUI界面，用于调节参数和调试
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas）添加到容器中
				container.appendChild( renderer.domElement );

				// 异步初始化渲染器
				// WebGPU需要异步初始化，因为需要请求设备权限和编译着色器
				await renderer.init();

				// ==================== 事件监听器设置 ====================
				
				// 窗口大小调整事件监听器
				// 当用户调整浏览器窗口大小时，更新相机和渲染器
				window.addEventListener( 'resize', onWindowResize );
				
				// 全局点击事件监听器
				// 用户点击屏幕任意位置时，重新处理并播放音频
				document.addEventListener( 'click', playAudioBuffer );

				// ==================== 用户界面设置 ====================
				
				// 创建调试GUI面板
				// 在Inspector中添加名为"Audio"的参数面板
				const gui = renderer.inspector.createParameters( 'Audio' );

				// 添加音高参数控件
				// 参数说明：
				// 1. pitch - 参数对象
				// 2. 'value' - 要控制的属性名
				// 3. .5, 2 - 取值范围（最小值，最大值）
				// 4. 0.01 - 步进值（滑动条精度）
				// 5. 'pitch' - 控件显示名称
				gui.add( pitch, 'value', .5, 2, 0.01 ).name( '音高调节' );
				
				// 添加延迟音量参数控件
				gui.add( delayVolume, 'value', 0, 1, .01 ).name( '延迟音量' );
				
				// 添加延迟时间偏移参数控件
				gui.add( delayOffset, 'value', .1, 1, .01 ).name( '延迟时间' );

				// ==================== 启动应用程序 ====================
				
				// 首次自动播放处理后的音频
				// 让用户立即听到处理效果，无需先点击屏幕
				playAudioBuffer();

			}

			/**
			 * 窗口大小调整处理函数
			 * 当用户调整浏览器窗口大小时调用
			 * 确保Three.js场景正确适应新的窗口尺寸
			 * 
			 * 处理逻辑：
			 * 1. 更新相机宽高比
			 * 2. 更新相机投影矩阵（必须手动调用）
			 * 3. 更新渲染器输出尺寸
			 */
			function onWindowResize() {

				// 更新相机宽高比
				// 使用当前窗口的实际宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 重要：修改相机参数后必须调用此方法
				// 否则Three.js不会应用新的投影参数
				camera.updateProjectionMatrix();

				// 更新渲染器输出尺寸
				// 使canvas大小与窗口大小匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 渲染循环函数
			 * 由Three.js动画循环每帧自动调用（通常60fps）
			 * 
			 * 每帧执行：
			 * 1. 更新频谱数据（如果音频正在播放）
			 * 2. 更新频谱纹理
			 * 3. 渲染整个场景
			 * 
			 * 注意：这是游戏循环（game loop）模式的标准实现
			 */
			function render() {

				// 第一步：更新频谱数据（如果音频正在播放）
				// 检查当前是否有活动的音频分析器
				if ( currentAnalyser ) {

					// 从音频分析器获取实时频率数据
					// getByteFrequencyData()将当前音频频率分析结果复制到指定数组
					// 结果值范围：0-255（8位无符号整数）
					// 每个元素代表一个频率区间的强度
					currentAnalyser.getByteFrequencyData( analyserBuffer );
					// 注意：此方法会直接修改analyserBuffer数组的内容

					// 标记频谱纹理需要更新
					// Three.js不会自动检测DataTexture数据变化
					// 必须手动设置needsUpdate为true
					analyserTexture.needsUpdate = true;

				}

				// 第二步：渲染场景
				// 将3D场景通过相机视角渲染到canvas上
				renderer.render( scene, camera );

			}

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