<!-- Three.js WebGPU 阴影映射技术演示
🎯 整体功能概述
这是一个基于 Three.js + WebGPU 技术栈的高级3D图形渲染演示，重点展示实时阴影映射系统。项目创建了一个动态交互式3D场景，包含复杂的照明、阴影、自定义着色器效果和动画系统。

📁 项目文件结构
text
项目文件结构：
├── index.html              # 主HTML文件
├── example.css            # 样式文件（外部引用）
├── /jsm/                  # Three.js附加组件目录
│   ├── controls/          # 控制器
│   ├── inspector/         # 调试工具
│   └── ...               # 其他组件
└── /build/                # Three.js构建文件
    ├── three.webgpu.js    # WebGPU渲染器核心
    └── three.tsl.js       # TSL着色器语言
🔧 核心技术栈
1. 渲染技术
Three.js WebGPU 渲染器：使用新一代WebGPU API替代传统的WebGL

TSL（Three.js Shading Language）：声明式着色器编程语言

PBR（基于物理的渲染）：使用Phong光照模型

2. 阴影系统
实时阴影映射：多光源阴影投射与接收

PCF软阴影：使用shadow.radius实现阴影边缘模糊

阴影优化：

阴影偏移（shadow.bias）解决阴影失真

分层阴影映射（多分辨率阴影贴图）

阴影相机裁剪面优化

3. 照明系统
多光源混合照明：

环境光（Ambient Light）：基础均匀照明

平行光（Directional Light）：模拟太阳光，投射方向性阴影

聚光灯（Spot Light）：锥形区域照明，投射透视阴影

动态光照：光源位置和方向随时间变化

🎨 核心视觉特效
1. 自定义材质效果
javascript
// 片段丢弃技术：创建网格状半透明效果
const discardNode = hash( vertexIndex ).greaterThan( 0.5 );
materialCustomShadow.colorNode = Fn( () => {
    discardNode.discard();  // 随机丢弃50%片段
    return materialColor;
} )();
2. 分形噪声纹理
javascript
// 使用3D分形噪声创建自然地面纹理
planeMaterial.colorNode = Fn( () => {
    return mx_fractal_noise_vec3( positionWorld.mul( 2 ) )
        .saturate()
        .zzz
        .mul( 0.2 )
        .add( 0.5 );
} )();
3. 动态阴影扰动
javascript
// 地面阴影位置添加噪声扰动
planeMaterial.receivedShadowPositionNode = Fn( () => {
    const pos = positionWorld.toVar();
    pos.xz.addAssign( mx_fractal_noise_vec3( positionWorld.mul( 2 ) ).saturate().xz );
    return pos;
} )();
🚀 主要技术点详解
1. WebGPU 优势
javascript
// WebGPU相比WebGL的主要改进：
- 更低的CPU开销，更高的并行性
- 显式内存管理，更好的性能控制
- 计算着色器支持
- 多线程渲染支持
2. 阴影映射流程
text
阴影渲染流程：
1. 从光源视角渲染场景 → 生成深度贴图（Shadow Map）
2. 从相机视角渲染场景
3. 对每个片段：计算到光源的距离
4. 与深度贴图比较 → 判断是否在阴影中
5. 应用阴影颜色和模糊效果
3. 性能优化策略
javascript
// 1. 阴影贴图分辨率优化
spotLight.shadow.mapSize.width = 2048;  // 平衡质量与性能
spotLight.shadow.mapSize.height = 2048;

// 2. 阴影相机裁剪面优化
spotLight.shadow.camera.near = 8;  // 避免无效渲染
spotLight.shadow.camera.far = 200;

// 3. 几何体复用
const pillar2 = pillar1.clone();  // 共享几何数据
4. 交互系统
轨道控制器（OrbitControls）：

左键拖拽：旋转视角

右键拖拽：平移场景

滚轮：缩放场景

调试检查器（Inspector）：

实时查看场景图

动态修改材质参数

性能分析工具

🔄 动画系统
1. 时间驱动动画
javascript
// 使用Clock实现帧率无关动画
const delta = clock.getDelta();  // 获取帧间时间差
torusKnot.rotation.y += 0.5 * delta;  // 恒定速度旋转
2. 多对象同步动画
圆环结：三轴不同速度旋转，创建复杂运动

平行光组：围绕Y轴旋转，模拟太阳运动

平行光位置：正弦波上下运动，创建动态光照

3. 正弦波动画
javascript
// 使用正弦函数创建平滑周期性运动
dirLight.position.z = 17 + Math.sin( time * 0.001 ) * 5;
// time * 0.001: 控制运动频率
// *5: 控制运动幅度
// +17: 中心位置
🎮 用户交互功能
1. 相机控制
自由旋转、平移、缩放

距离限制（minDistance: 7, maxDistance: 40）

平滑过渡动画

2. 响应式设计
自动适应窗口大小变化

高DPI屏幕支持（devicePixelRatio）

移动端触摸支持

3. 调试功能
按F12打开场景检查器

实时参数调整

性能监控

📊 技术规格
渲染质量设置
阴影质量：2048×2048 阴影贴图

抗锯齿：开启（antialias: true）

色调映射：ACES Filmic（电影级）

雾效：指数雾，范围50-100单位

几何复杂度
圆环结：75×80 细分网格

圆柱：32 边数

地面：200×200 单位平面，3倍缩放

光照参数
环境光：强度2.0

平行光：强度3.0，浅蓝色

聚光灯：强度400，浅红色，36度锥角

🚨 性能注意事项
阴影性能：2048×2048阴影贴图对性能要求较高

分形噪声：实时计算分形噪声有一定性能开销

透明度排序：半透明材质需要正确的渲染顺序

WebGPU兼容性：需要现代浏览器支持WebGPU标准 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题 -->
		<title>Three.js WebGPU 技术演示 - 高级阴影映射系统</title>
		
		<!-- 字符编码设置 -->
		<meta charset="utf-8">
		
		<!-- 视口设置，适配移动设备，禁止用户手动缩放 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 外部样式表链接 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

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

			<!-- 标题区域容器 -->
			<div class="title-wrapper">
				<!-- 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js 图形引擎</a>
				<!-- 副标题分隔线 -->
				<span class="separator"> | </span>
				<!-- 当前演示主题 -->
				<span class="demo-title">高级阴影映射技术演示</span>
			</div>

			<!-- 演示描述文字 -->
			<div class="description" style="margin-top: 20px;">
				<small>
					<!-- 详细的功能描述 -->
					<strong>功能概述：</strong>本示例展示了基于 WebGPU 技术的高级实时阴影渲染系统。
					包含动态光源阴影、自定义着色器效果、分形噪声纹理和交互式场景控制。
				</small>
			</div>
			
			
		</div>

		<!-- 浏览器模块导入映射配置 -->
		<!-- 此配置让浏览器知道如何解析模块导入语句 -->
		<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核心库
			// 这里使用命名空间导入，将整个three.webgpu模块导入为THREE对象
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）函数
			// 这些函数用于在节点材质中创建自定义着色器效果
			import { 
				mx_fractal_noise_vec3,  // 3D分形噪声函数，用于生成自然纹理
				positionWorld,           // 世界空间位置变量
				vec4,                    // 4维向量构造函数
				Fn,                      // 函数封装器，用于创建着色器函数
				color,                   // 颜色构造函数
				vertexIndex,             // 顶点索引变量
				hash                     // 哈希函数，用于生成伪随机数
			} from 'three/tsl';

			// 导入轨道控制器
			// 允许用户用鼠标控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入调试检查器
			// 提供图形化的场景调试界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			
			// 核心Three.js对象
			let camera;      // 场景相机，决定观察视角
			let scene;       // 3D场景容器，包含所有对象
			let renderer;    // WebGPU渲染器
			let clock;       // 时间管理器，用于动画计时
			
			// 光源对象
			let dirLight;    // 平行光（模拟太阳光）
			let spotLight;   // 聚光灯（模拟手电筒等锥形光源）
			
			// 场景对象
			let torusKnot;   // 圆环结几何体
			let dirGroup;    // 平行光的容器组，用于统一控制

			// ========== 初始化函数调用 ==========
			
			// 页面加载完成后执行初始化
			init();

			// ========== 主初始化函数 ==========
			
			/**
			 * 初始化函数
			 * 负责创建场景、相机、光源、几何体、材质、渲染器等所有必要组件
			 * 是整个3D应用程序的启动入口
			 */
			function init() {
				
				// ---------- 相机设置 ----------
				
				// 创建透视相机（Perspective Camera）
				// 参数说明：
				// 45 - 视野角度（FOV），单位度，控制相机能看到多宽的范围
				// window.innerWidth / window.innerHeight - 纵横比，匹配浏览器窗口
				// 1 - 近裁剪平面，距离相机小于此值的物体不被渲染
				// 1000 - 远裁剪平面，距离相机大于此值的物体不被渲染
				camera = new THREE.PerspectiveCamera( 
					45, 
					window.innerWidth / window.innerHeight, 
					1, 
					1000 
				);
				
				// 设置相机初始位置
				// (x, y, z) 坐标：
				// x=0: 中心位置
				// y=10: 离地面10个单位高度
				// z=20: 向后20个单位，获得更好的观察角度
				camera.position.set( 0, 10, 20 );
				
				// ---------- 场景设置 ----------
				
				// 创建3D场景容器
				scene = new THREE.Scene();
				
				// 使用TSL节点设置场景背景色
				// 这里创建深蓝色背景（RGB: 0x222244）
				scene.backgroundNode = color( 0x222244 );
				
				// 添加雾效（Fog）
				// 参数说明：
				// 0x222244 - 雾的颜色（与背景色一致）
				// 50 - 雾效开始距离（从相机开始50个单位后出现雾）
				// 100 - 雾效完全覆盖距离（100个单位后完全看不清）
				scene.fog = new THREE.Fog( 0x222244, 50, 100 );
				
				// ---------- 光源系统设置 ----------
				
				// 1. 环境光（Ambient Light）
				// 无方向的全场景均匀照明，提供基础亮度
				// 参数：颜色(0x444444)，强度(2)
				scene.add( new THREE.AmbientLight( 0x444444, 2 ) );
				
				// 2. 聚光灯（Spot Light）- 红色调
				// 模拟锥形光照射效果，如舞台灯、手电筒
				spotLight = new THREE.SpotLight( 
					0xff8888,  // 颜色：浅红色
					400        // 强度：较高强度
				);
				
				// 聚光灯参数配置
				spotLight.angle = Math.PI / 5;       // 光束角度：36度（π/5弧度）
				spotLight.penumbra = 0.3;            // 半影范围：30%，使边缘过渡柔和
				spotLight.position.set( 8, 10, 5 );  // 位置：右上角
				spotLight.castShadow = true;         // 启用阴影投射
				
				// 聚光灯阴影相机参数
				// 阴影相机是用于生成阴影贴图的虚拟相机
				spotLight.shadow.camera.near = 8;    // 近裁剪面：8个单位
				spotLight.shadow.camera.far = 200;   // 远裁剪面：200个单位
				spotLight.shadow.mapSize.width = 2048;   // 阴影贴图宽度：2048像素（高质量）
				spotLight.shadow.mapSize.height = 2048;  // 阴影贴图高度：2048像素
				spotLight.shadow.bias = -0.002;      // 阴影偏移：-0.002，解决阴影失真问题
				spotLight.shadow.radius = 4;         // 阴影模糊半径：4像素，柔化阴影边缘
				
				// 将聚光灯添加到场景
				scene.add( spotLight );
				
				// 3. 平行光（Directional Light）- 蓝色调
				// 模拟太阳光，所有光线平行照射
				dirLight = new THREE.DirectionalLight( 
					0x8888ff,  // 颜色：浅蓝色
					3          // 强度：中等强度
				);
				
				// 平行光位置设置
				dirLight.position.set( 3, 12, 17 );
				dirLight.castShadow = true;  // 启用阴影投射
				
				// 平行光阴影相机设置（使用正交相机）
				// 正交相机用于平行光阴影，因为平行光没有透视
				dirLight.shadow.camera.near = 0.1;     // 近裁剪面：0.1个单位
				dirLight.shadow.camera.far = 500;      // 远裁剪面：500个单位
				dirLight.shadow.camera.right = 17;     // 右边界：+17单位
				dirLight.shadow.camera.left = -17;     // 左边界：-17单位
				dirLight.shadow.camera.top = 17;       // 上边界：+17单位
				dirLight.shadow.camera.bottom = -17;   // 下边界：-17单位
				dirLight.shadow.mapSize.width = 2048;  // 阴影贴图分辨率
				dirLight.shadow.mapSize.height = 2048;
				dirLight.shadow.radius = 4;            // 阴影模糊半径
				dirLight.shadow.bias = -0.0005;        // 阴影偏移量
				
				// 创建平行光的容器组
				// 这样可以对整个组进行旋转，让光线动态变化
				dirGroup = new THREE.Group();
				dirGroup.add( dirLight );   // 将平行光添加到组中
				scene.add( dirGroup );      // 将组添加到场景
				
				// ---------- 几何体创建 ----------
				
				// 1. 圆环结几何体（Torus Knot）
				// 复杂几何体，用于展示阴影和材质效果
				const geometry = new THREE.TorusKnotGeometry( 
					25,    // 半径：主要圆环半径
					8,     // 管径：圆环截面的半径
					75,    // 分段数：圆环细分
					80     // 分段数：管道细分
				);
				
				// 基础材质：Phong着色模型
				const material = new THREE.MeshPhongNodeMaterial( {
					color: 0x999999,      // 基础颜色：灰色
					shininess: 0,         // 光泽度：0表示无高光
					specular: 0x222222    // 高光颜色：深灰色
				} );
				
				// 创建自定义阴影材质（基于基础材质克隆）
				const materialCustomShadow = material.clone();
				materialCustomShadow.transparent = true;  // 启用透明度
				
				// 定义自定义材质颜色（RGBA格式）
				// vec4(红, 绿, 蓝, 透明度)
				const materialColor = vec4( 1, 0, 1, 0.5 );  // 品红色，50%透明度
				
				// 创建片段丢弃节点
				// 使用哈希函数和顶点索引生成随机值
				// 如果随机值大于0.5，则丢弃该片段
				// 这样可以创建网格状半透明效果
				const discardNode = hash( vertexIndex ).greaterThan( 0.5 );
				
				// 设置自定义材质的颜色节点
				// 使用TSL函数包装器创建着色器代码
				materialCustomShadow.colorNode = Fn( () => {
					
					// 丢弃50%的片段
					discardNode.discard();
					
					// 返回品红色
					return materialColor;
					
				} )();  // 立即执行函数
				
				// 设置自定义材质的阴影投射节点
				// 使用相同的丢弃逻辑，确保阴影也应用相同的图案
				materialCustomShadow.castShadowNode = Fn( () => {
					
					// 丢弃50%的片段
					discardNode.discard();
					
					// 返回材质颜色
					return materialColor;
					
				} )();  // 立即执行函数
				
				// 创建圆环结网格对象
				torusKnot = new THREE.Mesh( geometry, materialCustomShadow );
				torusKnot.scale.multiplyScalar( 1 / 18 );  // 缩小到原尺寸的1/18
				torusKnot.position.y = 3;                  // 抬高到y=3位置
				torusKnot.castShadow = true;               // 投射阴影
				torusKnot.receiveShadow = true;            // 接收阴影
				scene.add( torusKnot );                    // 添加到场景
				
				// 2. 圆柱几何体（用于创建支柱）
				const cylinderGeometry = new THREE.CylinderGeometry( 
					0.75,   // 顶部半径
					0.75,   // 底部半径（相同值表示圆柱）
					7,      // 高度
					32      // 分段数
				);
				
				// 创建第一个支柱
				const pillar1 = new THREE.Mesh( cylinderGeometry, material );
				pillar1.position.set( 8, 3.5, 8 );  // 设置位置
				pillar1.castShadow = true;          // 投射阴影
				
				// 克隆创建其他三个支柱
				// 克隆是高效的，共享几何体和材质数据
				const pillar2 = pillar1.clone();
				pillar2.position.set( 8, 3.5, -8 );  // 右下角
				
				const pillar3 = pillar1.clone();
				pillar3.position.set( -8, 3.5, 8 );  // 左上角
				
				const pillar4 = pillar1.clone();
				pillar4.position.set( -8, 3.5, -8 ); // 左下角
				
				// 将所有支柱添加到场景
				scene.add( pillar1 );
				scene.add( pillar2 );
				scene.add( pillar3 );
				scene.add( pillar4 );
				
				// 3. 地面平面
				const planeGeometry = new THREE.PlaneGeometry( 200, 200 );  // 200x200的平面
				
				// 地面材质
				const planeMaterial = new THREE.MeshPhongNodeMaterial();
				planeMaterial.color.setHex( 0x999999 );    // 基础颜色：灰色
				planeMaterial.shininess = 0;               // 无光泽
				planeMaterial.specular.setHex( 0x111111 ); // 低强度高光
				
				// 地面接收阴影位置的自定义节点
				// 添加分形噪声扰动，使阴影边缘不规则
				planeMaterial.receivedShadowPositionNode = Fn( () => {
					
					// 获取世界空间位置
					const pos = positionWorld.toVar();
					
					// 在XZ平面添加分形噪声
					// mx_fractal_noise_vec3: 生成3D分形噪声
					// positionWorld.mul(2): 缩放坐标，改变噪声频率
					// saturate(): 将值限制在[0,1]范围
					// .xz: 取噪声的X和Z分量
					pos.xz.addAssign( mx_fractal_noise_vec3( positionWorld.mul( 2 ) ).saturate().xz );
					
					// 返回扰动后的位置
					return pos;
					
				} )();
				
				// 地面颜色节点
				// 使用分形噪声创建自然纹理
				planeMaterial.colorNode = Fn( () => {
					
					// 获取世界空间位置
					const pos = positionWorld.toVar();
					
					// 添加分形噪声扰动（与阴影位置相同）
					pos.xz.addAssign( mx_fractal_noise_vec3( positionWorld.mul( 2 ) ).saturate().xz );
					
					// 生成灰度颜色：
					// 1. 生成分形噪声
					// 2. 取Z分量（.zzz复制三次变成RGB）
					// 3. 乘以0.2减少对比度
					// 4. 加0.5提高整体亮度
					// 结果：基于噪声的灰度纹理
					return mx_fractal_noise_vec3( positionWorld.mul( 2 ) )
						.saturate()      // 限制到[0,1]
						.zzz             // 取Z分量并复制到RGB三个通道
						.mul( 0.2 )      // 降低对比度
						.add( 0.5 );     // 提高亮度
						
				} )();
				
				// 创建地面网格
				const ground = new THREE.Mesh( planeGeometry, planeMaterial );
				ground.rotation.x = - Math.PI / 2;   // 旋转90度，使平面水平（Three.js中平面默认是垂直的）
				ground.scale.multiplyScalar( 3 );    // 放大3倍
				ground.castShadow = true;            // 投射阴影（边缘部分）
				ground.receiveShadow = true;         // 接收阴影
				scene.add( ground );
				
				// ---------- 渲染器设置 ----------
				
				// 创建WebGPU渲染器
				// WebGPU是新一代图形API，替代WebGL
				renderer = new THREE.WebGPURenderer( { 
					antialias: true  // 启用抗锯齿，平滑边缘
				} );
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina）上提高渲染分辨率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 启用阴影映射
				renderer.shadowMap.enabled = true;
				
				// 设置色调映射
				// ACESFilmic是电影级色调映射算法，提供更自然的颜色和高光处理
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 添加调试检查器
				// 按F12可以打开场景调试界面
				renderer.inspector = new Inspector();
				
				// 将渲染器的Canvas元素添加到DOM中
				document.body.appendChild( renderer.domElement );
				
				// ---------- 用户交互控制 ----------
				
				// 创建轨道控制器
				// 允许用户用鼠标控制相机
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 2, 0 );      // 设置控制中心点
				controls.minDistance = 7;             // 最小缩放距离
				controls.maxDistance = 40;            // 最大缩放距离
				controls.update();                    // 初始化控制器
				
				// ---------- 其他初始化 ----------
				
				// 创建Three.js时钟对象
				// 用于获取帧间时间差，实现平滑动画
				clock = new THREE.Clock();
				
				// 添加窗口大小改变事件监听器
				// 当浏览器窗口大小改变时，调整相机和渲染器
				window.addEventListener( 'resize', resize );
				
				// 初始化完成
				console.log('Three.js WebGPU阴影映射示例初始化完成');
			}

			// ========== 窗口大小调整处理函数 ==========
			
			/**
			 * 响应窗口大小变化
			 * 当浏览器窗口改变大小时，重新设置相机和渲染器参数
			 */
			function resize() {
				
				// 更新相机纵横比为新的窗口比例
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 必须调用updateProjectionMatrix()来应用新的纵横比
				camera.updateProjectionMatrix();
				
				// 更新渲染器大小为新的窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				console.log('窗口大小已调整为:', window.innerWidth, 'x', window.innerHeight);
			}

			// ========== 动画循环函数 ==========
			
			/**
			 * 动画主循环函数
			 * 由requestAnimationFrame（通过setAnimationLoop）驱动
			 * 在每一帧浏览器重绘时被调用
			 * @param {number} time - 从页面加载开始到现在的毫秒数
			 */
			function animate( time ) {
				
				// 获取上一帧到当前帧的时间差（秒）
				// 使用时间差而不是固定值，确保动画在不同刷新率设备上速度一致
				const delta = clock.getDelta();
				
				// ---------- 对象动画 ----------
				
				// 1. 旋转圆环结
				// 每个轴以不同速度旋转，创建复杂旋转效果
				torusKnot.rotation.x += 0.25 * delta;  // X轴：0.25弧度/秒
				torusKnot.rotation.y += 0.5 * delta;   // Y轴：0.5弧度/秒（更快）
				torusKnot.rotation.z += 1 * delta;     // Z轴：1弧度/秒（最快）
				
				// 2. 旋转平行光组
				// 让光源随时间旋转，创建动态光照效果
				dirGroup.rotation.y += 0.7 * delta;    // 围绕Y轴旋转
				
				// 3. 平行光Z轴位置动画
				// 使用正弦函数创建周期性上下运动
				// Math.sin(time * 0.001): 
				//   time * 0.001 - 将毫秒转换为秒，并减慢频率
				//   正弦函数产生[-1,1]的周期值
				// *5 - 放大运动幅度到[-5,5]
				// +17 - 基础位置偏移
				dirLight.position.z = 17 + Math.sin( time * 0.001 ) * 5;
				
				// ---------- 渲染场景 ----------
				
				// 调用渲染器渲染当前场景和相机
				// 这是整个渲染管线的入口点
				renderer.render( scene, camera );
				
				// 帧率监控（开发时使用）
				// 如果需要监控帧率，可以取消注释下面的代码
				// const fps = 1 / delta;
				// if (time % 1000 < 16) console.log('FPS:', Math.round(fps));
			}

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