<!-- Three.js WebGPU 手动Mipmap生成示例
一、核心功能概述
1. 对比演示功能
分屏显示：页面左右两侧分别展示两种不同的纹理过滤配置

地面纹理：手动生成的彩色棋盘格图案，展示自定义mipmap

画作纹理：卡拉瓦乔的《水果篮》油画，展示真实图像的过滤效果

交互控制：鼠标移动控制相机视角，观察不同距离下的纹理质量

2. 技术演示重点
手动创建和管理纹理的mipmap级别

对比不同纹理过滤算法的视觉效果

展示WebGPU渲染器的基本用法

实现分屏渲染技术

二、主要技术点详解
1. Mipmap手动生成与管理
技术原理
javascript
// 手动创建各个mipmap级别
textureCanvas1.mipmaps[0] = canvas;                   // 128x128 原始尺寸
textureCanvas1.mipmaps[1] = mipmap(64, '#0f0');      // 64x64
textureCanvas1.mipmaps[2] = mipmap(32, '#00f');      // 32x32
// ... 直到1x1像素
mipmap生成函数
javascript
function mipmap(size, color) {
    // 创建Canvas
    const imageCanvas = document.createElement('canvas');
    const context = imageCanvas.getContext('2d');
    
    // 设置尺寸
    imageCanvas.width = imageCanvas.height = size;
    
    // 绘制图案：灰色背景 + 彩色对角线方块
    context.fillStyle = '#444';
    context.fillRect(0, 0, size, size);
    context.fillStyle = color;
    context.fillRect(0, 0, size/2, size/2);
    context.fillRect(size/2, size/2, size/2, size/2);
    
    return imageCanvas;
}
技术意义
减少锯齿：在远距离渲染时使用低分辨率版本

提高性能：避免实时下采样计算

内存优化：mipmap链总内存只比原始纹理多33%

2. 纹理过滤算法对比
左侧场景（高质量）
javascript
// 地面纹理
magFilter: THREE.LinearFilter                // 放大：线性过滤
minFilter: THREE.LinearMipmapLinearFilter    // 缩小：线性mipmap线性过滤

// 画作纹理
magFilter: THREE.LinearFilter                // 放大：线性过滤
minFilter: THREE.LinearFilter                // 缩小：线性过滤（无mipmap）
右侧场景（性能优化）
javascript
// 地面纹理
magFilter: THREE.NearestFilter               // 放大：最近邻过滤
minFilter: THREE.NearestMipmapNearestFilter  // 缩小：最近邻mipmap最近邻过滤

// 画作纹理
magFilter: THREE.NearestFilter               // 放大：最近邻过滤
minFilter: THREE.NearestFilter               // 缩小：最近邻过滤
过滤算法详解
LinearFilter（线性过滤）

取周围4个纹素的加权平均值

效果平滑，适合高质量渲染

计算量较大

NearestFilter（最近邻过滤）

直接取最近的纹素值

产生像素化效果

计算简单，性能高

Mipmap过滤组合

LinearMipmapLinearFilter：在三线性过滤，质量最高

NearestMipmapNearestFilter：最近邻mipmap过滤，性能最好

3. 分屏渲染技术
裁剪测试实现
javascript
// 启用裁剪测试
renderer.setScissorTest(true);

// 渲染左侧场景（左半屏）
renderer.setScissor(0, 0, SCREEN_WIDTH/2 - 2, SCREEN_HEIGHT);
renderer.render(scene1, camera);

// 渲染右侧场景（右半屏）
renderer.setScissor(SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2 - 2, SCREEN_HEIGHT);
renderer.render(scene2, camera);

// 禁用裁剪测试
renderer.setScissorTest(false);
技术优势
同一帧中渲染两个独立场景

直观对比不同配置效果

共享相机视角，确保对比公平性

4. WebGPU渲染器配置
初始化配置
javascript
renderer = new THREE.WebGPURenderer({ 
    antialias: true  // 启用抗锯齿
});

// 设置设备像素比（适配高DPI屏幕）
renderer.setPixelRatio(window.devicePixelRatio);

// 设置渲染尺寸
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

// 设置动画循环（替代requestAnimationFrame）
renderer.setAnimationLoop(animate);
WebGPU特点
现代API：替代WebGL，支持更先进的图形功能

并行处理：更好的多线程支持

降低开销：减少CPU-GPU通信成本

计算着色器：支持通用计算

5. 场景构建与组织
双场景架构
javascript
// 创建两个独立场景
scene1 = new THREE.Scene();  // 左侧高质量场景
scene2 = new THREE.Scene();  // 右侧性能场景

// 共享相机和渲染器
camera = new THREE.PerspectiveCamera(35, SCREEN_WIDTH/SCREEN_HEIGHT, 1, 5000);
地面纹理设置
javascript
// 纹理重复设置（用于大面积地面）
textureCanvas1.repeat.set(1000, 1000);
textureCanvas1.wrapS = THREE.RepeatWrapping;
textureCanvas1.wrapT = THREE.RepeatWrapping;
画作显示系统
javascript
// 自适应缩放
zmesh.scale.x = image.width / 100;
zmesh.scale.y = image.height / 100;

// 画框创建（比画作大10%）
meshFrame.scale.x = 1.1 * image.width / 100;
meshFrame.scale.y = 1.1 * image.height / 100;

// 阴影效果
meshShadow.rotation.x = - Math.PI / 2;  // 水平放置
meshShadow.material.opacity = 0.75;     // 75%透明度
6. 交互与动画系统
鼠标控制
javascript
// 鼠标事件处理
function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX);
    mouseY = (event.clientY - windowHalfY);
}

// 平滑相机移动（线性插值）
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (-(mouseY - 200) - camera.position.y) * .05;
动画循环
60FPS更新：利用浏览器的重绘周期

平滑插值：避免相机移动的突兀感

性能优化：只更新必要的内容

三、关键学习点
1. 纹理过滤选择策略
高质量需求：使用LinearMipmapLinearFilter

性能优先：使用NearestMipmapNearestFilter

2D图像：可能不需要mipmap（如本例中的画作）

3D表面：必须使用mipmap避免闪烁

2. 颜色空间管理
javascript
// sRGB颜色空间（适合显示）
textureCanvas1.colorSpace = THREE.SRGBColorSpace;

// 线性颜色空间（适合物理计算）
// textureCanvas1.colorSpace = THREE.LinearSRGBColorSpace;
3. 内存优化技巧
纹理压缩：使用合适的纹理格式

mipmap链：权衡质量和内存

纹理图集：合并小纹理减少绘制调用

四、性能考量
1. 渲染性能
分屏渲染：增加50%的绘制调用

纹理过滤：线性过滤比最近邻过滤慢20-30%

mipmap使用：显著提高远距离渲染性能

2. 内存占用
纹理内存：mipmap链增加33%内存

几何体：重用几何体减少内存

材质：共享材质减少GPU状态切换

五、应用场景
1. 教育演示
图形学教学：纹理过滤原理

性能优化：不同算法的取舍

2. 游戏开发
纹理系统配置：根据距离选择过滤算法

性能测试：对比不同设置的帧率

3. 可视化工具
参数调整：实时预览不同设置效果

质量控制：检查纹理在不同距离的表现

4. 艺术创作
风格化效果：利用像素化创造复古风格

纹理实验：自定义mipmap创建特殊效果

六、扩展建议
1. 功能增强
添加UI控制面板，实时调整过滤参数

实现纹理LOD（细节级别）控制

添加性能监控显示（FPS、内存使用）

2. 技术扩展
支持更多纹理过滤模式

添加各向异性过滤演示

实现纹理压缩格式支持

3. 交互改进
添加键盘控制（WASD移动）

实现触摸屏支持

添加预设视角切换 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据 -->
		<!-- 页面标题：展示这是一个使用Three.js WebGPU进行手动Mipmap生成的示例 -->
		<title>Three.js WebGPU - 手动Mipmap生成演示</title>
		
		<!-- 字符编码：指定文档使用UTF-8编码，支持中文字符 -->
		<meta charset="utf-8">
		
		<!-- 视口设置：确保页面在移动设备上正确显示 -->
		<!-- width=device-width: 宽度等于设备宽度 -->
		<!-- user-scalable=no: 禁止用户缩放（为了保持3D场景的显示效果） -->
		<!-- minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0 -->
		<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="example.css">
		
		<!-- 内联样式：定义本页面特有的样式规则 -->
		<style>
			/* 信息标签样式：用于显示场景中纹理设置的详细信息 */
			.lbl {
				color: #fff;                      /* 白色文字，确保在深色背景上可读 */
				font-size: 16px;                  /* 字体大小16像素 */
				font-weight: bold;                /* 粗体字，突出显示 */
				position: absolute;               /* 绝对定位，相对于最近的定位祖先元素 */
				bottom: 0px;                      /* 定位在底部 */
				z-index: 100;                     /* 较高的堆叠顺序，确保显示在最上层 */
				text-shadow: #000 1px 1px 1px;    /* 文字阴影：黑色，1像素偏移，模糊1像素，增加可读性 */
				background-color: rgba(0,0,0,0.85); /* 背景色：半透明黑色（透明度85%），不遮挡3D场景 */
				padding: 1em;                     /* 内边距1em（相对单位，基于当前字体大小） */
			}
			
			/* 左侧信息标签定位样式 */
			#lbl_left {
				text-align: left;    /* 文本左对齐 */
				left: 0px;           /* 距离左侧0像素，贴左显示 */
			}
			
			/* 右侧信息标签定位样式 */
			#lbl_right {
				text-align: left;    /* 文本左对齐 */
				right: 0px;          /* 距离右侧0像素，贴右显示 */
			}
			
			/* 灰色文字样式类：用于显示辅助信息（如纹理尺寸） */
			.g { color: #aaa; }  /* 浅灰色（#aaa） */
			
			/* 强调文字样式类：用于显示重要的配置信息（如过滤模式） */
			.c { color: #fa0; }  /* 橙色（#fa0），吸引用户注意 */
		</style>
	</head>

	<body>
		<!-- 页面顶部信息区域：显示Three.js品牌信息和示例标题 -->
		<div id="info">
			<!-- Three.js Logo链接：点击跳转到Three.js官网 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
			
			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 主标题链接：Three.js，点击跳转到官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 示例副标题：说明当前示例的具体内容 -->
				<span>纹理手动Mipmap生成演示</span>
			</div>
			
			<!-- 画作版权信息：显示使用的艺术作品信息 -->
			<small>
				画作：<a href="http://en.wikipedia.org/wiki/Basket_of_Fruit_%28Caravaggio%29">卡拉瓦乔《水果篮》</a>
			</small>
			
			<!-- 示例说明文字：解释本示例的目的和功能 -->
			<div class="description" style="margin-top: 40px;">
				<p>本示例展示如何手动生成和管理纹理的Mipmap级别。</p>
				<p>左侧场景使用高质量的线性过滤，右侧场景使用性能优化的最近邻过滤。</p>
				<p>移动鼠标可以控制相机视角，观察不同距离下的纹理渲染效果。</p>
			</div>
		</div>
		
		<!-- 左侧场景信息标签：显示左侧（高质量）场景的纹理配置详情 -->
		<div id="lbl_left" class="lbl">
			<!-- 地面纹理信息 -->
			地面纹理 <span class="g">(128x128 像素)</span><br/>  <!-- 纹理原始尺寸 -->
			放大过滤: <span class="c">线性过滤</span><br/>        <!-- 当纹理被放大时使用的过滤算法 -->
			缩小过滤: <span class="c">线性Mipmap线性过滤</span><br/>  <!-- 当纹理被缩小时使用的过滤算法（使用mipmap） -->
			<br/>  <!-- 空行分隔 -->
			
			<!-- 画作纹理信息 -->
			画作纹理 <span class="g">(748x600 像素)</span><br/>  <!-- 画作原始尺寸 -->
			放大过滤: <span class="c">线性过滤</span><br/>        <!-- 画作放大时使用线性过滤 -->
			缩小过滤: <span class="c">线性过滤</span>             <!-- 画作缩小时使用线性过滤（无mipmap） -->
			
			<!-- 性能提示 -->
			<br/><br/>
			<small>提示：左侧使用高质量过滤，视觉效果更好但性能消耗稍高</small>
		</div>
		
		<!-- 右侧场景信息标签：显示右侧（性能优化）场景的纹理配置详情 -->
		<div id="lbl_right" class="lbl">
			<!-- 地面纹理信息 -->
			地面纹理 <br/>
			放大过滤: <span class="c">最近邻过滤</span><br/>        <!-- 放大时使用最近邻过滤（像素化效果） -->
			缩小过滤: <span class="c">最近邻Mipmap最近邻过滤</span><br/>  <!-- 缩小时使用最近邻mipmap过滤 -->
			<br/>  <!-- 空行分隔 -->
			
			<!-- 画作纹理信息 -->
			画作纹理 <br/>
			放大过滤: <span class="c">最近邻过滤</span><br/>        <!-- 画作放大时使用最近邻过滤 -->
			缩小过滤: <span class="c">最近邻过滤</span>             <!-- 画作缩小时使用最近邻过滤 -->
			
			<!-- 性能提示 -->
			<br/><br/>
			<small>提示：右侧使用性能优化过滤，渲染速度更快但可能有锯齿</small>
		</div>
		
		<!-- 导入映射配置：现代浏览器中用于定义模块别名的机制 -->
		<!-- 当JavaScript代码中使用import语句时，浏览器会根据这里的映射解析模块路径 -->
		<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模块 -->
		<script type="module">
			// 导入Three.js的WebGPU模块
			// 使用import * as语法导入整个模块的所有导出内容
			import * as THREE from 'three/webgpu';
			
			// 获取浏览器窗口的当前内部尺寸（视口尺寸）
			// 这些值会用于设置渲染器的大小和计算宽高比
			const SCREEN_WIDTH = window.innerWidth;
			const SCREEN_HEIGHT = window.innerHeight;
			
			// 全局变量声明（在模块作用域内）
			let container;      // 用于容纳渲染器DOM元素的容器div
			let camera, scene1, scene2, renderer;  // 相机、两个场景（左右各一个）、渲染器
			let mouseX = 0, mouseY = 0;  // 存储鼠标位置的变量，初始化为0
			
			// 计算窗口的中心点坐标
			// 用于将鼠标位置转换为相对于窗口中心的偏移量
			const windowHalfX = window.innerWidth / 2;
			const windowHalfY = window.innerHeight / 2;
			
			// 初始化函数调用：页面加载时执行
			init();
			
			// 异步初始化函数：负责设置整个3D场景
			// 使用async关键字，因为需要等待纹理加载完成
			async function init() {
				
				// ============ 创建DOM容器 ============
				// 创建一个新的div元素作为渲染器的容器
				container = document.createElement('div');
				// 将容器添加到文档的body元素中
				document.body.appendChild(container);
				
				// ============ 创建相机 ============
				// 创建透视相机（PerspectiveCamera），模拟人眼的视角
				camera = new THREE.PerspectiveCamera(
					35,                         // 视野角度（Field of View）：垂直方向35度
					SCREEN_WIDTH / SCREEN_HEIGHT, // 宽高比（Aspect Ratio）：根据窗口尺寸计算
					1,                          // 近裁剪面（Near Clipping Plane）：距离相机1个单位以内的物体不渲染
					5000                        // 远裁剪面（Far Clipping Plane）：距离相机5000个单位以外的物体不渲染
				);
				// 设置相机的初始位置：沿Z轴正方向1500个单位
				// 在Three.js的右手坐标系中，Z轴正方向指向屏幕外
				camera.position.z = 1500;
				
				// ============ 创建场景1（左侧场景） ============
				// 场景是所有3D对象的容器，包括网格、灯光、相机等
				scene1 = new THREE.Scene();
				// 设置场景背景色为黑色（0x000000是十六进制颜色表示）
				scene1.background = new THREE.Color(0x000000);
				// 为场景添加雾效（Fog）：使远处的物体逐渐融入背景色
				// 参数：颜色、雾效开始距离、雾效完全覆盖距离
				scene1.fog = new THREE.Fog(0x000000, 1500, 4000);
				
				// ============ 创建场景2（右侧场景） ============
				// 创建第二个场景，用于右侧分屏显示
				scene2 = new THREE.Scene();
				scene2.background = new THREE.Color(0x000000);
				scene2.fog = new THREE.Fog(0x000000, 1500, 4000);
				
				// ====================== 地面纹理处理部分 ======================
				// 这部分演示如何手动创建和管理纹理的mipmap级别
				
				// 调用mipmap函数生成128x128像素的基础纹理
				// 第一个参数128是纹理尺寸，第二个参数'#f00'是红色（十六进制颜色代码）
				const canvas = mipmap(128, '#f00');
				
				// 创建Canvas纹理对象
				// CanvasTexture可以从HTML5 Canvas元素创建纹理
				const textureCanvas1 = new THREE.CanvasTexture(canvas);
				
				// ============ 手动设置纹理的mipmap级别 ============
				// mipmaps是一个数组，每个元素是一个Canvas，代表不同级别的纹理
				// 级别0是原始尺寸，级别1是1/2尺寸，级别2是1/4尺寸，依此类推
				
				// mipmaps[0]: 原始尺寸纹理（128x128像素）
				// 这是最高分辨率的纹理级别
				textureCanvas1.mipmaps[0] = canvas;
				
				// mipmaps[1]: 64x64像素纹理
				// 使用绿色（#0f0）作为第二级别的颜色
				textureCanvas1.mipmaps[1] = mipmap(64, '#0f0');
				
				// mipmaps[2]: 32x32像素纹理
				// 使用蓝色（#00f）作为第三级别的颜色
				textureCanvas1.mipmaps[2] = mipmap(32, '#00f');
				
				// mipmaps[3]: 16x16像素纹理
				// 使用深红色（#400）作为第四级别的颜色
				textureCanvas1.mipmaps[3] = mipmap(16, '#400');
				
				// mipmaps[4]: 8x8像素纹理
				// 使用深绿色（#040）作为第五级别的颜色
				textureCanvas1.mipmaps[4] = mipmap(8, '#040');
				
				// mipmaps[5]: 4x4像素纹理
				// 使用深蓝色（#004）作为第六级别的颜色
				textureCanvas1.mipmaps[5] = mipmap(4, '#004');
				
				// mipmaps[6]: 2x2像素纹理
				// 使用蓝绿色（#044）作为第七级别的颜色
				textureCanvas1.mipmaps[6] = mipmap(2, '#044');
				
				// mipmaps[7]: 1x1像素纹理（单个像素）
				// 使用紫红色（#404）作为最小级别的颜色
				textureCanvas1.mipmaps[7] = mipmap(1, '#404');
				
				// ============ 配置纹理属性 ============
				// 设置颜色空间为sRGB
				// sRGB颜色空间更符合人眼感知，适合在屏幕上显示
				textureCanvas1.colorSpace = THREE.SRGBColorSpace;
				
				// 设置纹理重复次数
				// 地面需要覆盖很大的面积，所以设置重复1000次
				textureCanvas1.repeat.set(1000, 1000);
				
				// 设置纹理包裹模式为重复（RepeatWrapping）
				// 当纹理坐标超过1.0时，纹理会重复而不是拉伸
				textureCanvas1.wrapS = THREE.RepeatWrapping;  // S方向（水平/U方向）重复
				textureCanvas1.wrapT = THREE.RepeatWrapping;  // T方向（垂直/V方向）重复
				
				// 克隆纹理用于右侧场景
				// clone()方法创建纹理的浅拷贝，共享图像数据但可以有不同的配置
				const textureCanvas2 = textureCanvas1.clone();
				
				// 为右侧场景配置不同的过滤模式
				// magFilter: 放大过滤器 - 当纹理被放大时使用
				// NearestFilter: 最近邻过滤，直接取最近的纹素，产生像素化效果
				textureCanvas2.magFilter = THREE.NearestFilter;
				
				// minFilter: 缩小过滤器 - 当纹理被缩小时使用
				// NearestMipmapNearestFilter: 最近邻mipmap最近邻过滤
				// 选择最接近的mipmap级别，然后在该级别中使用最近邻过滤
				textureCanvas2.minFilter = THREE.NearestMipmapNearestFilter;
				
				// ============ 创建地面材质 ============
				// MeshBasicMaterial: 基础网格材质，不受光照影响，只显示纹理或颜色
				const materialCanvas1 = new THREE.MeshBasicMaterial({ 
					map: textureCanvas1  // 使用配置好的纹理1
				});
				
				const materialCanvas2 = new THREE.MeshBasicMaterial({ 
					color: 0xffccaa,     // 材质基础颜色：浅橙色
					map: textureCanvas2  // 使用配置好的纹理2
				});
				
				// ============ 创建平面几何体 ============
				// PlaneGeometry: 平面几何体，默认创建在X-Y平面上
				// 参数：宽度100，高度100，宽度分段数1，高度分段数1（默认）
				const geometry = new THREE.PlaneGeometry(100, 100);
				
				// ============ 创建地面网格（左侧场景） ============
				const meshCanvas1 = new THREE.Mesh(geometry, materialCanvas1);
				meshCanvas1.rotation.x = - Math.PI / 2;      // 绕X轴旋转-90度，使平面水平（作为地面）
				meshCanvas1.scale.set(1000, 1000, 1000);    // 缩放1000倍，使地面足够大
				
				// ============ 创建地面网格（右侧场景） ============
				const meshCanvas2 = new THREE.Mesh(geometry, materialCanvas2);
				meshCanvas2.rotation.x = - Math.PI / 2;      // 同样旋转使平面水平
				meshCanvas2.scale.set(1000, 1000, 1000);    // 同样缩放1000倍
				
				// ============ 将地面添加到场景 ============
				scene1.add(meshCanvas1);  // 左侧场景
				scene2.add(meshCanvas2);  // 右侧场景
				
				// ====================== 画作纹理处理部分 ======================
				// 这部分演示如何加载外部图像纹理并应用不同的过滤模式
				
				// 异步加载画作纹理
				// TextureLoader是Three.js的纹理加载器，loadAsync返回一个Promise
				// 使用await等待纹理加载完成
				const texturePainting1 = await new THREE.TextureLoader().loadAsync(
					'textures/758px-Canestra_di_frutta_(Caravaggio).jpg'  // 纹理文件路径
				);
				
				// 克隆纹理用于右侧场景
				const texturePainting2 = texturePainting1.clone();
				
				// 设置两个纹理的颜色空间为sRGB
				texturePainting1.colorSpace = THREE.SRGBColorSpace;
				texturePainting2.colorSpace = THREE.SRGBColorSpace;
				
				// ============ 配置画作纹理过滤模式 ============
				// 左侧场景：使用高质量的线性过滤
				texturePainting1.minFilter = THREE.LinearFilter;  // 缩小时使用线性过滤
				texturePainting1.magFilter = THREE.LinearFilter;  // 放大时使用线性过滤
				
				// 右侧场景：使用性能优化的最近邻过滤
				texturePainting2.minFilter = THREE.NearestFilter;  // 缩小时使用最近邻过滤
				texturePainting2.magFilter = THREE.NearestFilter;  // 放大时使用最近邻过滤
				
				// ============ 创建画作材质 ============
				const materialPainting1 = new THREE.MeshBasicMaterial({ 
					color: 0xffffff,        // 白色基础色
					map: texturePainting1   // 使用高质量过滤的纹理
				});
				
				const materialPainting2 = new THREE.MeshBasicMaterial({ 
					color: 0xffccaa,        // 浅橙色基础色
					map: texturePainting2   // 使用性能优化过滤的纹理
				});
				
				// ============ 创建画作网格 ============
				// 创建另一个平面几何体用于显示画作
				const geometryPainting = new THREE.PlaneGeometry(100, 100);
				
				// 创建两个画作网格：分别用于左右场景
				const mesh1 = new THREE.Mesh(geometryPainting, materialPainting1);  // 左侧画作
				const mesh2 = new THREE.Mesh(geometryPainting, materialPainting2);  // 右侧画作
				
				// ============ 将画作添加到场景 ============
				// 使用辅助函数addPainting，它会添加画作、画框和阴影
				addPainting(scene1, mesh1);  // 添加到左侧场景
				addPainting(scene2, mesh2);  // 添加到右侧场景
				
				// ============ 辅助函数：添加画作及其相关元素 ============
				/**
				 * 将画作网格添加到场景，并创建配套的画框和阴影
				 * @param {THREE.Scene} zscene - 要添加到的场景对象
				 * @param {THREE.Mesh} zmesh - 画作网格对象
				 */
				function addPainting(zscene, zmesh) {
					// 获取纹理图像的实际尺寸（用于正确缩放画作）
					const image = texturePainting1.image;
					
					// 根据图像实际尺寸缩放画作网格
					// 原始平面几何体是100x100，需要根据图像比例调整
					zmesh.scale.x = image.width / 100;   // 水平方向缩放比例
					zmesh.scale.y = image.height / 100;  // 垂直方向缩放比例
					
					// 将画作网格添加到场景
					zscene.add(zmesh);
					
					// ============ 创建画框 ============
					// 创建一个黑色平面作为画框，比画作稍大
					const meshFrame = new THREE.Mesh(
						geometry,  // 使用相同的平面几何体
						new THREE.MeshBasicMaterial({ 
							color: 0x000000  // 黑色画框
						})
					);
					meshFrame.position.z = -10.0;                     // 将画框放在画作后面10个单位
					meshFrame.scale.x = 1.1 * image.width / 100;     // 画框宽度比画作宽10%
					meshFrame.scale.y = 1.1 * image.height / 100;    // 画框高度比画作高10%
					zscene.add(meshFrame);  // 将画框添加到场景
					
					// ============ 创建画作阴影 ============
					// 创建一个半透明的黑色平面作为画作的阴影
					const meshShadow = new THREE.Mesh(
						geometry,  // 使用相同的平面几何体
						new THREE.MeshBasicMaterial({
							color: 0x000000,    // 黑色
							opacity: 0.75,      // 75%透明度
							transparent: true   // 启用透明度（必须设置为true才能使opacity生效）
						})
					);
					// 阴影位置：在画作下方并向后延伸
					meshShadow.position.y = -1.1 * image.height / 2;    // Y轴位置：画作高度的一半（负值表示向下）
					meshShadow.position.z = -1.1 * image.height / 2;    // Z轴位置：画作高度的一半（负值表示向后）
					meshShadow.rotation.x = - Math.PI / 2;              // 绕X轴旋转-90度，使平面水平（作为阴影）
					meshShadow.scale.x = 1.1 * image.width / 100;      // 阴影宽度与画框相同
					meshShadow.scale.y = 1.1 * image.height / 100;     // 阴影长度（模拟阴影投射效果）
					zscene.add(meshShadow);  // 将阴影添加到场景
					
					// ============ 调整地面高度 ============
					// 计算地面的正确高度，使其与画作的底部对齐
					const floorHeight = -1.117 * image.height / 2;
					meshCanvas1.position.y = floorHeight;  // 左侧场景地面高度
					meshCanvas2.position.y = floorHeight;  // 右侧场景地面高度
				}
				
				// ============ 创建渲染器 ============
				// 创建WebGPU渲染器（Three.js的新一代渲染器）
				renderer = new THREE.WebGPURenderer({ 
					antialias: true  // 启用抗锯齿，平滑边缘锯齿
				});
				
				// 设置设备像素比
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比例
				// 在高DPI屏幕上（如Retina显示），这个值通常是2.0
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				
				// 设置动画循环函数
				// setAnimationLoop替代了之前的requestAnimationFrame方式
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop(animate);
				
				// 禁用自动清除
				// 由于我们要分屏渲染两个场景，需要手动控制清除操作
				renderer.autoClear = false;
				
				// ============ 设置渲染器DOM元素样式 ============
				// 将渲染器的canvas元素设置为相对定位
				// 这样绝对定位的子元素可以相对于它定位
				renderer.domElement.style.position = 'relative';
				
				// 将渲染器的canvas元素添加到容器中
				container.appendChild(renderer.domElement);
				
				// ============ 添加事件监听器 ============
				// 监听鼠标移动事件，用于控制相机视角
				document.addEventListener('mousemove', onDocumentMouseMove);
			}
			
			// ============ mipmap生成函数 ============
			/**
			 * 生成指定尺寸和颜色的mipmap级别图像
			 * mipmap是纹理的预先计算好的缩小版本，用于提高渲染性能和减少锯齿
			 * 
			 * @param {number} size - 生成的mipmap尺寸（正方形）
			 * @param {string} color - 十六进制颜色代码（如'#f00'代表红色）
			 * @returns {HTMLCanvasElement} - 包含生成的mipmap图像的Canvas元素
			 */
			function mipmap(size, color) {
				// 创建Canvas元素
				const imageCanvas = document.createElement('canvas');
				
				// 获取Canvas的2D渲染上下文
				const context = imageCanvas.getContext('2d');
				
				// 设置Canvas尺寸为指定的大小（正方形）
				imageCanvas.width = imageCanvas.height = size;
				
				// 绘制背景：统一的灰色（#444）
				// 这提供了mipmap级别之间的视觉区分
				context.fillStyle = '#444';  // 中灰色
				context.fillRect(0, 0, size, size);  // 填充整个Canvas
				
				// 绘制彩色对角线图案
				// 这种图案可以清楚地显示不同mipmap级别的细节损失
				context.fillStyle = color;  // 使用传入的颜色
				
				// 绘制左上角的彩色方块（占据左上四分之一）
				context.fillRect(0, 0, size / 2, size / 2);
				
				// 绘制右下角的彩色方块（占据右下四分之一）
				context.fillRect(size / 2, size / 2, size / 2, size / 2);
				
				// 返回包含生成图像的Canvas元素
				return imageCanvas;
			}
			
			// ============ 鼠标移动事件处理函数 ============
			/**
			 * 处理鼠标移动事件，更新鼠标位置变量
			 * 这些变量将在动画循环中用于控制相机移动
			 * 
			 * @param {MouseEvent} event - 鼠标事件对象，包含鼠标位置信息
			 */
			function onDocumentMouseMove(event) {
				// 计算鼠标位置相对于窗口中心的偏移量
				// event.clientX: 鼠标相对于浏览器窗口左上角的X坐标
				// windowHalfX: 窗口宽度的一半（中心点X坐标）
				mouseX = (event.clientX - windowHalfX);
				
				// 计算鼠标位置相对于窗口中心的偏移量（Y轴）
				// event.clientY: 鼠标相对于浏览器窗口左上角的Y坐标
				// windowHalfY: 窗口高度的一半（中心点Y坐标）
				mouseY = (event.clientY - windowHalfY);
			}
			
			// ============ 动画循环函数 ============
			/**
			 * 每一帧执行的函数，负责更新场景状态和渲染
			 * 这个函数通过setAnimationLoop注册，会在每次浏览器重绘时调用
			 */
			function animate() {
				// ============ 更新相机位置 ============
				// 使用线性插值（Lerp）平滑地移动相机跟随鼠标
				// 这种技术使相机移动更平滑，避免突兀的跳动
				
				// X轴方向：相机当前位置向鼠标X位置平滑移动
				// 0.05是插值因子，值越小移动越平滑但响应越慢
				camera.position.x += (mouseX - camera.position.x) * 0.05;
				
				// Y轴方向：相机当前位置向鼠标Y位置平滑移动
				// 注意：减去200是为了调整垂直方向的偏移，使相机不会太高
				// 在计算机图形学中，Y轴通常向上为正，但鼠标事件的Y轴向下为正
				// 所以需要取负号来反转方向
				camera.position.y += (-(mouseY - 200) - camera.position.y) * 0.05;
				
				// 让相机始终看向场景中心点（原点）
				// 这样相机围绕场景中心旋转，而不是围绕自身旋转
				camera.lookAt(scene1.position);
				
				// ============ 渲染场景 ============
				// 由于禁用了自动清除，需要手动清除渲染缓冲区
				renderer.clear();
				
				// 启用裁剪测试（Scissor Test）
				// 裁剪测试允许我们只渲染屏幕的特定矩形区域
				// 这是实现分屏渲染的关键技术
				renderer.setScissorTest(true);
				
				// ============ 渲染左侧场景 ============
				// 设置裁剪区域：左侧半屏
				// 参数：x坐标, y坐标, 宽度, 高度
				renderer.setScissor(
					0,                      // X坐标：从左侧开始
					0,                      // Y坐标：从顶部开始
					SCREEN_WIDTH / 2 - 2,   // 宽度：屏幕宽度的一半减去2像素（留出中间分隔线）
					SCREEN_HEIGHT           // 高度：整个屏幕高度
				);
				// 渲染第一个场景（左侧高质量场景）
				renderer.render(scene1, camera);
				
				// ============ 渲染右侧场景 ============
				// 设置裁剪区域：右侧半屏
				renderer.setScissor(
					SCREEN_WIDTH / 2,       // X坐标：从屏幕中心开始
					0,                      // Y坐标：从顶部开始
					SCREEN_WIDTH / 2 - 2,   // 宽度：屏幕宽度的一半减去2像素
					SCREEN_HEIGHT           // 高度：整个屏幕高度
				);
				// 渲染第二个场景（右侧性能优化场景）
				renderer.render(scene2, camera);
				
				// ============ 禁用裁剪测试 ============
				// 渲染完成后禁用裁剪测试，避免影响后续操作
				renderer.setScissorTest(false);
			}
		</script>
	</body>
</html>