<!-- WebXR Layers 演示代码功能与主要技术点
一、整体功能概述
这是一个基于 Three.js 和 WebXR API 的 VR 应用程序，专门展示 WebXR Layers 技术在 VR 渲染中的优势。通过对比传统的 3D 网格渲染和使用 WebXR 图层渲染的效果，演示了如何提高文本清晰度和视频渲染性能。

二、核心演示内容
1. 视力表对比实验
布局：四个 Snellen 视力表呈网格排列

对比维度：

纵向对比（上下）：图层渲染 vs 传统网格渲染

横向对比（左右）：无 Mipmaps vs 有 Mipmaps

目的：直观展示图层技术对文本清晰度的提升

2. 背景视频渲染
技术：使用 XRMediaBinding 创建等距圆柱投影视频层

特点：

支持高分辨率视频（超过标准 VR 渲染限制）

硬件加速，性能更优

45度旋转避免立体声冲突

3. 交互式 GUI 面板
功能：实时调整视力表距离（1-20 英尺）

实现：将 HTML GUI 转换为 3D 图层，支持 VR 控制器交互

位置：场景右侧，面向用户

三、主要技术点详解
1. WebXR Layers API
javascript
// 核心图层类型
- XRQuadLayer      // 2D 四边形图层，用于静态内容
- XRMediaBinding   // 媒体绑定，用于视频内容
- XREquirectLayer  // 等距圆柱投影图层
优势：

避免重采样：直接渲染到眼缓冲区，提高有效分辨率

性能优化：静态内容标记为 isStatic: true，减少 GPU 负载

异步更新：只在内容变化时更新纹理

2. 纹理与 Mipmaps 处理
javascript
// 无 Mipmaps 配置
generateMipmaps: false
minFilter: THREE.LinearFilter

// 有 Mipmaps 配置（默认）
mipLevels: 3
gl.generateMipmap(gl.TEXTURE_2D)
技术细节：

纹理尺寸：512x512（2的幂次方，支持 Mipmaps）

有效区域：320x450（居中显示，留出透明边界）

裁剪计算：通过 UV 坐标裁剪只渲染有效部分

3. 深度测试的巧妙解决方案
javascript
// 问题：图层不参与场景深度测试
// 解决方案：创建不可见深度测试网格
new THREE.MeshBasicMaterial({ 
  colorWrite: false  // 只参与深度测试，不写入颜色
})
作用机制：

在图层相同位置放置不可见网格

网格参与深度测试，写入深度缓冲区

图层渲染时基于深度缓冲区正确排序

确保 3D 对象不会错误地覆盖图层

4. 性能优化策略
javascript
// 条件性纹理更新
if (layer.needsRedraw || layer.needsUpdate) {
  // 只在需要时更新纹理
  gl.texSubImage2D(...);
  layer.needsUpdate = false;
}
优化点：

静态内容优化：isStatic: true 标记减少重绘

增量更新：只更新变化的部分（GUI 交互时）

纹理复用：避免每帧创建新纹理

5. VR 交互系统
javascript
// 控制器配置
const controllers = [
  renderer.xr.getController(0),  // 左控制器
  renderer.xr.getController(1)   // 右控制器
];

// 交互事件监听
group.listenToXRControllerEvents(controller);
交互组件：

控制器射线：蓝色线条，指向交互目标

手部模型：可视化手部追踪

HTMLMesh 交互：将 HTML 元素转换为可交互的 3D 对象

6. 图层堆叠顺序管理
javascript
session.updateRenderState({
  layers: [
    equirectLayer,     // 最底层：背景视频
    quadLayerPlain,    // 第二层：普通视力表
    quadLayerMips,     // 第三层：带 Mipmaps 视力表
    guiLayer,          // 第四层：GUI 界面
    session.renderState.layers[0]  // 最顶层：3D 场景
  ]
});
渲染顺序原则：

背景层最先渲染

中间内容层按需排序

3D 场景最后渲染（确保交互正确）

四、视觉与性能对比
1. 清晰度对比
图层渲染：上方的视力表，文字边缘更锐利

传统渲染：下方的视力表，有重采样导致的模糊

2. Mipmaps 效果对比
无 Mipmaps：左侧视力表，远距离有闪烁（摩尔纹）

有 Mipmaps：右侧视力表，平滑但略有模糊

3. 性能表现
视频图层：硬件解码，CPU 负载低

静态图层：初始化后几乎无性能开销

动态更新：GUI 交互时才触发纹理更新

五、兼容性与错误处理
1. 特性检测
javascript
// 检查是否支持 WebXR Layers
const useLayers = session &&
  session.enabledFeatures !== undefined &&
  session.enabledFeatures.includes('layers') &&
  XRMediaBinding !== undefined;
2. 优雅降级
不支持图层时显示错误信息

仍可运行传统 3D 渲染部分

保持基础 VR 交互功能

六、实际应用场景
1. VR 文本显示
仪表盘文字

说明文档

用户界面元素

2. 高质量视频
360° 全景视频

VR 影院体验

产品展示视频

3. 混合现实界面
浮动控制面板

数据可视化

交互式教程

七、技术限制与注意事项
1. 设备要求
需要支持 WebXR Layers 的浏览器

VR 头显设备（Oculus Quest、HTC Vive 等）

足够的 GPU 内存用于高分辨率纹理

2. 性能考量
图层数量限制（不同设备不同）

纹理尺寸平衡（清晰度 vs 内存）

更新频率优化（静态 vs 动态内容）

3. 开发建议
优先使用图层渲染静态内容

合理规划图层堆叠顺序

实现渐进增强（支持传统渲染回退） -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>three.js VR - 图层演示 (WebXR Layers)</title>
		<meta charset="utf-8">
		<!-- viewport设置：适配移动设备，禁止用户缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 信息说明区域 - 已翻译为中文 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> 媒体与投影层示例<br/>
		
			<p> 本示例演示了如何使用 <a href="https://www.w3.org/TR/webxrlayers-1/">WebXR Layers API</a> 来渲染高质量的文字和视频内容。
				对于文本等静态内容，使用图层技术可以避免VR渲染过程中的额外重采样步骤，从而提高内容的可用分辨率。
				对于视频等动态内容，使用图层还能仅在可用新帧时复制数据，从而提升渲染性能。</p>
			<br />
		</div>

		<!-- 导入映射配置：定义模块导入的路径映射 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			// ============== 模块导入部分 ==============
			// 导入Three.js核心库
			import * as THREE from 'three';
			// 导入GUI库 - 用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			// 导入HTMLMesh - 将HTML元素转换为3D网格
			import { HTMLMesh } from 'three/addons/interactive/HTMLMesh.js';
			// 导入InteractiveGroup - 支持交互的3D组
			import { InteractiveGroup } from 'three/addons/interactive/InteractiveGroup.js';
			// 导入VRButton - 创建进入VR模式的按钮
			import { VRButton } from 'three/addons/webxr/VRButton.js';
			// 导入XR控制器模型工厂 - 创建控制器3D模型
			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
			// 导入XR手部模型工厂 - 创建手部3D模型
			import { XRHandModelFactory } from 'three/addons/webxr/XRHandModelFactory.js';

			// ============== 全局变量声明 ==============
			let camera, scene, renderer;  // Three.js三大核心对象
			let video;  // 视频元素，用于背景视频播放

			// ============== 图层相关变量 ==============
			let snellenTexture;    // 视力表纹理对象
			let quadLayerPlain;    // 普通四边形图层（无Mipmaps）
			let quadLayerMips;     // 带Mipmaps的四边形图层
			let guiLayer;          // GUI界面图层
			let guiMesh;           // GUI的3D网格表示
			let errorMesh;         // 错误信息显示网格

			// ============== 可调参数（通过GUI控制） ==============
			const parameters = {
				eyeChartDistanceFt: 20,  // 视力表距离（英尺），1.0-20.0可调
			};

			// ============== 视力表配置对象 ==============
			// 详细说明：
			// 1. 视力表设计基于Snellen视力表原理
			// 2. 20/20视力的字母在20英尺（6.1米）处对观察者形成5弧分的视角
			// 3. 纹理使用2的幂次方尺寸以便生成Mipmaps
			// 4. 实际的图像内容只占用纹理的一部分，其余为透明区域
			const snellenConfig = {
				// 纹理尺寸必须是2的幂次方（512x512）
				textureSizePx: 512,
				// 图像有效内容的实际像素尺寸
				widthPx: 320,    // 图像宽度（像素）
				heightPx: 450,   // 图像高度（像素）

				// 3D空间中的位置坐标（米）
				x: 0,            // X轴位置（中心点）
				y: 1.5,          // Y轴位置（大约是人眼高度）
				z: -6.1,         // Z轴位置（20英尺 = 6.1米）

				// 在3D空间中的实际物理尺寸（米）
				// 计算方式：像素尺寸 × (142mm/160px比例因子)
				widthMeters: 0.268,   // 实际宽度：0.268米
				heightMeters: 0.382   // 实际高度：0.382米
			};

			// ============== 计算裁剪比例 ==============
			// 由于纹理包含透明边界，需要计算有效内容的占比
			// 这相当于UV坐标中的裁剪范围
			snellenConfig.cropX = snellenConfig.widthPx / snellenConfig.textureSizePx;  // X方向裁剪比例
			snellenConfig.cropY = snellenConfig.heightPx / snellenConfig.textureSizePx; // Y方向裁剪比例

			// ============== 计算四边形图层尺寸 ==============
			// XRQuadLayer的内部坐标系是[-1, 1]的标准化四边形
			// 需要将其缩放到与实际3D网格相同的物理尺寸
			// 公式：层尺寸 = 0.5 × (物理尺寸 / 裁剪比例)
			// 乘以0.5是因为层坐标系从-1到1的总范围是2
			snellenConfig.quadWidth = 0.5 * snellenConfig.widthMeters / snellenConfig.cropX;    // 层宽度
			snellenConfig.quadHeight = 0.5 * snellenConfig.heightMeters / snellenConfig.cropY;  // 层高度

			// ============== 初始化函数 ==============
			init();

			function init() {
				// ---------- 1. 创建Three.js核心对象 ----------
				// 创建场景 - 所有3D对象的容器
				scene = new THREE.Scene();

				// 创建透视相机 - 参数：视野角度、宽高比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10);
				// 设置相机位置：X=0（中心）, Y=1.6（人眼高度）, Z=3（向前3米）
				camera.position.set(0, 1.6, 3);

				// ---------- 2. 添加光照 ----------
				// 创建半球光 - 模拟天空和地面的环境光
				// 参数：天空颜色、地面颜色、光照强度
				const hemLight = new THREE.HemisphereLight(0x808080, 0x606060, 3);
				// 创建定向光 - 模拟太阳光
				// 参数：光照颜色、光照强度
				const light = new THREE.DirectionalLight(0xffffff, 3);
				// 将光照添加到场景
				scene.add(hemLight, light);

				// ---------- 3. 创建渲染器 ----------
				// 创建WebGL渲染器，禁用抗锯齿（因为VR渲染有自己的抗锯齿）
				renderer = new THREE.WebGLRenderer({ antialias: false });
				// 设置设备像素比，确保高DPI显示器上的清晰度
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数（每帧调用animate）
				renderer.setAnimationLoop(animate);
				// 设置渲染器透明背景
				renderer.setClearAlpha(1);
				renderer.setClearColor(new THREE.Color(0), 0);
				// 启用WebXR支持
				renderer.xr.enabled = true;

				// 将渲染器的canvas元素添加到页面body
				document.body.appendChild(renderer.domElement);
				// 创建并添加VR进入按钮
				document.body.appendChild(VRButton.createButton(renderer));

				// ---------- 4. 创建VR控制器和射线 ----------
				// 创建射线几何体 - 用于显示控制器的指向
				// 从控制器原点(0,0,0)到前方10米处(0,0,-10)
				const lineGeometry = new THREE.BufferGeometry().setFromPoints([
					new THREE.Vector3(0, 0, 0),
					new THREE.Vector3(0, 0, -10)
				]);
				// 创建射线材质 - 蓝色线条
				const line = new THREE.Line(lineGeometry, new THREE.LineBasicMaterial({ color: 0x5555ff }));
				
				// 设置渲染顺序为1，确保射线在GUI之后渲染
				// 这样射线可以与GUI正确交互（穿透GUI）
				line.renderOrder = 1;

				// 创建XR控制器模型工厂
				const controllerModelFactory = new XRControllerModelFactory();
				// 创建XR手部模型工厂，设置模型文件路径
				const handModelFactory = new XRHandModelFactory().setPath('./models/fbx/');

				// 获取左右两个控制器
				const controllers = [
					renderer.xr.getController(0),  // 左控制器
					renderer.xr.getController(1)   // 右控制器
				];

				// 为每个控制器配置模型和功能
				controllers.forEach((controller, i) => {
					// 获取控制器握把（用于显示3D模型）
					const controllerGrip = renderer.xr.getControllerGrip(i);
					// 创建控制器3D模型并添加到握把
					controllerGrip.add(controllerModelFactory.createControllerModel(controllerGrip));
					// 将握把添加到场景
					scene.add(controllerGrip);

					// 获取手部对象
					const hand = renderer.xr.getHand(i);
					// 创建手部3D模型并添加到手部对象
					hand.add(handModelFactory.createHandModel(hand));

					// 为控制器添加射线（克隆line对象）
					controller.add(line.clone());
					// 将控制器、握把、手部都添加到场景
					scene.add(controller, controllerGrip, hand);
				});

				// ---------- 5. 创建视力表组 ----------
				// 创建组对象来包含所有视力表
				const eyeCharts = new THREE.Group();
				// 设置组的Z位置（根据配置）
				eyeCharts.position.z = snellenConfig.z;
				// 将组添加到场景
				scene.add(eyeCharts);

				// 创建左下角视力表（无Mipmaps）
				snellenTexture = new THREE.TextureLoader().load('textures/snellen.png');
				// 设置纹理重复范围（只使用有效部分）
				snellenTexture.repeat.x = snellenConfig.cropX;
				snellenTexture.repeat.y = snellenConfig.cropY;
				// 禁用Mipmaps生成
				snellenTexture.generateMipmaps = false;
				// 设置纹理最小化过滤器为线性过滤
				snellenTexture.minFilter = THREE.LinearFilter;
				// 创建平面网格作为视力表
				const snellenMeshPlain = new THREE.Mesh(
					// 几何体：平面，尺寸来自配置
					new THREE.PlaneGeometry(snellenConfig.widthMeters, snellenConfig.heightMeters),
					// 材质：基本材质，使用加载的纹理
					new THREE.MeshBasicMaterial({ map: snellenTexture })
				);
				// 设置位置：左移一个宽度，下移一个高度（左下角）
				snellenMeshPlain.position.x = snellenConfig.x - snellenConfig.widthMeters;
				snellenMeshPlain.position.y = snellenConfig.y - snellenConfig.heightMeters;
				// 添加到视力表组
				eyeCharts.add(snellenMeshPlain);

				// 创建右下角视力表（带Mipmaps）
				snellenTexture = new THREE.TextureLoader().load('textures/snellen.png');
				snellenTexture.repeat.x = snellenConfig.cropX;
				snellenTexture.repeat.y = snellenConfig.cropY;
				// 注意：这里不设置generateMipmaps，使用默认值true
				const snellenMeshMipMap = new THREE.Mesh(
					new THREE.PlaneGeometry(snellenConfig.widthMeters, snellenConfig.heightMeters),
					new THREE.MeshBasicMaterial({ map: snellenTexture })
				);
				// 设置位置：右移一个宽度，下移一个高度（右下角）
				snellenMeshMipMap.position.x = snellenConfig.x + snellenConfig.widthMeters;
				snellenMeshMipMap.position.y = snellenConfig.y - snellenConfig.heightMeters;
				eyeCharts.add(snellenMeshMipMap);

				// ---------- 6. 创建不可见的深度测试网格 ----------
				// 问题：WebXR图层不参与场景深度测试，3D对象可能错误地覆盖图层
				// 解决方案：在与图层相同位置创建不可见网格，参与深度测试
				// 左上角不可见网格（对应普通四边形图层位置）
				const dummyMeshLeft = new THREE.Mesh(
					new THREE.PlaneGeometry(snellenConfig.widthMeters, snellenConfig.heightMeters),
					// 材质设置colorWrite: false，只参与深度测试，不写入颜色
					new THREE.MeshBasicMaterial({ colorWrite: false })
				);
				dummyMeshLeft.position.x = snellenConfig.x - snellenConfig.widthMeters;  // 左移
				dummyMeshLeft.position.y = snellenConfig.y + snellenConfig.heightMeters; // 上移
				eyeCharts.add(dummyMeshLeft);

				// 右上角不可见网格（对应带Mipmaps四边形图层位置）
				const dummyMeshRight = dummyMeshLeft.clone(true);  // true表示深度克隆
				dummyMeshRight.position.x = snellenConfig.x + snellenConfig.widthMeters;  // 右移
				eyeCharts.add(dummyMeshRight);

				// ---------- 7. 创建GUI控制面板 ----------
				// 创建lil-gui实例，宽度300像素
				const gui = new GUI({ width: 300 });
				// 添加控制滑块：视力表距离（英尺），范围1.0-20.0
				// 当值变化时调用onChange回调函数
				gui.add(parameters, 'eyeChartDistanceFt', 1.0, 20.0).onChange(onChange);
				// 隐藏GUI的DOM元素（将通过HTMLMesh转换为3D对象）
				gui.domElement.style.visibility = 'hidden';

				// 距离变化回调函数
				function onChange() {
					// 计算新的Z位置：英尺转换为米（1英尺 = 0.3048米）
					// 注意：使用负值，因为Z轴负方向是前方
					eyeCharts.position.z = -parameters.eyeChartDistanceFt * 0.3048;
					// 更新配置中的Z值
					snellenConfig.z = eyeCharts.position.z;

					// 如果普通四边形图层已创建，更新其位置
					if (quadLayerPlain) {
						quadLayerPlain.transform = new XRRigidTransform({
							x: snellenConfig.x - snellenConfig.widthMeters,
							y: snellenConfig.y + snellenConfig.heightMeters,
							z: eyeCharts.position.z
						});
					}

					// 如果带Mipmaps四边形图层已创建，更新其位置
					if (quadLayerMips) {
						quadLayerMips.transform = new XRRigidTransform({
							x: snellenConfig.x + snellenConfig.widthMeters,
							y: snellenConfig.y + snellenConfig.heightMeters,
							z: eyeCharts.position.z
						});
					}

					// 标记GUI图层需要更新（因为距离值改变了GUI显示）
					guiLayer.needsUpdate = true;
				}

				// ---------- 8. 创建交互组和GUI网格 ----------
				// 创建交互组，用于处理控制器交互
				const group = new InteractiveGroup();
				// 让交互组监听两个控制器的XR事件
				group.listenToXRControllerEvents(controllers[0]);
				group.listenToXRControllerEvents(controllers[1]);
				scene.add(group);

				// 将GUI的DOM元素转换为3D网格
				guiMesh = new HTMLMesh(gui.domElement);
				// 设置GUI网格位置：右前方
				guiMesh.position.set(1.0, 1.5, -1.0);
				// 旋转45度，面向用户
				guiMesh.rotation.y = -Math.PI / 4;
				// 放大2倍
				guiMesh.scale.setScalar(2);
				// 材质设置：不写入颜色，只用于交互
				guiMesh.material.colorWrite = false;
				guiMesh.material.transparent = false;
				// 将GUI网格添加到交互组
				group.add(guiMesh);

				// ---------- 9. 创建错误信息显示 ----------
				// 创建画布用于绘制错误信息
				const errorCanvas = document.createElement('canvas');
				errorCanvas.width = 400;
				errorCanvas.height = 40;
				const errorContext = errorCanvas.getContext('2d');
				// 绘制红色背景
				errorContext.fillStyle = '#FF0000';
				errorContext.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
				// 绘制黑色文字
				errorContext.fillStyle = '#000000';
				errorContext.font = '28px sans-serif';
				errorContext.fillText('错误：图层初始化失败！', 10, 30);

				// 创建错误信息网格
				errorMesh = new THREE.Mesh(
					// 平面几何体，尺寸1x0.1米
					new THREE.PlaneGeometry(1, 0.1),
					// 材质使用画布纹理
					new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(errorCanvas) })
				);
				// 设置位置：前方1米，高度1.5米
				errorMesh.position.z = -1;
				errorMesh.position.y = 1.5;
				errorMesh.visible = false;  // 初始隐藏
				scene.add(errorMesh);

				// ---------- 10. 事件监听 ----------
				// 监听窗口大小变化事件
				window.addEventListener('resize', onWindowResize, false);

				// ---------- 11. 创建视频元素 ----------
				// 创建video元素用于背景视频
				video = document.createElement('video');
				video.loop = true;  // 设置循环播放
				video.src = 'textures/MaryOculus.webm';  // 设置视频源路径
				// 注意：视频不会立即加载，需要等待readyState变化
			}

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

			// ============== 动画循环函数（每帧调用） ==============
			// 参数：t - 时间戳（毫秒），frame - XRFrame对象（XR会话中）
			function animate(t, frame) {
				// 获取XR相关对象
				const xr = renderer.xr;
				const session = xr.getSession();  // 当前XR会话
				const gl = renderer.getContext(); // WebGL上下文

				// ---------- 1. 检查是否支持图层 ----------
				// 条件：
				// 1. 有活动的XR会话
				// 2. 会话支持layers特性
				// 3. XRMediaBinding API可用
				const useLayers = session &&
					session.enabledFeatures !== undefined &&
					session.enabledFeatures.includes('layers') &&
					XRMediaBinding !== undefined;

				// 如果不支持图层，显示错误信息
				if (!useLayers) {
					errorMesh.visible = true;
				}

				// ---------- 2. 初始化图层（仅一次） ----------
				// 条件：
				// 1. 有活动的XR会话
				// 2. 支持图层
				// 3. 尚未初始化过图层
				// 4. 视频已加载足够数据（readyState >= 2）
				if (
					session &&
					useLayers &&
					session.hasMediaLayer === undefined &&
					video.readyState >= 2
				) {
					// 标记已初始化，避免重复初始化
					session.hasMediaLayer = true;
					
					// 请求本地地面参考空间（用于定位图层）
					session.requestReferenceSpace('local-floor').then((refSpace) => {
						// ---------- 2.1 获取GL绑定 ----------
						const glBinding = xr.getBinding();

						// ---------- 2.2 配置普通四边形图层（无Mipmaps） ----------
						const quadLayerConfig = {
							width: snellenConfig.quadWidth,          // 层宽度（米）
							height: snellenConfig.quadHeight,        // 层高度（米）
							viewPixelWidth: snellenConfig.textureSizePx,  // 纹理宽度（像素）
							viewPixelHeight: snellenConfig.textureSizePx, // 纹理高度（像素）
							isStatic: true,                          // 静态内容（优化标记）
							space: refSpace,                         // 参考空间
							layout: 'mono',                          // 单眼布局（双眼显示相同内容）
							transform: new XRRigidTransform({        // 层的位置和朝向
								x: snellenConfig.x - snellenConfig.widthMeters,  // 左上位置
								y: snellenConfig.y + snellenConfig.heightMeters,
								z: snellenConfig.z
							})
						};

						// 创建普通四边形图层
						quadLayerPlain = glBinding.createQuadLayer(quadLayerConfig);

						// ---------- 2.3 配置带Mipmaps的四边形图层 ----------
						quadLayerConfig.mipLevels = 3;  // 设置Mipmap级别数
						// 更新位置为右上角
						quadLayerConfig.transform = new XRRigidTransform({
							x: snellenConfig.x + snellenConfig.widthMeters,
							y: snellenConfig.y + snellenConfig.heightMeters,
							z: snellenConfig.z
						});
						// 创建带Mipmaps的四边形图层
						quadLayerMips = glBinding.createQuadLayer(quadLayerConfig);

						// ---------- 2.4 创建GUI图层 ----------
						guiLayer = glBinding.createQuadLayer({
							width: guiMesh.geometry.parameters.width,    // 从GUI网格获取宽度
							height: guiMesh.geometry.parameters.height,  // 从GUI网格获取高度
							viewPixelWidth: guiMesh.material.map.image.width,   // GUI纹理宽度
							viewPixelHeight: guiMesh.material.map.image.height, // GUI纹理高度
							space: refSpace,                             // 参考空间
							transform: new XRRigidTransform(             // GUI的位置和旋转
								guiMesh.position,
								guiMesh.quaternion
							)
						});

						// ---------- 2.5 创建等距圆柱投影视频层 ----------
						// 创建XRMediaBinding实例
						const mediaBinding = new XRMediaBinding(session);
						// 创建等距圆柱图层
						const equirectLayer = mediaBinding.createEquirectLayer(
							video,  // 视频源
							{
								space: refSpace,              // 参考空间
								layout: 'stereo-left-right',  // 立体声左右布局
								// 旋转45度，避免与3D几何体产生立体声冲突
								transform: new XRRigidTransform(
									{},  // 位置（默认原点）
									{ x: 0, y: 0.28, z: 0, w: 0.96 }  // 四元数表示旋转
								)
							}
						);

						// 隐藏错误信息（因为初始化成功）
						errorMesh.visible = false;

						// ---------- 2.6 更新渲染状态，设置图层堆叠 ----------
						session.updateRenderState({
							layers: [
								equirectLayer,                  // 最底层：背景视频
								quadLayerPlain,                 // 第二层：普通四边形图层
								quadLayerMips,                  // 第三层：带Mipmaps四边形图层
								guiLayer,                       // 第四层：GUI图层
								session.renderState.layers[0]   // 最顶层：默认渲染层（包含3D场景）
							]
						});

						// 播放视频
						video.play();
					});
				}

				// ---------- 3. 更新普通四边形图层纹理 ----------
				// 当图层需要重绘时（初始化后或GL资源丢失后）
				if (session && quadLayerPlain && quadLayerPlain.needsRedraw) {
					// 获取图层的子图像（用于纹理上传）
					const glayer = xr.getBinding().getSubImage(quadLayerPlain, frame);
					// 绑定图层的颜色纹理
					renderer.state.bindTexture(gl.TEXTURE_2D, glayer.colorTexture);
					// 设置像素存储：翻转Y轴（WebGL与Canvas坐标系Y轴相反）
					gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
					// 将视力表图像数据上传到纹理
					gl.texSubImage2D(
						gl.TEXTURE_2D,         // 目标纹理类型
						0,                     // Mipmap级别（0表示基础级别）
						(snellenConfig.textureSizePx - snellenConfig.widthPx) / 2,  // X偏移（居中）
						(snellenConfig.textureSizePx - snellenConfig.heightPx) / 2, // Y偏移（居中）
						snellenConfig.widthPx,  // 图像宽度
						snellenConfig.heightPx, // 图像高度
						gl.RGBA,               // 像素数据格式
						gl.UNSIGNED_BYTE,      // 像素数据类型
						snellenTexture.image   // 图像源数据
					);
				}

				// ---------- 4. 更新带Mipmaps的四边形图层纹理 ----------
				// 与上面类似，但额外生成Mipmaps链
				if (session && quadLayerMips && quadLayerMips.needsRedraw) {
					const glayer = xr.getBinding().getSubImage(quadLayerMips, frame);
					renderer.state.bindTexture(gl.TEXTURE_2D, glayer.colorTexture);
					gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
					gl.texSubImage2D(
						gl.TEXTURE_2D,
						0,
						(snellenConfig.textureSizePx - snellenConfig.widthPx) / 2,
						(snellenConfig.textureSizePx - snellenConfig.heightPx) / 2,
						snellenConfig.widthPx,
						snellenConfig.heightPx,
						gl.RGBA,
						gl.UNSIGNED_BYTE,
						snellenTexture.image
					);
					// 生成Mipmaps链
					gl.generateMipmap(gl.TEXTURE_2D);
				}

				// ---------- 5. 更新GUI图层纹理 ----------
				// 当图层需要重绘或GUI内容更新时
				if (session && guiLayer && (guiLayer.needsRedraw || guiLayer.needsUpdate)) {
					const glayer = xr.getBinding().getSubImage(guiLayer, frame);
					renderer.state.bindTexture(gl.TEXTURE_2D, glayer.colorTexture);
					gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
					// 获取GUI画布
					const canvas = guiMesh.material.map.image;
					// 将整个GUI画布上传到纹理
					gl.texSubImage2D(
						gl.TEXTURE_2D,
						0,
						0,                   // 无偏移
						0,
						canvas.width,        // 画布宽度
						canvas.height,       // 画布高度
						gl.RGBA,
						gl.UNSIGNED_BYTE,
						canvas
					);
					// 重置更新标志
					guiLayer.needsUpdate = false;
				}

				// ---------- 6. 渲染场景 ----------
				// 调用Three.js渲染器渲染整个场景
				renderer.render(scene, camera);
			}

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