本實例主要講解內容
這個Three.js示例展示了無屬性幾何體渲染技術，通過WebGL 2的gl_VertexID特性和偽隨機數生成算法，在著色器中動態計算頂點位置和顏色，而不需要在CPU端預先定義幾何體數據。
核心技術包括：
- WebGL 2的頂點ID特性
- 著色器中的偽隨機數生成
- 無屬性幾何體渲染
- 純GPU端的幾何體生成
完整代碼注釋
<!DOCTYPE html>
<html lang="en"><head><title>three.js WebGL 2 - buffergeometry - attributes - none</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="main.css"></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGL 2 - buffergeometry - attributes - none</div><!-- 頂點著色器 --><script id="vertexShader" type="x-shader/x-vertex">uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;uniform float seed; // 隨機數種子// IEEE 754浮點數常量const uint ieeeMantissa = 0x007FFFFFu;const uint ieeeOne = 0x3F800000u;// 哈希函數 - 生成偽隨機無符號整數uint hash(uint x) {x += ( x << 10u );x ^= ( x >> 6u );x += ( x << 3u );x ^= ( x >> 11u );x += ( x << 15u );return x;}// 二維哈希函數uint hash(uvec2 v) { return hash( v.x ^ hash(v.y) ); }// 生成0-1之間的偽隨機浮點數float hashNoise(vec2 xy) {uint m = hash(floatBitsToUint(xy));m &= ieeeMantissa;m |= ieeeOne;return uintBitsToFloat( m ) - 1.0;}// 生成指定范圍內的偽隨機浮點數float pseudoRandom(float lower, float delta, in vec2 xy) {return lower + delta*hashNoise(xy);}// 生成指定范圍內的偽隨機三維向量vec3 pseudoRandomVec3(float lower, float upper, int index) {float delta = upper - lower;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 vec3 vColor; // 輸出到片段著色器的顏色void main() {// 計算頂點位置// 使用 gl_VertexID 作為索引生成偽隨機位置// 每個三角形的三個頂點共享相同的基礎位置，添加微小偏移形成三角形const float scale = 1.0/64.0;vec3 position = pseudoRandomVec3(-1.0, +1.0, gl_VertexID/3) + scale * pseudoRandomVec3(-1.0, +1.0, gl_VertexID);// 計算頂點顏色vec3 color = pseudoRandomVec3(0.25, 1.0, gl_VertexID/3);// 設置頂點位置和顏色gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );vColor = color;}</script><!-- 片段著色器 --><script id="fragmentShader" type="x-shader/x-fragment">precision mediump float;in vec3 vColor; // 從頂點著色器傳入的顏色out vec4 fColor; // 最終輸出顏色void main() {fColor = vec4(vColor, 1); // 使用傳入的顏色作為片段顏色}</script><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';let camera, scene, renderer, mesh;init();function init() {// 初始化相機camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );camera.position.z = 4;// 初始化場景scene = new THREE.Scene();scene.background = new THREE.Color( 0x050505 );scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );// 創建幾何體// 注意：這里沒有設置任何頂點屬性，所有數據都在著色器中生成const triangleCount = 10000;const vertexCountPerTriangle = 3;const vertexCount = triangleCount * vertexCountPerTriangle;const geometry = new THREE.BufferGeometry();geometry.setDrawRange( 0, vertexCount ); // 僅設置繪制范圍// 創建材質const material = new THREE.RawShaderMaterial( {uniforms: {seed: { value: 42 }, // 設置隨機數種子},vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent,side: THREE.DoubleSide, // 雙面渲染glslVersion: THREE.GLSL3 // 使用GLSL 3.0} );// 創建網格mesh = new THREE.Mesh( geometry, material );mesh.frustumCulled = false; // 禁用視錐體剔除scene.add( mesh );// 初始化渲染器renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animate );document.body.appendChild( renderer.domElement );}// 動畫循環function animate( time ) {// 旋轉網格mesh.rotation.x = time / 1000.0 * 0.25;mesh.rotation.y = time / 1000.0 * 0.50;renderer.render( scene, camera );}</script></body>
</html>
無屬性幾何體渲染技術解析
WebGL 2的頂點ID特性
WebGL 2引入了gl_VertexID內置變量，它表示當前正在處理的頂點索引：
- 無需頂點屬性：傳統渲染需要在BufferGeometry中定義頂點位置、顏色等屬性，而使用
gl_VertexID可以完全在著色器中生成這些數據 - 高效并行計算：每個頂點的計算是并行進行的，充分利用GPU的計算能力
- 動態幾何體：可以根據需要動態生成不同的幾何體，無需在CPU端預先生成和上傳數據
在本示例中，我們通過gl_VertexID計算每個頂點的位置和顏色，實現了完全在GPU端生成幾何體的效果。
著色器中的偽隨機數生成
為了在著色器中生成看似隨機的頂點位置和顏色，我們使用了偽隨機數生成算法：
- 哈希函數：通過位運算實現的哈希函數，將輸入值映射為看似隨機的輸出值
- 浮點數轉換：將生成的無符號整數轉換為0-1之間的浮點數
- 確定性隨機：相同的輸入會生成相同的輸出，這對于渲染一致性非常重要
在本示例中，我們使用頂點ID和隨機種子作為輸入，生成確定性的隨機頂點位置和顏色。這意味著每次渲染相同的場景時，結果都是一樣的，但看起來是隨機的。
無屬性幾何體的優勢與應用場景
這種渲染技術具有以下優勢：
- 減少內存占用：無需在CPU和GPU之間傳輸大量頂點數據
- 提高渲染效率：減少了數據傳輸和BufferGeometry的創建開銷
- 動態生成復雜幾何體：適合生成粒子系統、程序化地形、流體模擬等
適用場景包括：
- 粒子系統：每個粒子的位置和屬性可以在著色器中動態生成
- 程序化內容：如程序化地形、建筑等
- 大數據可視化：當數據量非常大時，可以避免內存問題
- 實時生成效果：如爆炸碎片、煙霧等效果
性能考慮與限制
使用無屬性幾何體渲染時需要注意：
- 著色器復雜度：復雜的計算會增加GPU負擔，可能導致性能下降
- 隨機數質量：簡單的哈希函數生成的隨機數質量有限，不適合需要高質量隨機數的場景
- 調試困難：著色器中的計算難以調試，需要仔細設計算法
- 兼容性：僅支持WebGL 2的瀏覽器才能使用
這種技術在特定場景下非常強大，但并不適合所有情況。在實際應用中，需要根據具體需求權衡其優缺點。
文件)
![[Java實戰]Spring Boot 3 整合 Apache Shiro（二十一）](http://pic.xiahunao.cn/[Java實戰]Spring Boot 3 整合 Apache Shiro（二十一）)
