<!-- Three.js WebGL 2.0 无缓冲区几何体生成示例 - 功能与技术详解
🎯 核心功能概述
本示例展示了一种革命性的3D几何体生成方法：完全在GPU着色器中动态生成几何顶点数据，无需在JavaScript中预定义或上传任何顶点缓冲数据。传统的Three.js应用通常需要将顶点位置、颜色等数据从CPU传输到GPU，而本示例彻底颠覆了这一模式。

主要功能特性：
程序化几何生成：在顶点着色器中实时生成10000个三角形（30000个顶点）

随机化视觉效果：每个三角形有独特的随机位置和颜色

动态动画：几何体随时间平滑旋转，展示3D空间效果

完整的WebGL 2.0管线：使用现代WebGL特性和GLSL ES 3.0语法

🔧 主要技术亮点
1. 无缓冲区几何体技术（核心创新）
传统 vs 创新方法对比：
传统方法	本示例方法
CPU端创建顶点数组	GPU端实时生成顶点数据
使用BufferAttribute设置数据	完全不使用BufferAttribute
需要上传数据到GPU	无CPU-GPU数据传输开销
可进行视锥体裁剪	禁用裁剪（frustumCulled: false）
技术实现：
javascript
// 传统方式：需要定义顶点缓冲区
const positions = new Float32Array([...]);
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// 本示例方式：空几何体，完全依赖着色器
const geometry = new THREE.BufferGeometry();
geometry.setDrawRange(0, 30000); // 仅告诉WebGL要绘制多少个顶点
2. 着色器中的高级伪随机数生成系统
基于哈希的噪声算法：
glsl
// 关键技术点：
1. 整数哈希函数（位运算混合）
2. IEEE 754浮点位操作
3. 可重复的随机序列
4. 分层随机生成策略
随机数生成流程：
text
输入坐标/索引 → 浮点位模式 → 整数哈希 → 尾数提取 → 标准化输出
      ↓           ↓           ↓          ↓           ↓
    vec2       uint       哈希运算   [1.0,2.0)    [0.0,1.0)
3. 智能顶点索引利用
glsl
// 核心技巧：使用gl_VertexID进行顶点分组
int triangleIndex = gl_VertexID / 3;  // 三角形索引
int vertexInTriangle = gl_VertexID % 3; // 三角形内顶点索引

// 应用：
// 1. 同一三角形的顶点共享基础位置
// 2. 每个顶点有独立的细节偏移
// 3. 颜色基于三角形索引而非顶点索引
4. 双层随机位置生成
glsl
// 第一层：基础位置（三角形级）
vec3 basePosition = pseudoRandomVec3(-1.0, +1.0, gl_VertexID/3);

// 第二层：细节偏移（顶点级）
vec3 detailOffset = scale * pseudoRandomVec3(-1.0, +1.0, gl_VertexID);

// 最终位置：基础 + 细节
vec3 finalPosition = basePosition + detailOffset;
5. 现代WebGL 2.0特性应用
GLSL ES 3.0特性：
in/out替代attribute/varying

texture函数统一

增强的整数支持

更灵活的循环和条件语句

WebGL 2.0特性：
顶点ID支持（gl_VertexID）

统一缓冲区对象（UBO）

变换反馈（Transform Feedback，本示例未使用但相关）

6. Three.js高级材质配置
javascript
const material = new THREE.RawShaderMaterial({
    uniforms: { seed: { value: 42 } },
    vertexShader: customVertexShader,
    fragmentShader: customFragmentShader,
    side: THREE.DoubleSide,      // 双面渲染
    glslVersion: THREE.GLSL3     // 指定GLSL版本
});
7. 性能优化策略
优点：
减少CPU开销：无需在JavaScript中处理大量顶点数据

减少内存传输：无顶点数据从CPU到GPU的传输

GPU并行计算：顶点生成完全在GPU并行执行

挑战：
无法进行视锥体裁剪：需要渲染所有三角形

着色器复杂度增加：可能影响低端设备性能

调试困难：GPU端计算难以调试

8. 视觉效果技术
色彩系统：
颜色范围：[0.25, 1.0]（避免过暗颜色）

基于三角形索引：确保三角形颜色一致

平滑颜色插值：由光栅化器自动处理

雾效增强：
javascript
scene.fog = new THREE.Fog(0x050505, 2000, 3500);
// 起始距离2000，结束距离3500
// 增强深度感知，优化性能（远处物体逐渐消失）
🚀 技术应用场景
适合使用此技术的场景：
程序化生成内容：地形、云层、星空等自然现象

粒子系统：大量简单几何体的动态生成

实时几何变形：GPU计算的物理模拟

数据可视化：动态生成的数据点云

艺术效果：生成式艺术和抽象可视化

与传统方法的结合建议：
javascript
// 混合方法：部分数据预定义，部分动态生成
// 例如：使用预定义的基本形状 + 着色器添加细节
📊 性能特点分析
性能影响因素：
顶点数量：30000顶点在现代GPU上适中

着色器复杂度：哈希计算相对较重但可控

绘制调用：单一绘制调用，批次效率高

内存使用：GPU内存使用极低

优化建议：
javascript
// 1. 减少哈希计算复杂度
// 2. 使用更简单的随机数算法
// 3. 适当减少三角形数量
// 4. 使用计算着色器预生成数据（WebGL 2.0） -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：描述当前示例的主要内容 -->
		<title>Three.js WebGL 2.0演示 - BufferGeometry(缓冲几何体) 无顶点缓冲区的几何体生成</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">
		<!-- 
			width=device-width：视口宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放页面
			minimum-scale=1.0：最小缩放比例为1.0
			maximum-scale=1.0：最大缩放比例为1.0
		-->
		
		<!-- 外部CSS样式表链接：引入页面样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- 
				Three.js官网链接：
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全特性，防止新页面访问原页面的window.opener属性
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL 2.0技术演示 - 使用着色器动态生成几何体顶点数据（无预定义顶点缓冲区）
			<br>
			<small>本示例展示了如何在顶点着色器中完全生成几何体数据，而不需要预定义的顶点缓冲区</small>
		</div>

		<!-- 顶点着色器代码 -->
		<script id="vertexShader" type="x-shader/x-vertex">
			// ==================== Uniform变量声明 ====================
			// Uniform变量是从JavaScript传递到着色器中的常量数据，在整个绘制调用中保持不变
			
			uniform mat4 modelViewMatrix;	// 模型视图矩阵：将模型从本地坐标系变换到相机观察坐标系
			uniform mat4 projectionMatrix;	// 投影矩阵：将观察坐标系变换到裁剪坐标系（标准化设备坐标系）
			uniform float seed;				// 随机种子：用于生成可重复的伪随机序列，确保每次运行结果一致

			// ==================== IEEE 754浮点数常量 ====================
			// 这些常量用于处理浮点数的位表示，用于高质量的随机数生成
			
			const uint ieeeMantissa = 0x007FFFFFu;	// IEEE 754单精度浮点数的尾数部分掩码（23位全1）
			const uint ieeeOne = 0x3F800000u;		// 浮点数1.0的32位二进制表示（指数为0，尾数为0）

			// ==================== 哈希函数定义 ====================
			// 这些函数用于生成伪随机数，基于整数哈希技术
			
			/**
			 * 32位无符号整数哈希函数
			 * @param {uint} x - 输入的无符号整数
			 * @return {uint} - 哈希后的无符号整数
			 * 算法原理：通过一系列位移和位运算打乱输入位的分布
			 */
			uint hash(uint x) {
				x += ( x << 10u );	// 左移10位并加到原值：增加低位的复杂性
				x ^= ( x >>  6u );	// 右移6位并与原值异或：混合高位和低位
				x += ( x <<  3u );	// 左移3位并加到原值：进一步增加复杂性
				x ^= ( x >> 11u );	// 右移11位并与原值异或：确保高位影响低位
				x += ( x << 15u );	// 左移15位并加到原值：最终混合
				return x;
			}

			/**
			 * 二维无符号整数向量哈希函数
			 * @param {uvec2} v - 二维无符号整数向量
			 * @return {uint} - 哈希后的无符号整数
			 * 通过嵌套哈希确保两个维度都影响最终结果
			 */
			uint hash(uvec2 v) { 
				// 先对y分量哈希，然后与x分量异或，最后对结果哈希
				return hash( v.x ^ hash(v.y) ); 
			}

			/**
			 * 基于哈希的噪声函数
			 * @param {vec2} xy - 二维坐标输入
			 * @return {float} - [0, 1)范围内的随机浮点数
			 * 将浮点坐标转换为位模式进行哈希，然后转换回浮点数
			 */
			float hashNoise(vec2 xy) {
				// floatBitsToUint：将浮点数的位表示直接解释为无符号整数
				uint m = hash(floatBitsToUint(xy));

				// 保留尾数部分：去除符号位和指数位，只保留23位尾数
				m &= ieeeMantissa;
				// 设置指数为0：将尾数与1.0的指数部分组合，得到[1.0, 2.0)范围内的数
				m |= ieeeOne;

				// uintBitsToFloat：将无符号整数的位表示解释为浮点数
				// 减去1.0得到[0.0, 1.0)范围的随机数
				return uintBitsToFloat( m ) - 1.0;
			}

			/**
			 * 在指定范围内生成伪随机数
			 * @param {float} lower - 范围下限
			 * @param {float} delta - 范围大小（上限-下限）
			 * @param {vec2} xy - 二维坐标作为随机种子
			 * @return {float} - [lower, lower+delta)范围内的随机数
			 */
			float pseudoRandom(float lower, float delta, in vec2 xy) {
				return lower + delta * hashNoise(xy);
			}

			/**
			 * 生成三维伪随机向量
			 * @param {float} lower - 每个分量的下限
			 * @param {float} upper - 每个分量的上限
			 * @param {int} index - 索引值，用于生成不同的随机序列
			 * @return {vec3} - 三维随机向量，每个分量在[lower, upper)范围内
			 */
			vec3 pseudoRandomVec3(float lower, float upper, int index) {
				float delta = upper - lower;
				// 为每个分量使用不同的种子坐标，确保xyz分量独立
				float x = pseudoRandom(lower, delta, vec2(index, 0));
				float y = pseudoRandom(lower, delta, vec2(index, 1));
				float z = pseudoRandom(lower, delta, vec2(index, 2));
				return vec3(x, y, z);
			}

			// ==================== 输出变量声明 ====================
			// out关键字声明输出变量，将数据从顶点着色器传递到片段着色器
			out vec3 vColor;	// 顶点颜色，传递给片段着色器进行插值

			// ==================== 顶点着色器主函数 ====================
			/**
			 * 顶点着色器的主要执行函数
			 * 每个顶点调用一次，负责计算顶点的最终位置和其他属性
			 */
			void main()	{
				// 次要位置偏移的缩放因子：使每个顶点在基础位置上有轻微偏移
				const float scale = 1.0/64.0;  // 1/64 = 0.015625，很小的偏移量
				
				// ===== 生成顶点位置 =====
				// 使用两层随机生成创建丰富的位置变化：
				// 1. 第一层：基于三角形索引生成基础位置（gl_VertexID/3确保三角形内顶点位置相同）
				//    - 范围：[-1.0, +1.0]
				//    - gl_VertexID/3：整数除法，同一三角形的三个顶点得到相同的索引
				// 2. 第二层：基于顶点索引生成细微偏移，增加几何细节
				//    - 范围：[-scale, +scale]
				//    - gl_VertexID：每个顶点有唯一的索引
				// 这种分层方法既保证了三角形的整体形状，又增加了表面细节
				vec3 position = pseudoRandomVec3(-1.0, +1.0, gl_VertexID/3) + 
							   scale * pseudoRandomVec3(-1.0, +1.0, gl_VertexID);
				
				// ===== 生成顶点颜色 =====
				// 基于三角形索引生成颜色，确保同一三角形的顶点颜色一致
				// 范围：[0.25, 1.0] - 避免颜色太暗，确保良好的视觉效果
				vec3 color = pseudoRandomVec3(0.25, 1.0, gl_VertexID/3);
				
				// ===== 计算裁剪空间位置 =====
				// 这是顶点着色器最重要的任务：
				// 1. vec4(position, 1.0)：将三维位置转换为齐次坐标（w=1表示点）
				// 2. modelViewMatrix * vec4(...)：模型空间 → 观察空间
				//    - 包含模型变换（位置、旋转、缩放）和相机变换
				// 3. projectionMatrix * ...：观察空间 → 裁剪空间
				//    - 应用投影（透视或正交）将3D坐标映射到2D屏幕
				// 4. gl_Position：内置输出变量，存储最终裁剪空间坐标
				gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
				
				// ===== 传递颜色到片段着色器 =====
				// 将计算的颜色赋值给输出变量，片段着色器将接收插值后的颜色
				vColor = color;
			}
		</script>

		<!-- 片段着色器代码 -->
		<script id="fragmentShader" type="x-shader/x-fragment">
			// ==================== 精度限定符 ====================
			// 指定浮点数的精度，影响性能和质量平衡：
			// - highp：高精度（可能不被所有设备支持）
			// - mediump：中等精度（大多数设备的良好选择）
			// - lowp：低精度（适用于颜色等不需要高精度的数据）
			precision mediump float;

			// ==================== 输入变量声明 ====================
			// in关键字声明输入变量，从顶点着色器接收插值后的数据
			// 在三角形光栅化过程中，顶点颜色会在片元之间进行线性插值
			in vec3 vColor;	// 插值后的片元颜色

			// ==================== 输出变量声明 ====================
			// out关键字声明输出变量，将数据输出到帧缓冲区
			out vec4 fColor;	// 最终片元颜色（RGBA格式）

			// ==================== 片段着色器主函数 ====================
			/**
			 * 片段着色器的主要执行函数
			 * 每个片元（像素的候选）调用一次，负责计算最终颜色
			 */
			void main()	{
				// 直接使用插值后的顶点颜色作为片元颜色
				// vec4(vColor, 1)：
				// - RGB来自插值的顶点颜色
				// - Alpha固定为1.0（完全不透明）
				// 这是最简单的颜色计算方式，实际应用中可能包含光照、纹理等复杂计算
				fColor = vec4(vColor, 1);
			}
		</script>

		<!-- 模块导入映射表（ES Module Import Map） -->
		<!-- 现代JavaScript特性：允许重写模块导入路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块 -->
		<script type="module">
			// ==================== 模块导入 ====================
			// 导入Three.js库的所有导出，并命名为THREE
			// type="module"表示这是ES6模块，支持模块化特性
			import * as THREE from 'three';

			// ==================== 全局变量声明 ====================
			// 用于存储Three.js的核心对象引用
			let camera;		// 相机对象：定义观察3D场景的视角
			let scene;		// 场景对象：包含所有要渲染的3D对象
			let renderer;	// 渲染器对象：负责将3D场景渲染到2D画布
			let mesh;		// 网格对象：几何体+材质的组合，代表一个可渲染物体

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

			/**
			 * 初始化函数
			 * 设置Three.js场景的所有核心组件
			 */
			function init() {
				// ===== 创建相机 =====
				// 使用透视相机模拟人眼视角
				camera = new THREE.PerspectiveCamera(
					27, 								// 视野角度（FOV）：垂直视角27度
					window.innerWidth / window.innerHeight, // 宽高比：使用窗口尺寸
					1, 									// 近裁剪面：距离相机1个单位以内的物体不显示
					3500 								// 远裁剪面：距离相机3500个单位以外的物体不显示
				);
				// 设置相机位置：沿Z轴正方向移动4个单位（向屏幕外）
				camera.position.z = 4;

				// ===== 创建场景 =====
				scene = new THREE.Scene();
				// 设置场景背景色：深灰色（十六进制颜色0x050505）
				scene.background = new THREE.Color( 0x050505 );
				// 添加雾效：模拟大气透视效果，增强深度感
				scene.fog = new THREE.Fog(
					0x050505, 	// 雾的颜色（与背景色一致）
					2000, 		// 雾的起始距离：距离相机2000单位开始有雾
					3500 		// 雾的结束距离：距离相机3500单位完全被雾遮挡
				);

				// ===== 创建几何体配置 =====
				// 注意：这里不创建实际的顶点数据，完全由着色器生成
				const triangleCount = 10000;					// 要生成的三角形数量
				const vertexCountPerTriangle = 3;				// 每个三角形的顶点数（固定为3）
				const vertexCount = triangleCount * vertexCountPerTriangle; // 总顶点数：30000

				// 创建空的BufferGeometry对象
				// 与传统用法不同，这里不设置顶点位置、法线、UV等缓冲区属性
				const geometry = new THREE.BufferGeometry();
				// 设置绘制范围：告诉WebGL要绘制多少个顶点
				// 参数：起始索引，绘制数量
				geometry.setDrawRange( 0, vertexCount );

				// ===== 创建着色器材质 =====
				// 使用RawShaderMaterial可以直接编写GLSL代码，完全控制着色器
				const material = new THREE.RawShaderMaterial( {
					// Uniforms：从JavaScript传递到着色器的常量
					uniforms: {
						// 随机种子：可以动态修改以生成不同的几何体
						seed: { value: 42 }, // 经典的"生命、宇宙和一切"的答案
					},
					// 顶点着色器代码：从HTML中的script标签获取
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					// 片段着色器代码：从HTML中的script标签获取
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
					// 渲染面：双面渲染（正面和背面都渲染）
					// THREE.DoubleSide：适用于透明物体或需要看到内部的物体
					side: THREE.DoubleSide,
					// GLSL版本：使用GLSL ES 3.0（WebGL 2.0的着色语言）
					// 支持更现代的语法特性，如in/out关键字代替attribute/varying
					glslVersion: THREE.GLSL3
				} );

				// ===== 创建网格对象 =====
				// 网格是几何体和材质的组合，代表一个可渲染的3D对象
				mesh = new THREE.Mesh( geometry, material );
				// 禁用视锥体裁剪：因为顶点数据在着色器中动态生成
				// 传统几何体：可以通过视锥体测试提前剔除不可见部分
				// 本例：由于顶点在着色器中生成，无法预先知道边界，因此禁用裁剪
				mesh.frustumCulled = false;
				// 将网格添加到场景中
				scene.add( mesh );

				// ===== 创建WebGL渲染器 =====
				renderer = new THREE.WebGLRenderer( { 
					antialias: true // 开启抗锯齿：平滑几何体边缘的锯齿
				} );
				// 设置设备像素比：在高DPI显示器（如Retina）上获得更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数：替代传统的requestAnimationFrame
				// 参数animate函数会在每一帧被调用
				renderer.setAnimationLoop( animate );
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement是渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// ===== 可选：添加窗口大小调整事件监听 =====
				// 实际应用中通常需要添加：
				// window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 动画循环函数
			 * 每一帧自动调用，更新场景状态并重新渲染
			 * @param {number} time - 从页面加载开始经过的毫秒数
			 */
			function animate( time ) {
				// ===== 更新网格旋转 =====
				// 基于时间计算旋转角度，创建平滑的动画效果
				// time / 1000.0：将毫秒转换为秒
				
				// X轴旋转：每秒0.25弧度（约14.3度）
				mesh.rotation.x = time / 1000.0 * 0.25;
				// Y轴旋转：每秒0.50弧度（约28.6度）
				mesh.rotation.y = time / 1000.0 * 0.50;
				
				// 注意：这里没有更新Z轴旋转，创建不对称的旋转效果

				// ===== 渲染场景 =====
				// 这是最关键的步骤：将3D场景绘制到2D画布上
				// 参数：
				// - scene：要渲染的场景对象
				// - camera：观察场景的相机
				renderer.render( scene, camera );
				
				// ===== 性能考虑 =====
				// 实际应用中可能需要：
				// 1. 添加帧率统计
				// 2. 添加性能监控
				// 3. 根据设备性能调整细节级别
			}
			
			/**
			 * 窗口大小调整处理函数（示例，未在代码中调用）
			 * 响应浏览器窗口大小变化，更新相机和渲染器
			 */
			/*
			function onWindowResize() {
				// 更新相机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵（必须调用）
				camera.updateProjectionMatrix();
				// 更新渲染器大小
				renderer.setSize(window.innerWidth, window.innerHeight);
			}
			*/
		</script>
	</body>
</html>