<!-- Three.js WebGPU 反射与递归树状立方体 - 代码功能与技术点详解
📋 项目概述
这是一个基于 Three.js WebGPU 版本的高级3D图形演示，展示了递归算法生成的树状立方体结构与实时反射效果的结合。项目通过WebGPU现代图形API实现了高性能渲染，结合TSL（Three.js Shading Language）着色器系统，创造出一个视觉上引人入胜的动态3D场景。

🎯 主要功能
1. 递归树状立方体生成
使用递归算法生成有机的树状结构

每个分支点产生多个子分支，形成自然的分形形态

通过实例化渲染(Instanced Rendering)高效绘制数千个立方体

每个立方体都有独立的位置、大小、颜色和动画参数

2. 动态反射系统
地板上的实时平面反射

反射贴图分辨率可调（当前为屏幕分辨率的20%）

结合法线贴图使反射具有凹凸感

反射与场景光照和雾效无缝融合

3. 交互式体验
OrbitControls轨道控制器：鼠标拖拽旋转、滚轮缩放

自动旋转功能：场景随时间自动缓慢旋转

动态摄像机：可调整视角观察不同角度

调试支持：集成Three.js Inspector便于开发调试

4. 视觉特效
动态动画：立方体随时间和效应器参数波动变化

后处理效果：高斯模糊和晕影（Vignette）效果

光照系统：主光（模拟太阳）+ 背光组合

雾效：距离雾增强场景深度感

色调映射：ACES Filmic色调映射提升视觉质量

5. 响应式设计
自适应窗口大小变化

支持不同设备像素比

移动设备友好的控制方式

🔧 核心技术点
1. WebGPU渲染技术
使用Three.js的实验性WebGPU后端

相比WebGL提供更好的性能和现代特性支持

支持计算着色器（虽然本示例未使用）

更好的多线程支持和GPU利用率

2. TSL（Three.js Shading Language）
声明式着色器编程：使用节点图方式构建着色器

实时编译：TSL代码在运行时编译为WebGL/WebGPU着色器

代码复用：可重用的着色器函数和节点

类型安全：编译时类型检查和优化

关键TSL节点示例：

javascript
// 创建复杂的着色器效果
material.positionNode = Fn(() => {
  // 顶点动画逻辑
  let animated = positionLocal.add(instancePosition);
  animated = animated.add(direction.mul(effect.add(instanceSize)));
  return animated;
})();
3. 实例化渲染优化
单一Draw Call：所有立方体在一次绘制调用中完成

实例缓冲区：通过InstancedBufferAttribute传递实例数据

GPU实例：几何体变换在着色器中计算，减少CPU-GPU数据传输

视锥体裁剪优化：通过frustumCulled: false避免复杂计算

4. 后处理管线
多通道渲染：场景渲染 → 后处理 → 最终输出

高斯模糊：基于深度信息的可调节模糊效果

晕影效果：屏幕边缘渐暗，聚焦中心区域

叠加混合：blendOverlay节点组合不同效果

5. 递归算法设计
javascript
function createTreePart(angle, x, y, z, length, count) {
  if (count < maxSteps) {
    // 生成当前层实例
    for (let i = 0; i < subSteps; i++) {
      // 计算位置、法线、颜色
      // 添加到实例数组
    }
    // 递归生成6个子分支
    createTreePart(angle + random(), newX, newY, newZ, newLength + random(), count + 1);
    // ...重复5次
  }
}
6. 动画系统
TWEEN.js补间动画：控制uniform变量的平滑变化

基于时间的动画：time节点驱动周期性运动

效应器系统：两个独立的动画控制器影响不同区域的立方体

每实例动画：每个立方体有独立的动画相位和强度

7. 光影与材质
PBR风格材质：MeshStandardNodeMaterial物理基础渲染

阴影系统：PCF软阴影，1024x1024阴影贴图

法线贴图：增强表面细节

自发光：动态计算的自发光效果

🏗️ 架构设计
数据流架构：
初始化阶段：加载资源、创建场景图

递归生成阶段：创建树状结构的实例数据

渲染循环：每帧更新动画、渲染场景、应用后处理

用户交互：处理输入事件，更新控制器状态

性能优化策略：
实例化渲染：减少Draw Call数量

统一的着色器：所有立方体共享同一着色器程序

合理的LOD：通过递归深度控制细节级别

纹理复用：棋盘格纹理重复使用减少内存

🚀 技术亮点
创新点：
算法艺术与实时渲染的结合：递归算法生成的有机形态

WebGPU的早期实践：展示下一代Web图形API的能力

TSL的高级应用：复杂的着色器效果通过节点系统实现

多效合一：反射、阴影、雾效、后处理等高级效果集成 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示项目名称和技术特性 -->
		<title>Three.js WebGPU 演示 - 反射与递归树状立方体</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：禁止用户缩放，设置最小和最大缩放比例为1.0，确保页面在移动设备上正常显示 -->
		<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>

		<!-- 页面信息显示区域：显示项目信息和相关链接 -->
		<div id="info">
			<!-- Three.js 官方Logo链接，点击跳转到Three.js官网 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 这里通常会有CSS背景图片显示Three.js Logo -->
			</a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 主标题链接：Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 项目副标题：描述当前演示的主要内容 -->
				<span> - 反射效果 + 递归树状立方体生成</span>
			</div>

			<!-- 项目来源信息，使用small标签表示次要信息 -->
			<small>
				<!-- 基于原始项目的声明 -->
				基于 <a href="https://oosmoxiecode.com/archive/js_webgl/recursive_tree_cubes/" target="_blank" rel="noopener">递归树状立方体</a>
				<!-- 原作者信息和链接 -->
				项目，原作者：<a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a>
				<!-- 技术说明 -->
				<br>（使用WebGPU渲染器和TSL着色器语言实现）
			</small>
			
		</div>

		<!-- 
			导入映射配置 (Import Maps)：
			这是一个现代JavaScript功能，允许定义模块的导入路径
			在支持import maps的浏览器中，可以像使用npm包一样导入模块
		-->
		<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版本（注意：这是Three.js的实验性WebGPU支持）
			import * as THREE from 'three/webgpu';

			// 导入TSL着色器节点函数：
			// - abs: 绝对值函数
			// - blendOverlay: 叠加混合模式
			// - color: 颜色节点
			// - float: 浮点数节点
			// - Fn: 函数定义节点
			// - instancedBufferAttribute: 实例化缓冲区属性节点
			// - max: 最大值函数
			// - normalWorldGeometry: 世界空间法线几何节点
			// - pass: 渲染通道节点
			// - positionGeometry: 几何体位置节点
			// - positionLocal: 局部位置节点
			// - pow2: 平方函数
			// - reflector: 反射器节点（用于创建反射效果）
			// - screenUV: 屏幕UV坐标节点
			// - sin: 正弦函数
			// - sub: 减法函数
			// - texture: 纹理采样节点
			// - time: 时间节点（自动更新的时间值）
			// - uniform: 统一变量节点（可在着色器外部修改的值）
			// - uv: UV坐标节点
			// - vec2: 二维向量节点
			// - vec3: 三维向量节点
			import { abs, blendOverlay, color, float, Fn, instancedBufferAttribute, max, normalWorldGeometry, pass, positionGeometry, positionLocal, pow2, reflector, screenUV, sin, sub, texture, time, uniform, uv, vec2, vec3 } from 'three/tsl';
			
			// 导入高斯模糊后处理效果
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

			// 导入轨道控制器（用于鼠标控制相机）
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入调试检查器（开发工具，用于调试Three.js场景）
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入TWEEN.js动画库（用于创建补间动画）
			import TWEEN from 'three/addons/libs/tween.module.js';

			// ==================== 全局变量声明 ====================
			
			// 主要的Three.js对象
			let camera, scene, renderer;
			// 后处理对象
			let postProcessing;
			// 轨道控制器对象
			let controls;

			// 创建两个统一变量节点，用于控制动画效果：
			// 这些变量将在着色器中使用，并通过TWEEN.js进行动画处理
			// 初始值设为-0.2，将在动画中变化到1.2
			const uniformEffector1 = uniform( - 0.2 );
			const uniformEffector2 = uniform( - 0.2 );

			// 立即调用初始化函数
			init();

			// ==================== 异步初始化函数 ====================
			
			async function init() {

				// ---------- 1. 相机设置 ----------
				// 创建透视相机：
				// 参数：视野角度(FOV)50度, 宽高比, 近裁剪面0.25, 远裁剪面30
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
				// 设置相机位置 (x, y, z)
				camera.position.set( 4, 2, 4 );

				// ---------- 2. 场景设置 ----------
				scene = new THREE.Scene();
				// 添加指数雾效：颜色为浅蓝色，起点1单位，终点20单位
				scene.fog = new THREE.Fog( 0x4195a4, 1, 20 );
				// 设置场景背景节点：基于法线Y值混合两种蓝色
				// normalWorldGeometry.y 获取世界空间法线的Y分量
				// mix() 函数混合两种颜色
				scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x4195a4 ), color( 0x0066ff ) );
				// 让相机看向场景中心点上方一点的位置
				camera.lookAt( 0, 1, 0 );

				// ---------- 3. 灯光设置 ----------
				
				// 创建主光源（模拟太阳光）
				const sunLight = new THREE.DirectionalLight( 0xFFE499, 2 );
				sunLight.position.set( 7, 5, 7 ); // 设置在右上后方
				sunLight.castShadow = true; // 启用阴影投射
				sunLight.shadow.camera.zoom = 1.5; // 阴影相机缩放，影响阴影质量
				sunLight.shadow.mapSize.set( 1024, 1024 ); // 阴影贴图分辨率
				sunLight.shadow.bias = - 0.0001; // 阴影偏移，减少阴影失真
				scene.add( sunLight );

				// 创建背光（补充光源，增加立体感）
				const backLight = new THREE.DirectionalLight( 0x0487e2, 0.5 );
				backLight.position.set( 7, - 5, 7 ); // 设置在右下后方
				scene.add( backLight );

				// ---------- 4. 纹理加载 ----------
				
				const textureLoader = new THREE.TextureLoader();

				// 加载地板颜色纹理
				const floorColor = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
				floorColor.wrapS = THREE.RepeatWrapping; // 水平方向重复
				floorColor.wrapT = THREE.RepeatWrapping; // 垂直方向重复
				floorColor.colorSpace = THREE.SRGBColorSpace; // 设置为sRGB颜色空间（用于颜色纹理）
				floorColor.repeat.set( 15, 15 ); // 设置重复次数（15x15的棋盘格）

				// 加载地板法线纹理（用于模拟表面凹凸）
				const floorNormal = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
				floorNormal.wrapS = THREE.RepeatWrapping;
				floorNormal.wrapT = THREE.RepeatWrapping;
				floorNormal.repeat.set( 15, 15 );

				// ---------- 5. 创建树状结构 ----------
				
				const treeMesh = createTreeMesh();
				treeMesh.castShadow = true; // 树状结构投射阴影
				treeMesh.receiveShadow = true; // 树状结构接收阴影
				scene.add( treeMesh );

				// ---------- 6. 创建地板 ----------
				
				// 创建地板UV坐标节点：将UV坐标乘以15实现纹理重复
				const floorUV = uv().mul( 15 );
				// 计算法线偏移：从法线贴图获取值，处理到[-1,1]范围，然后缩放
				const floorNormalOffset = texture( floorNormal, floorUV ).xy.mul( 2 ).sub( 1 ).mul( .02 );

				// 创建反射器：resolutionScale 0.2 表示反射贴图分辨率为屏幕的20%
				const reflection = reflector( { resolutionScale: 0.2 } );
				// 旋转反射目标（反射相机）使其朝下
				reflection.target.rotateX( - Math.PI / 2 );
				// 为反射UV添加法线偏移，使反射有凹凸感
				reflection.uvNode = reflection.uvNode.add( floorNormalOffset );
				// 将反射目标（实际上是一个相机）添加到场景
				scene.add( reflection.target );

				// 创建地板材质（使用Phong光照模型的节点材质）
				const floorMaterial = new THREE.MeshPhongNodeMaterial();
				floorMaterial.colorNode = texture( floorColor, floorUV ); // 设置颜色纹理
				floorMaterial.emissiveNode = reflection.mul( 0.25 ); // 设置自发光为反射的25%
				floorMaterial.normalMap = floorNormal; // 设置法线贴图
				floorMaterial.normalScale.set( 0.2, - 0.2 ); // 设置法线强度，Y轴取反

				// 创建地板网格：一个非常薄的立方体
				const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );
				floor.receiveShadow = true; // 地板接收阴影
				scene.add( floor );

				// ---------- 7. 渲染器设置 ----------
				
				renderer = new THREE.WebGPURenderer( { antialias: true } ); // 启用抗锯齿
				renderer.setPixelRatio( window.devicePixelRatio ); // 设置设备像素比
				renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染尺寸
				renderer.setAnimationLoop( animate ); // 设置动画循环回调
				renderer.shadowMap.enabled = true; // 启用阴影贴图
				renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 使用软阴影（百分比渐近滤波）
				renderer.toneMapping = THREE.ACESFilmicToneMapping; // 使用ACES电影色调映射
				renderer.inspector = new Inspector(); // 附加调试检查器
				document.body.appendChild( renderer.domElement ); // 将canvas添加到DOM

				// ---------- 8. 控制器设置 ----------
				
				controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 1; // 最小缩放距离
				controls.maxDistance = 10; // 最大缩放距离
				controls.maxPolarAngle = Math.PI / 2; // 最大极角，防止相机翻转到底部
				controls.enableDamping = true; // 启用阻尼效果（惯性）
				controls.autoRotate = true; // 启用自动旋转
				controls.autoRotateSpeed = 1; // 自动旋转速度
				controls.target.set( 0, 1, 0 ); // 设置控制器的目标点（相机看向的点）
				controls.update(); // 初始化更新

				// ---------- 9. 后处理配置 ----------
				
				// 创建场景渲染通道
				const scenePass = pass( scene, camera );
				// 获取场景颜色纹理节点
				const scenePassColor = scenePass.getTextureNode();
				// 获取场景深度并重映射：将深度值从[0.3, 0.7]映射到[0,1]
				const scenePassDepth = scenePass.getLinearDepthNode().remapClamp( .3, .7 );

				// 对场景颜色进行高斯模糊
				const scenePassColorBlurred = gaussianBlur( scenePassColor );
				// 设置模糊方向基于深度：深度越大的地方模糊程度可能不同
				scenePassColorBlurred.directionNode = scenePassDepth;

				// 创建晕影效果：
				// 1. screenUV.distance(.5): 计算每个像素到屏幕中心的距离
				// 2. mul(1.25): 乘以系数增加效果范围
				// 3. clamp(): 限制到[0,1]范围
				// 4. oneMinus(): 取反（中心亮，边缘暗）
				// 5. sub(0.2): 减去0.2，使中心区域更亮
				const vignette = screenUV.distance( .5 ).mul( 1.25 ).clamp().oneMinus().sub( 0.2 );

				// 创建后处理对象
				postProcessing = new THREE.PostProcessing( renderer );
				// 设置输出节点：将模糊后的场景与晕影效果叠加
				postProcessing.outputNode = blendOverlay( scenePassColorBlurred, vignette );

				// ---------- 10. 动画设置 ----------
				
				// 创建第一个效应器的补间动画
				new TWEEN.Tween( uniformEffector1 )
					.to( { value: 1.2 }, 3000 ) // 3秒内变化到1.2
					.delay( 800 ) // 延迟800毫秒开始
					.repeat( Infinity ) // 无限重复
					.easing( TWEEN.Easing.Sinusoidal.InOut ) // 正弦缓动函数（平滑进入和退出）
					.start(); // 开始动画

				// 创建第二个效应器的补间动画
				new TWEEN.Tween( uniformEffector2 )
					.to( { value: 1.2 }, 3000 )
					.repeat( Infinity )
					.easing( TWEEN.Easing.Sinusoidal.InOut )
					.start();

				// ---------- 11. 事件监听 ----------
				
				window.addEventListener( 'resize', onWindowResize );

			}

			// ==================== 窗口大小变化处理函数 ====================
			
			function onWindowResize() {
				// 更新相机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵（必须在修改aspect后调用）
				camera.updateProjectionMatrix();
				// 更新渲染器大小
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ==================== 动画循环函数 ====================
			
			function animate() {
				// 更新控制器（处理鼠标/触摸输入）
				controls.update();
				// 更新所有活动的补间动画
				TWEEN.update();
				// 渲染后处理效果（这将自动渲染场景）
				postProcessing.render();
			}

			// ==================== 辅助函数 ====================
			
			/**
			 * 生成-1到1之间的随机数
			 * @returns {number} -1到1之间的随机浮点数
			 */
			function random() {
				return ( Math.random() - 0.5 ) * 2.0;
			}

			// ==================== 创建树状网格函数 ====================
			
			/**
			 * 创建递归树状立方体结构
			 * 使用实例化渲染技术高效绘制大量立方体
			 * 每个立方体都是一个实例，共享相同的几何体但有不同的变换
			 * @returns {THREE.Mesh} 包含所有树状立方体的网格对象
			 */
			function createTreeMesh() {

				// 递归参数设置
				const maxSteps = 5; // 最大递归深度
				const lengthMult = 0.8; // 每层递归长度乘数（使树枝越来越短）

				// 数据数组：存储所有实例的属性
				const positions = []; // 实例位置 (x, y, z)
				const normals = [];   // 实例法线 (nx, ny, nz)
				const colors = [];    // 实例颜色 (r, g, b)
				const data = [];      // 实例自定义数据 [大小, 时间, 随机种子]

				let instanceCount = 0; // 实例计数器

				// 临时变量（重用避免内存分配）
				const newPosition = new THREE.Vector3(); // 新位置（用于插值）
				const position = new THREE.Vector3();    // 最终位置
				const normal = new THREE.Vector3();      // 法线向量
				const color = new THREE.Color();         // 颜色对象

				/**
				 * 递归函数：创建树的某个部分
				 * @param {number} angle - 当前分支的角度（弧度）
				 * @param {number} x - 当前分支起点的X坐标
				 * @param {number} y - 当前分支起点的Y坐标
				 * @param {number} z - 当前分支起点的Z坐标
				 * @param {number} length - 当前分支的长度
				 * @param {number} count - 当前递归深度
				 */
				function createTreePart( angle, x, y, z, length, count ) {

					// 基于递归深度和随机值决定是否继续生成分支
					// 随着深度增加，继续生成的概率降低
					if ( Math.random() > ( maxSteps / count ) * 0.25 ) return;

					// 如果未达到最大递归深度
					if ( count < maxSteps ) {

						// 计算新分支的位置和参数
						const newLength = length * lengthMult; // 新分支长度
						const newX = x + Math.cos( angle ) * length; // 新X坐标
						const newY = y + Math.sin( angle ) * length; // 新Y坐标
						const countSq = Math.min( 3.2, count * count ); // 深度平方（限制最大值）
						const newZ = z + ( Math.random() * countSq - countSq / 2 ) * length; // 新Z坐标（随机偏移）

						// 计算实例大小：随着深度增加而减小
						let size = 30 - ( count * 8 );
						// 限制大小范围
						if ( size > 25 ) size = 25;
						if ( size < 10 ) size = 10;
						size = size / 100; // 转换为相对大小

						const subSteps = 50; // 每个分支生成的实例数

						// 为当前分支生成实例数据
						for ( let i = 0; i < subSteps; i ++ ) {

							instanceCount ++; // 增加实例计数

							const percent = i / subSteps; // 当前步骤百分比
							const extra = 1 / maxSteps; // 额外的时间增量

							// ---- 位置计算 ----
							// 使用线性插值计算当前位置
							newPosition.set( x, y, z ).lerp( new THREE.Vector3( newX, newY, newZ ), percent );
							position.copy( newPosition );

							// 添加随机偏移，使实例看起来更自然
							position.x += random() * size * 3;
							position.y += random() * size * 3;
							position.z += random() * size * 3;

							// 将位置添加到数组
							positions.push( position.x, position.y, position.z );

							const scale = Math.random() + 5; // 随机缩放因子

							// ---- 法线计算 ----
							// 法线方向从分支中心指向实例位置
							normal.copy( position ).sub( newPosition ).normalize();
							normals.push( normal.x, normal.y, normal.z );

							// ---- 颜色计算 ----
							// 基于递归深度设置HSL颜色：
							// - 色相：随深度变化
							// - 饱和度：固定0.75
							// - 亮度：0.6-0.7之间随机
							color.setHSL( 
								( count / maxSteps ) * 0.5 + Math.random() * 0.05,
								0.75,
								0.6 + Math.random() * 0.1
							);
							colors.push( color.r, color.g, color.b );

							// ---- 自定义数据 ----
							const instanceSize = size * scale; // 最终实例大小
							const instanceTime = ( count / maxSteps ) + percent * extra; // 时间参数（用于动画）
							const instanceSeed = Math.random(); // 随机种子（用于每实例变化）

							// 将数据打包到数组
							data.push( instanceSize, instanceTime, instanceSeed );
						}

						// 递归创建更多分支
						// 每个分支生成6个子分支，添加随机角度和长度变化
						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
						createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
					}
				}

				// 开始生成树状结构
				const angle = Math.PI * 0.5; // 初始角度：垂直向上（90度）
				createTreePart( angle, 0, 0, 0, 16, 0 ); // 从原点开始，初始长度16

				// 创建基础几何体（一个单位立方体）
				const geometry = new THREE.BoxGeometry();
				// 创建标准节点材质（支持TSL着色器）
				const material = new THREE.MeshStandardNodeMaterial();
				// 创建网格对象
				const mesh = new THREE.Mesh( geometry, material );
				mesh.scale.setScalar( 0.05 ); // 整体缩放基础几何体
				mesh.count = instanceCount; // 设置实例数量
				mesh.frustumCulled = false; // 禁用视锥体裁剪（因为实例可能超出视锥体）

				// 创建实例化缓冲区属性
				// 这些属性将为每个实例提供不同的值
				const attributePosition = new THREE.InstancedBufferAttribute( new Float32Array( positions ), 3 );
				const attributeNormal = new THREE.InstancedBufferAttribute( new Float32Array( normals ), 3 );
				const attributeColor = new THREE.InstancedBufferAttribute( new Float32Array( colors ), 3 );
				const attributeData = new THREE.InstancedBufferAttribute( new Float32Array( data ), 3 );

				// 将缓冲区属性转换为TSL节点
				const instancePosition = instancedBufferAttribute( attributePosition );
				const instanceNormal = instancedBufferAttribute( attributeNormal );
				const instanceColor = instancedBufferAttribute( attributeColor );
				const instanceData = instancedBufferAttribute( attributeData );

				// ========== TSL着色器节点定义 ==========

				// ---- 顶点位置节点 ----
				// 使用Fn()创建着色器函数
				material.positionNode = Fn( () => {

					// 从实例数据中提取参数
					const instanceSize = instanceData.x;    // 实例大小
					const instanceTime = instanceData.y;    // 时间参数（用于动画）
					const instanceSeed = instanceData.z;    // 随机种子

					// 第一个效应器效果计算
					// dif1: 计算实例时间与效应器1的绝对差值
					const dif1 = abs( instanceTime.sub( uniformEffector1 ) ).toConst();
					// effect: 如果差值小于等于0.15，计算效果值，否则为0
					// 效果值 = (0.15 - 差值) * (1.7 - 实例时间) * 10
					let effect = dif1.lessThanEqual( 0.15 ).select( 
						sub( 0.15, dif1 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), 
						float( 0 ) 
					);

					// 第二个效应器效果计算
					const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst();
					// 如果第二个效应器效果更强，则替换第一个效果
					effect = dif2.lessThanEqual( 0.15 ).select( 
						sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), 
						effect 
					);

					// 开始构建最终顶点位置
					// 1. 从局部位置开始，加上实例位置
					let animated = positionLocal.add( instancePosition ).toVar();
					// 2. 获取几何体方向（从中心指向顶点的单位向量）
					const direction = positionGeometry.normalize().toConst();

					// 累积不同的顶点动画效果：
					// 3. 添加基于效应器和实例大小的位移
					animated = animated.add( direction.mul( effect.add( instanceSize ) ) );
					// 4. 减去纯效应器影响（创建波动效果）
					animated = animated.sub( direction.mul( effect ) );
					// 5. 在法线方向上添加效应器位移
					animated = animated.add( instanceNormal.mul( effect.mul( 1 ) ) );
					// 6. 添加基于时间和种子的正弦波动
					animated = animated.add( 
						instanceNormal.mul( 
							abs( sin( time.add( instanceSeed.mul( 2 ) ) ).mul( 1.5 ) ) 
						) 
					);

					// 返回最终动画位置
					return animated;
				} )();

				// ---- 方形边缘效果节点 ----
				// 用于创建立方体的边缘高亮效果
				const squareEdge = Fn( () => {
					// 将UV坐标从[0,1]转换到[-0.5,0.5]
					const pos = uv().sub( vec2( 0.5, 0.5 ) );
					// 计算方形距离：取x和y绝对值的最大值
					const squareDistance = max( abs( pos.x ), abs( pos.y ) );
					// 处理边缘效果：
					// 1. 除以0.5转换到[0,1]范围
					// 2. 限制到[0.85,1]范围
					// 3. 减去0.5再乘以2，得到边缘高亮值
					return squareDistance.div( 0.5 ).clamp( 0.85, 1 ).sub( 0.5 ).mul( 2.0 );
				} )();

				// ---- 颜色节点 ----
				// 最终颜色 = 边缘效果 - 实例颜色
				// 这将在立方体边缘创建高亮效果
				material.colorNode = Fn( () => {
					return squareEdge.sub( instanceColor );
				} )();

				// ---- 自发光节点 ----
				// 创建基于效应器的发光效果
				material.emissiveNode = Fn( () => {
					const instanceTime = instanceData.y;

					// 计算第一个效应器的自发光效果
					const dif1 = abs( instanceTime.sub( uniformEffector1 ) ).toConst();
					const effect1 = dif1.lessThanEqual( 0.15 ).select( 
						sub( 0.15, dif1 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), 
						float( 0 ) 
					);

					// 计算第二个效应器的自发光效果
					const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst();
					const effect2 = dif2.lessThanEqual( 0.15 ).select( 
						sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), 
						effect1 
					);

					// 创建自发光颜色：
					// 1. pow2() 对效应器效果求平方（使效果更明显）
					// 2. 乘以实例颜色（使发光颜色与立方体颜色相关）
					// 注意：这里effect2可能实际上是effect1或effect2的值
					return pow2( vec3( effect1, 0, effect2 ) ).mul( instanceColor );
				} )();

				// 返回包含所有树状立方体的网格
				return mesh;
			}

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