<!-- 代码功能概述
这是一个Three.js WebGPU渲染器对比演示程序，专门用于展示不同插值采样模式在有/无抗锯齿情况下的视觉效果差异。

核心功能对比：
左侧：禁用抗锯齿渲染 → 展示锯齿效应

右侧：启用抗锯齿渲染 → 展示平滑效果

动态切换：实时切换5种不同的插值采样模式

交互演示：
网格渲染：生成100个随机颜色的面片（红、绿、蓝、黄）

采样模式切换：通过右上角GUI选择不同采样模式

实时响应：所有面片材质立即更新，无需刷新页面

主要技术点详解
1. WebGPU渲染技术 🚀
javascript
// 创建WebGPU渲染器实例
rendererAntialiasingEnabled = new THREE.WebGPURenderer({
    antialias: true,      // 抗锯齿开关
    forceWebGL: false     // 优先使用WebGPU而非WebGL
});
下一代图形API：相比WebGL性能更高，功能更强大

硬件加速：直接调用GPU底层接口

多线程支持：更好的并行计算能力

2. TSL（Three.js Shading Language）着色器系统 🎨
javascript
import { varying, uv, texture, Fn } from 'three/tsl';

// 创建可变量节点
const testUV = varying( uv(), 'testUV' );

// 定义着色器函数
const withInterpolationShader = Fn( () => {
    testUV.setInterpolation( 
        THREE.InterpolationSamplingType.PERSPECTIVE, 
        THREE.InterpolationSamplingMode.CENTROID 
    );
    return texture( canvasTexture, testUV ).rgb;
} );
节点化着色器：图形化编程思维

实时编译：TSL代码在运行时编译为GPU着色器

类型安全：内置类型检查和优化

3. 插值采样模式对比 🔍
五种采样模式：
模式	英文名	技术特点	适用场景
普通模式	NORMAL	标准透视校正插值	常规3D渲染
质心采样	CENTROID	使用像素质心采样	抗锯齿优化
样本采样	SAMPLE	每个样本位置采样	MSAA抗锯齿
平坦插值(首个)	FLAT FIRST	使用第一个顶点值	卡通渲染、风格化
平坦插值(任一)	FLAT EITHER	使用任意顶点值	性能优化
技术实现：
javascript
// 设置插值类型和采样模式
testUV.setInterpolation(type, sampling);
插值类型：FLAT（平坦） vs PERSPECTIVE（透视校正）

采样模式：FIRST、EITHER、CENTROID、SAMPLE

4. 抗锯齿（Antialiasing）技术 ✨
对比效果：
无抗锯齿：像素边缘出现"锯齿"（阶梯状）

有抗锯齿：边缘平滑，通过多重采样混合颜色

实现机制：
javascript
// WebGPU渲染器配置
{
    antialias: true,  // 启用多重采样抗锯齿（MSAA）
}
多重采样：每个像素采样多个点

颜色混合：计算采样点的加权平均值

性能平衡：采样数越多，效果越好，性能消耗越大

5. 纹理贴图与UV映射 🗺️
四色纹理创建：
javascript
// 16x16像素纹理，包含4个8x8色块
const atlasCanvas = document.createElement('canvas');
atlasCanvas.width = 16;
atlasCanvas.height = 16;
纹理坐标：UV范围0-1

纹理过滤：NearestFilter保持像素清晰

颜色空间：SRGBColorSpace符合人眼感知

UV坐标分配：
红色：左上角 (0,0)-(0.5,0.5)

绿色：右上角 (0.5,0)-(1,0.5)

蓝色：左下角 (0,0.5)-(0.5,1)

黄色：右下角 (0.5,0.5)-(1,1)

6. 动态网格生成系统 📊
批量生成面片：
javascript
// 创建10x10网格的面片
for (let x = -5; x < 5; x++) {
    for (let y = -5; y < 5; y++) {
        const face = faces[Math.floor(Math.random() * faces.length)];
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(x * 2, y * 2, 0);
    }
}
随机颜色分配：从四种颜色中随机选择

网格排列：间隔2个单位，整齐排列

批量管理：所有面片存储在数组中统一更新

7. 实时GUI控制系统 🎮
Inspector调试器：
javascript
import { Inspector } from 'three/addons/inspector/Inspector.js';
rendererAntialiasingEnabled.inspector = new Inspector();
参数调整：下拉菜单选择采样模式

实时响应：onChange回调立即更新材质

无需编译：运行时修改，即时生效

着色器动态切换：
javascript
// 着色器库映射
const interpolationShaderLib = {
    'normal': withoutInterpolationShader,
    'centroid': withInterpolationShader,
    // ...其他映射
};

// 更新所有材质
faceMeshes[i].material.colorNode = shader();
faceMeshes[i].material.needsUpdate = true;
8. 响应式布局设计 📱
分屏对比：
css
#demo {
    display: flex;
    flex-direction: row;
    align-items: center;
}
左右分屏：各占50%宽度

独立渲染：两个渲染器独立运行

同步相机：共享同一相机，确保视角一致

窗口自适应：
javascript
function onWindowResize() {
    const halfWidth = window.innerWidth / 2;
    rendererAntialiasingDisabled.setSize(halfWidth, window.innerHeight);
    camera.aspect = halfWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}
9. 性能优化特性 ⚡
关键优化点：
共享材质：所有面片使用同一材质实例

实例化更新：批量更新材质节点

纹理复用：所有面片共享同一纹理

缓冲几何体：使用BufferGeometry提高性能

WebGPU优势：
更少的CPU开销：减少WebGL的状态切换

更好的并行性：支持compute shader

内存效率：更精细的内存控制

教育意义与应用场景
学习价值：
理解插值原理：通过视觉对比理解不同插值算法的差异

抗锯齿效果：直观感受抗锯齿对图像质量的影响

WebGPU入门：学习现代Web图形编程

着色器编程：掌握TSL节点化着色器开发

应用场景：
图形学教学：计算机图形学课程实验

渲染测试：评估不同采样模式的视觉效果

性能测试：对比不同设置的渲染性能

技术演示：展示WebGPU和Three.js新特性

技术栈总结：
技术组件	版本/类型	作用
Three.js	WebGPU版本	3D渲染引擎
WebGPU	现代图形API	底层图形渲染
TSL	着色器语言	节点化着色器编程
Canvas 2D	HTML5 API	纹理生成
Inspector	调试工具	参数调节GUI -->


<html lang="zh-CN">
	<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="main.css">
	</head>
	<!-- 内联CSS样式 -->
	<style>
		/* 重置body元素的默认样式 */
		body {
			margin: 0;                    /* 移除外边距 */
			overflow: hidden;              /* 隐藏滚动条 */
			width: 100vw;                  /* 宽度为100%视口宽度 */
			height: 100vh;                 /* 高度为100%视口高度 */
			font-family: 'Microsoft YaHei', sans-serif; /* 中文字体设置 */
		}

		/* 演示区域容器样式 */
		#demo {
			display: flex;                 /* 使用Flexbox布局 */
			flex-direction: row;           /* 水平方向排列 */
			align-items: center;           /* 垂直居中对齐 */
		}

		/* 渲染器包装器样式 */
		.renderer-wrapper {
			display: flex;                 /* 使用Flexbox布局 */
			flex-direction: column;        /* 垂直方向排列 */
			align-items: center;           /* 水平居中对齐 */
		}

		/* 左侧无抗锯齿区域样式 */
		#antialiasing-disabled {
			border-right: 1px solid black; /* 右侧添加黑色边框作为分隔线 */
		}

		/* Canvas画布样式 */
		canvas {
			width: 100%;                   /* 宽度占满父容器 */
			height: 100%;                  /* 高度占满父容器 */
		}

		/* 信息显示区域样式 */
		#info {
			position: absolute;            /* 绝对定位 */
			top: 10px;                     /* 距离顶部10像素 */
			left: 10px;                    /* 距离左侧10像素 */
			color: white;                  /* 白色文字 */
			background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
			padding: 10px;                 /* 内边距10像素 */
			border-radius: 5px;            /* 圆角边框 */
			font-size: 14px;               /* 字体大小 */
			z-index: 100;                  /* 确保在最上层显示 */
			max-width: 300px;              /* 最大宽度限制 */
		}

		/* 标签文字样式 */
		.renderer-wrapper > div {
			font-size: 18px;               /* 字体大小 */
			font-weight: bold;             /* 粗体 */
			margin-bottom: 10px;           /* 底部外边距 */
			color: #333;                   /* 深灰色文字 */
			text-align: center;            /* 居中对齐 */
		}
	</style>
	<body>
		<!-- 演示区域容器 -->
		<div id="demo">
			<!-- 左侧：禁用抗锯齿的渲染器 -->
			<div id="antialiasing-disabled" class="renderer-wrapper">
				<!-- 标签：显示"抗锯齿已禁用" -->
				<div>抗锯齿已禁用</div>
				<!-- 渲染器的canvas将动态添加到这里 -->
			</div>
			<!-- 右侧：启用抗锯齿的渲染器 -->
			<div id="antialiasing-enabled" class="renderer-wrapper">
				<!-- 标签：显示"抗锯齿已启用" -->
				<div>抗锯齿已启用</div>
				<!-- 渲染器的canvas将动态添加到这里 -->
			</div>
		</div>

		<!-- 导入映射配置：定义模块路径别名，用于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模块 -->
		<script type="module">
			// 导入Three.js WebGPU核心模块
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shading Language）着色器函数
			// varying: 声明可变量（顶点着色器到片段着色器的传值）
			// uv: 获取UV坐标
			// texture: 纹理采样函数
			// Fn: 定义可复用函数节点
			import { varying, uv, texture, Fn } from 'three/tsl';
			
			// 导入调试器工具，用于创建GUI控制面板
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			let rendererAntialiasingEnabled;    // 启用抗锯齿的WebGPU渲染器实例
			let rendererAntialiasingDisabled;   // 禁用抗锯齿的WebGPU渲染器实例
			let camera;                         // 透视相机，用于观察3D场景
			let scene;                          // 3D场景容器，包含所有要渲染的对象
			let gui;                            // GUI控制器，用于用户交互

			// ========== 效果控制器对象 ==========
			// 存储当前选中的采样模式，通过GUI修改这个值会实时更新渲染效果
			const effectController = {
				sampling: 'normal'  // 初始值设置为'normal'（普通模式）
			};

			// ========== 创建纹理贴图 ==========
			// 创建一个16x16像素的canvas元素作为纹理贴图的源
			const atlasCanvas = document.createElement( 'canvas' );
			atlasCanvas.width = 16;    // 设置canvas宽度为16像素
			atlasCanvas.height = 16;   // 设置canvas高度为16像素

			// 获取2D渲染上下文，用于在canvas上绘制图案
			const ctx = atlasCanvas.getContext( '2d' );
			
			// 绘制红色方块：位于纹理的左上角区域（0,0到8,8）
			ctx.fillStyle = 'red';                  // 设置填充颜色为红色
			ctx.fillRect( 0, 0, 8, 8 );            // 绘制8x8像素的红色矩形
			// 定义红色方块的UV坐标（纹理坐标），范围为0-1
			// 顺序：左下、右下、右上、左上（逆时针）
			const redUVs = [ 0, 1, 0.5, 1, 0.5, 0.5, 0, 0.5 ];
			
			// 绘制绿色方块：位于纹理的右上角区域（8,0到16,8）
			ctx.fillStyle = 'green';                // 设置填充颜色为绿色
			ctx.fillRect( 8, 0, 8, 8 );            // 绘制8x8像素的绿色矩形
			// 绿色方块的UV坐标
			const greenUVs = [ 1, 1, 0.5, 1, 0.5, 0.5, 1, 0.5 ];
			
			// 绘制蓝色方块：位于纹理的左下角区域（0,8到8,16）
			ctx.fillStyle = 'blue';                 // 设置填充颜色为蓝色
			ctx.fillRect( 0, 8, 8, 8 );            // 绘制8x8像素的蓝色矩形
			// 蓝色方块的UV坐标
			const blueUVs = [ 0, 0, 0.5, 0, 0.5, 0.5, 0, 0.5 ];
			
			// 绘制黄色方块：位于纹理的右下角区域（8,8到16,16）
			ctx.fillStyle = 'yellow';               // 设置填充颜色为黄色
			ctx.fillRect( 8, 8, 8, 8 );            // 绘制8x8像素的黄色矩形
			// 黄色方块的UV坐标
			const yellowUVs = [ 1, 0, 0.5, 0, 0.5, 0.5, 1, 0.5 ];

			// 将四个颜色的UV坐标数组存储在faces数组中，方便后续随机选择
			const faces = [ redUVs, greenUVs, blueUVs, yellowUVs ];

			// ========== 创建Three.js纹理对象 ==========
			// 将canvas元素转换为Three.js纹理对象
			const canvasTexture = new THREE.CanvasTexture( atlasCanvas );
			canvasTexture.colorSpace = THREE.SRGBColorSpace;    // 设置颜色空间为sRGB，更符合人眼感知
			canvasTexture.mapping = THREE.UVMapping;            // 设置纹理映射方式为UV映射
			canvasTexture.wrapS = THREE.RepeatWrapping;         // 设置S轴（水平方向）为重复包裹
			canvasTexture.wrapT = THREE.RepeatWrapping;         // 设置T轴（垂直方向）为重复包裹
			canvasTexture.magFilter = THREE.NearestFilter;      // 设置放大滤镜为最近邻过滤，保持像素清晰
			canvasTexture.minFilter = THREE.NearestFilter;      // 设置缩小滤镜为最近邻过滤，保持像素清晰
			canvasTexture.format = THREE.RGBAFormat;            // 设置纹理格式为RGBA（红绿蓝透明度）
			canvasTexture.type = THREE.UnsignedByteType;        // 设置数据类型为无符号字节（0-255）

			// 强制使用WebGL而非WebGPU的标志（当前设置为false，优先使用WebGPU）
			const forceWebGL = false;

			// 调用初始化函数，启动整个应用程序
			init();

			// ========== 初始化函数 ==========
			function init() {
				// ========== 相机设置 ==========
				// 创建透视相机，模拟人眼视角
				camera = new THREE.PerspectiveCamera();
				camera.fov = 60;        // 设置视野角度为60度（中等视角）
				camera.near = 1;        // 设置近裁剪面为1个单位（离相机太近的对象不渲染）
				camera.far = 2100;      // 设置远裁剪面为2100个单位（离相机太远的对象不渲染）
				camera.position.z = 50; // 将相机沿Z轴向后移动50个单位，以获得更好的观察距离

				// ========== 场景创建 ==========
				// 创建3D场景，作为所有3D对象的容器
				scene = new THREE.Scene();

				// ========== 创建面片几何体辅助函数 ==========
				// 根据传入的UV坐标创建矩形面片几何体
				const makeFaceGeometry = ( uvs ) => {
					// 创建缓冲几何体对象
					const geometry = new THREE.BufferGeometry();
					
					// 定义矩形四个顶点的位置坐标（Z轴为0，位于XY平面）
					// 顺序：左下、右下、右上、左上（逆时针）
					const positions = [ -1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0 ];
					// 将顶点坐标设置为几何体的位置属性
					geometry.setAttribute(
						'position',  // 属性名称：位置
						new THREE.BufferAttribute( new Float32Array( positions ), 3 ) // 创建浮点型数组，每个顶点3个值（x,y,z）
					);

					// 定义索引数据（定义两个三角形组成一个矩形）
					// 第一个三角形：顶点0->1->2
					// 第二个三角形：顶点2->3->0
					const indices = [ 0, 1, 2, 2, 3, 0 ];
					// 设置几何体的索引
					geometry.setIndex( indices );

					// 设置UV坐标属性（纹理坐标）
					geometry.setAttribute(
						'uv',  // 属性名称：UV坐标
						new THREE.BufferAttribute( new Float32Array( uvs ), 2 ) // 创建浮点型数组，每个UV坐标2个值（u,v）
					);

					// 返回创建的几何体
					return geometry;
				};

				// ========== 材质和着色器节点设置 ==========
				// 创建MeshBasicNodeMaterial，这是一种支持节点系统的材质
				const material = new THREE.MeshBasicNodeMaterial();
				
				// 创建可变量（varying），用于测试不同的插值模式
				// uv()获取默认的UV坐标，varying()将其声明为可变量
				// 'testUV'是变量名称，用于调试
				const testUV = varying( uv(), 'testUV' );

				// ========== 着色器创建辅助函数 ==========
				// 创建具有特定插值类型和采样模式的着色器
				const createShader = ( type, sampling ) => {
					// 返回一个TSL函数节点
					return Fn( () => {
						// 设置插值类型和采样模式
						testUV.setInterpolation( type, sampling );
						// 从纹理采样颜色值（使用设置的UV坐标）
						// .rgb只获取RGB颜色分量，忽略透明度
						return texture( canvasTexture, testUV ).rgb;
					} );
				};

				// ========== 创建各种插值模式的着色器 ==========
				// 平坦插值，使用第一个顶点的值
				const withFlatFirstShader = createShader( THREE.InterpolationSamplingType.FLAT, THREE.InterpolationSamplingMode.FIRST );
				
				// 平坦插值，使用任意顶点的值
				const withFlatEitherShader = createShader( THREE.InterpolationSamplingType.FLAT, THREE.InterpolationSamplingMode.EITHER );

				// 透视插值，使用SAMPLE采样模式
				const withSampleShader = Fn( () => {
					testUV.setInterpolation( THREE.InterpolationSamplingType.PERSPECTIVE, THREE.InterpolationSamplingMode.SAMPLE );
					return texture( canvasTexture, testUV ).rgb;
				} );

				// 透视插值，使用CENTROID采样模式（质心采样）
				const withInterpolationShader = Fn( () => {
					testUV.setInterpolation( THREE.InterpolationSamplingType.PERSPECTIVE, THREE.InterpolationSamplingMode.CENTROID );
					return texture( canvasTexture, testUV ).rgb;
				} );

				// 无特殊插值设置（默认模式）
				const withoutInterpolationShader = Fn( () => {
					return texture( canvasTexture, uv() ).rgb;
				} );

				// 初始化材质颜色节点为普通模式着色器
				material.colorNode = withoutInterpolationShader();

				// ========== 创建网格对象阵列 ==========
				// 存储所有面片网格的数组
				const faceMeshes = [];
				
				// 创建10x10网格的面片（共100个）
				// x从-5到4（共10个位置）
				for ( let x = -5; x < 5; x ++ ) {
					// y从-5到4（共10个位置）
					for ( let y = -5; y < 5; y ++ ) {
						// 随机选择一个颜色的UV坐标
						const face = faces[ Math.floor( Math.random() * faces.length ) ];
						// 创建该UV坐标对应的几何体
						const geometry = makeFaceGeometry( face );
						// 创建网格对象，将几何体和材质组合
						const mesh = new THREE.Mesh( geometry, material );
						// 设置网格位置（间隔2个单位，形成整齐网格）
						mesh.position.set( x * 2, y * 2, 0 );
						// 将网格添加到数组中
						faceMeshes.push( mesh );
						// 将网格添加到场景中
						scene.add( mesh );
					}
				}

				// ========== 创建无抗锯齿渲染器 ==========
				// 创建WebGPU渲染器实例，禁用抗锯齿
				rendererAntialiasingDisabled = new THREE.WebGPURenderer( {
					antialias: false,     // 关键参数：禁用抗锯齿
					forceWebGL: forceWebGL // 是否强制使用WebGL（false表示优先使用WebGPU）
				} );

				// 设置渲染器的像素比（通常等于设备像素比，用于高清显示）
				rendererAntialiasingDisabled.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为窗口宽度的一半和整个高度
				rendererAntialiasingDisabled.setSize( window.innerWidth / 2, window.innerHeight );
				// 设置渲染动画循环函数（每帧调用animateStandard）
				rendererAntialiasingDisabled.setAnimationLoop( animateStandard );

				// ========== 创建有抗锯齿渲染器 ==========
				// 创建WebGPU渲染器实例，启用抗锯齿
				rendererAntialiasingEnabled = new THREE.WebGPURenderer( {
					antialias: true,      // 关键参数：启用抗锯齿
					forceWebGL: forceWebGL // 是否强制使用WebGL
				} );

				// 将启用抗锯齿的渲染器的canvas元素添加到DOM中
				document.body.querySelector( '#antialiasing-enabled' ).appendChild( rendererAntialiasingEnabled.domElement );
				rendererAntialiasingEnabled.setPixelRatio( window.devicePixelRatio );
				rendererAntialiasingEnabled.setSize( window.innerWidth / 2, window.innerHeight );
				rendererAntialiasingEnabled.setAnimationLoop( animateAliased );
				// 为启用抗锯齿的渲染器添加调试器
				rendererAntialiasingEnabled.inspector = new Inspector();

				// 将禁用抗锯齿的渲染器的canvas元素添加到DOM中
				document.body.querySelector( '#antialiasing-disabled' ).appendChild( rendererAntialiasingDisabled.domElement );

				// ========== 初始窗口尺寸调整 ==========
				// 调用窗口大小调整函数，确保渲染器尺寸正确
				onWindowResize();

				// ========== 事件监听器 ==========
				// 监听窗口大小变化事件，当窗口大小改变时调整渲染器尺寸
				window.addEventListener( 'resize', onWindowResize );

				// ========== GUI控制面板设置 ==========
				// 从调试器创建参数控制面板，标题为'设置'
				gui = rendererAntialiasingEnabled.inspector.createParameters( '设置' );
				
				// 添加采样模式下拉选择器
				gui.add( effectController, 'sampling', [
					THREE.InterpolationSamplingMode.NORMAL,    // 普通模式：标准透视校正插值
					THREE.InterpolationSamplingMode.CENTROID,  // 质心采样模式：使用像素质心进行采样
					THREE.InterpolationSamplingMode.SAMPLE,    // 样本采样模式：在每个样本位置采样
					'flat first',   // 平坦插值（首个顶点）：使用第一个顶点的值
					'flat either'   // 平坦插值（任一顶点）：使用任意顶点的值
				] ).onChange( () => {  // 添加值变化事件监听器
					// 当采样模式改变时执行的回调函数
					
					// ========== 着色器库映射表 ==========
					// 将采样模式字符串映射到对应的着色器函数
					const interpolationShaderLib = {
						[ THREE.InterpolationSamplingMode.NORMAL ]: withoutInterpolationShader,   // 普通模式
						[ THREE.InterpolationSamplingMode.CENTROID ]: withInterpolationShader,    // 质心采样
						[ THREE.InterpolationSamplingMode.SAMPLE ]: withSampleShader,            // 样本采样
						[ 'flat first' ]: withFlatFirstShader,    // 平坦插值（首个顶点）
						[ 'flat either' ]: withFlatEitherShader   // 平坦插值（任一顶点）
					};

					// 根据当前选择的采样模式获取对应的着色器函数
					const shader = interpolationShaderLib[ effectController.sampling ];

					// ========== 更新所有面片材质 ==========
					// 遍历所有面片网格，更新它们的材质
					for ( let i = 0; i < faceMeshes.length; i ++ ) {
						// 设置材质的颜色节点为新的着色器
						faceMeshes[ i ].material.colorNode = shader();
						// 标记材质需要更新（Three.js内部机制）
						faceMeshes[ i ].material.needsUpdate = true;
					}
				} );
			}

			// ========== 窗口大小变化处理函数 ==========
			function onWindowResize() {
				// 计算窗口宽度的一半（用于左右分屏）
				const halfWidth = window.innerWidth / 2;
				
				// 更新无抗锯齿渲染器尺寸
				rendererAntialiasingDisabled.setSize( halfWidth, window.innerHeight );
				// 更新有抗锯齿渲染器尺寸
				rendererAntialiasingEnabled.setSize( halfWidth, window.innerHeight );
				
				// 计算新的宽高比（单个渲染器的宽高比）
				const aspect = halfWidth / window.innerHeight;
				// 更新相机的宽高比
				camera.aspect = aspect;
				// 更新相机的投影矩阵（必须调用此方法使宽高比生效）
				camera.updateProjectionMatrix();
			}

			// ========== 无抗锯齿渲染器的动画循环函数 ==========
			function animateStandard() {
				// 渲染场景：使用禁用抗锯齿的渲染器渲染当前场景和相机
				rendererAntialiasingDisabled.render( scene, camera );
			}

			// ========== 有抗锯齿渲染器的动画循环函数 ==========
			function animateAliased() {
				// 渲染场景：使用启用抗锯齿的渲染器渲染当前场景和相机
				rendererAntialiasingEnabled.render( scene, camera );
			}
		</script>
	</body>
</html>