<!-- Three.js 深度缓冲技术对比演示
🎯 代码核心功能
这是一个WebGL 3D图形演示，用于并排对比三种不同的深度缓冲技术在解决深度精度问题上的表现：

1. 三视图同步对比
左侧：标准深度缓冲（Normal Z-Buffer）

中间：对数深度缓冲（Logarithmic Z-Buffer）

右侧：反向深度缓冲（Reverse Z-Buffer）

三个视图显示完全相同的3D场景，便于直接对比

2. 深度精度问题可视化
创建了5组"双层平面"，每组包含两个极其接近的平面（距离仅0.0002单位）

每组平面具有不同的深度值（从近到远排列）

平面使用不同颜色（红/绿），当深度冲突发生时会出现颜色闪烁（Z-fighting）

3. 动态演示
所有平面围绕动态变化的轴持续旋转

可以从不同角度观察深度精度问题

实时性能监控（FPS帧率显示）

4. 交互式响应
窗口大小变化时自动调整布局

支持高DPI显示器（Retina显示屏）

🔧 主要技术点
1. 三种深度缓冲技术
标准深度缓冲（Normal Z-Buffer）
javascript
// 传统的线性深度映射
normalRenderer = new THREE.WebGLRenderer(); // 默认设置
原理：使用线性函数在近平面和远平面之间分配深度值

问题：远处物体的深度精度严重不足（深度值分布不均匀）

现象：远处平面出现明显的Z-fighting（红色绿色交替闪烁）

对数深度缓冲（Logarithmic Z-Buffer）
javascript
logarithmicRenderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });
原理：使用对数函数分配深度值，depth = log(z) / log(far/near)

优点：在远处提供更高的精度

适用场景：超大场景（如太空模拟、地形渲染）

反向深度缓冲（Reverse Z-Buffer）
javascript
reverseRenderer = new THREE.WebGLRenderer({ reversedDepthBuffer: true });
原理：将深度范围从[0,1]反转为[1,0]，结合浮点深度缓冲

优点：充分利用浮点数的精度分布特性

技术背景：浮点数在0附近有最高精度，在1附近精度最低

2. 深度冲突（Z-fighting）模拟
javascript
const d = 0.0001; // 平面间距离极小
const positions = new Float32Array([
  -1-o, -1, d,   // 红色平面：+d
  -1+o, -1, -d,  // 绿色平面：-d
]);
创建条件：两个平面在Z轴上仅相距0.0002单位

观察效果：在标准深度缓冲中，远处平面的深度值差异太小，无法被区分

颜色标识：红色和绿色平面交替显示，形成闪烁效果

3. 后期处理架构
javascript
// 创建渲染目标，包含浮点深度纹理
const renderTarget = new THREE.WebGLRenderTarget();
renderTarget.depthTexture = new THREE.DepthTexture();
renderTarget.depthTexture.type = THREE.FloatType; // 浮点类型

// 效果合成器配置
normalComposer = new EffectComposer(normalRenderer, renderTarget);
normalComposer.addPass(new RenderPass(scene, camera));
normalComposer.addPass(new OutputPass());
EffectComposer：Three.js的后期处理框架

浮点深度纹理：提供32位浮点精度，减少精度误差

渲染管线：RenderPass → 深度测试 → OutputPass → 屏幕

4. 场景配置
javascript
// 极端的近远平面比例：5:9999
camera = new THREE.PerspectiveCamera(72, 0.33*window.innerWidth/window.innerHeight, 5, 9999);
大深度范围：近平面5，远平面9999（比例1999:1）

典型测试场景：模拟需要渲染远处物体的应用（飞行模拟、开放世界游戏）

透视投影：72度宽视野，增强深度感知

5. 实例化几何体
javascript
// 创建5个实例，每个都有不同的深度和缩放
const z = -800 * i;        // 深度递增
const s = 1 + 50 * i;      // 缩放递增
mesh.position.set(x, y, z);
mesh.scale.setScalar(s);
深度梯度：每个实例比前一个远800单位

缩放补偿：远处物体按比例放大，保持视觉大小

空间布局：在Y轴上分层排列

6. 响应式设计
javascript
function onWindowResize() {
  const width = 0.33 * window.innerWidth;
  const height = window.innerHeight;
  // 更新三个渲染器尺寸
  normalRenderer.setSize(width, height);
  // 更新相机宽高比
  camera.aspect = 0.33 * window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}
Flex布局：三个视图等宽排列（各占33%）

设备像素比适配：支持高DPI显示

动态投影矩阵：窗口大小变化时重新计算

7. 性能优化
javascript
// 性能监控
import Stats from 'three/addons/libs/stats.module.js';
stats = new Stats();
container.appendChild(stats.dom);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  // 基于时间的旋转动画
  const axis = new THREE.Vector3(Math.sin(now), Math.cos(now), 0);
  meshes[i].quaternion.setFromAxisAngle(axis, angle);
  render();
}
Stats.js集成：实时显示帧率

高效动画：使用四元数旋转，避免万向锁

基于时间的动画：确保动画速度与帧率无关

🎓 教育价值
深度精度问题演示
问题展示：清晰展示标准深度缓冲在远处物体上的精度不足

解决方案对比：直观比较三种技术的优劣

实际应用：帮助开发者选择适合的深度缓冲方案

技术决策指导
标准深度缓冲：适用于小场景或深度范围小的应用

对数深度缓冲：适用于需要渲染极远处物体的场景

反向深度缓冲：现代图形API的推荐做法，结合浮点深度缓冲

学习资源
NVIDIA参考文章：链接到深度精度可视化技术文章

Three.js官方示例：展示Three.js的高级功能

WebGL最佳实践：演示浮点深度缓冲的使用

📊 可视化效果
通过这个演示，开发者可以：

直观理解深度缓冲的工作原理和限制

亲眼看到Z-fighting现象及其解决方案

做出明智选择根据应用需求选择合适的技术

学习实现如何在Three.js中配置不同的深度缓冲模式 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Three.js WebGL - 三种深度缓冲技术对比演示（标准/对数/反向）</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">
		<style>
			/* 
			 * 页面基础样式设置
			 * 主要功能：为WebGL场景提供黑色背景和基本文本样式
			 */
			body {
				margin: 0; /* 移除默认边距 */
				background-color: #000; /* 纯黑背景，适合3D场景显示 */
				color: #fff; /* 白色文字，在黑色背景上提供高对比度 */
				font-family: Monospace; /* 等宽字体，常用于技术演示保持对齐 */
				font-size: 13px; /* 标准字号 */
				line-height: 24px; /* 行高设置，提高可读性 */
				overscroll-behavior: none; /* 防止页面过度滚动，提升用户体验 */
			}

			/* 超链接样式 */
			a {
				color: #ff0; /* 亮黄色，醒目但不刺眼 */
				text-decoration: none; /* 移除下划线，保持简洁 */
			}

			a:hover {
				text-decoration: underline; /* 鼠标悬停时显示下划线，提供视觉反馈 */
			}

			/* 
			 * 顶部信息栏样式
			 * 位置：固定在顶部
			 * 功能：显示标题和技术信息
			 */
			#info {
				position: absolute; /* 绝对定位，不占用文档流空间 */
				top: 0px; /* 顶部对齐 */
				width: 100%; /* 全宽度 */
				padding: 10px; /* 内边距 */
				box-sizing: border-box; /* 盒模型设置，padding不增加元素宽度 */
				text-align: center; /* 文字居中 */
				-moz-user-select: none; /* Firefox：禁止文本选择 */
				-webkit-user-select: none; /* Chrome/Safari：禁止文本选择 */
				-ms-user-select: none; /* IE/Edge：禁止文本选择 */
				user-select: none; /* 标准：禁止文本选择 */
				pointer-events: none; /* 元素不响应鼠标事件，防止干扰3D交互 */
				z-index: 1; /* 堆叠顺序，确保在画布上方但低于交互元素 */
			}

			/* 
			 * 主容器布局
			 * 功能：将三个不同的深度缓冲演示并排显示
			 * 使用flex布局实现响应式排列
			 */
			#container {
				display: flex; /* 启用flex布局 */
			}

			/* 
			 * 三个子容器样式
			 * 每个容器显示一种深度缓冲技术的结果
			 */
			#container_normal,
			#container_logarithmic,
			#container_reverse {
				width: 33%; /* 各占三分之一宽度，等分显示 */
				display: inline-block; /* 内联块级元素 */
				position: relative; /* 相对定位，为子元素的绝对定位提供参考 */
			}

			/* 
			 * 容器底部标签
			 * 功能：标识每种深度缓冲技术的名称
			 */
			.container_label {
				position: absolute; /* 绝对定位在容器底部 */
				bottom: 1em; /* 距离底部1em */
				width: 100%; /* 全宽度 */
				color: white; /* 白色文字 */
				z-index: 10; /* 较高的堆叠顺序，确保在3D场景上方 */
				display: block; /* 块级显示 */
				text-align: center; /* 文字居中 */
			}

			/* 
			 * 技术说明区域
			 * 功能：提供技术背景和使用注意事项
			 */
			#info_note {
				position: absolute;
				top: 24px; /* 位于信息栏下方 */
				width: 100%;
				padding: 10px;
				box-sizing: border-box;
				text-align: center;
				color: rgba(255, 255, 255, 0.8); /* 80%不透明度白色，稍微透明以不干扰主要内容 */
				z-index: 2; /* 堆叠顺序 */
			}
		</style>
	</head>
	<body>
		<!-- 
			主容器：包含三个并排的演示区域
			每个区域展示不同的深度缓冲技术
		-->
		<div id="container">
			<div id="container_normal"><h2 class="container_label">标准深度缓冲（Normal Z-Buffer）</h2></div>
			<div id="container_logarithmic"><h2 class="container_label">对数深度缓冲（Logarithmic Z-Buffer）</h2></div>
			<div id="container_reverse"><h2 class="container_label">反向深度缓冲（Reverse Z-Buffer）</h2></div>
		</div>

		<!-- 
			顶部信息栏
			显示技术框架和演示标题
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 三种深度缓冲技术对比演示<br/>
			标准深度缓冲 vs 对数深度缓冲 vs 反向深度缓冲
			<br />
			注意：为获得最佳效果，建议在使用后期处理时配合浮点深度缓冲。详见<a href="https://developer.nvidia.com/blog/visualizing-depth-precision" target="_blank" rel="noopener">NVIDIA深度精度可视化技术文章</a>。
		</div>

		<!-- 
			导入映射表（Import Map）
			功能：定义JavaScript模块的导入路径映射
			在现代浏览器中用于ES模块导入的配置
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			使用type="module"声明为ES模块，支持现代JavaScript特性
		-->
		<script type="module">
			// ============================================================================
			// 模块导入部分
			// ============================================================================
			
			// 导入Three.js 3D引擎库
			import * as THREE from 'three';

			// 导入性能监控器，用于显示FPS等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入后期处理相关组件
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; // 效果合成器，用于组合多个渲染通道
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; // 渲染通道，执行基础场景渲染
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; // 输出通道，将结果输出到屏幕

			// ============================================================================
			// 全局变量声明
			// ============================================================================
			
			let stats; // 性能监控器实例
			let camera, reversedCamera; // 相机：camera用于标准和对数深度，reversedCamera用于反向深度
			let scene; // 3D场景对象
			
			// 三个渲染器实例，分别对应三种深度缓冲技术
			let normalRenderer;      // 标准深度缓冲渲染器
			let logarithmicRenderer; // 对数深度缓冲渲染器
			let reverseRenderer;     // 反向深度缓冲渲染器
			
			// 三个后期处理合成器实例
			let normalComposer;      // 标准深度合成器
			let logarithmicComposer; // 对数深度合成器
			let reverseComposer;     // 反向深度合成器
			
			const meshes = []; // 存储所有网格对象的数组，用于后续的动画控制

			// ============================================================================
			// 渲染目标配置
			// ============================================================================
			
			// 创建WebGL渲染目标，用于后期处理
			const renderTarget = new THREE.WebGLRenderTarget();
			
			// 为渲染目标创建深度纹理
			// 深度纹理存储每个像素的深度值，用于深度测试和后期处理
			renderTarget.depthTexture = new THREE.DepthTexture();
			
			// 设置深度纹理类型为浮点型
			// FloatType提供更高的精度，减少深度冲突（Z-fighting）问题
			renderTarget.depthTexture.type = THREE.FloatType;

			// ============================================================================
			// 初始化函数调用
			// ============================================================================
			
			// 调用初始化函数，设置场景、相机、渲染器等
			init();
			
			// 启动动画循环
			animate();

			// ============================================================================
			// 初始化函数
			// 功能：创建3D场景、相机、渲染器、几何体、材质等所有必要组件
			// ============================================================================
			function init() {

				// 获取主容器DOM元素
				const container = document.getElementById( 'container' );

				// ------------------------------------------------------------------------
				// 性能监控器初始化
				// ------------------------------------------------------------------------
				stats = new Stats(); // 创建Stats.js实例
				container.appendChild( stats.dom ); // 将性能监控器DOM元素添加到容器中

				// ------------------------------------------------------------------------
				// 相机设置
				// ------------------------------------------------------------------------
				
				// 创建透视相机
				// 参数说明：
				// 1. 视野角度（FOV）：72度，提供较宽的视野
				// 2. 宽高比：根据窗口宽度计算，每个视图占1/3宽度
				// 3. 近裁剪面：5个单位，相机能看到的最近距离
				// 4. 远裁剪面：9999个单位，相机能看到的最远距离
				// 近远平面距离比非常大（5:9999），这是深度精度问题的典型测试场景
				camera = new THREE.PerspectiveCamera( 72, 0.33 * window.innerWidth / window.innerHeight, 5, 9999 );
				camera.position.z = 12; // 将相机向后移动12个单位，以便观察场景

				// 克隆相机用于反向深度缓冲
				// 反向深度需要特殊的相机设置，虽然这里只是简单克隆，但在实际渲染时会使用不同的深度范围
				reversedCamera = camera.clone();

				// ------------------------------------------------------------------------
				// 场景创建
				// ------------------------------------------------------------------------
				scene = new THREE.Scene(); // 创建新的3D场景

				// ------------------------------------------------------------------------
				// 几何体创建 - 用于演示深度精度问题
				// ------------------------------------------------------------------------
				
				// 设置实例数量
				const xCount = 1; // X轴方向的实例数量
				const yCount = 5; // Y轴方向的实例数量
				const numInstances = xCount * yCount; // 总实例数 = 1 * 5 = 5

				// 几何体参数
				const d = 0.0001; // 两个平面之间距离的一半，非常小的值，用于制造深度冲突
				const o = 0.5; // 水平偏移量，使两个平面在X方向上有部分重叠

				// 定义顶点位置数据
				// 创建两个非常接近但略微偏移的平面
				// 第一个平面：在Z轴上偏移+d（红色）
				// 第二个平面：在Z轴上偏移-d（绿色）
				// 每个平面由两个三角形组成（6个顶点）
				const positions = new Float32Array( [
					// 第一个平面（红色平面）的6个顶点
					-1 - o, -1, d,  // 左下顶点，X方向偏移-o
					1 - o, -1, d,   // 右下顶点，X方向偏移-o
					-1 - o, 1, d,   // 左上顶点，X方向偏移-o
					
					1 - o, -1, d,   // 第二个三角形的第一个顶点（与第一个三角形共享）
					1 - o, 1, d,    // 第二个三角形的第二个顶点
					-1 - o, 1, d,   // 第二个三角形的第三个顶点（与第一个三角形共享）
					
					// 第二个平面（绿色平面）的6个顶点
					-1 + o, -1, -d, // 左下顶点，X方向偏移+o
					1 + o, -1, -d,  // 右下顶点，X方向偏移+o
					-1 + o, 1, -d,  // 左上顶点，X方向偏移+o
					
					1 + o, -1, -d,  // 第二个三角形的第一个顶点
					1 + o, 1, -d,   // 第二个三角形的第二个顶点
					-1 + o, 1, -d,  // 第二个三角形的第三个顶点
				] );

				// 定义顶点颜色数据
				// 第一个平面：红色（RGB: 1,0,0）
				// 第二个平面：绿色（RGB: 0,1,0）
				// 这样当深度冲突发生时，会看到红色和绿色的闪烁（Z-fighting）
				const colors = new Float32Array( [
					// 第一个平面（红色）的6个顶点颜色
					1, 0, 0, // 红色
					1, 0, 0,
					1, 0, 0,
					1, 0, 0,
					1, 0, 0,
					1, 0, 0,
					
					// 第二个平面（绿色）的6个顶点颜色
					0, 1, 0, // 绿色
					0, 1, 0,
					0, 1, 0,
					0, 1, 0,
					0, 1, 0,
					0, 1, 0,
				] );

				// 创建BufferGeometry并设置顶点属性
				const geometry = new THREE.BufferGeometry();
				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); // 位置属性，每个顶点3个分量（x,y,z）
				geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); // 颜色属性，每个顶点3个分量（r,g,b）

				// 创建基础材质，启用顶点颜色
				// vertexColors: true 表示使用顶点颜色而不是材质颜色
				const material = new THREE.MeshBasicMaterial( { vertexColors: true } );

				// 创建多个网格实例并添加到场景中
				for ( let i = 0; i < numInstances; i ++ ) {
					const mesh = new THREE.Mesh( geometry, material ); // 使用相同的几何体和材质创建网格
					meshes.push( mesh ); // 添加到网格数组，便于后续控制
					scene.add( mesh ); // 将网格添加到场景中
				}

				// ------------------------------------------------------------------------
				// 设置网格实例的位置和缩放
				// ------------------------------------------------------------------------
				// 创建多个深度值不同的实例，从近到远排列
				// 每个实例都有不同的Z位置和缩放比例，以演示不同距离下的深度精度问题
				let i = 0; // 实例索引
				for ( let x = 0; x < xCount; x ++ ) {
					for ( let y = 0; y < yCount; y ++ ) {
						const z = - 800 * i; // Z坐标：每个实例比前一个远800个单位
						const s = 1 + 50 * i; // 缩放比例：每个实例比前一个大50倍
						
						// 获取当前网格实例
						const mesh = meshes[ i ];
						
						// 设置网格位置
						mesh.position.set(
							x - xCount / 2 + 0.5, // X位置：在X轴上居中排列
							( 4.0 - 0.2 * z ) * ( y - yCount / 2 + 1.0 ), // Y位置：根据Z值调整Y位置
							z // Z位置：深度值
						);
						
						// 设置网格缩放（统一缩放）
						mesh.scale.setScalar( s );
						
						i ++; // 递增实例索引
					}
				}

				// ============================================================================
				// 标准深度缓冲渲染器设置
				// ============================================================================
				
				// 获取标准深度缓冲的DOM容器
				const normalContainer = document.getElementById( 'container_normal' );
				
				// 创建WebGL渲染器（使用默认深度缓冲设置）
				normalRenderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比，支持高DPI显示器（如Retina显示屏）
				normalRenderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸（占窗口宽度的1/3）
				normalRenderer.setSize( 0.33 * window.innerWidth, window.innerHeight );
				
				// 设置canvas元素的样式
				normalRenderer.domElement.style.position = 'relative';
				
				// 将canvas添加到DOM容器中
				normalContainer.appendChild( normalRenderer.domElement );

				// 创建效果合成器（用于后期处理）
				// 参数：渲染器实例和渲染目标
				normalComposer = new EffectComposer( normalRenderer, renderTarget );
				
				// 添加渲染通道：将3D场景渲染到渲染目标
				normalComposer.addPass( new RenderPass( scene, camera ) );
				
				// 添加输出通道：将结果输出到屏幕
				normalComposer.addPass( new OutputPass() );

				// ============================================================================
				// 对数深度缓冲渲染器设置
				// ============================================================================
				
				// 获取对数深度缓冲的DOM容器
				const logarithmicContainer = document.getElementById( 'container_logarithmic' );
				
				// 创建WebGL渲染器，启用对数深度缓冲
				// logarithmicDepthBuffer: true - 启用对数深度缓冲，提高远处物体的深度精度
				logarithmicRenderer = new THREE.WebGLRenderer( { logarithmicDepthBuffer: true } );
				logarithmicRenderer.setPixelRatio( window.devicePixelRatio );
				logarithmicRenderer.setSize( 0.33 * window.innerWidth, window.innerHeight );
				logarithmicRenderer.domElement.style.position = 'relative';
				logarithmicContainer.appendChild( logarithmicRenderer.domElement );

				// 对数深度的后期处理合成器
				logarithmicComposer = new EffectComposer( logarithmicRenderer, renderTarget );
				logarithmicComposer.addPass( new RenderPass( scene, camera ) );
				logarithmicComposer.addPass( new OutputPass() );

				// ============================================================================
				// 反向深度缓冲渲染器设置
				// ============================================================================
				
				// 获取反向深度缓冲的DOM容器
				const reverseContainer = document.getElementById( 'container_reverse' );
				
				// 创建WebGL渲染器，启用反向深度缓冲
				// reversedDepthBuffer: true - 启用反向深度缓冲，提高浮点深度缓冲的精度利用率
				reverseRenderer = new THREE.WebGLRenderer( { reversedDepthBuffer: true } );
				reverseRenderer.setPixelRatio( window.devicePixelRatio );
				reverseRenderer.setSize( 0.33 * window.innerWidth, window.innerHeight );
				reverseRenderer.domElement.style.position = 'relative';
				reverseContainer.appendChild( reverseRenderer.domElement );

				// 反向深度的后期处理合成器
				// 注意：这里使用reversedCamera，虽然它是camera的克隆
				// 在实际应用中，反向深度可能需要特殊的投影矩阵设置
				reverseComposer = new EffectComposer( reverseRenderer, renderTarget );
				reverseComposer.addPass( new RenderPass( scene, reversedCamera ) );
				reverseComposer.addPass( new OutputPass() );

				// ============================================================================
				// 窗口大小变化事件监听
				// ============================================================================
				
				// 监听窗口大小变化事件
				window.addEventListener( 'resize', onWindowResize );
				
				// 初始调用一次，确保正确设置尺寸
				onWindowResize();

			} // init()函数结束

			// ============================================================================
			// 动画循环函数
			// 功能：持续更新场景状态并触发渲染
			// ============================================================================
			function animate() {
				// 请求下一帧动画，形成动画循环
				requestAnimationFrame( animate );

				// 获取当前时间（秒），用于基于时间的动画
				const now = performance.now() / 1000;

				// 更新所有网格的旋转
				// 通过旋转网格，可以从不同角度观察深度精度问题
				for ( let i = 0; i < meshes.length; i ++ ) {
					// 设置旋转角度：30度转换为弧度
					const angle = THREE.MathUtils.degToRad( 30 );
					
					// 创建旋转轴：基于时间变化的向量
					// 这会使网格围绕一个动态变化的轴旋转
					const axis = new THREE.Vector3( Math.sin( now ), Math.cos( now ), 0 );
					
					// 使用轴角对设置网格的四元数旋转
					meshes[ i ].quaternion.setFromAxisAngle( axis, angle );
				}

				// 调用渲染函数
				render();

			} // animate()函数结束

			// ============================================================================
			// 渲染函数
			// 功能：执行三个渲染器的渲染操作
			// ============================================================================
			function render() {
				// 渲染标准深度缓冲视图
				normalComposer.render();
				
				// 渲染对数深度缓冲视图
				logarithmicComposer.render();
				
				// 渲染反向深度缓冲视图
				reverseComposer.render();

				// 更新性能监控器显示
				stats.update();

			} // render()函数结束

			// ============================================================================
			// 窗口大小变化处理函数
			// 功能：当浏览器窗口大小变化时，调整渲染器和相机的参数
			// ============================================================================
			function onWindowResize() {
				// 计算每个视图的宽度（窗口宽度的1/3）
				const width = 0.33 * window.innerWidth;
				
				// 高度等于窗口高度
				const height = window.innerHeight;
				
				// 获取设备像素比（用于高DPI显示器）
				const dpr = window.devicePixelRatio;

				// ------------------------------------------------------------------------
				// 更新后期处理合成器尺寸
				// 注意：合成器尺寸需要考虑设备像素比
				// ------------------------------------------------------------------------
				normalComposer.setSize( width * dpr, height * dpr );
				logarithmicComposer.setSize( width * dpr, height * dpr );
				reverseComposer.setSize( width * dpr, height * dpr );

				// ------------------------------------------------------------------------
				// 更新渲染器尺寸
				// 注意：渲染器尺寸不需要乘以设备像素比，因为setPixelRatio已经处理
				// ------------------------------------------------------------------------
				normalRenderer.setSize( width, height );
				logarithmicRenderer.setSize( width, height );
				reverseRenderer.setSize( width, height );

				// ------------------------------------------------------------------------
				// 更新相机投影矩阵
				// 当宽高比变化时，需要更新相机的投影矩阵
				// ------------------------------------------------------------------------
				
				// 更新标准和对数深度相机的宽高比
				camera.aspect = 0.33 * window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix(); // 重新计算投影矩阵

				// 更新反向深度相机的宽高比
				reversedCamera.aspect = 0.33 * window.innerWidth / window.innerHeight;
				reversedCamera.updateProjectionMatrix(); // 重新计算投影矩阵

			} // onWindowResize()函数结束
		</script>

	</body>
</html>