<!-- 代码功能和技术点详解
一、整体功能描述
这是一个对数深度缓冲区技术演示的WebGPU Three.js应用，通过左右分屏对比的方式，直观展示对数深度缓冲区在大范围3D场景中的优势。

核心功能：
分屏对比展示：

左侧：使用传统线性深度缓冲区

右侧：使用对数深度缓冲区

实时对比两种技术在超大范围场景中的渲染差异

超大范围场景：

场景范围：从1微米（1×10⁻⁶米）到1000亿光年（1×10²⁷米）

跨度为33个数量级，模拟了从微观到宇宙尺度的完整范围

交互式探索：

鼠标控制相机视角

滚轮控制缩放

可拖动分隔条调整左右分屏比例

多尺度可视化：

展示了15个不同尺度的物体

每个尺度都有对应的3D文本标签和球体表示

二、主要技术点
1. 对数深度缓冲区技术
javascript
// 普通深度缓冲区
new THREE.WebGPURenderer({ logarithmicDepthBuffer: false })

// 对数深度缓冲区  
new THREE.WebGPURenderer({ logarithmicDepthBuffer: true })
技术原理：

传统线性深度缓冲区：在透视投影中，深度值z' = A + B/z（z是视空间深度）

对数深度缓冲区：使用对数函数存储深度，公式为：z' = log(C·z + 1) / log(C·far + 1)

优势：为远处的物体分配更多的深度精度，解决Z-fighting问题

2. WebGPU渲染
javascript
import * as THREE from 'three/webgpu';
const renderer = new THREE.WebGPURenderer({ antialias: true });
特点：

下一代图形API：替代WebGL，提供更底层的GPU访问

性能优势：更好的并行计算能力，更低的驱动开销

现代特性：支持计算着色器、光线追踪等高级功能

3. 多相机视口管理
javascript
// 设置视口偏移实现分屏
camera.setViewOffset(
  fullWidth, fullHeight,    // 全屏尺寸
  offsetX, offsetY,         // 子视图偏移
  subWidth, subHeight       // 子视图尺寸
);
实现机制：

两个相机共享相同的场景和视角

通过视口偏移分别渲染屏幕的不同区域

确保左右视图的同步性

4. 超大规模场景处理
javascript
const NEAR = 1e-6;   // 近裁剪面：1微米
const FAR = 1e27;    // 远裁剪面：1000亿光年
挑战与解决方案：

精度问题：单精度浮点数只有7位有效数字

对数缩放：使用对数坐标处理缩放操作

深度冲突：通过对数深度缓冲区解决

5. 动态缩放系统
javascript
// 对数缩放处理
const zoom = Math.pow(Math.E, zoompos);  // 线性值
zoompos = Math.log(zoom);                // 对数坐标
特性：

对数坐标：缩放值在对数空间中线性变化

平滑过渡：从微观到宏观的平滑缩放

速度阻尼：缩放边界处的自然减速

6. 3D文本生成
javascript
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
const labelgeo = new TextGeometry(label, {
  font: font,
  size: labelSize,
  depth: labelSize / 2
});
特点：

字体挤出：将2D字体挤出为3D几何体

动态缩放：根据不同尺度调整文本大小

自动居中：通过包围球计算实现文本居中

7. 交互系统
javascript
// 球面坐标相机控制
camera.position.x = Math.sin(.5 * Math.PI * (mouseX - .5)) * zoom;
camera.position.y = Math.sin(.25 * Math.PI * (mouseY - .5)) * zoom;
camera.position.z = Math.cos(.5 * Math.PI * (mouseX - .5)) * zoom;
交互方式：

球面导航：鼠标控制相机在球面上移动

对数缩放：滚轮控制相机的对数距离

实时分屏：可调整的对比视图

8. 响应式布局
javascript
function updateRendererSizes() {
  // 动态计算渲染器尺寸
  renderer.setSize(screensplit * SCREEN_WIDTH, SCREEN_HEIGHT);
  camera.aspect = screensplit * SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();
}
自适应功能：

窗口大小变化：自动调整渲染器尺寸

分屏比例变化：实时更新两个视图的大小

高DPI支持：使用devicePixelRatio优化显示

三、技术难点与解决方案
难点1：超大范围的深度精度
问题：传统深度缓冲区在[1e-6, 1e27]范围内无法提供足够的精度
解决方案：启用对数深度缓冲区，为远处物体分配更多精度位

难点2：多尺度文本渲染
问题：1µm尺度的文本无法正常三角化
解决方案：对小尺度文本应用额外的缩放因子

难点3：平滑的缩放体验
问题：线性缩放无法跨越33个数量级
解决方案：使用对数坐标系统，在对数空间中线性变化

难点4：同步的双视图渲染
问题：保持两个渲染器的相机同步
解决方案：主从相机模式，一个相机控制，另一个同步

四、技术价值
教育价值
直观对比：清晰展示对数深度缓冲区的优势

交互学习：用户可以亲自体验不同技术的差异

多尺度理解：帮助理解从微观到宏观的尺度概念

工程价值
WebGPU实践：展示了Three.js WebGPU渲染器的使用方法

性能优化：演示了大范围场景的渲染优化技术

代码架构：提供了双渲染器系统的实现参考

研究价值
精度问题研究：为超大范围渲染提供参考实现

可视化技术：展示了多尺度数据可视化的方法

交互设计：提供了复杂3D场景的交互设计模式

五、应用场景
天文学可视化：星系、宇宙尺度的模拟

地理信息系统：从地图到建筑的全尺度浏览

科学计算：多尺度物理模拟的可视化

游戏开发：开放世界游戏的远景渲染

VR/AR应用：需要大范围深度精度的虚拟环境 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGPU - 对数深度缓冲区演示 -->
		<title>Three.js WebGPU - 对数深度缓冲区演示</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<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">
		<!-- 页面内联CSS样式 -->
		<style>
			/* 禁止body元素的触摸操作，防止页面在触摸设备上滚动 */
			body{
				touch-action: none;
			}

			/* 渲染器标签样式：用于显示"普通深度缓冲区"和"对数深度缓冲区"标签 */
			.renderer_label {
				position: absolute; /* 绝对定位，相对于父容器 */
				bottom: 1em; /* 距离底部1em */
				width: 100%; /* 宽度100% */
				color: white; /* 白色文字 */
				z-index: 10; /* 较高的z-index确保显示在最上层 */
				display: block; /* 块级显示 */
				text-align: center; /* 文字居中 */
			}

			/* 主容器：使用flex布局实现左右分屏 */
			#container {
				display: flex; /* flex弹性布局 */
			}

			/* 左侧容器：普通深度缓冲区渲染器容器 */
			#container_normal {
				width: 50%; /* 初始宽度50% */
				display: inline-block; /* 行内块显示 */
				position: relative; /* 相对定位，为子元素绝对定位提供参考 */
			}

			/* 右侧容器：对数深度缓冲区渲染器容器 */
			#container_logzbuf {
				width: 50%; /* 初始宽度50% */
				display: inline-block; /* 行内块显示 */
				position: relative; /* 相对定位 */
			}

			/* 分隔条样式：用于分隔左右两个渲染器，可拖动调整分屏比例 */
			#renderer_border {
				position: absolute; /* 绝对定位 */
				top: 0; /* 顶部对齐 */
				left: 25%; /* 初始位置在25%宽度处 */
				bottom: 0; /* 底部对齐 */
				width: 2px; /* 宽度2像素 */
				z-index: 10; /* 较高的z-index确保显示在渲染器上方 */
				opacity: .8; /* 80%不透明度 */
				background: #ccc; /* 灰色背景 */
				border: 1px inset #ccc; /* 内凹边框样式 */
				cursor: col-resize; /* 光标显示为可调整列宽的形状 */
			}
		</style>

	</head>
	<body>
		<!-- 
			主容器：包含两个渲染视图的分屏布局
			左侧显示普通深度缓冲区，右侧显示对数深度缓冲区
		-->
		<div id="container">
			<!-- 左侧：普通深度缓冲区渲染视图 -->
			<div id="container_normal">
				<h2 class="renderer_label">普通深度缓冲区</h2>
			</div>
			<!-- 右侧：对数深度缓冲区渲染视图 -->
			<div id="container_logzbuf">
				<h2 class="renderer_label">对数深度缓冲区</h2>
			</div>
			<!-- 可拖动的分隔条，用于调整左右分屏比例 -->
			<div id="renderer_border"></div>
		</div>

		<!-- 
			页面信息区域：包含Three.js链接、标题和操作提示
			已替换为中文内容
		-->
		<div id="info">
			<!-- Three.js 官方网站链接，点击可访问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>对数深度缓冲区演示</span>
			</div>

			<!-- 操作提示：使用鼠标滚轮放大缩小 -->
			<small>使用鼠标滚轮放大缩小视图</small>
			<!-- 新增提示：演示对数深度缓冲区的优势 -->
			<small style="margin-top: 20px;"> | 对比观察两种深度缓冲区在大范围场景中的渲染差异</small>
		</div>

		<!-- 
			导入映射(importmap)：定义JavaScript模块的别名和路径
			这是ES6模块系统的一部分，允许浏览器直接导入模块
		-->
		<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模块的所有功能
			// WebGPU是下一代图形API，提供更高效的GPU访问
			import * as THREE from 'three/webgpu';

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

			// 导入字体加载器，用于加载自定义字体
			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
			// 导入文本几何体生成器，用于创建3D文字
			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

			// ==================== 常量定义 ====================
			
			// 定义相机的近裁剪面和远裁剪面
			// 这是一个极其巨大的范围：从1微米到1000亿光年（1单位=1米）
			// 普通深度缓冲区在这种大范围场景中会出现精度问题
			const NEAR = 1e-6;      // 近裁剪面：0.000001米（1微米）
			const FAR = 1e27;       // 远裁剪面：1e27米（约1000亿光年）
			
			// 屏幕尺寸变量，初始化为当前窗口大小
			let SCREEN_WIDTH = window.innerWidth;
			let SCREEN_HEIGHT = window.innerHeight;
			
			// 分屏比例控制变量
			// screensplit: 左侧容器宽度比例（0-1之间）
			// screensplit_right: 右侧容器宽度比例（1 - screensplit）
			let screensplit = .25;      // 初始左侧占25%
			let screensplit_right = 0;  // 右侧比例，将在后续计算
			
			// 鼠标位置跟踪数组 [x, y]
			// 值范围在0到1之间，表示鼠标在屏幕上的相对位置
			let mouse = [ .5, .5 ];
			
			// 相机缩放控制变量
			let zoompos = - 100;         // 初始缩放位置（对数坐标）
			let minzoomspeed = .015;     // 最小缩放速度
			let zoomspeed = minzoomspeed; // 当前缩放速度，初始等于最小速度

			// 全局对象引用
			let border;                  // 分隔条DOM元素的引用
			const objects = {};          // 存储两个渲染器相关对象的容器

			// ==================== 标签数据定义 ====================
			
			/*
			 * 标签数据数组：定义场景中不同尺度的物体
			 * 每个对象包含：
			 *   size: 物体的大小（Three.js单位）
			 *   scale: 额外的缩放因子（解决某些尺寸下的渲染问题）
			 *   label: 显示的文本标签
			 * 
			 * 这个数组展示了从微观到宏观的15个不同尺度：
			 * 1. 微观尺度（1微米）- 需要使用缩放，因为文本在过小时三角化会失败
			 * 2. 微小尺度（1毫米）
			 * 3. 小尺度（1厘米）
			 * 4. 儿童尺度（1米）
			 * 5. 树木尺度（10米）
			 * 6. 建筑尺度（100米）
			 * 7. 中等尺度（1公里）
			 * 8. 城市尺度（10公里）
			 * 9. 月球尺度（3,400公里）
			 * 10. 行星尺度（12,000公里）
			 * 11. 太阳尺度（1,400,000公里）
			 * 12. 太阳系尺度（50天文单位）
			 * 13. 巨大尺度（1光年）
			 * 14. 超大尺度（1秒差距）
			 * 15. 难以置信的尺度（1000光年）
			 */
			const labeldata = [
				{ size: .01, scale: 0.0001, label: '微观尺度 (1µm)' }, // 需要缩放，因为文本在过小时三角化会失败
				{ size: .01, scale: 0.1, label: '微小尺度 (1mm)' },
				{ size: .01, scale: 1.0, label: '小尺度 (1cm)' },
				{ size: 1, scale: 1.0, label: '儿童尺度 (1m)' },
				{ size: 10, scale: 1.0, label: '树木尺度 (10m)' },
				{ size: 100, scale: 1.0, label: '建筑尺度 (100m)' },
				{ size: 1000, scale: 1.0, label: '中等尺度 (1km)' },
				{ size: 10000, scale: 1.0, label: '城市尺度 (10km)' },
				{ size: 3400000, scale: 1.0, label: '月球尺度 (3,400 Km)' },
				{ size: 12000000, scale: 1.0, label: '行星尺度 (12,000 km)' },
				{ size: 1400000000, scale: 1.0, label: '太阳尺度 (1,400,000 km)' },
				{ size: 7.47e12, scale: 1.0, label: '太阳系尺度 (50Au)' },
				{ size: 9.4605284e15, scale: 1.0, label: '巨大尺度 (1光年)' },
				{ size: 3.08567758e16, scale: 1.0, label: '超大尺度 (1秒差距)' },
				{ size: 1e19, scale: 1.0, label: '难以置信的尺度 (1000光年)' }
			];

			// ==================== 初始化入口 ====================
			
			// 调用init()函数初始化场景，完成后开始动画循环
			init().then(animate);

			/**
			 * 主初始化函数：负责初始化所有资源
			 * 这是一个异步函数，因为需要加载字体文件
			 */
			async function init() {
				// 创建字体加载器实例
				const loader = new FontLoader();
				// 异步加载字体文件（等待加载完成）
				const font = await loader.loadAsync('fonts/helvetiker_regular.typeface.json');

				// 初始化场景，传入加载的字体
				const scene = initScene(font);

				// 初始化两个渲染视图：
				// 1. 普通深度缓冲区渲染器 (logDepthBuf = false)
				// 2. 对数深度缓冲区渲染器 (logDepthBuf = true)
				// 这两个渲染器共享同一个场景，但使用不同的深度缓冲区实现
				objects.normal = await initView(scene, 'normal', false);
				objects.logzbuf = await initView(scene, 'logzbuf', true);

				// 获取分隔条DOM元素
				border = document.getElementById('renderer_border');
				// 为分隔条添加鼠标按下事件监听器，开始拖动
				border.addEventListener('pointerdown', onBorderPointerDown);

				// 添加全局事件监听器
				window.addEventListener('mousemove', onMouseMove);  // 鼠标移动事件
				window.addEventListener('resize', onWindowResize);   // 窗口大小改变事件
				window.addEventListener('wheel', onMouseWheel);      // 鼠标滚轮事件
			}

			/**
			 * 初始化单个渲染视图
			 * @param {THREE.Scene} scene - 要渲染的场景对象
			 * @param {string} name - 视图名称标识符 ('normal' 或 'logzbuf')
			 * @param {boolean} logDepthBuf - 是否启用对数深度缓冲区
			 * @returns {Promise<Object>} 返回包含渲染器相关对象的Promise
			 */
			async function initView(scene, name, logDepthBuf) {
				// 根据名称获取对应的容器DOM元素
				const framecontainer = document.getElementById('container_' + name);

				// 创建透视相机
				// 透视相机模拟人眼观察3D世界的方式，有近大远小的效果
				const camera = new THREE.PerspectiveCamera(
					50, // 视野角度(Field of View)：50度，角度越大看到的范围越广
					screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, // 宽高比：根据分屏比例计算
					NEAR, // 近裁剪面：相机能看到的最小距离
					FAR   // 远裁剪面：相机能看到的最近距离
				);
				// 将相机添加到场景中
				scene.add(camera);

				// 创建WebGPU渲染器实例
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				const renderer = new THREE.WebGPURenderer({
					antialias: true, // 启用抗锯齿，使边缘更平滑
					logarithmicDepthBuffer: logDepthBuf // 是否使用对数深度缓冲区
				});
				
				// 设置渲染器的设备像素比，适应高DPI屏幕
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器画布大小（初始为半屏大小）
				renderer.setSize(SCREEN_WIDTH / 2, SCREEN_HEIGHT);
				
				// 设置渲染器DOM元素的样式
				renderer.domElement.style.position = 'relative'; // 相对定位
				renderer.domElement.id = 'renderer_' + name;     // 设置ID以便识别
				
				// 添加调试检查器到渲染器
				// Inspector是一个调试工具，可以查看场景结构、性能信息等
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到对应的容器中
				framecontainer.appendChild(renderer.domElement);

				// 初始化渲染器（异步操作）
				// WebGPU渲染器需要异步初始化，因为它需要请求GPU设备
				await renderer.init();

				// 返回包含所有相关对象的集合
				return {
					container: framecontainer, // DOM容器元素
					renderer: renderer,        // WebGPU渲染器实例
					scene: scene,              // 场景对象
					camera: camera             // 相机对象
				};
			}

			/**
			 * 初始化场景内容：创建所有3D对象并添加到场景中
			 * @param {THREE.Font} font - 已加载的字体对象，用于创建3D文字
			 * @returns {THREE.Scene} 返回初始化完成的场景对象
			 */
			function initScene(font) {
				// 创建新的场景对象
				// 场景是Three.js中所有3D对象的容器
				const scene = new THREE.Scene();

				// 添加环境光
				// 环境光为整个场景提供均匀的基础照明，没有方向性
				scene.add(new THREE.AmbientLight(0x777777)); // 中等灰度的环境光

				// 添加定向光
				// 定向光模拟来自无限远处的平行光，如太阳光
				const light = new THREE.DirectionalLight(0xffffff, 3); // 白色光，强度为3
				light.position.set(100, 100, 100); // 设置光源位置
				scene.add(light);

				// 定义Phong材质的基本参数
				// Phong材质支持镜面高光，适合创建有光泽的表面
				const materialargs = {
					color: 0xffffff,      // 基础颜色（白色，实际颜色会随机生成）
					specular: 0x050505,   // 镜面反射颜色（深灰色）
					shininess: 50,        // 高光强度（0-100）
					emissive: 0x000000    // 自发光颜色（黑色，无自发光）
				};

				// 创建球体几何体
				// 这个球体将作为每个尺度的视觉表示
				// 参数：半径0.5，水平分段数24，垂直分段数12
				const geometry = new THREE.SphereGeometry(0.5, 24, 12);

				// 循环遍历所有标签数据，为每个尺度创建3D对象
				for (let i = 0; i < labeldata.length; i++) {
					// 获取当前尺度的缩放因子，如果没有则默认为1
					const scale = labeldata[i].scale || 1;

					// 创建文本几何体
					// TextGeometry将2D文本挤出为3D几何体
					const labelgeo = new TextGeometry(labeldata[i].label, {
						font: font,                    // 使用的字体
						size: labeldata[i].size,       // 文本大小（字体尺寸）
						depth: labeldata[i].size / 2   // 挤出深度（文本厚度）
					});

					// 计算文本的包围球
					// 包围球用于快速计算边界和居中文本
					labelgeo.computeBoundingSphere();

					// 将文本水平居中
					// 通过向左移动包围球的半径，使文本中心对齐原点
					labelgeo.translate(-labelgeo.boundingSphere.radius, 0, 0);

					// 为当前尺度随机生成一个HSL颜色
					// HSL: Hue（色相）, Saturation（饱和度）, Lightness（明度）
					materialargs.color = new THREE.Color().setHSL(Math.random(), 0.5, 0.5);
					
					// 使用随机颜色创建Phong材质
					const material = new THREE.MeshPhongMaterial(materialargs);

					// 创建一个组来包含当前尺度的所有对象
					// 组可以将多个对象作为一个整体进行操作
					const group = new THREE.Group();
					// 根据尺度大小设置组在Z轴上的位置（负值表示向屏幕内）
					group.position.z = -labeldata[i].size * scale;
					// 将组添加到场景中
					scene.add(group);

					// 创建文本网格对象
					const textmesh = new THREE.Mesh(labelgeo, material);
					// 应用整体的缩放因子
					textmesh.scale.set(scale, scale, scale);
					// 设置文本位置（与组位置相同）
					textmesh.position.z = -labeldata[i].size * scale;
					// 将文本向上移动，使其位于球体上方
					textmesh.position.y = labeldata[i].size / 4 * scale;
					// 将文本添加到组中
					group.add(textmesh);

					// 创建球体网格对象
					const dotmesh = new THREE.Mesh(geometry, material);
					// 将球体向下移动，使其位于文本下方
					dotmesh.position.y = -labeldata[i].size / 4 * scale;
					// 根据尺度大小缩放球体
					dotmesh.scale.multiplyScalar(labeldata[i].size * scale);
					// 将球体添加到组中
					group.add(dotmesh);
				}

				// 返回初始化完成的场景
				return scene;
			}

			/**
			 * 更新渲染器大小：当窗口大小改变或分屏比例改变时调用
			 * 这个函数确保两个渲染器正确适应新的屏幕布局
			 */
			function updateRendererSizes() {
				// 更新屏幕尺寸变量为当前窗口大小
				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight;

				// 计算右侧容器的宽度比例
				screensplit_right = 1 - screensplit;

				// ========== 更新普通深度缓冲区渲染器 ==========
				
				// 设置渲染器画布大小（根据分屏比例计算）
				objects.normal.renderer.setSize(screensplit * SCREEN_WIDTH, SCREEN_HEIGHT);
				// 更新相机宽高比
				objects.normal.camera.aspect = screensplit * SCREEN_WIDTH / SCREEN_HEIGHT;
				// 应用新的投影矩阵（必须调用此方法使宽高比生效）
				objects.normal.camera.updateProjectionMatrix();
				
				// 设置相机视口偏移
				// 这允许一个相机只渲染屏幕的一部分，用于实现分屏效果
				objects.normal.camera.setViewOffset(
					SCREEN_WIDTH,       // 全屏宽度
					SCREEN_HEIGHT,      // 全屏高度
					0,                  // 子视图在屏幕上的X偏移（从左上角开始）
					0,                  // 子视图在屏幕上的Y偏移
					SCREEN_WIDTH * screensplit,  // 子视图的宽度
					SCREEN_HEIGHT               // 子视图的高度
				);
				
				// 更新左侧容器的CSS宽度（百分比形式）
				objects.normal.container.style.width = (screensplit * 100) + '%';

				// ========== 更新对数深度缓冲区渲染器 ==========
				
				// 设置渲染器画布大小
				objects.logzbuf.renderer.setSize(screensplit_right * SCREEN_WIDTH, SCREEN_HEIGHT);
				// 更新相机宽高比
				objects.logzbuf.camera.aspect = screensplit_right * SCREEN_WIDTH / SCREEN_HEIGHT;
				// 应用新的投影矩阵
				objects.logzbuf.camera.updateProjectionMatrix();
				
				// 设置相机视口偏移
				// 右侧渲染器渲染屏幕的右侧部分
				objects.logzbuf.camera.setViewOffset(
					SCREEN_WIDTH,       // 全屏宽度
					SCREEN_HEIGHT,      // 全屏高度
					SCREEN_WIDTH * screensplit,  // X偏移：从左侧分屏结束处开始
					0,                  // Y偏移：从顶部开始
					SCREEN_WIDTH * screensplit_right,  // 子视图宽度
					SCREEN_HEIGHT               // 子视图高度
				);
				
				// 更新右侧容器的CSS宽度
				objects.logzbuf.container.style.width = (screensplit_right * 100) + '%';

				// 更新分隔条的位置
				// 分隔条应该位于两个渲染器的分界处
				border.style.left = (screensplit * 100) + '%';
			}

			/**
			 * 动画循环函数：每一帧调用，更新场景状态并重新渲染
			 * 这是Three.js应用的核心循环
			 */
			function animate() {
				// 请求浏览器在下一帧再次调用此函数
				// 这创建了一个连续的动画循环
				requestAnimationFrame(animate);

				// ========== 计算缩放限制和阻尼 ==========
				
				// 计算最小缩放限制：第一个尺度的尺寸
				const minzoom = labeldata[0].size * labeldata[0].scale * 1;
				// 计算最大缩放限制：最后一个尺度的尺寸 * 100（提供一些额外的缩放空间）
				const maxzoom = labeldata[labeldata.length - 1].size * labeldata[labeldata.length - 1].scale * 100;
				
				// 计算速度阻尼因子
				// 如果当前速度大于最小速度，应用阻尼（减慢速度）
				// 否则不使用阻尼（保持速度）
				let damping = (Math.abs(zoomspeed) > minzoomspeed ? .95 : 1.0);

				// ========== 处理缩放 ==========
				
				// 将对数坐标转换为线性缩放值
				// zoompos是对数坐标，通过e^zoompos得到线性值
				// 使用THREE.MathUtils.clamp确保缩放值在[minzoom, maxzoom]范围内
				const zoom = THREE.MathUtils.clamp(Math.pow(Math.E, zoompos), minzoom, maxzoom);
				
				// 更新对数坐标位置（取线性缩放值的自然对数）
				zoompos = Math.log(zoom);

				// ========== 边界阻尼处理 ==========
				
				// 如果达到缩放边界并且还在向边界方向移动，增加阻尼
				// 这会让速度更快地减慢，提供更平滑的边界体验
				if ((zoom == minzoom && zoomspeed < 0) || (zoom == maxzoom && zoomspeed > 0)) {
					damping = .85; // 更强的阻尼
				}

				// ========== 更新缩放状态 ==========
				
				// 根据当前速度更新缩放位置
				zoompos += zoomspeed;
				// 应用阻尼，减慢速度
				zoomspeed *= damping;

				// ========== 更新普通相机的球坐标位置 ==========
				
				// 使用球面坐标系统根据鼠标位置和缩放级别计算相机位置
				// mouse[0]和mouse[1]是归一化的鼠标位置（0-1）
				
				// X坐标：根据鼠标X位置在球面上的经度位置
				objects.normal.camera.position.x = Math.sin(.5 * Math.PI * (mouse[0] - .5)) * zoom;
				
				// Y坐标：根据鼠标Y位置在球面上的纬度位置
				// 使用较小的系数（.25 * PI）限制垂直移动范围，避免相机过度倾斜
				objects.normal.camera.position.y = Math.sin(.25 * Math.PI * (mouse[1] - .5)) * zoom;
				
				// Z坐标：根据鼠标X位置在球面上的经度位置
				objects.normal.camera.position.z = Math.cos(.5 * Math.PI * (mouse[0] - .5)) * zoom;
				
				// 让相机始终看向场景中心点(0,0,0)
				objects.normal.camera.lookAt(objects.normal.scene.position);

				// ========== 同步对数深度缓冲区相机 ==========
				
				// 将对数深度缓冲区相机的设置完全同步为普通相机的设置
				// 这样两个渲染器从相同的视角观察相同的场景
				objects.logzbuf.camera.position.copy(objects.normal.camera.position);
				objects.logzbuf.camera.quaternion.copy(objects.normal.camera.quaternion);

				// ========== 检查是否需要更新渲染器大小 ==========
				
				// 如果右侧比例不等于1减去左侧比例（即分屏比例发生了变化）
				if (screensplit_right != 1 - screensplit) {
					// 更新渲染器大小
					updateRendererSizes();
				}

				// ========== 渲染两个场景 ==========
				
				// 渲染普通深度缓冲区场景
				objects.normal.renderer.render(objects.normal.scene, objects.normal.camera);
				
				// 渲染对数深度缓冲区场景
				objects.logzbuf.renderer.render(objects.logzbuf.scene, objects.logzbuf.camera);
			}

			/**
			 * 窗口大小改变事件处理函数
			 * 当用户调整浏览器窗口大小时调用
			 */
			function onWindowResize() {
				// 调用updateRendererSizes函数重新计算和设置渲染器大小
				updateRendererSizes();
			}

			/**
			 * 分隔条被按下事件处理函数
			 * 当用户点击分隔条开始拖动时调用
			 */
			function onBorderPointerDown() {
				// 添加指针移动事件监听器，实时更新分隔条位置
				window.addEventListener('pointermove', onBorderPointerMove);
				// 添加指针释放事件监听器，结束拖动
				window.addEventListener('pointerup', onBorderPointerUp);
			}

			/**
			 * 分隔条拖动事件处理函数
			 * 当用户拖动分隔条时连续调用
			 * @param {PointerEvent} ev - 指针事件对象，包含鼠标位置等信息
			 */
			function onBorderPointerMove(ev) {
				// 根据鼠标X坐标计算新的分屏比例
				// ev.clientX是鼠标相对于浏览器窗口的水平坐标
				// window.innerWidth是窗口的宽度
				// 通过除法得到0-1之间的比例值
				// 使用Math.max和Math.min确保比例值在0到1之间
				screensplit = Math.max(0, Math.min(1, ev.clientX / window.innerWidth));
			}

			/**
			 * 分隔条释放事件处理函数
			 * 当用户释放鼠标按钮结束拖动时调用
			 */
			function onBorderPointerUp() {
				// 移除指针移动事件监听器，停止跟踪鼠标移动
				window.removeEventListener('pointermove', onBorderPointerMove);
				// 移除指针释放事件监听器
				window.removeEventListener('pointerup', onBorderPointerUp);
			}

			/**
			 * 鼠标移动事件处理函数
			 * 当用户移动鼠标时调用
			 * @param {MouseEvent} ev - 鼠标事件对象
			 */
			function onMouseMove(ev) {
				// 更新鼠标位置数组
				// 将绝对坐标转换为相对坐标（0-1范围）
				mouse[0] = ev.clientX / window.innerWidth;  // X坐标比例
				mouse[1] = ev.clientY / window.innerHeight; // Y坐标比例
			}

			/**
			 * 鼠标滚轮事件处理函数
			 * 当用户滚动鼠标滚轮时调用
			 * @param {WheelEvent} ev - 滚轮事件对象
			 */
			function onMouseWheel(ev) {
				// 获取滚轮事件的垂直滚动量
				const amount = ev.deltaY;
				
				// 如果滚动量为0，直接返回（不进行缩放）
				if (amount === 0) return;
				
				// 计算滚动方向
				// 如果amount为正，向下滚动，dir为1
				// 如果amount为负，向上滚动，dir为-1
				const dir = amount / Math.abs(amount);
				
				// 根据滚动方向设置缩放速度
				// 向下滚动（dir=1）增加缩放速度，使相机远离场景（放大）
				// 向上滚动（dir=-1）减小缩放速度，使相机靠近场景（缩小）
				zoomspeed = dir / 10;

				// 用户开始交互后，降低最小缩放速度
				// 这为用户提供了更精细的缩放控制
				// 初始的最小速度较快，适合快速浏览
				// 用户开始缩放后，降低速度以便更精确地控制
				minzoomspeed = 0.001;
			}
		</script>
	</body>
</html>