<!-- Three.js WebGPU 半色调效果项目
项目概述
这是一个基于 Three.js WebGPU 的交互式3D图形演示项目，实现了实时半色调（Halftone）渲染效果。半色调是一种印刷技术中常用的图像处理技术，通过不同大小、间距的网点来模拟连续色调图像。本项目将这一传统印刷技术应用于实时3D渲染，创造出独特的视觉风格。

核心功能
1. 实时半色调渲染
实现基于屏幕空间的网点着色效果

支持多层网点叠加（紫色阴影层 + 青色高光层）

实时动态调整所有网点参数

2. 交互式3D场景
加载和显示多种3D几何体：圆环结、球体

支持GLTF格式的3D模型加载

相机轨道控制（旋转、平移、缩放）

3. 动态效果
第二层网点方向随时间周期性变化

实时GUI参数调整，即时反馈效果变化

流畅的动画渲染（60FPS）

4. 调试和配置
内置Inspector调试面板

分层参数控制系统

详细的参数调整范围

主要技术点
1. WebGPU渲染技术
javascript
// 使用WebGPU API替代传统的WebGL
const renderer = new THREE.WebGPURenderer({ antialias: true });
优势：更高的性能、更好的并行处理能力、更现代的API设计

特性：自动抗锯齿、GPU计算着色器支持

2. Three.js Shading Language (TSL)
javascript
import { color, mix, normalWorld, output, Fn, uniform } from 'three/tsl';
概念：Three.js的着色器编程语言

特点：

在JavaScript中直接编写着色器代码

类型安全，编译时错误检查

自动处理着色器编译和链接

3. 屏幕空间着色器算法
javascript
// 核心网点生成算法
let gridUv = screenCoordinate.xy.div(screenSize.yy).mul(count);
gridUv = rotate(gridUv, Math.PI * 0.25).mod(1);
网格生成：将屏幕空间划分为网格

网点定位：基于网格坐标计算网点位置

法线依赖：使用表面法线控制网点可见性

4. 多层混合系统
javascript
// 多层网点叠加算法
for (const settings of halftoneSettings) {
    const halfToneOutput = halftone(...);
    halftonesOutput.rgb.assign(mix(halftonesOutput.rgb, halfToneOutput.rgb, halfToneOutput.a));
}
顺序混合：从底层到高层依次叠加网点效果

Alpha混合：使用网点遮罩作为混合因子

参数独立：每层有独立的颜色、密度、方向等参数

5. 统一变量系统
javascript
// 创建可动态调整的着色器参数
uniforms.count = uniform(settings.count);
uniforms.direction = uniform(settings.direction);
CPU-GPU通信：允许JavaScript代码修改着色器参数

实时更新：无需重新编译着色器即可更新参数

GUI集成：统一变量直接绑定到调试面板

6. 模块化着色器函数
javascript
// 可重用的着色器函数
const halftone = Fn(([count, color, direction, start, end, radius, mixLow, mixHigh]) => {
    // 着色器逻辑
});
函数式编程：TSL支持函数定义和调用

参数化设计：易于配置和重用

组合式架构：小型函数组合成复杂效果

算法原理详解
网点生成算法步骤：
屏幕空间转换

text
原始屏幕坐标 → 归一化坐标 → 网格坐标 → 旋转网格
法线方向计算

text
表面法线 · 方向向量 = 点积结果 → 重映射到[0,1]范围
圆形网点生成

text
网格坐标 → 到中心距离 → 阶梯函数 → 圆形遮罩
多层效果叠加

text
基础颜色 + 网点层1 × 遮罩1 + 网点层2 × 遮罩2 = 最终颜色
关键技术公式：
网格坐标计算：

text
uv = (screenPos / screenHeight) × density
uv' = rotate(uv, 45°) % 1.0
朝向强度：

text
strength = dot(normal, direction)
strength' = clamp((strength - end) / (start - end), 0, 1)
圆形遮罩：

text
distance = length(uv' - 0.5)
mask = step(distance, strength × radius × 0.5)
性能优化策略
1. GPU并行计算
所有片元独立计算，最大化GPU并行能力

屏幕空间算法复杂度与场景几何无关

2. 高效的着色器设计
避免分支语句，使用阶梯函数代替条件判断

向量化操作，充分利用GPU SIMD架构

3. 动态参数更新
统一变量系统避免着色器重编译

增量式更新，只修改变化的参数

4. 渲染管线优化
WebGPU的现代渲染管线

自动批处理和状态管理 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGPU - 半色调网点效果 -->
		<title>Three.js WebGPU - 半色调网点效果演示</title>
		<!-- 元标签设置 -->
		<meta charset="utf-8"> <!-- 字符编码设置为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">
	</head>
	<body>

		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- Three.js 官方网站链接，点击跳转 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link" title="访问Three.js官网"></a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- Three.js 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 当前页面子标题：半色调效果 -->
				<span>半色调效果</span>
			</div>

			<!-- 简短描述区域 -->
			<small>
				<!-- 描述文本：展示了基于WebGPU的实时半色调渲染效果，支持交互式参数调整 -->
				展示基于WebGPU的实时半色调渲染效果。使用Three.js和TSL(Three.js Shading Language)实现，支持交互式参数调整。
			</small>

		</div>

		<!-- 模块导入映射配置：定义JavaScript模块的导入路径 -->
		<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）着色器函数
			// color: 颜色处理函数
			// mix: 颜色混合函数
			// normalWorld: 世界空间法线向量
			// output: 输出节点
			// Fn: 定义着色器函数
			// uniform: 统一变量（可在CPU端修改的着色器参数）
			// vec4: 4维向量（包含RGBA）
			// rotate: 旋转函数
			// screenCoordinate: 屏幕坐标
			// screenSize: 屏幕尺寸
			import { color, mix, normalWorld, output, Fn, uniform, vec4, rotate, screenCoordinate, screenSize } from 'three/tsl';

			// 导入调试检查器，用于实时调试和参数调整
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器，用于鼠标控制相机移动
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入GLTF加载器，用于加载3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			// ============= 全局变量声明 =============
			// camera: 场景相机，控制观察视角
			// scene: 三维场景，包含所有要渲染的对象
			// renderer: 渲染器，负责将场景渲染到画布
			// controls: 轨道控制器，处理用户交互
			// clock: 时钟对象，用于时间计算和动画
			// halftoneSettings: 网点效果参数设置数组
			let camera, scene, renderer, controls, clock, halftoneSettings;

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

			/**
			 * 初始化函数 - 程序入口点
			 * 负责创建场景、相机、渲染器、灯光、几何体、材质等所有必要组件
			 */
			function init() {

				// ============= 创建相机 =============
				// 创建透视投影相机
				// 参数说明：
				// 25: 视野角度（FOV），单位度，控制相机能看到的角度范围
				// window.innerWidth / window.innerHeight: 宽高比，确保渲染画面不变形
				// 0.1: 近裁剪面，距离相机小于此值的物体不渲染
				// 100: 远裁剪面，距离相机大于此值的物体不渲染
				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
				// 设置相机初始位置：x=6, y=3, z=10
				camera.position.set( 6, 3, 10 );

				// ============= 创建场景 =============
				// 创建新的3D场景容器，所有要渲染的对象都添加到这里
				scene = new THREE.Scene();

				// ============= 创建时钟 =============
				// 创建Three.js时钟对象，用于计算时间差和动画时间
				clock = new THREE.Clock();

				// ============= 创建渲染器 =============
				// 创建WebGPU渲染器实例，使用WebGPU API进行渲染
				// { antialias: true }: 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比，适配高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为当前窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数，每一帧都会调用animate函数
				renderer.setAnimationLoop( animate );
				// 设置清除颜色为黑色（背景色）
				renderer.setClearColor( '#000000' );
				// 将渲染器的canvas元素添加到网页body中
				document.body.appendChild( renderer.domElement );

				// ============= 创建调试检查器 =============
				// 将Inspector实例附加到渲染器，用于调试
				renderer.inspector = new Inspector();
				// 创建参数GUI面板，标题为'Parameters'
				const gui = renderer.inspector.createParameters( '参数面板' );

				// ============= 创建灯光 =============
				// 创建环境光：均匀照亮所有物体，模拟间接光照
				// 参数说明：
				// '#ffffff': 白光
				// 3: 光照强度
				const ambientLight = new THREE.AmbientLight( '#ffffff', 3 );
				// 将环境光添加到场景
				scene.add( ambientLight );

				// 创建定向光：模拟太阳光，来自特定方向
				const directionalLight = new THREE.DirectionalLight( '#ffffff', 8 );
				// 设置定向光位置：x=4, y=3, z=1
				directionalLight.position.set( 4, 3, 1 );
				// 将定向光添加到场景
				scene.add( directionalLight );

				// 在GUI中创建灯光控制文件夹
				const lightsFolder = gui.addFolder( '💡 灯光设置' );
				// 添加环境光强度控制滑块
				// 参数说明：
				// ambientLight: 目标对象
				// 'intensity': 要控制的属性
				// 0, 10, 0.001: 最小值、最大值、步长
				lightsFolder.add( ambientLight, 'intensity', 0, 10, 0.001 ).name( '环境光强度' );
				// 添加定向光强度控制滑块
				lightsFolder.add( directionalLight, 'intensity', 0, 20, 0.001 ).name( '定向光强度' );

				// ============= 网点效果参数设置 =============
				// 定义两个网点层：紫色阴影层和青色高光层
				// 每层包含控制网点外观的所有参数
				halftoneSettings = [

					// 第一层：紫色阴影层
					// 主要负责物体的暗部区域网点效果
					{
						count: 140,  // 网点密度：数值越大网点越密集
						color: '#fb00ff',  // 网点颜色：品红色
						direction: new THREE.Vector3( -0.4, -1, 0.5 ),  // 方向向量：控制网点随表面朝向的变化
						start: 1,  // 起始阈值：法线与方向向量点积的起始值
						end: 0,  // 结束阈值：法线与方向向量点积的结束值
						mixLow: 0,  // 低混合值：法线不匹配时的混合强度
						mixHigh: 0.5,  // 高混合值：法线匹配时的混合强度
						radius: 0.8  // 网点半径：控制网点的大小
					},

					// 第二层：青色高光层
					// 主要负责物体的亮部区域网点效果
					{
						count: 180,  // 比第一层更密集的网点
						color: '#94ffd1',  // 青绿色，用于高光区域
						direction: new THREE.Vector3( 0.5, 0.5, -0.2 ),  // 不同的方向向量
						start: 0.55,  // 不同的起始阈值
						end: 0.2,  // 不同的结束阈值
						mixLow: 0.5,  // 基础混合值更高
						mixHigh: 1,  // 最大混合值达到1
						radius: 0.8  // 网点半径与第一层相同
					}
				];

				// ============= 创建网点效果的统一变量和GUI控件 =============
				// 遍历每个网点设置，创建对应的着色器统一变量和交互控件
				for ( const index in halftoneSettings ) {

					// 获取当前网点层的设置
					const settings = halftoneSettings[ index ];

					// 创建统一变量对象，用于在CPU和GPU之间传递参数
					const uniforms = {};

					// 将每个设置转换为TSL统一变量
					// uniform()函数将JavaScript值转换为着色器可识别的统一变量
					uniforms.count = uniform( settings.count );  // 网点密度
					uniforms.color = uniform( color( settings.color ) );  // 网点颜色（需要转换为颜色类型）
					uniforms.direction = uniform( settings.direction );  // 方向向量
					uniforms.start = uniform( settings.start );  // 起始阈值
					uniforms.end = uniform( settings.end );  // 结束阈值
					uniforms.mixLow = uniform( settings.mixLow );  // 低混合值
					uniforms.mixHigh = uniform( settings.mixHigh );  // 高混合值
					uniforms.radius = uniform( settings.radius );  // 网点半径

					// 将统一变量存储回设置对象，方便后续访问
					settings.uniforms = uniforms;

					// 在GUI中为当前网点层创建控制文件夹
					// 使用emoji和索引标识不同的网点层
					const folder = gui.addFolder( `⚪️ 网点层 ${parseInt(index)+1}` );

					// 添加颜色选择控件
					// 创建临时对象包装颜色值，供GUI使用
					folder.addColor( { color: uniforms.color.value }, 'color' ).name( '网点颜色' );
					
					// 添加网点密度控制滑块
					// 参数说明：
					// uniforms.count: 目标对象和属性
					// 'value': 统一变量的值属性
					// 1, 200, 1: 最小值、最大值、步长
					folder.add( uniforms.count, 'value', 1, 200, 1 ).name( '网点密度' );
					
					// 添加方向向量控制滑块（X/Y/Z三个分量）
					folder.add( uniforms.direction.value, 'x', -1, 1, 0.01 ).name( '方向 X' ).listen();
					folder.add( uniforms.direction.value, 'y', -1, 1, 0.01 ).name( '方向 Y' ).listen();
					folder.add( uniforms.direction.value, 'z', -1, 1, 0.01 ).name( '方向 Z' ).listen();
					// .listen(): 使控件响应程序中的值变化
					
					// 添加阈值控制滑块
					folder.add( uniforms.start, 'value', -1, 1, 0.01 ).name( '起始阈值' );
					folder.add( uniforms.end, 'value', -1, 1, 0.01 ).name( '结束阈值' );
					
					// 添加混合值控制滑块
					folder.add( uniforms.mixLow, 'value', 0, 1, 0.01 ).name( '最小混合值' );
					folder.add( uniforms.mixHigh, 'value', 0, 1, 0.01 ).name( '最大混合值' );
					
					// 添加网点半径控制滑块
					folder.add( uniforms.radius, 'value', 0, 1, 0.01 ).name( '网点半径' );

				}

				// ============= 定义单个网点效果的TSL着色器函数 =============
				/**
				 * halftone函数 - 单个网点层的着色器实现
				 * 使用TSL（Three.js Shading Language）编写，在GPU上执行
				 * @param {number} count - 网点密度
				 * @param {vec3} color - 网点颜色
				 * @param {vec3} direction - 方向向量
				 * @param {float} start - 起始阈值
				 * @param {float} end - 结束阈值
				 * @param {float} radius - 网点半径
				 * @param {float} mixLow - 低混合值
				 * @param {float} mixHigh - 高混合值
				 * @returns {vec4} - 返回RGBA颜色，A通道为网点遮罩
				 */
				const halftone = Fn( ( [ count, color, direction, start, end, radius, mixLow, mixHigh ] ) => {

					// 1. 创建网格图案
					// 将屏幕坐标转换为网格UV坐标
					// screenCoordinate.xy: 获取当前片元的屏幕坐标
					// .div( screenSize.yy ): 除以屏幕高度进行归一化（使用yy确保是vec2）
					// .mul( count ): 乘以网点密度，创建网格重复
					let gridUv = screenCoordinate.xy.div( screenSize.yy ).mul( count );
					
					// 旋转网格45度（π/4弧度），创建菱形网格效果
					// rotate(): 旋转UV坐标
					// .mod( 1 ): 取模运算，创建重复的平铺图案
					gridUv = rotate( gridUv, Math.PI * 0.25 ).mod( 1 );

					// 2. 计算朝向强度
					// 基于表面法线与指定方向的匹配程度计算强度值
					// normalWorld: 当前片元在世界空间中的法线向量
					// .dot( direction.normalize() ): 计算法线与方向向量的点积
					// 点积结果范围[-1, 1]，表示两个向量的相似程度
					const orientationStrength = normalWorld
						.dot( direction.normalize() )  // 点积计算
						.remapClamp( end, start, 0, 1 );  // 将点积结果重映射到[0, 1]范围

					// 3. 创建网点遮罩
					// 基于网格坐标和朝向强度创建圆形网点图案
					const mask = orientationStrength
						.mul( radius )  // 乘以半径，控制网点大小
						.mul( 0.5 )  // 乘以0.5，调整最终半径
						// 创建圆形：计算当前片元到网格中心的距离
						// gridUv.sub( 0.5 ): 将UV坐标从[0,1]映射到[-0.5,0.5]
						// .length(): 计算到中心的距离
						// .step(): 阶梯函数，距离小于半径时返回1，否则返回0
						.step( gridUv.sub( 0.5 ).length() )
						// 根据朝向强度混合遮罩强度
						// mix(): 线性插值函数，根据orientationStrength在mixLow和mixHigh之间插值
						.mul( mix( mixLow, mixHigh, orientationStrength ) );

					// 4. 返回最终颜色
					// vec4(): 创建四维向量，前三个分量是RGB颜色，第四个分量是透明度（遮罩）
					return vec4( color, mask );

				} );

				// ============= 定义组合多个网点效果的TSL着色器函数 =============
				/**
				 * halftones函数 - 组合多个网点层的着色器函数
				 * 将多个网点层效果叠加到输入颜色上
				 * @param {vec4} input - 输入的基础颜色（来自标准材质）
				 * @returns {vec4} - 叠加网点效果后的最终颜色
				 */
				const halftones = Fn( ( [ input ] ) => {

					// 初始化输出为输入颜色（标准材质的基础颜色）
					const halftonesOutput = input;

					// 遍历所有网点设置，逐个叠加网点效果
					for ( const settings of halftoneSettings ) {

						// 计算当前网点层的效果
						const halfToneOutput = halftone( 
							settings.uniforms.count,  // 网点密度
							settings.uniforms.color,  // 网点颜色
							settings.uniforms.direction,  // 方向向量
							settings.uniforms.start,  // 起始阈值
							settings.uniforms.end,  // 结束阈值
							settings.uniforms.radius,  // 网点半径
							settings.uniforms.mixLow,  // 低混合值
							settings.uniforms.mixHigh  // 高混合值
						);
						
						// 将当前网点层混合到最终输出
						// 使用mix函数进行颜色混合：
						// halftonesOutput.rgb: 当前累积的颜色
						// halfToneOutput.rgb: 当前网点层的颜色
						// halfToneOutput.a: 网点遮罩作为混合因子（透明度）
						// .assign(): 将混合结果赋值回输出颜色
						halftonesOutput.rgb.assign( mix( halftonesOutput.rgb, halfToneOutput.rgb, halfToneOutput.a ) );

					}

					// 返回叠加所有网点效果后的最终颜色
					return halftonesOutput;

				} );

				// ============= 创建默认材质 =============
				// 创建标准节点材质，基础颜色为橙色
				const defaultMaterial = new THREE.MeshStandardNodeMaterial( { color: '#ff622e' } );
				// 将网点效果着色器函数连接到材质的输出节点
				// output: 材质的标准输出节点
				// halftones(output): 将标准输出作为输入传递给halftones函数
				defaultMaterial.outputNode = halftones( output );

				// 在GUI中创建材质控制文件夹
				const materialFolder = gui.addFolder( '🎨 材质设置' );
				// 添加材质基础颜色控制
				materialFolder.addColor( { color: defaultMaterial.color }, 'color' ).name( '基础颜色' );

				// ============= 创建几何体对象 =============
				// 创建圆环结几何体（复杂曲面，用于展示网点效果）
				const torusKnot = new THREE.Mesh(
					// 几何体参数：主半径0.6，管半径0.25，径向分段128，管状分段32
					new THREE.TorusKnotGeometry( 0.6, 0.25, 128, 32 ),
					// 使用应用了网点效果的材质
					defaultMaterial
				);
				// 设置位置：X轴偏移3个单位
				torusKnot.position.x = 3;
				// 添加到场景
				scene.add( torusKnot );

				// 创建球体几何体（简单曲面，对比效果）
				const sphere = new THREE.Mesh(
					// 几何体参数：半径1，宽度分段64，高度分段64
					new THREE.SphereGeometry( 1, 64, 64 ),
					// 使用同样的网点材质
					defaultMaterial
				);
				// 设置位置：X轴偏移-3个单位（与圆环结对称）
				sphere.position.x = -3;
				// 添加到场景
				scene.add( sphere );

				// ============= 加载外部3D模型 =============
				// 创建GLTF加载器实例
				const gltfLoader = new GLTFLoader();
				// 加载GLTF模型文件
				gltfLoader.load(
					// 模型文件路径
					'./models/gltf/Michelle.glb',
					// 加载成功回调函数
					( gltf ) => {

						// 获取模型根节点
						const model = gltf.scene;
						// 设置模型位置：向下偏移2个单位
						model.position.y = -2;
						// 设置缩放：统一缩放2.5倍
						model.scale.setScalar( 2.5 );
						
						// 遍历模型的所有子对象
						model.traverse( ( child ) => {
							// 如果子对象是网格
							if ( child.isMesh ) {
								// 将其材质也应用同样的网点效果
								// 注意：这里假设模型材质支持节点材质
								child.material.outputNode = halftones( output );
							}
						} );

						// 将加载的模型添加到场景
						scene.add( model );

					},
					// 加载进度回调函数（可选）
					undefined,
					// 加载错误回调函数（可选）
					( error ) => {
						console.error( 'GLTF模型加载失败:', error );
					}
				);

				// ============= 创建轨道控制器 =============
				// 将相机和渲染器DOM元素传入，创建交互控制器
				controls = new OrbitControls( camera, renderer.domElement );
				// 启用阻尼效果：惯性滑动，提升交互体验
				controls.enableDamping = true;
				// 设置最小缩放距离：相机不能离目标点更近
				controls.minDistance = 0.1;
				// 设置最大缩放距离：相机不能离目标点更远
				controls.maxDistance = 50;

				// ============= 添加窗口大小变化监听器 =============
				// 当浏览器窗口大小改变时，调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

			}

			// ============= 窗口大小变化处理函数 =============
			/**
			 * onWindowResize函数 - 响应窗口大小变化
			 * 更新相机宽高比和渲染器尺寸，确保渲染画面正确适配
			 */
			function onWindowResize() {

				// 更新相机的宽高比为当前窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此方法使更改生效）
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸为当前窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// ============= 动画循环函数 =============
			/**
			 * animate函数 - 每一帧执行的动画循环
			 * 负责更新控制器、计算动画、渲染场景
			 * async关键字表示函数可能包含异步操作
			 */
			async function animate() {

				// 更新轨道控制器：处理用户输入，更新相机位置
				// 必须每帧调用，特别是启用了阻尼效果时
				controls.update();

				// 获取自时钟启动以来经过的时间（秒）
				// 用于基于时间的动画计算
				const time = clock.getElapsedTime();
				
				// 动态更新第二个网点层（青色高光层）的方向
				// 使用三角函数创建周期性的动画效果
				// Math.cos(time): 随时间变化的余弦值，范围[-1, 1]
				// Math.sin(time): 随时间变化的正弦值，范围[-1, 1]
				// 这使得方向向量在XY平面上做圆周运动
				halftoneSettings[ 1 ].uniforms.direction.value.x = Math.cos( time );
				halftoneSettings[ 1 ].uniforms.direction.value.y = Math.sin( time );
				// 注意：Z方向保持不变，只改变X和Y

				// 渲染场景：将3D场景绘制到2D画布上
				// 参数说明：
				// scene: 要渲染的3D场景
				// camera: 观察场景的相机
				renderer.render( scene, camera );

			}

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