<!-- Three.js WebGPU 程序化纹理示例 - 功能描述与技术分析
📋 一、核心功能概述
1. 核心展示功能
程序化纹理生成与渲染：在GPU上通过数学算法实时生成棋盘格纹理

完整的渲染管线：从纹理生成→后处理→最终渲染的完整流程

实时参数调节：通过GUI界面动态调整纹理参数

2. 用户体验功能
自适应布局：响应式设计，自动适配不同屏幕尺寸

交互式调试：内置参数调节面板，实时查看效果变化

性能优化：支持纹理缓存和按需更新

🔧 二、主要技术栈
1. Three.js WebGPU
javascript
// 核心技术组件
- WebGPURenderer: 新一代图形渲染器，替代WebGL
- OrthographicCamera: 正交相机，适合2D纹理展示
- MeshBasicNodeMaterial: 节点化基础材质
- PlaneGeometry: 平面几何体
2. TSL（Three.js Shading Language）
javascript
// 节点化着色器系统
- checker(): 棋盘格纹理生成节点
- uv(): UV坐标获取节点
- uniform(): 创建可动态修改的参数
- convertToTexture(): RTT（渲染到纹理）功能
3. 扩展模块
javascript
1. 高斯模糊效果：three/addons/tsl/display/GaussianBlurNode.js
2. 调试器：three/addons/inspector/Inspector.js
🎯 三、技术流程详解
阶段1：初始化阶段
text
1. 创建WebGPU渲染器 → 2. 设置正交相机 → 3. 创建场景容器
阶段2：纹理生成阶段（核心创新点）
text
输入 → 处理 → 输出
┌───────┐    ┌─────────────┐    ┌─────────┐
│ UV坐标 │ → │ 棋盘格算法 │ → │ 程序化 │
│       │    │ × UV缩放   │    │ 纹理节点│
└───────┘    └─────────────┘    └─────────┘
阶段3：RTT（渲染到纹理）阶段
text
┌─────────────────────────┐
│ 程序化纹理节点           │
│  → convertToTexture() → │
│ 512×512离屏渲染目标      │
└─────────────────────────┘
阶段4：后处理阶段
text
┌──────────────────────────┐
│ 原始纹理 → 高斯模糊 → 最终纹理 │
│     ↑                    │
│ 模糊强度控制             │
└──────────────────────────┘
阶段5：渲染阶段
text
┌─────────────────────────────────────┐
│ 平面网格 + 节点材质 → 渲染器 → 屏幕显示 │
└─────────────────────────────────────┘
⚙️ 四、关键技术点分析
1. 程序化纹理技术
算法生成：使用数学公式替代图片文件生成纹理

无限分辨率：纹理质量不受像素限制

实时参数化：可动态调整纹理特性

内存零占用：运行时计算，不占用纹理内存

2. RTT（Render to Texture）技术
离屏渲染：将中间结果渲染到纹理缓冲区

纹理重用：复杂纹理只需计算一次

后处理基础：为模糊等效果提供输入

性能优化：避免每帧重复计算

3. 节点化材质系统
javascript
// 传统材质 vs 节点化材质
传统材质: material.map = texture
节点化材质: material.colorNode = 复杂节点网络

优势:
1. 可视化编辑: 节点连接更直观
2. 动态组合: 实时修改着色器结构
3. 重用性: 节点可以复用和组合
4. WebGPU优势体现
text
WebGL 限制                vs  WebGPU 优势
─────────────────────────────────────────────
单线程渲染                 → 多线程并行处理
固定管线思维              → 现代图形管线
手动内存管理              → 自动内存管理
有限的着色器灵活性        → 更灵活的着色器
CPU开销大                 → 降低CPU开销
5. 正交相机应用
适用场景：2D渲染、UI界面、平面纹理展示

无透视变形：物体大小与距离无关

简化计算：不需要复杂的投影矩阵计算

📊 五、性能优化策略
1. 纹理缓存机制
javascript
// 控制纹理更新策略
proceduralToTexture.autoUpdate = false;  // 禁用自动更新
proceduralToTexture.textureNeedsUpdate = true;  // 手动触发更新

// 应用场景：
// - 静态纹理：生成一次后缓存
// - 动态纹理：需要时手动更新
// - 低频更新：定时更新而非每帧更新
2. 分辨率控制
text
固定512×512纹理的优势：
1. 性能稳定：不受屏幕分辨率影响
2. 质量保证：足够清晰的中等分辨率
3. 内存可控：固定大小的显存占用
3. 渲染优化
text
1. 单一物体场景：最小化渲染调用
2. 静态相机：无需每帧更新视图矩阵
3. 简单几何体：平面网格顶点数最少 -->


<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的标题
			three.js webgpu - 程序化纹理示例
			- three.js: 3D JavaScript库
			- webgpu: 使用WebGPU API进行渲染（新一代Web图形API）
			- procedural texture: 程序化纹理，通过算法而非图片生成的纹理
		-->
		<title>three.js WebGPU - 程序化纹理示例</title>
		
		<!-- 
			字符编码设置：使用UTF-8编码支持中文和特殊字符
			UTF-8是Unicode的一种变长字符编码，支持全球所有语言
		-->
		<meta charset="utf-8">
		
		<!-- 
			响应式视口设置：
			- width=device-width: 视口宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放页面
			- minimum-scale=1.0: 最小缩放比例为1.0（100%）
			- maximum-scale=1.0: 最大缩放比例为1.0（100%）
			这个设置确保页面在不同设备上保持固定缩放
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部CSS样式表：
			- type="text/css": 指定样式表类型为CSS
			- rel="stylesheet": 定义当前文档与被链接文档的关系为样式表
			- href="example.css": 指向外部CSS文件的路径
			该文件包含了页面的布局、颜色、字体等样式定义
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：
			id="info": 用于CSS样式选择器和JavaScript操作的唯一标识符
			这个div包含了页面的标题、logo和描述信息
		-->
		<div id="info">
			<!-- 
				three.js logo链接：
				- href: 点击后跳转到three.js官方网站
				- target="_blank": 在新标签页中打开链接
				- rel="noopener": 安全属性，防止新页面通过window.opener访问原页面
				- class="logo-link": CSS类名，可能包含logo的背景图片样式
				这个链接通常会显示three.js的logo图片
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				标题包装容器：
				class="title-wrapper": 用于对标题元素进行布局和样式控制
			-->
			<div class="title-wrapper">
				<!-- 
					主标题链接：
					- 显示"three.js"文本
					- 同样链接到three.js官方网站
					这是页面的主要标题，标识使用的技术框架
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 
					副标题文本：
					<span>标签是内联元素，用于对文档中的行内元素进行分组
					这里显示当前示例的具体内容"程序化纹理"
				-->
				<span>程序化纹理演示</span>
			</div>

			<!-- 
				描述文本：
				<small>标签表示旁注或小号字体文本
				这里简要描述了这个示例的核心功能
			-->
			<small>
				基于WebGPU的GPU程序化纹理生成技术演示
				<!-- 
					详细解释：
					- GPU: 图形处理器，负责图形渲染计算
					- 程序化纹理：通过数学算法（而非图像文件）实时生成的纹理
					- 优势：无限分辨率、无内存占用、动态可调参数
				-->
			</small>
			
			<!-- 
				额外技术说明（可以添加以下内容）：
			<small style="display: block; margin-top: 5px; color: #888;">
				技术栈：Three.js + WebGPU + TSL着色器语言
			</small>
			-->
		</div>

		<!-- 
			模块导入映射配置（Import Maps）：
			type="importmap": 定义模块导入的映射关系，现代浏览器支持的特性
			作用：将模块标识符映射到实际URL，简化import语句
			
			详细说明：
			1. 这是一个JSON对象，定义了模块别名到实际文件路径的映射
			2. 当代码中使用import语句时，浏览器会根据这个映射找到正确的文件
			3. 这样做的好处：
			   - 避免在代码中写冗长的相对路径
			   - 方便切换不同版本的库文件
			   - 支持CDN和本地开发的灵活切换
		-->
		<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模块，支持模块化导入导出
			模块化脚本的特点：
			1. 自动使用严格模式（use strict）
			2. 有自己的作用域，不会污染全局命名空间
			3. 支持静态导入（import）和导出（export）
			4. 延迟执行（defer），在文档解析完成后执行
		-->
		<script type="module">

			// ========== 模块导入部分 ==========
			// 使用import语句导入所需的库和模块
			
			// 导入Three.js的WebGPU版本
			// * as THREE: 将整个模块导入并命名为THREE对象
			// three/webgpu: 根据importmap映射到../build/three.webgpu.js
			import * as THREE from 'three/webgpu';
			
			// 从TSL库导入特定的着色器节点函数
			// checker: 棋盘格纹理生成器
			// uv: UV坐标节点（纹理坐标）
			// uniform: 创建可以在运行时修改的uniform变量
			// convertToTexture: 将节点渲染为纹理（Render to Texture）
			import { checker, uv, uniform, convertToTexture } from 'three/tsl';
			
			// 导入高斯模糊效果节点
			// 这是一个后处理效果，用于对纹理进行模糊处理
			// 路径根据importmap映射到./jsm/tsl/display/GaussianBlurNode.js
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

			// 导入调试器（Inspector）
			// 用于创建参数调节界面和性能监控
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			// 声明三个全局变量，用于存储Three.js的核心对象
			// let关键字：块级作用域变量声明（相比var更安全）
			let camera;  // 相机：定义观察3D场景的视角
			let scene;   // 场景：包含所有3D对象的容器
			let renderer; // 渲染器：负责将3D场景渲染到2D屏幕

			// ========== 初始化函数调用 ==========
			// 页面加载完成后，调用init函数进行初始化
			// 这是整个程序的入口点
			init();

			/**
			 * 初始化函数 - 整个应用程序的启动入口
			 * 
			 * 主要功能：
			 * 1. 设置相机、场景、渲染器等核心对象
			 * 2. 创建程序化纹理材质
			 * 3. 添加3D物体到场景
			 * 4. 设置用户界面和事件监听
			 * 5. 配置渲染循环
			 * 
			 * 执行流程：
			 * 1. 计算屏幕宽高比
			 * 2. 创建正交相机（适合2D/UI渲染）
			 * 3. 创建场景容器
			 * 4. 创建程序化纹理和材质
			 * 5. 创建平面网格并添加到场景
			 * 6. 初始化WebGPU渲染器
			 * 7. 设置事件监听和GUI界面
			 */
			function init() {

				// ---------- 相机设置部分 ----------
				// 计算屏幕宽高比 = 窗口宽度 / 窗口高度
				// 宽高比用于正确设置相机投影，避免图像拉伸
				const aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 创建正交投影相机（Orthographic Camera）
				 * 
				 * 正交相机特点：
				 * - 没有透视变形，物体大小与距离无关
				 * - 适合2D渲染、UI界面、CAD应用等
				 * - 参数定义了一个长方体视景体
				 * 
				 * 参数说明（按顺序）：
				 * 1. left: 左裁剪面 = -宽高比
				 * 2. right: 右裁剪面 = 宽高比
				 * 3. top: 上裁剪面 = 1
				 * 4. bottom: 下裁剪面 = -1
				 * 5. near: 近裁剪面 = 0（相机最近能看到的位置）
				 * 6. far: 远裁剪面 = 2（相机最远能看到的位置）
				 * 
				 * 这样设置可以确保相机视野覆盖整个屏幕
				 */
				camera = new THREE.OrthographicCamera( -aspect, aspect, 1, -1, 0, 2 );
				
				// 设置相机位置：沿着Z轴正方向移动1个单位
				// 正交相机的位置通常不重要，因为透视不影响渲染
				camera.position.z = 1;

				// ---------- 场景创建 ----------
				// 创建场景对象，这是所有3D对象的容器
				// 场景包含：网格（Mesh）、灯光（Light）、相机（Camera）等
				scene = new THREE.Scene();

				// ========== 程序化纹理生成部分 ==========
				// 这部分是示例的核心：演示如何通过代码生成纹理

				/**
				 * 创建uniform变量
				 * 
				 * uniform特点：
				 * - 在着色器执行期间保持不变的值（同一绘制调用中）
				 * - 可以在JavaScript中动态修改
				 * - 在所有顶点/片段中共享相同的值
				 * 
				 * 这里的uniform将用于GUI控制
				 */
				const uvScale = uniform( 4 );      // UV缩放系数，初始值4，控制棋盘格密度
				const blurAmount = uniform( .5 );  // 模糊强度，初始值0.5，控制模糊程度

				/**
				 * 创建棋盘格纹理节点
				 * 
				 * 详细步骤：
				 * 1. uv(): 获取当前片段的UV坐标（范围0到1）
				 * 2. .mul(uvScale): 将UV坐标乘以缩放系数
				 *    - 如果uvScale=1，UV范围是0-1
				 *    - 如果uvScale=4，UV范围是0-4，纹理重复4次
				 * 3. checker(...): 根据缩放后的UV坐标生成棋盘格图案
				 *    - 返回一个节点，表示黑白相间的棋盘纹理
				 * 
				 * 原理：棋盘格函数根据(floor(u*scale)+floor(v*scale))的奇偶性决定黑白
				 */
				const procedural = checker( uv().mul( uvScale ) );
				
				/**
				 * 将程序化纹理节点转换为实际纹理（Render to Texture，RTT）
				 * 
				 * convertToTexture函数作用：
				 * 1. 创建一个离屏渲染目标（offscreen render target）
				 * 2. 将节点渲染到512x512的纹理中
				 * 3. 返回一个可以用于后续渲染的纹理对象
				 * 
				 * 参数说明：
				 * @param {Node} procedural - 输入的纹理节点
				 * @param {number} 512 - 纹理宽度（像素）
				 * @param {number} 512 - 纹理高度（像素）
				 * 
				 * 优势：
				 * - 纹理只需要生成一次（或按需更新）
				 * - 可以应用后处理效果（如这里的模糊）
				 * - 提高性能，避免每帧重新计算复杂的程序化纹理
				 */
				const proceduralToTexture = convertToTexture( procedural, 512, 512 );

				/**
				 * 对生成的纹理应用高斯模糊后处理
				 * 
				 * gaussianBlur函数：
				 * 1. 接收输入纹理
				 * 2. 应用指定强度的模糊效果
				 * 3. 使用多次采样（这里20次）提高模糊质量
				 * 
				 * 参数说明：
				 * @param {TextureNode} proceduralToTexture - 输入纹理
				 * @param {UniformNode} blurAmount - 模糊强度（0-2）
				 * @param {number} 20 - 采样次数，越高越平滑但性能消耗越大
				 * 
				 * 高斯模糊原理：
				 * - 每个像素的颜色是周围像素的加权平均
				 * - 权重符合高斯分布（正态分布）
				 * - 中心像素权重最高，越远权重越低
				 */
				const colorNode = gaussianBlur( proceduralToTexture, blurAmount, 20 );

				// ========== 高级控制选项（注释状态） ==========
				// 以下代码被注释掉，但展示了额外的控制能力
				
				// 禁用纹理自动更新：纹理只生成一次，后续不再更新
				// 适用于静态纹理，可以大幅提高性能
				// proceduralToTexture.autoUpdate = false;
				
				// 手动触发纹理更新：当需要更新纹理时调用
				// 配合上面的autoUpdate=false使用，实现按需更新
				// proceduralToTexture.textureNeedsUpdate = true;

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

				/**
				 * 创建节点化基础材质（MeshBasicNodeMaterial）
				 * 
				 * 与传统材质的区别：
				 * - 使用TSL节点系统定义材质属性
				 * - 支持更复杂的着色器组合
				 * - 可以通过节点连接实现复杂效果
				 */
				const material = new THREE.MeshBasicNodeMaterial();
				
				// 设置材质的颜色节点：将高斯模糊后的纹理作为颜色来源
				material.colorNode = colorNode;

				/**
				 * 创建平面网格（Mesh）
				 * 
				 * Mesh组成：
				 * 1. 几何体（Geometry）：定义物体的形状和顶点数据
				 * 2. 材质（Material）：定义物体的外观（颜色、纹理、光照等）
				 * 
				 * PlaneGeometry参数：
				 * @param {number} 1 - 平面宽度
				 * @param {number} 1 - 平面高度
				 * 
				 * 这是一个1x1单位的正方形平面
				 * 由于使用正交相机且相机视野设置，这个平面会填满整个屏幕
				 */
				const plane = new THREE.Mesh(
					new THREE.PlaneGeometry( 1, 1 ),  // 几何体：1x1平面
					material                           // 材质：上面创建的节点材质
				);
				
				// 将平面网格添加到场景中
				// 只有添加到场景的对象才会被渲染
				scene.add( plane );

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

				/**
				 * 创建WebGPU渲染器
				 * 
				 * WebGPURenderer特点：
				 * - 使用新一代WebGPU API（替代WebGL）
				 * - 更好的性能和多线程支持
				 * - 更低的CPU开销
				 * 
				 * 配置选项：
				 * @param {Object} { antialias: true } - 开启抗锯齿
				 * 抗锯齿：平滑边缘锯齿，提高视觉质量
				 */
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比：匹配显示器的物理像素密度
				// 防止在高DPI屏幕上模糊
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				/**
				 * 设置动画循环
				 * 
				 * setAnimationLoop方法：
				 * 1. 使用浏览器的requestAnimationFrame API
				 * 2. 在每次屏幕刷新时调用指定的回调函数
				 * 3. 实现平滑的动画效果（通常是60FPS）
				 * 
				 * @param {Function} render - 渲染函数，每一帧调用
				 */
				renderer.setAnimationLoop( render );
				
				// 创建并附加调试器（Inspector）
				// 调试器提供：性能监控、场景查看、参数调节等功能
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				// domElement属性是渲染器对应的HTMLCanvasElement
				document.body.appendChild( renderer.domElement );

				// 添加窗口大小变化事件监听器
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

				// ========== GUI调试界面创建 ==========

				/**
				 * 创建参数调节面板
				 * 
				 * createParameters方法：
				 * 1. 创建一个可折叠的参数面板
				 * 2. 标题为"程序化纹理"
				 * 3. 返回一个GUI对象，用于添加控制项
				 */
				const gui = renderer.inspector.createParameters( '程序化纹理控制面板' );
				
				// 添加UV缩放控制滑块
				// 控制纹理生成阶段的UV缩放（影响棋盘格密度）
				gui.add( uvScale, 'value', 1, 10 )           // 参数：对象、属性名、最小值、最大值
				   .name( 'UV缩放系数（纹理生成阶段）' )      // 显示名称（中文）
				   .onChange( ( value ) => {                 // 值变化时的回调（可选）
					   console.log( 'UV缩放系数已改为:', value );
				   });
				
				// 添加模糊强度控制滑块
				// 控制纹理生成后的模糊处理强度
				gui.add( blurAmount, 'value', 0, 2 )         // 范围：0（无模糊）到2（强模糊）
				   .name( '模糊强度（后处理阶段）' );
				
				// 添加纹理自动更新开关
				// 控制纹理是否每帧自动更新
				// 如果关闭，纹理只在初始化时生成一次
				gui.add( proceduralToTexture, 'autoUpdate' )
				   .name( '自动更新纹理' )
				   .onChange( ( enabled ) => {
					   if ( enabled ) {
						   console.log( '纹理将每帧自动更新' );
					   } else {
						   console.log( '纹理已停止自动更新，如需更新请手动触发' );
					   }
				   });
				
				/**
				 * 可以添加更多控制项，例如：
				 * 
				 * // 添加纹理分辨率选择
				 * const resolutionOptions = { "低 (256x256)": 256, "中 (512x512)": 512, "高 (1024x1024)": 1024 };
				 * gui.add( { res: 512 }, 'res', resolutionOptions )
				 *    .name( '纹理分辨率' )
				 *    .onChange( ( value ) => {
				 *        // 重新创建纹理的逻辑
				 *    });
				 * 
				 * // 添加颜色控制
				 * const colors = { "黑白": 0, "红蓝": 1, "自定义": 2 };
				 * gui.add( { colorMode: 0 }, 'colorMode', colors )
				 *    .name( '颜色模式' );
				 */

				// 初始化完成日志
				console.log( 'Three.js WebGPU 程序化纹理示例初始化完成' );
				console.log( '技术栈：Three.js + WebGPU + TSL节点系统' );
				console.log( '使用GUI面板可以实时调节纹理参数' );

			}

			/**
			 * 窗口大小变化处理函数
			 * 
			 * 触发条件：用户调整浏览器窗口大小、设备旋转、浏览器窗口化等
			 * 
			 * 主要任务：
			 * 1. 更新渲染器尺寸，匹配新窗口大小
			 * 2. 重新计算相机参数，防止图像拉伸
			 * 3. 更新相机投影矩阵
			 */
			function onWindowResize() {

				// 更新渲染器尺寸为新窗口大小
				// 确保渲染输出填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 重新计算宽高比
				// 窗口大小变化后，宽高比可能改变
				const aspect = window.innerWidth / window.innerHeight;

				// 计算当前相机的视景体高度
				// 正交相机的视景体是一个长方体
				const frustumHeight = camera.top - camera.bottom;

				/**
				 * 根据新宽高比调整相机左右边界
				 * 
				 * 计算公式：
				 * 左边界 = - (视景体高度 × 宽高比) / 2
				 * 右边界 = (视景体高度 × 宽高比) / 2
				 * 
				 * 这样确保：
				 * 1. 相机视野始终保持正确的宽高比
				 * 2. 图像不会拉伸变形
				 * 3. 平面网格始终填满整个屏幕
				 */
				camera.left = - frustumHeight * aspect / 2;
				camera.right = frustumHeight * aspect / 2;

				// 更新相机投影矩阵
				// 必须调用此方法，使新的相机参数生效
				camera.updateProjectionMatrix();

				// 可选的：输出日志，用于调试
				console.log( `窗口大小已调整：${window.innerWidth} x ${window.innerHeight}, 宽高比：${aspect.toFixed(2)}` );

			}

			/**
			 * 渲染函数 - 每一帧调用
			 * 
			 * 这是动画循环的核心回调函数
			 * 通常以60FPS（每秒60帧）的频率执行
			 * 
			 * 主要任务：
			 * 1. 执行任何必要的动画更新（本示例中没有动画）
			 * 2. 调用渲染器渲染当前场景
			 * 3. 保持应用程序的响应性
			 * 
			 * 性能考虑：
			 * 1. 本示例中只有静态场景，渲染开销很小
			 * 2. 如果添加动画或复杂效果，需要优化渲染逻辑
			 * 3. 可以使用Three.js的stats.js监控帧率
			 */
			function render() {

				// 渲染当前场景和相机到屏幕
				// 这是Three.js最核心的渲染调用
				renderer.render( scene, camera );
				
				/**
				 * 如果需要添加动画，可以在这里更新物体属性
				 * 例如：
				 * 
				 * // 让平面缓慢旋转
				 * // scene.children[0]获取第一个物体（我们的平面）
				 * const plane = scene.children[0];
				 * plane.rotation.z += 0.001; // 每帧绕Z轴旋转0.001弧度
				 * 
				 * // 或者基于时间创建动画
				 * const time = performance.now() * 0.001; // 获取当前时间（秒）
				 * blurAmount.value = 0.5 + Math.sin(time) * 0.5; // 模糊强度随时间正弦变化
				 * 
				 * 注意：如果proceduralToTexture.autoUpdate为true
				 * 修改uvScale或纹理参数会自动触发纹理更新
				 */

			}

			// ========== 其他可能的扩展功能（思考题） ==========
			/**
			 * 1. 添加性能监控（Stats.js）
			 * 2. 支持多种程序化纹理类型（噪声、渐变、蜂窝等）
			 * 3. 添加纹理导出功能（保存为PNG）
			 * 4. 实现响应式设计，适配移动设备触摸控制
			 * 5. 添加纹理动画（流动效果、旋转等）
			 * 6. 集成更多后处理效果（锐化、边缘检测等）
			 */

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