<!-- Three.js WebGPU 阵列相机演示 - 详细功能与技术分析
一、整体功能概述
这是一个基于Three.js WebGPU渲染器的阵列相机(Array Camera)技术演示。该演示创建了一个3D场景，其中包含一个旋转的红色圆柱体，并通过6×6网格布局的36个独立相机同时从不同角度渲染这个场景。每个相机都有自己的视口和位置，但所有渲染通过单次渲染调用完成，展示了高效的多视角渲染技术。

二、核心功能分解
1. 多视角同步渲染
屏幕被分割为36个等大小的矩形区域

每个区域显示从不同3D位置观察的同一场景

所有视角实时更新，圆柱体在36个视图中同步旋转

2. 3D场景构建
主物体：红色圆柱体（持续旋转动画）

背景：深蓝色平面，作为场景背景

光照系统：环境光 + 方向光，支持阴影投射

阴影效果：圆柱体在背景上投射动态阴影

3. 交互与响应
自适应窗口大小调整

保持36:1的视口比例在任何窗口尺寸下

实时计算相机位置和视口

三、主要技术点详解
1. ArrayCamera技术
javascript
// 核心技术：ArrayCamera
camera = new THREE.ArrayCamera(subCameras);
工作原理：ArrayCamera是包含多个子相机的容器相机

渲染优化：单次render()调用渲染所有子相机视口

内存效率：共享场景数据，减少重复上传

2. 视口管理与渲染流水线
javascript
// 每个子相机的视口配置
subcamera.viewport.set(x, y, width, height);
视口分割：数学计算确保像素对齐，避免接缝

投影矩阵更新：每个视口独立计算投影变换

渲染批次：GPU批量处理多个视口的渲染指令

3. 相机位置算法
javascript
// 三维空间相机分布
subcamera.position.x = (x / AMOUNT) - 0.5;
subcamera.position.y = 0.5 - (y / AMOUNT);
subcamera.position.z = 1.5 + ((x + y) * 0.5);
X轴：线性分布，范围[-0.5, 0.5]

Y轴：反向线性分布，范围[0.5, -0.5]（符合屏幕坐标系）

Z轴：基于网格坐标递增，创建深度层次感

目标点：所有相机看向原点(0,0,0)

4. WebGPU渲染器
javascript
// 使用Three.js的WebGPU后端
import * as THREE from 'three/webgpu';
renderer = new THREE.WebGPURenderer();
现代图形API：相比WebGL，WebGPU提供更好的并行处理

计算着色器支持：更适合复杂计算任务

显存管理：更精细的GPU资源控制

5. 光影系统
javascript
// 双光源系统
const ambientLight = new THREE.AmbientLight(0x999999);
const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
环境光：提供均匀的基础照明

平行光：模拟太阳光，产生方向性阴影

阴影优化：

shadow.bias = -0.001：防止阴影失真

shadow.camera.zoom = 4：紧密的阴影贴图，提高精度

6. 几何体与材质
javascript
// 圆柱体创建
const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
几何细节：32段细分，确保平滑外观

Phong材质：对光照反应真实，支持高光效果

阴影属性：同时支持投射和接收阴影

7. 动画与性能优化
javascript
// 动画循环
function animate() {
    mesh.rotation.x += 0.005;
    mesh.rotation.z += 0.01;
    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);
统一动画循环：Three.js管理的requestAnimationFrame

增量旋转：每帧微小角度变化，产生平滑动画

高效重绘：仅更新变换矩阵，不重建几何体

四、性能优化技术
1. 单次渲染调用
javascript
// 传统方式 vs ArrayCamera方式
// 传统：需要36次render调用
for(let i=0; i<36; i++) {
    renderer.setViewport(viewport[i]);
    renderer.render(scene, camera[i]);
}

// ArrayCamera：只需1次render调用
renderer.render(scene, arrayCamera); // 内部处理36个视口
2. 状态切换最小化
着色器程序：保持相同，避免重新编译

纹理绑定：共享纹理资源

缓冲区重用：几何数据在GPU内存中复用

3. 视口计算优化
整数像素对齐：使用Math.floor和Math.ceil避免浮点误差

批量矩阵更新：所有相机的投影矩阵一次性计算

早期裁剪：每个视口独立进行视锥体裁剪

五、关键技术栈
技术组件	版本/类型	作用
Three.js	WebGPU版本	3D图形引擎
相机系统	ArrayCamera + PerspectiveCamera	多视角渲染
渲染器	WebGPURenderer	硬件加速渲染
几何体	CylinderGeometry, PlaneGeometry	3D模型定义
材质系统	MeshPhongMaterial	表面外观与光照交互
光照系统	AmbientLight, DirectionalLight	场景照明与阴影
阴影系统	ShadowMap	实时阴影生成
六、应用场景延伸
1. VR/AR应用
左右眼分别渲染（立体视觉）

多角度预览场景

画中画显示不同视角

2. 监控与可视化
多摄像头监控画面

3D模型多角度展示

实时数据多视图对比

3. 游戏开发
小地图或后视镜

分屏多人游戏

画中画特效（如狙击镜）

4. 科学可视化
多角度观察3D数据

同步显示不同切片

动态参数对比视图

七、技术亮点总结
渲染效率革命：36个视角只需1次渲染调用，大幅减少CPU-GPU通信

精准视口管理：像素级对齐，避免渲染接缝

动态相机阵列：算法生成3D空间中的相机分布

现代图形API：充分利用WebGPU的并行计算能力

完整光影系统：支持实时阴影和复杂光照

响应式设计：自适应各种屏幕尺寸和设备

平滑动画：60fps流畅旋转效果 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			title标签定义页面标题，会显示在浏览器标签页上
			同时有利于搜索引擎理解和收录页面内容
		-->
		<title>Three.js WebGPU演示 - 阵列相机(Array Camera)效果展示</title>
		
		<!-- 
			charset属性指定文档字符编码为UTF-8
			UTF-8支持中文等多语言字符显示，避免乱码问题
		-->
		<meta charset="utf-8">
		
		<!-- 
			viewport元标签控制移动设备上的视口行为：
			- 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">
		
		<!-- 
			link标签引入外部CSS样式表
			- rel="stylesheet"：指定链接关系为样式表
			- href="example.css"：样式表文件路径
			用于定义页面的视觉样式，如字体、颜色、布局等
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			id为"info"的div容器：页面信息展示区域
			通常包含标题、描述和链接等元素
			使用id选择器可以在CSS中直接通过#info进行样式控制
		-->
		<div id="info">
			<!-- 
				Three.js官方链接：
				- href：链接目标地址
				- target="_blank"：在新标签页中打开链接
				- rel="noopener"：安全属性，防止新页面通过window.opener访问原页面
				- class="logo-link"：CSS类名，可能用于设置背景图片或图标
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 链接文本为空，通常通过CSS背景图显示Three.js logo -->
			</a>

			<!-- 标题包装容器，用于组合主标题和副标题 -->
			<div class="title-wrapper">
				<!-- 主标题链接：指向Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：当前演示功能名称 -->
				<span> - 阵列相机技术演示</span>
			</div>

			<!-- 
				功能描述文字，使用small标签表示次要信息：
				阵列相机技术允许使用多个子相机同时渲染场景的不同部分，
				但只需要一次渲染调用，提高了渲染效率。
			-->
			<small>
				阵列相机技术允许通过多个子相机同时渲染场景的不同视角，
				但只需要单次渲染调用即可完成，极大地提升了渲染性能。
				此演示展示了6×6共36个不同视角同时渲染的效果。
			</small>
			
			
		</div>

		<!-- 
			importmap脚本：现代JavaScript模块导入映射配置
			允许为模块指定别名，简化import语句
			这是ES模块的标准特性，让浏览器知道如何解析模块路径
		-->
		<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模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// 导入Three.js库的WebGPU版本
			// 使用importmap中定义的"three/webgpu"别名
			import * as THREE from 'three/webgpu';

			// 全局变量声明：将在多个函数中使用的对象引用
			let camera, scene, renderer;  // Three.js三大核心对象：相机、场景、渲染器
			let mesh;  // 主要3D对象（圆柱体）的引用

			// 常量定义：子相机网格的行列数量
			// 6×6网格，总共36个子相机，将屏幕分割为36个区域
			const AMOUNT = 6;

			// 立即调用初始化函数，开始设置Three.js应用
			init();

			/**
			 * 初始化函数：整个Three.js应用的启动入口
			 * 负责创建所有必要的Three.js对象并设置场景
			 * 这个函数只在页面加载时执行一次
			 */
			function init() {
				// 步骤1：创建子相机数组
				// 数组将存储所有独立的透视相机对象
				const subCameras = [];

				// 循环创建 AMOUNT × AMOUNT 个子相机（此处为36个）
				for (let i = 0; i < AMOUNT * AMOUNT; i++) {
					// 创建透视相机对象：
					// 参数说明：
					// - 40: 视野角度(FOV)，单位度，控制相机能看到多少场景
					// - 1: 宽高比，暂时设为1:1，后续会根据实际视口调整
					// - 0.1: 近裁剪面距离，离相机更近的物体不会被渲染
					// - 10: 远裁剪面距离，离相机更远的物体不会被渲染
					const subCamera = new THREE.PerspectiveCamera(40, 1, 0.1, 10);
					
					// 为每个子相机设置viewport属性
					// viewport是一个Vector4对象，表示相机渲染的区域：
					// (x, y, width, height) - 在屏幕坐标系中的位置和大小
					// 这里先创建空对象，具体值在updateCameras()中设置
					subCamera.viewport = new THREE.Vector4();

					// 将子相机添加到数组中
					subCameras.push(subCamera);
				}

				// 步骤2：创建ArrayCamera（阵列相机）
				// ArrayCamera是特殊的相机类型，它包含多个子相机
				// 参数subCameras：包含所有子相机的数组
				camera = new THREE.ArrayCamera(subCameras);
				
				// 设置主相机（阵列相机）的位置
				// 注意：ArrayCamera本身也有位置，但主要是作为子相机的参考基准
				camera.position.z = 3;  // 沿Z轴正方向移动3个单位

				// 步骤3：初始化所有子相机的设置
				// 这个函数会根据当前窗口大小计算每个子相机的视口和位置
				updateCameras();

				// 步骤4：创建场景(Scene)
				// Scene是所有3D对象的容器，包含网格、灯光、相机等
				scene = new THREE.Scene();

				// 步骤5：添加环境光(AmbientLight)
				// 环境光提供均匀的整体照明，没有方向性
				// 参数0x999999：RGB颜色值，中等亮度的灰色
				scene.add(new THREE.AmbientLight(0x999999));

				// 步骤6：创建平行光(DirectionalLight)
				// 平行光模拟太阳光，所有光线平行照射
				// 参数：
				// - 0xffffff：白色光
				// - 3：光照强度，值越大越亮
				const light = new THREE.DirectionalLight(0xffffff, 3);
				
				// 设置光源位置：(x, y, z)坐标
				// 从右上方照射，产生立体感
				light.position.set(0.5, 0.5, 1);
				
				// 启用阴影投射：这个光源产生的光会生成阴影
				light.castShadow = true;
				
				// 设置阴影偏移量：微调阴影位置，防止阴影失真或"阴影痤疮"
				light.shadow.bias = -0.001;
				
				// 设置阴影相机的缩放：值越大，阴影贴图覆盖的区域越小（但更精确）
				light.shadow.camera.zoom = 4;
				
				// 将平行光添加到场景中
				scene.add(light);

				// 步骤7：创建背景平面
				// 平面几何体：宽100单位，高100单位
				const geometryBackground = new THREE.PlaneGeometry(100, 100);
				
				// 材质使用Phong着色模型，对光照反应更真实
				// 颜色为深蓝色(0x000066)
				const materialBackground = new THREE.MeshPhongMaterial({ color: 0x000066 });

				// 创建网格对象：几何体 + 材质 = 可视的3D对象
				const background = new THREE.Mesh(geometryBackground, materialBackground);
				
				// 背景平面接收阴影：其他物体的阴影会投射到它上面
				background.receiveShadow = true;
				
				// 设置背景位置：放在场景后方，作为远处背景
				background.position.set(0, 0, -1);
				
				// 添加到场景
				scene.add(background);

				// 步骤8：创建主要物体 - 红色圆柱体
				// 圆柱几何体参数：
				// - 0.5：顶部半径
				// - 0.5：底部半径（与顶部相同，形成直圆柱）
				// - 1：高度
				// - 32：侧面分段数，值越高圆柱越平滑
				const geometryCylinder = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
				
				// 红色Phong材质
				const materialCylinder = new THREE.MeshPhongMaterial({ color: 0xff0000 });

				// 创建圆柱体网格
				mesh = new THREE.Mesh(geometryCylinder, materialCylinder);
				
				// 圆柱体既投射阴影（在其他物体上产生阴影）
				// 也接收阴影（自身表面显示阴影）
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				
				// 添加到场景（默认位置为原点(0,0,0)）
				scene.add(mesh);

				// 步骤9：创建WebGPU渲染器
				// WebGPURenderer是Three.js的下一代渲染器，性能更好
				// 注释掉的选项{ forceWebGL: true }可以强制使用WebGL作为后备
				renderer = new THREE.WebGPURenderer(/*{ forceWebGL: true }*/);
				
				// 设置设备像素比：匹配屏幕物理像素和CSS像素的比例
				// 在高DPI屏幕（如Retina显示屏）上提供更清晰的渲染
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器大小为整个浏览器窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环：指定animate函数作为每帧调用的回调
				// 类似于requestAnimationFrame，但由Three.js管理
				renderer.setAnimationLoop(animate);
				
				// 启用阴影映射：允许渲染器计算和显示阴影
				renderer.shadowMap.enabled = true;
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// 这样用户才能看到Three.js渲染的内容
				document.body.appendChild(renderer.domElement);

				// 步骤10：添加窗口大小变化事件监听器
				// 当用户调整浏览器窗口大小时，重新调整相机和渲染器
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 更新所有子相机设置的函数
			 * 这个函数负责：
			 * 1. 根据当前窗口大小计算每个子相机的视口（屏幕上的渲染区域）
			 * 2. 为每个子相机设置不同的3D位置，产生多视角效果
			 * 3. 更新相机的投影矩阵（当相机参数改变时必须调用）
			 * 
			 * 该函数在初始化和窗口大小变化时都会被调用
			 */
			function updateCameras() {
				// 计算当前窗口的宽高比
				// 宽高比 = 宽度 / 高度，用于正确计算相机投影
				const ASPECT_RATIO = window.innerWidth / window.innerHeight;
				
				// 计算每个子相机应渲染的区域的宽度和高度
				// 将整个窗口等分为AMOUNT×AMOUNT个网格
				const WIDTH = window.innerWidth / AMOUNT;
				const HEIGHT = window.innerHeight / AMOUNT;

				// 更新主相机（阵列相机）的宽高比
				// 虽然子相机会有自己的视口，但主相机仍需要正确的宽高比进行计算
				camera.aspect = ASPECT_RATIO;
				
				// 更新主相机的投影矩阵
				// 当相机参数（如aspect、fov等）改变后，必须调用此方法
				camera.updateProjectionMatrix();

				// 双重循环遍历所有子相机（按网格排列）
				// y循环：从0到AMOUNT-1，表示行索引
				// x循环：从0到AMOUNT-1，表示列索引
				for (let y = 0; y < AMOUNT; y++) {
					for (let x = 0; x < AMOUNT; x++) {
						// 根据网格坐标计算子相机在数组中的索引
						// 使用行主序存储：第y行第x列 = AMOUNT * y + x
						const subcamera = camera.cameras[AMOUNT * y + x];
						
						// 从主相机复制基本参数到子相机
						// copy()方法复制fov、aspect、near、far等属性
						// 确保所有子相机有相同的视野范围和裁剪面设置
						subcamera.copy(camera);

						// 设置子相机的视口（viewport）
						// 视口定义了这个相机渲染到屏幕的哪个区域
						subcamera.viewport.set(
							Math.floor(x * WIDTH),      // 视口左上角x坐标（像素）
							Math.floor(y * HEIGHT),     // 视口左上角y坐标（像素）
							Math.ceil(WIDTH),          // 视口宽度（像素）
							Math.ceil(HEIGHT)          // 视口高度（像素）
						);
						// 注意：使用Math.floor和Math.ceil确保像素对齐，防止渲染接缝
						
						// 由于视口大小改变，需要更新子相机的投影矩阵
						subcamera.updateProjectionMatrix();

						// 设置子相机在3D空间中的位置
						// 这个位置计算使相机在3D空间中呈网格状分布
						subcamera.position.x = (x / AMOUNT) - 0.5;      // x方向：-0.5到0.5
						subcamera.position.y = 0.5 - (y / AMOUNT);      // y方向：0.5到-0.5（反转，符合屏幕坐标系）
						subcamera.position.z = 1.5 + ((x + y) * 0.5);   // z方向：基于网格坐标增加深度
						
						// 将位置向量乘以2，扩大分布范围
						// 使不同视角之间的差异更明显
						subcamera.position.multiplyScalar(2);

						// 所有子相机都看向场景原点(0,0,0)
						// 这样虽然相机位置不同，但都聚焦在同一个物体（圆柱体）上
						subcamera.lookAt(0, 0, 0);
						
						// 更新相机的世界变换矩阵
						// 当相机位置或朝向改变后，必须调用此方法更新内部矩阵
						subcamera.updateMatrixWorld();
					}
				}
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当用户调整浏览器窗口大小时自动调用
			 * 确保渲染内容始终适配新的窗口尺寸
			 */
			function onWindowResize() {
				// 首先更新所有相机的设置
				// 因为窗口大小改变，每个子相机的视口大小和位置都需要重新计算
				updateCameras();

				// 然后更新渲染器的大小
				// 确保渲染画布(canvas)的尺寸与窗口新尺寸一致
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 每帧自动调用（通常每秒60次，取决于显示器刷新率）
			 * 负责：
			 * 1. 更新场景中物体的状态（如旋转、移动等）
			 * 2. 调用渲染器渲染当前帧
			 * 
			 * 这是Three.js应用的核心循环，保持场景动态更新
			 */
			function animate() {
				// 更新圆柱体的旋转状态
				// 每帧绕x轴旋转0.005弧度（约0.286度）
				mesh.rotation.x += 0.005;
				
				// 每帧绕z轴旋转0.01弧度（约0.573度）
				// z轴旋转速度是x轴的两倍，产生更复杂的旋转效果
				mesh.rotation.z += 0.01;

				// 渲染场景
				// 这是最关键的一步：将3D场景渲染到2D屏幕上
				// 参数：
				// - scene：要渲染的场景对象（包含所有网格、灯光等）
				// - camera：使用的相机（这里是ArrayCamera）
				// 
				// 注意：虽然camera是ArrayCamera包含36个子相机，
				// 但只需要一次render()调用，Three.js内部会处理所有子相机的渲染
				// 这是ArrayCamera的主要优势：多视角单次渲染
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>