👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
文章目录
一、🍀前言
本文详细介绍如何基于threejs在三维场景中实现交互式神经网络可视化，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️THREE.EffectComposer 后期处理
THREE.EffectComposer 用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。
1.1.1 ☘️代码示例
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
// 初始化 composer
const composer = new EffectComposer(renderer);
// 创建 RenderPass 并添加到 composer
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 添加其他后期处理通道（如模糊）
// composer.addPass(blurPass);
// 在动画循环中渲染
function animate() {
composer.render();
requestAnimationFrame(animate);
}
1.1.2 ☘️构造函数
EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )
renderer – 用于渲染场景的渲染器。
renderTarget – （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。
1.1.3 ☘️属性
.passes : Array
一个用于表示后期处理过程链（包含顺序）的数组。
渲染通道：
BloomPass 该通道会使得明亮区域参入较暗的区域。模拟相机照到过多亮光的情形
DotScreenPass 将一层黑点贴到代表原始图片的屏幕上
FilmPass 通过扫描线和失真模拟电视屏幕
MaskPass 在当前图片上贴一层掩膜，后续通道只会影响被贴的区域
RenderPass 该通道在指定的场景和相机的基础上渲染出一个新的场景
SavePass 执行该通道时，它会将当前渲染步骤的结果复制一份，方便后面使用。这个通道实际应用中作用不大；
ShaderPass 使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道
TexturePass 该通道可以将效果组合器的当前状态保存为一个纹理，然后可以在其他EffectCoposer对象中将该纹理作为输入参数
UnrealBloomPass 用于实现 虚幻引擎风格泛光效果（Bloom） 的后期处理通道。它通过模拟光线散射和光晕效果，增强场景中高光区域的视觉表现
OutputPass 主要用于对最终渲染结果进行色调映射（Tone Mapping）、Gamma 校正等输出调整。它通常作为 EffectComposer 的最后一个环节，将处理后的图像输出到屏幕
.readBuffer : WebGLRenderTarget
内部读缓冲区的引用。过程一般从该缓冲区读取先前的渲染结果。
.renderer : WebGLRenderer
内部渲染器的引用。
.renderToScreen : Boolean
最终过程是否被渲染到屏幕（默认帧缓冲区）。
.writeBuffer : WebGLRenderTarget
内部写缓冲区的引用。过程常将它们的渲染结果写入该缓冲区。
1.1.4 ☘️方法
.addPass ( pass : Pass ) : undefined
pass – 将被添加到过程链的过程
将传入的过程添加到过程链。
.dispose () : undefined
释放此实例分配的 GPU 相关资源。每当您的应用程序不再使用此实例时调用此方法。
.insertPass ( pass : Pass, index : Integer ) : undefined
pass – 将被插入到过程链的过程。
index – 定义过程链中过程应插入的位置。
将传入的过程插入到过程链中所给定的索引处。
.isLastEnabledPass ( passIndex : Integer ) : Boolean
passIndex – 被用于检查的过程
如果给定索引的过程在过程链中是最后一个启用的过程，则返回true。 由EffectComposer所使用，来决定哪一个过程应当被渲染到屏幕上。
.removePass ( pass : Pass ) : undefined
pass – 要从传递链中删除的传递。
从传递链中删除给定的传递。
.render ( deltaTime : Float ) : undefined
deltaTime – 增量时间值。
执行所有启用的后期处理过程，来产生最终的帧，
.reset ( renderTarget : WebGLRenderTarget ) : undefined
renderTarget – （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。
重置所有EffectComposer的内部状态。
.setPixelRatio ( pixelRatio : Float ) : undefined
pixelRatio – 设备像素比
设置设备的像素比。该值通常被用于HiDPI设备，以阻止模糊的输出。 因此，该方法语义类似于WebGLRenderer.setPixelRatio()。
.setSize ( width : Integer, height : Integer ) : undefined
width – EffectComposer的宽度。
height – EffectComposer的高度。
考虑设备像素比，重新设置内部渲染缓冲和过程的大小为(width, height)。 因此，该方法语义类似于WebGLRenderer.setSize()。
.swapBuffers () : undefined
交换内部的读/写缓冲。
1.2 ☘️THREE.RenderPass
THREE.RenderPass用于将场景渲染到中间缓冲区，为后续的后期处理效果（如模糊、色调调整等）提供基础。
1.2.1 ☘️构造函数
RenderPass(scene, camera, overrideMaterial, clearColor, clearAlpha)
- scene THREE.Scene 要渲染的 Three.js 场景对象。
- camera THREE.Camera 场景对应的相机（如 PerspectiveCamera）。
- overrideMaterial THREE.Material (可选) 覆盖场景中所有物体的材质（默认 null）。
- clearColor THREE.Color (可选) 渲染前清除画布的颜色（默认不主动清除）。
- clearAlpha number (可选) 清除画布的透明度（默认 0）。
1.2.2 ☘️属性
.enabled：boolean
是否启用此通道（默认 true）。设为 false 可跳过渲染。
.clear：boolean
渲染前是否清除画布（默认 true）。若需叠加多个 RenderPass，可设为 false。
.needsSwap：boolean
是否需要在渲染后交换缓冲区（通常保持默认 false）。
1.2.3 ☘️方法
.setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。
1.3 ☘️THREE.UnrealBloomPass
THREE.UnrealBloomPass是 是 Three.js 中用于实现 虚幻引擎风格泛光效果（Bloom） 的后期处理通道。它通过模拟光线散射和光晕效果，增强场景中高光区域的视觉表现。
1.3.1 ☘️构造函数
THREE.UnrealBloomPass(
new THREE.Vector2(width, height), // 渲染目标尺寸（通常与画布一致）
strength, // 泛光强度 (默认 1)
radius, // 泛光半径 (默认 0)
threshold // 泛光阈值 (默认 0)
)
new THREE.Vector2(width, height)
渲染目标的分辨率，通常与画布尺寸一致（如 new THREE.Vector2(window.innerWidth, window.innerHeight)）。
strength（强度）
控制泛光效果的强度（亮度）。值越大，泛光越明显。
范围：0（无效果）到 3（强烈）。
radius（半径）
控制泛光的扩散半径。值越大，光晕范围越广。
范围：0（无扩散）到 1（较大扩散）。
threshold（阈值）
仅对亮度高于此值的像素应用泛光。值越低，更多区域会被处理。
范围：0（所有像素）到 1（仅最亮像素）。
1.3.2 ☘️使用示例
// 初始化
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
const bloomPass = new THREE.UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.2, 0.2, 0.8
);
// 添加通道
composer.addPass(renderPass);
composer.addPass(bloomPass);
// 渲染
function animate() {
requestAnimationFrame(animate);
composer.render();
}
1.3.3 ☘️方法
.setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。
.render(renderer, writeBuffer, readBuffer, deltaTime, maskActive)
内部方法，通常由 EffectComposer 自动调用，无需手动执行。
1.4 ☘️THREE.FilmPass
THREE.FilmPass是 Three.js 后期处理模块中的一个特效通道，用于模拟电影胶片效果（如扫描线、颗粒噪声和画面抖动）。适用于复古风格或科幻场景的视觉增强。
1.4.1 ☘️构造函数
FilmPass(
noiseIntensity, // 噪声强度
scanlinesIntensity,// 扫描线强度
scanlinesCount, // 扫描线数量
grayscale // 是否转为灰度
)
1.4.2 ☘️属性
.enabled：boolean
是否启用此通道（默认 true）。设为 false 可临时禁用效果。
.uniforms：object
着色器 uniforms 对象，可直接修改参数（动态调整效果）：
filmPass.uniforms.nIntensity.value = 0.8; // 调整噪声强度
filmPass.uniforms.sIntensity.value = 0.5; // 调整扫描线强度
filmPass.uniforms.sCount.value = 1024; // 调整扫描线密度
filmPass.uniforms.grayscale.value = 1; // 启用灰度（1 是，0 否）
1.4.3 ☘️方法
.setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。
1.5 ☘️OutputPass
OutputPass 是 Three.js 后期处理（Post-Processing）流程中的一个通道（Pass），主要用于对最终渲染结果进行色调映射（Tone Mapping）、Gamma 校正等输出调整。它通常作为 EffectComposer 的最后一个环节，将处理后的图像输出到屏幕。
1.5.1 ☘️构造函数
OutputPass(renderer, scene, camera)
renderer：WebGLRenderer类型 Three.js 渲染器实例
scene：Scene类型 Three.js 场景对象
camera：Camera类型 Three.js 相机对象
1.4.2 ☘️使用示例
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
// 1. 创建 EffectComposer
const composer = new EffectComposer(renderer);
// 2. 添加渲染通道（RenderPass）
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 3. 添加 OutputPass（通常作为最后一个通道）
const outputPass = new OutputPass(renderer, scene, camera);
composer.addPass(outputPass);
// 4. 执行渲染循环
function animate() {
requestAnimationFrame(animate);
composer.render(); // 替代 renderer.render(scene, camera)
}
animate();
1.4.3 ☘️方法
.setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。
.render(renderer, writeBuffer, readBuffer, deltaTime, maskActive)
执行渲染流程，将处理后的图像输出到屏幕。
二、🍀交互式神经网络可视化
单击/点击通过自定义 GLSL 着色器发送动画能量脉冲，并在节点/连接扩展时使其变亮。包括主题和密度控制。
1. ☘️实现思路
通过EffectComposer后期处理组合器，RenderPass、UnrealBloomPass（泛光）、FilmPass（电影胶片效果）、OutputPass后期处理通道，以及自定义shader着色器实现交互式神经网络可视化。具体代码参考代码样例。可以直接运行。
2. ☘️代码样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
canvas {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.ui-panel {
position: absolute;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(0, 0, 0, .7);
border-radius: 12px;
border: 1px solid rgba(255, 120, 50, .3);
box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
z-index: 10;
padding: 15px;
color: #eee;
font-family: 'Inter', sans-serif;
}
#instructions-container {
top: 20px;
left: 20px;
font-size: 14px;
line-height: 1.5;
max-width: 280px;
}
#instruction-title {
font-weight: 600;
margin-bottom: 6px;
font-size: 15px;
}
#theme-selector {
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 150px;
}
#theme-selector-title {
font-weight: 600;
font-size: 15px;
margin-bottom: 2px;
}
.theme-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.theme-button {
width: 36px;
height: 36px;
border-radius: 8px;
border: 2px solid rgba(255, 255, 255, .3);
cursor: pointer;
transition: transform .2s, border-color .2s;
outline: none;
overflow: hidden;
}
.theme-button:hover, .theme-button:focus {
transform: scale(1.05);
border-color: rgba(255, 255, 255, .7);
}
.theme-button.active {
transform: scale(1.05);
border-color: rgba(255, 255, 255, .9);
box-shadow: 0 0 10px rgba(255, 200, 150, .6);
}
#theme-1 { background: linear-gradient(45deg, #4F46E5, #7C3AED, #C026D3, #DB2777); }
#theme-2 { background: linear-gradient(45deg, #F59E0B, #F97316, #DC2626, #7F1D1D); }
#theme-3 { background: linear-gradient(45deg, #EC4899, #8B5CF6, #6366F1, #3B82F6); }
#theme-4 { background: linear-gradient(45deg, #10B981, #A3E635, #FACC15, #FB923C); }
#density-controls {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.density-label {
font-size: 13px;
display: flex;
justify-content: space-between;
}
.density-slider {
width: 100%;
appearance: none;
height: 4px;
border-radius: 2px;
background: rgba(255, 120, 50, .3);
outline: none;
cursor: pointer;
}
.density-slider::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 120, 50, .8);
cursor: pointer;
transition: transform .1s, background .1s;
}
.density-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 120, 50, .8);
cursor: pointer;
border: none;
transition: transform .1s, background .1s;
}
.density-slider::-webkit-slider-thumb:hover { transform: scale(1.1); background: rgba(255, 140, 50, 1); }
.density-slider::-moz-range-thumb:hover { transform: scale(1.1); background: rgba(255, 140, 50, 1); }
#control-buttons {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 10;
background: rgba(0, 0, 0, .6);
padding: 10px 15px;
border-radius: 10px;
border: 1px solid rgba(255, 120, 50, .2);
}
.control-button {
background: rgba(255, 120, 50, .2);
color: #eee;
border: 1px solid rgba(255, 150, 50, .3);
padding: 8px 15px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: background-color 0.2s, transform 0.1s;
white-space: nowrap;
min-width: 80px;
text-align: center;
font-family: 'Inter', sans-serif;
}
.control-button:hover, .control-button:focus {
background: rgba(255, 120, 50, .4);
outline: none;
}
.control-button:active {
background: rgba(255, 120, 50, .6);
transform: scale(0.95);
}
@media (max-width: 640px) {
#instructions-container {
max-width: calc(100% - 40px);
font-size: 13px;
padding: 10px 15px;
top: 10px;
left: 10px;
}
#instruction-title {
font-size: 14px;
}
#theme-selector {
top: auto;
bottom: 20px;
right: 10px;
left: auto;
transform: none;
max-width: 120px;
padding: 10px;
}
#theme-selector-title {
font-size: 14px;
}
.theme-button {
width: 30px;
height: 30px;
}
.density-label { font-size: 12px; }
#control-buttons {
bottom: 10px;
gap: 10px;
padding: 8px 10px;
}
.control-button {
padding: 6px 10px;
font-size: 12px;
min-width: 65px;
}
}
@media (max-width: 400px) {
#theme-selector {
flex-direction: column;
align-items: center;
max-width: none;
width: calc(100% - 20px);
left: 10px;
right: 10px;
bottom: 75px;
}
.theme-grid {
grid-template-columns: repeat(4, 1fr);
width: 100%;
justify-items: center;
}
#density-controls {
width: 80%;
margin-top: 15px;
}
#control-buttons {
width: calc(100% - 20px);
justify-content: space-around;
}
}
</style>
<body>
<div id="instructions-container" class="ui-panel">
<div id="instruction-title">Interactive Neural Network</div>
<div>Click or tap to create energy pulses through the network. Drag to rotate.</div>
</div>
<div id="theme-selector" class="ui-panel">
<div id="theme-selector-title">Visual Theme</div>
<div class="theme-grid">
<button class="theme-button" id="theme-1" data-theme="0" aria-label="Theme 1"></button>
<button class="theme-button" id="theme-2" data-theme="1" aria-label="Theme 2"></button>
<button class="theme-button" id="theme-3" data-theme="2" aria-label="Theme 3"></button>
<button class="theme-button" id="theme-4" data-theme="3" aria-label="Theme 4"></button>
</div>
<div id="density-controls">
<div class="density-label"><span>Density</span><span id="density-value">100%</span></div>
<input type="range" min="20" max="100" value="100" class="density-slider" id="density-slider" aria-label="Network Density">
</div>
</div>
<div id="control-buttons">
<button id="change-formation-btn" class="control-button">Formation</button>
<button id="pause-play-btn" class="control-button">Pause</button>
<button id="reset-camera-btn" class="control-button">Reset Cam</button>
</div>
<canvas id="neural-network-canvas"></canvas>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.162.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
const config = {
paused: false,
activePaletteIndex: 1,
currentFormation: 0,
numFormations: 4,
densityFactor: 1
};
const colorPalettes = [
[new THREE.Color(0x4F46E5), new THREE.Color(0x7C3AED), new THREE.Color(0xC026D3), new THREE.Color(0xDB2777), new THREE.Color(0x8B5CF6)],
[new THREE.Color(0xF59E0B), new THREE.Color(0xF97316), new THREE.Color(0xDC2626), new THREE.Color(0x7F1D1D), new THREE.Color(0xFBBF24)],
[new THREE.Color(0xEC4899), new THREE.Color(0x8B5CF6), new THREE.Color(0x6366F1), new THREE.Color(0x3B82F6), new THREE.Color(0xA855F7)],
[new THREE.Color(0x10B981), new THREE.Color(0xA3E635), new THREE.Color(0xFACC15), new THREE.Color(0xFB923C), new THREE.Color(0x4ADE80)]
];
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.0015);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1200);
camera.position.set(0, 5, 22);
const canvasElement = document.getElementById('neural-network-canvas'); // Get canvas element
const renderer = new THREE.WebGLRenderer({ canvas: canvasElement, antialias: true, powerPreference: "high-performance" });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(0x000000);
renderer.outputColorSpace = THREE.SRGBColorSpace;
function createStarfield() {
const count = 5000, pos = [];
for (let i = 0; i < count; i++) {
const r = THREE.MathUtils.randFloat(40, 120);
const phi = Math.acos(THREE.MathUtils.randFloatSpread(2));
const theta = THREE.MathUtils.randFloat(0, Math.PI * 2);
pos.push(
r * Math.sin(phi) * Math.cos(theta),
r * Math.sin(phi) * Math.sin(theta),
r * Math.cos(phi)
);
}
const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
const mat = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.15,
sizeAttenuation: true,
depthWrite: false,
opacity: 0.8,
transparent: true
});
return new THREE.Points(geo, mat);
}
const starField = createStarfield();
scene.add(starField);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.5;
controls.minDistance = 5;
controls.maxDistance = 100;
controls.autoRotate = true;
controls.autoRotateSpeed = 0.15;
controls.enablePan = false;
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.68);
composer.addPass(bloomPass);
const filmPass = new FilmPass(0.35, 0.55, 2048, false);
composer.addPass(filmPass);
composer.addPass(new OutputPass());
const pulseUniforms = {
uTime: { value: 0.0 },
uPulsePositions: { value: [new THREE.Vector3(1e3, 1e3, 1e3), new THREE.Vector3(1e3, 1e3, 1e3), new THREE.Vector3(1e3, 1e3, 1e3)] },
uPulseTimes: { value: [-1e3, -1e3, -1e3] },
uPulseColors: { value: [new THREE.Color(1, 1, 1), new THREE.Color(1, 1, 1), new THREE.Color(1, 1, 1)] },
uPulseSpeed: { value: 15.0 },
uBaseNodeSize: { value: 0.5 },
uActivePalette: { value: 0 }
};
const noiseFunctions = `
vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}
vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}
vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}
float snoise(vec3 v){
const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);
vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);vec3 g=step(x0.yzx,x0.xyz);
vec3 l=1.0-g;vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);
vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;i=mod289(i);
vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));
float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;
vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);
vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);
vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;
vec4 sh=-step(h,vec4(0.0));vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);
vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);
m*=m;return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
}
float fbm(vec3 p,float time){
float value=0.0;float amplitude=0.5;float frequency=1.0;int octaves=3;
for(int i=0;i<octaves;i++){
value+=amplitude*snoise(p*frequency+time*0.2*frequency);
amplitude*=0.5;frequency*=2.0;
}
return value;
}`;
const nodeShader = {
vertexShader: `${noiseFunctions}
attribute float nodeSize;attribute float nodeType;attribute vec3 nodeColor;attribute vec3 connectionIndices;attribute float distanceFromRoot;
uniform float uTime;uniform vec3 uPulsePositions[3];uniform float uPulseTimes[3];uniform float uPulseSpeed;uniform float uBaseNodeSize;
varying vec3 vColor;varying float vNodeType;varying vec3 vPosition;varying float vPulseIntensity;varying float vDistanceFromRoot;
float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {
if (pulseTime < 0.0) return 0.0;
float timeSinceClick = uTime - pulseTime;
if (timeSinceClick < 0.0 || timeSinceClick > 3.0) return 0.0;
float pulseRadius = timeSinceClick * uPulseSpeed;
float distToClick = distance(worldPos, pulsePos);
float pulseThickness = 2.0;
float waveProximity = abs(distToClick - pulseRadius);
return smoothstep(pulseThickness, 0.0, waveProximity) * smoothstep(3.0, 0.0, timeSinceClick);
}
void main() {
vNodeType = nodeType;
vColor = nodeColor;
vDistanceFromRoot = distanceFromRoot;
vec3 worldPos = (modelMatrix * vec4(position, 1.0)).xyz;
vPosition = worldPos;
float totalPulseIntensity = 0.0;
for (int i = 0; i < 3; i++) {
totalPulseIntensity += getPulseIntensity(worldPos, uPulsePositions[i], uPulseTimes[i]);
}
vPulseIntensity = min(totalPulseIntensity, 1.0);
float timeScale = 0.5 + 0.5 * sin(uTime * 0.8 + distanceFromRoot * 0.2);
float baseSize = nodeSize * (0.8 + 0.2 * timeScale);
float pulseSize = baseSize * (1.0 + vPulseIntensity * 2.0);
vec3 modifiedPosition = position;
if (nodeType > 0.5) {
float noise = fbm(position * 0.1, uTime * 0.1);
modifiedPosition += normal * noise * 0.2;
}
vec4 mvPosition = modelViewMatrix * vec4(modifiedPosition, 1.0);
gl_PointSize = pulseSize * uBaseNodeSize * (800.0 / -mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}`,
fragmentShader: `
uniform float uTime;uniform vec3 uPulseColors[3];uniform int uActivePalette;
varying vec3 vColor;varying float vNodeType;varying vec3 vPosition;varying float vPulseIntensity;varying float vDistanceFromRoot;
void main() {
vec2 center = 2.0 * gl_PointCoord - 1.0;
float dist = length(center);
if (dist > 1.0) discard;
float glowStrength = 1.0 - smoothstep(0.0, 1.0, dist);
glowStrength = pow(glowStrength, 1.4);
vec3 baseColor = vColor * (0.8 + 0.2 * sin(uTime * 0.5 + vDistanceFromRoot * 0.3));
vec3 finalColor = baseColor;
if (vPulseIntensity > 0.0) {
vec3 pulseColor = mix(vec3(1.0), uPulseColors[0], 0.3);
finalColor = mix(baseColor, pulseColor, vPulseIntensity);
finalColor *= (1.0 + vPulseIntensity * 0.7);
}
float alpha = glowStrength * (0.9 - 0.5 * dist);
float camDistance = length(vPosition - cameraPosition);
float distanceFade = smoothstep(80.0, 10.0, camDistance);
if (vNodeType > 0.5) {
alpha *= 0.85;
} else {
finalColor *= 1.2;
}
gl_FragColor = vec4(finalColor, alpha * distanceFade);
}`
};
const connectionShader = {
vertexShader: `${noiseFunctions}
attribute vec3 startPoint;attribute vec3 endPoint;attribute float connectionStrength;attribute float pathIndex;attribute vec3 connectionColor;
uniform float uTime;uniform vec3 uPulsePositions[3];uniform float uPulseTimes[3];uniform float uPulseSpeed;
varying vec3 vColor;varying float vConnectionStrength;varying float vPulseIntensity;varying float vPathPosition;
float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {
if (pulseTime < 0.0) return 0.0;
float timeSinceClick = uTime - pulseTime;
if (timeSinceClick < 0.0 || timeSinceClick > 3.0) return 0.0;
float pulseRadius = timeSinceClick * uPulseSpeed;
float distToClick = distance(worldPos, pulsePos);
float pulseThickness = 2.0;
float waveProximity = abs(distToClick - pulseRadius);
return smoothstep(pulseThickness, 0.0, waveProximity) * smoothstep(3.0, 0.0, timeSinceClick);
}
void main() {
float t = position.x;
vPathPosition = t;
vec3 midPoint = mix(startPoint, endPoint, 0.5);
float pathOffset = sin(t * 3.14159) * 0.1;
vec3 perpendicular = normalize(cross(normalize(endPoint - startPoint), vec3(0.0, 1.0, 0.0)));
if (length(perpendicular) < 0.1) perpendicular = vec3(1.0, 0.0, 0.0);
midPoint += perpendicular * pathOffset;
vec3 p0 = mix(startPoint, midPoint, t);
vec3 p1 = mix(midPoint, endPoint, t);
vec3 finalPos = mix(p0, p1, t);
float noiseTime = uTime * 0.2;
float noise = fbm(vec3(pathIndex * 0.1, t * 0.5, noiseTime), noiseTime);
finalPos += perpendicular * noise * 0.1;
vec3 worldPos = (modelMatrix * vec4(finalPos, 1.0)).xyz;
float totalPulseIntensity = 0.0;
for (int i = 0; i < 3; i++) {
totalPulseIntensity += getPulseIntensity(worldPos, uPulsePositions[i], uPulseTimes[i]);
}
vPulseIntensity = min(totalPulseIntensity, 1.0);
vColor = connectionColor;
vConnectionStrength = connectionStrength;
gl_Position = projectionMatrix * modelViewMatrix * vec4(finalPos, 1.0);
}`,
fragmentShader: `
uniform float uTime;uniform vec3 uPulseColors[3];
varying vec3 vColor;varying float vConnectionStrength;varying float vPulseIntensity;varying float vPathPosition;
void main() {
vec3 baseColor = vColor * (0.7 + 0.3 * sin(uTime * 0.5 + vPathPosition * 10.0));
float flowPattern = sin(vPathPosition * 20.0 - uTime * 3.0) * 0.5 + 0.5;
float flowIntensity = 0.3 * flowPattern * vConnectionStrength;
vec3 finalColor = baseColor;
if (vPulseIntensity > 0.0) {
vec3 pulseColor = mix(vec3(1.0), uPulseColors[0], 0.3);
finalColor = mix(baseColor, pulseColor, vPulseIntensity);
flowIntensity += vPulseIntensity * 0.5;
}
finalColor *= (0.6 + flowIntensity + vConnectionStrength * 0.4);
float alpha = 0.8 * vConnectionStrength + 0.2 * flowPattern;
alpha = mix(alpha, min(1.0, alpha * 2.0), vPulseIntensity);
gl_FragColor = vec4(finalColor, alpha);
}`
};
class Node {
constructor(position, level = 0, type = 0) {
this.position = position;
this.connections = [];
this.level = level;
this.type = type;
this.size = type === 0 ? THREE.MathUtils.randFloat(0.7, 1.2) : THREE.MathUtils.randFloat(0.4, 0.9);
this.distanceFromRoot = 0;
}
addConnection(node, strength = 1.0) {
if (!this.isConnectedTo(node)) {
this.connections.push({ node, strength });
node.connections.push({ node: this, strength });
}
}
isConnectedTo(node) {
return this.connections.some(conn => conn.node === node);
}
}
function generateNeuralNetwork(formationIndex, densityFactor = 1.0) {
let nodes = [];
let rootNode;
function generateQuantumCortex() {
rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0); rootNode.size = 1.5; nodes.push(rootNode);
const layers = 5, primaryAxes = 6, nodesPerAxis = 8, axisLength = 20;
const axisEndpoints = [];
for (let a = 0; a < primaryAxes; a++) {
const phi = Math.acos(-1 + (2 * a) / primaryAxes);
const theta = Math.PI * (1 + Math.sqrt(5)) * a;
const dirVec = new THREE.Vector3(
Math.sin(phi) * Math.cos(theta),
Math.sin(phi) * Math.sin(theta),
Math.cos(phi)
);
let prevNode = rootNode;
for (let i = 1; i <= nodesPerAxis; i++) {
const t = i / nodesPerAxis;
const distance = axisLength * Math.pow(t, 0.8);
const pos = new THREE.Vector3().copy(dirVec).multiplyScalar(distance);
const nodeType = (i === nodesPerAxis) ? 1 : 0;
const newNode = new Node(pos, i, nodeType);
newNode.distanceFromRoot = distance;
nodes.push(newNode);
prevNode.addConnection(newNode, 1.0 - (t * 0.3));
prevNode = newNode;
if (i === nodesPerAxis) axisEndpoints.push(newNode);
}
}
const ringDistances = [5, 10, 15];
const ringNodes = [];
for (const ringDist of ringDistances) {
const nodesInRing = Math.floor(ringDist * 3 * densityFactor);
const ringLayer = [];
for (let i = 0; i < nodesInRing; i++) {
const t = i / nodesInRing;
const ringPhi = Math.acos(2 * Math.random() - 1);
const ringTheta = 2 * Math.PI * t;
const pos = new THREE.Vector3(
ringDist * Math.sin(ringPhi) * Math.cos(ringTheta),
ringDist * Math.sin(ringPhi) * Math.sin(ringTheta),
ringDist * Math.cos(ringPhi)
);
const level = Math.ceil(ringDist / 5);
const nodeType = Math.random() < 0.4 ? 1 : 0;
const newNode = new Node(pos, level, nodeType);
newNode.distanceFromRoot = ringDist;
nodes.push(newNode);
ringLayer.push(newNode);
}
ringNodes.push(ringLayer);
for (let i = 0; i < ringLayer.length; i++) {
const node = ringLayer[i];
const nextNode = ringLayer[(i + 1) % ringLayer.length];
node.addConnection(nextNode, 0.7);
if (i % 4 === 0 && ringLayer.length > 5) {
const jumpIdx = (i + Math.floor(ringLayer.length / 2)) % ringLayer.length;
node.addConnection(ringLayer[jumpIdx], 0.4);
}
}
}
for (const ring of ringNodes) {
for (const node of ring) {
let closestAxisNode = null; let minDist = Infinity;
for (const n of nodes) {
if (n === rootNode || n === node) continue;
if (n.level === 0 || n.type !== 0) continue;
const dist = node.position.distanceTo(n.position);
if (dist < minDist) { minDist = dist; closestAxisNode = n; }
}
if (closestAxisNode && minDist < 8) {
const strength = 0.5 + (1 - minDist / 8) * 0.5;
node.addConnection(closestAxisNode, strength);
}
}
}
for (let r = 0; r < ringNodes.length - 1; r++) {
const innerRing = ringNodes[r];
const outerRing = ringNodes[r + 1];
const connectionsCount = Math.floor(innerRing.length * 0.5);
for (let i = 0; i < connectionsCount; i++) {
const innerNode = innerRing[Math.floor(Math.random() * innerRing.length)];
const outerNode = outerRing[Math.floor(Math.random() * outerRing.length)];
if (!innerNode.isConnectedTo(outerNode)) {
innerNode.addConnection(outerNode, 0.6);
}
}
}
for (let i = 0; i < axisEndpoints.length; i++) {
const startNode = axisEndpoints[i];
const endNode = axisEndpoints[(i + 2) % axisEndpoints.length];
const numIntermediates = 3;
let prevNode = startNode;
for (let j = 1; j <= numIntermediates; j++) {
const t = j / (numIntermediates + 1);
const pos = new THREE.Vector3().lerpVectors(startNode.position, endNode.position, t);
pos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(3),
THREE.MathUtils.randFloatSpread(3),
THREE.MathUtils.randFloatSpread(3)
));
const newNode = new Node(pos, startNode.level, 0);
newNode.distanceFromRoot = rootNode.position.distanceTo(pos);
nodes.push(newNode);
prevNode.addConnection(newNode, 0.5);
prevNode = newNode;
}
prevNode.addConnection(endNode, 0.5);
}
}
function generateHyperdimensionalMesh() {
rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0); rootNode.size = 1.5; nodes.push(rootNode);
const dimensions = 4;
const nodesPerDimension = Math.floor(40 * densityFactor);
const maxRadius = 20;
const dimensionVectors = [
new THREE.Vector3(1, 1, 1).normalize(),
new THREE.Vector3(-1, 1, -1).normalize(),
new THREE.Vector3(1, -1, -1).normalize(),
new THREE.Vector3(-1, -1, 1).normalize()
];
const dimensionNodes = [];
for (let d = 0; d < dimensions; d++) {
const dimNodes = [];
const dimVec = dimensionVectors[d];
for (let i = 0; i < nodesPerDimension; i++) {
const distance = maxRadius * Math.pow(Math.random(), 0.7);
const randomVec = new THREE.Vector3(
THREE.MathUtils.randFloatSpread(1),
THREE.MathUtils.randFloatSpread(1),
THREE.MathUtils.randFloatSpread(1)
).normalize();
const biasedVec = new THREE.Vector3().addVectors(
dimVec.clone().multiplyScalar(0.6 + Math.random() * 0.4),
randomVec.clone().multiplyScalar(0.3)
).normalize();
const pos = biasedVec.clone().multiplyScalar(distance);
const isLeaf = Math.random() < 0.4 || distance > maxRadius * 0.8;
const level = Math.floor(distance / (maxRadius / 4)) + 1;
const newNode = new Node(pos, level, isLeaf ? 1 : 0);
newNode.distanceFromRoot = distance;
newNode.dimension = d;
nodes.push(newNode);
dimNodes.push(newNode);
if (distance < maxRadius * 0.3) rootNode.addConnection(newNode, 0.7);
}
dimensionNodes.push(dimNodes);
}
for (let d = 0; d < dimensions; d++) {
const dimNodes = dimensionNodes[d];
dimNodes.sort((a, b) => a.distanceFromRoot - b.distanceFromRoot);
const layers = 4;
const nodesPerLayer = Math.ceil(dimNodes.length / layers);
for (let layer = 0; layer < layers; layer++) {
const startIdx = layer * nodesPerLayer;
const endIdx = Math.min(startIdx + nodesPerLayer, dimNodes.length);
for (let i = startIdx; i < endIdx; i++) {
const node = dimNodes[i];
const connectionsCount = 1 + Math.floor(Math.random() * 3);
const nearbyNodes = dimNodes.slice(startIdx, endIdx).filter(n => n !== node)
.sort((a, b) => node.position.distanceTo(a.position) - node.position.distanceTo(b.position));
for (let j = 0; j < Math.min(connectionsCount, nearbyNodes.length); j++) {
if (!node.isConnectedTo(nearbyNodes[j])) {
node.addConnection(nearbyNodes[j], 0.4 + Math.random() * 0.4);
}
}
if (layer > 0) {
const prevLayer = dimNodes.slice((layer - 1) * nodesPerLayer, layer * nodesPerLayer)
.sort((a, b) => node.position.distanceTo(a.position) - node.position.distanceTo(b.position));
if (prevLayer.length > 0 && !node.isConnectedTo(prevLayer[0])) {
node.addConnection(prevLayer[0], 0.8);
}
}
}
}
}
for (let d1 = 0; d1 < dimensions; d1++) {
for (let d2 = d1 + 1; d2 < dimensions; d2++) {
const connectionsCount = Math.floor(5 * densityFactor);
for (let i = 0; i < connectionsCount; i++) {
const n1 = dimensionNodes[d1][Math.floor(Math.random() * dimensionNodes[d1].length)];
const n2 = dimensionNodes[d2][Math.floor(Math.random() * dimensionNodes[d2].length)];
if (!n1.isConnectedTo(n2)) {
const midPos = new THREE.Vector3().lerpVectors(n1.position, n2.position, 0.5);
midPos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(2),
THREE.MathUtils.randFloatSpread(2),
THREE.MathUtils.randFloatSpread(2)
));
const interNode = new Node(midPos, Math.max(n1.level, n2.level), 0);
interNode.distanceFromRoot = rootNode.position.distanceTo(midPos);
nodes.push(interNode);
n1.addConnection(interNode, 0.5);
interNode.addConnection(n2, 0.5);
}
}
}
}
const jumpConnections = Math.floor(10 * densityFactor);
for (let i = 0; i < jumpConnections; i++) {
const startDim = Math.floor(Math.random() * dimensions);
const endDim = (startDim + 2) % dimensions;
const startNode = dimensionNodes[startDim][Math.floor(Math.random() * dimensionNodes[startDim].length)];
const endNode = dimensionNodes[endDim][Math.floor(Math.random() * dimensionNodes[endDim].length)];
if (!startNode.isConnectedTo(endNode)) {
const numPoints = 3 + Math.floor(Math.random() * 3);
let prevNode = startNode;
for (let j = 1; j < numPoints; j++) {
const t = j / numPoints;
const pos = new THREE.Vector3().lerpVectors(startNode.position, endNode.position, t);
pos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(8) * Math.sin(t * Math.PI),
THREE.MathUtils.randFloatSpread(8) * Math.sin(t * Math.PI),
THREE.MathUtils.randFloatSpread(8) * Math.sin(t * Math.PI)
));
const jumpNode = new Node(pos, Math.max(startNode.level, endNode.level), 0);
jumpNode.distanceFromRoot = rootNode.position.distanceTo(pos);
nodes.push(jumpNode);
prevNode.addConnection(jumpNode, 0.4);
prevNode = jumpNode;
}
prevNode.addConnection(endNode, 0.4);
}
}
}
function generateNeuralVortex() {
rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0); rootNode.size = 1.8; nodes.push(rootNode);
const numSpirals = 6;
const totalHeight = 30;
const maxRadius = 16;
const nodesPerSpiral = Math.floor(30 * densityFactor);
const spiralNodes = [];
for (let s = 0; s < numSpirals; s++) {
const spiralPhase = (s / numSpirals) * Math.PI * 2;
const spiralArray = [];
for (let i = 0; i < nodesPerSpiral; i++) {
const t = i / (nodesPerSpiral - 1);
const heightCurve = 1 - Math.pow(2 * t - 1, 2);
const height = (t - 0.5) * totalHeight;
const radiusCurve = Math.sin(t * Math.PI);
const radius = maxRadius * radiusCurve;
const revolutions = 2.5;
const angle = spiralPhase + t * Math.PI * 2 * revolutions;
const pos = new THREE.Vector3(radius * Math.cos(angle), height, radius * Math.sin(angle));
pos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(1.5),
THREE.MathUtils.randFloatSpread(1.5),
THREE.MathUtils.randFloatSpread(1.5)
));
const level = Math.floor(t * 5) + 1;
const isLeaf = Math.random() < 0.3 || i > nodesPerSpiral - 3;
const newNode = new Node(pos, level, isLeaf ? 1 : 0);
newNode.distanceFromRoot = Math.sqrt(radius * radius + height * height);
newNode.spiralIndex = s;
newNode.spiralPosition = t;
nodes.push(newNode);
spiralArray.push(newNode);
}
spiralNodes.push(spiralArray);
}
for (const spiral of spiralNodes) {
rootNode.addConnection(spiral[0], 1.0);
for (let i = 0; i < spiral.length - 1; i++) {
spiral[i].addConnection(spiral[i + 1], 0.9);
}
}
for (let s = 0; s < numSpirals; s++) {
const currentSpiral = spiralNodes[s];
const nextSpiral = spiralNodes[(s + 1) % numSpirals];
const connectionPoints = 5;
for (let c = 0; c < connectionPoints; c++) {
const t = c / (connectionPoints - 1);
const idx1 = Math.floor(t * (currentSpiral.length - 1));
const idx2 = Math.floor(t * (nextSpiral.length - 1));
currentSpiral[idx1].addConnection(nextSpiral[idx2], 0.7);
}
}
for (let s = 0; s < numSpirals; s++) {
const currentSpiral = spiralNodes[s];
const jumpSpiral = spiralNodes[(s + 2) % numSpirals];
const connections = 3;
for (let c = 0; c < connections; c++) {
const t1 = (c + 0.5) / connections;
const t2 = (c + 1.0) / connections;
const idx1 = Math.floor(t1 * (currentSpiral.length - 1));
const idx2 = Math.floor(t2 * (jumpSpiral.length - 1));
const start = currentSpiral[idx1];
const end = jumpSpiral[idx2];
const midPoint = new THREE.Vector3().lerpVectors(start.position, end.position, 0.5).multiplyScalar(0.7);
const bridgeNode = new Node(midPoint, Math.max(start.level, end.level), 0);
bridgeNode.distanceFromRoot = rootNode.position.distanceTo(midPoint);
nodes.push(bridgeNode);
start.addConnection(bridgeNode, 0.6);
bridgeNode.addConnection(end, 0.6);
}
}
const ringLevels = 5;
for (let r = 0; r < ringLevels; r++) {
const height = (r / (ringLevels - 1) - 0.5) * totalHeight * 0.7;
const ringNodes = nodes.filter(n => n !== rootNode && Math.abs(n.position.y - height) < 2);
ringNodes.sort((a, b) => Math.atan2(a.position.z, a.position.x) - Math.atan2(b.position.z, b.position.x));
if (ringNodes.length > 3) {
for (let i = 0; i < ringNodes.length; i++) {
ringNodes[i].addConnection(ringNodes[(i + 1) % ringNodes.length], 0.5);
}
}
}
const radialConnections = Math.floor(10 * densityFactor);
const candidates = nodes.filter(n => n !== rootNode && n.position.length() > 5)
.sort(() => Math.random() - 0.5)
.slice(0, radialConnections);
for (const node of candidates) {
const numSegments = 1 + Math.floor(Math.random() * 2);
let prevNode = node;
for (let i = 1; i <= numSegments; i++) {
const t = i / (numSegments + 1);
const segPos = node.position.clone().multiplyScalar(1 - t);
segPos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(2),
THREE.MathUtils.randFloatSpread(2),
THREE.MathUtils.randFloatSpread(2)
));
const newNode = new Node(segPos, Math.floor(node.level * (1 - t)), 0);
newNode.distanceFromRoot = rootNode.position.distanceTo(segPos);
nodes.push(newNode);
prevNode.addConnection(newNode, 0.7);
prevNode = newNode;
}
prevNode.addConnection(rootNode, 0.8);
}
}
function generateSynapticCloud() {
rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0); rootNode.size = 1.5; nodes.push(rootNode);
const numClusters = 6;
const maxDist = 18;
const clusterNodes = [];
for (let c = 0; c < numClusters; c++) {
const phi = Math.acos(2 * Math.random() - 1);
const theta = 2 * Math.PI * Math.random();
const distance = maxDist * (0.3 + 0.7 * Math.random());
const pos = new THREE.Vector3(
distance * Math.sin(phi) * Math.cos(theta),
distance * Math.sin(phi) * Math.sin(theta),
distance * Math.cos(phi)
);
const clusterNode = new Node(pos, 1, 0);
clusterNode.size = 1.2;
clusterNode.distanceFromRoot = distance;
nodes.push(clusterNode);
clusterNodes.push(clusterNode);
rootNode.addConnection(clusterNode, 0.9);
}
for (let i = 0; i < clusterNodes.length; i++) {
for (let j = i + 1; j < clusterNodes.length; j++) {
const dist = clusterNodes[i].position.distanceTo(clusterNodes[j].position);
const probability = 1.0 - (dist / (maxDist * 2));
if (Math.random() < probability) {
const strength = 0.5 + 0.5 * (1 - dist / (maxDist * 2));
clusterNodes[i].addConnection(clusterNodes[j], strength);
}
}
}
for (const cluster of clusterNodes) {
const clusterSize = Math.floor(20 * densityFactor);
const cloudRadius = 7 + Math.random() * 3;
for (let i = 0; i < clusterSize; i++) {
const radius = cloudRadius * Math.pow(Math.random(), 0.5);
const dir = new THREE.Vector3(
THREE.MathUtils.randFloatSpread(2),
THREE.MathUtils.randFloatSpread(2),
THREE.MathUtils.randFloatSpread(2)
).normalize();
const pos = new THREE.Vector3().copy(cluster.position).add(dir.multiplyScalar(radius));
const distanceFromCluster = radius;
const distanceFromRoot = rootNode.position.distanceTo(pos);
const level = 2 + Math.floor(distanceFromCluster / 3);
const isLeaf = Math.random() < 0.5;
const newNode = new Node(pos, level, isLeaf ? 1 : 0);
newNode.distanceFromRoot = distanceFromRoot;
newNode.clusterRef = cluster;
nodes.push(newNode);
const strength = 0.7 * (1 - distanceFromCluster / cloudRadius);
cluster.addConnection(newNode, strength);
const nearbyNodes = nodes.filter(n =>
n !== newNode && n !== cluster && n.clusterRef === cluster &&
n.position.distanceTo(pos) < cloudRadius * 0.4
);
const connectionsCount = Math.floor(Math.random() * 3);
nearbyNodes.sort((a, b) => pos.distanceTo(a.position) - pos.distanceTo(b.position));
for (let j = 0; j < Math.min(connectionsCount, nearbyNodes.length); j++) {
const dist = pos.distanceTo(nearbyNodes[j].position);
const connStrength = 0.4 * (1 - dist / (cloudRadius * 0.4));
newNode.addConnection(nearbyNodes[j], connStrength);
}
}
}
const interClusterCount = Math.floor(15 * densityFactor);
for (let i = 0; i < interClusterCount; i++) {
const cluster1 = clusterNodes[Math.floor(Math.random() * clusterNodes.length)];
let cluster2;
do { cluster2 = clusterNodes[Math.floor(Math.random() * clusterNodes.length)]; } while (cluster2 === cluster1);
const bridgePos = new THREE.Vector3().lerpVectors(cluster1.position, cluster2.position, 0.3 + Math.random() * 0.4);
bridgePos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(5),
THREE.MathUtils.randFloatSpread(5),
THREE.MathUtils.randFloatSpread(5)
));
const bridgeNode = new Node(bridgePos, 2, 0);
bridgeNode.distanceFromRoot = rootNode.position.distanceTo(bridgePos);
nodes.push(bridgeNode);
cluster1.addConnection(bridgeNode, 0.5);
cluster2.addConnection(bridgeNode, 0.5);
const nearbyNodes = nodes.filter(n => n !== bridgeNode && n !== cluster1 && n !== cluster2 && n.position.distanceTo(bridgePos) < 8);
if (nearbyNodes.length > 0) {
const target = nearbyNodes[Math.floor(Math.random() * nearbyNodes.length)];
bridgeNode.addConnection(target, 0.4);
}
}
const longRangeCount = Math.floor(10 * densityFactor);
const outerNodes = nodes.filter(n => n.distanceFromRoot > maxDist * 0.6)
.sort(() => Math.random() - 0.5)
.slice(0, longRangeCount);
for (const outerNode of outerNodes) {
const numSegments = 2 + Math.floor(Math.random() * 2);
let prevNode = outerNode;
for (let i = 1; i <= numSegments; i++) {
const t = i / (numSegments + 1);
const segPos = outerNode.position.clone().multiplyScalar(1 - t * 0.8);
segPos.add(new THREE.Vector3(
THREE.MathUtils.randFloatSpread(4),
THREE.MathUtils.randFloatSpread(4),
THREE.MathUtils.randFloatSpread(4)
));
const newNode = new Node(segPos, outerNode.level, 0);
newNode.distanceFromRoot = rootNode.position.distanceTo(segPos);
nodes.push(newNode);
prevNode.addConnection(newNode, 0.6);
prevNode = newNode;
}
const innerNodes = nodes.filter(n => n.distanceFromRoot < maxDist * 0.4 && n !== rootNode);
if (innerNodes.length > 0) {
const targetNode = innerNodes[Math.floor(Math.random() * innerNodes.length)];
prevNode.addConnection(targetNode, 0.5);
}
}
}
switch (formationIndex % 4) {
case 0: generateQuantumCortex(); break;
case 1: generateHyperdimensionalMesh(); break;
case 2: generateNeuralVortex(); break;
case 3: generateSynapticCloud(); break;
}
if (densityFactor < 1.0) {
const originalNodeCount = nodes.length;
nodes = nodes.filter((node, index) => {
if (node === rootNode) return true;
const hash = (index * 31 + Math.floor(densityFactor * 100)) % 100;
return hash < (densityFactor * 100);
});
nodes.forEach(node => {
node.connections = node.connections.filter(conn => nodes.includes(conn.node));
});
console.log(`Density Filter: ${originalNodeCount} -> ${nodes.length} nodes`);
}
return { nodes, rootNode };
}
let neuralNetwork = null, nodesMesh = null, connectionsMesh = null;
function createNetworkVisualization(formationIndex, densityFactor = 1.0) {
console.log(`Creating formation ${formationIndex}, density ${densityFactor}`);
if (nodesMesh) {
scene.remove(nodesMesh);
nodesMesh.geometry.dispose();
nodesMesh.material.dispose();
nodesMesh = null;
}
if (connectionsMesh) {
scene.remove(connectionsMesh);
connectionsMesh.geometry.dispose();
connectionsMesh.material.dispose();
connectionsMesh = null;
}
neuralNetwork = generateNeuralNetwork(formationIndex, densityFactor);
if (!neuralNetwork || neuralNetwork.nodes.length === 0) {
console.error("Network generation failed or resulted in zero nodes.");
return;
}
const nodesGeometry = new THREE.BufferGeometry();
const nodePositions = [], nodeTypes = [], nodeSizes = [], nodeColors = [], connectionIndices = [], distancesFromRoot = [];
neuralNetwork.nodes.forEach((node, index) => {
nodePositions.push(node.position.x, node.position.y, node.position.z);
nodeTypes.push(node.type);
nodeSizes.push(node.size);
distancesFromRoot.push(node.distanceFromRoot);
const indices = node.connections.slice(0, 3).map(conn => neuralNetwork.nodes.indexOf(conn.node));
while (indices.length < 3) indices.push(-1);
connectionIndices.push(...indices);
const palette = colorPalettes[config.activePaletteIndex];
const colorIndex = Math.min(node.level, palette.length - 1);
const baseColor = palette[colorIndex % palette.length].clone();
baseColor.offsetHSL(
THREE.MathUtils.randFloatSpread(0.05),
THREE.MathUtils.randFloatSpread(0.1),
THREE.MathUtils.randFloatSpread(0.1)
);
nodeColors.push(baseColor.r, baseColor.g, baseColor.b);
});
nodesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(nodePositions, 3));
nodesGeometry.setAttribute('nodeType', new THREE.Float32BufferAttribute(nodeTypes, 1));
nodesGeometry.setAttribute('nodeSize', new THREE.Float32BufferAttribute(nodeSizes, 1));
nodesGeometry.setAttribute('nodeColor', new THREE.Float32BufferAttribute(nodeColors, 3));
nodesGeometry.setAttribute('connectionIndices', new THREE.Float32BufferAttribute(connectionIndices, 3));
nodesGeometry.setAttribute('distanceFromRoot', new THREE.Float32BufferAttribute(distancesFromRoot, 1));
const nodesMaterial = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone(pulseUniforms),
vertexShader: nodeShader.vertexShader,
fragmentShader: nodeShader.fragmentShader,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending
});
nodesMesh = new THREE.Points(nodesGeometry, nodesMaterial);
scene.add(nodesMesh);
const connectionsGeometry = new THREE.BufferGeometry();
const connectionColors = [], connectionStrengths = [], connectionPositions = [], startPoints = [], endPoints = [], pathIndices = [];
const processedConnections = new Set();
let pathIndex = 0;
neuralNetwork.nodes.forEach((node, nodeIndex) => {
node.connections.forEach(connection => {
const connectedNode = connection.node;
const connectedIndex = neuralNetwork.nodes.indexOf(connectedNode);
if (connectedIndex === -1) return;
const key = [Math.min(nodeIndex, connectedIndex), Math.max(nodeIndex, connectedIndex)].join('-');
if (!processedConnections.has(key)) {
processedConnections.add(key);
const startPoint = node.position;
const endPoint = connectedNode.position;
const numSegments = 15;
for (let i = 0; i < numSegments; i++) {
const t = i / (numSegments - 1);
connectionPositions.push(t, 0, 0);
startPoints.push(startPoint.x, startPoint.y, startPoint.z);
endPoints.push(endPoint.x, endPoint.y, endPoint.z);
pathIndices.push(pathIndex);
connectionStrengths.push(connection.strength);
const palette = colorPalettes[config.activePaletteIndex];
const avgLevel = Math.min(Math.floor((node.level + connectedNode.level) / 2), palette.length - 1);
const baseColor = palette[avgLevel % palette.length].clone();
baseColor.offsetHSL(
THREE.MathUtils.randFloatSpread(0.05),
THREE.MathUtils.randFloatSpread(0.1),
THREE.MathUtils.randFloatSpread(0.1)
);
connectionColors.push(baseColor.r, baseColor.g, baseColor.b);
}
pathIndex++;
}
});
});
connectionsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(connectionPositions, 3));
connectionsGeometry.setAttribute('startPoint', new THREE.Float32BufferAttribute(startPoints, 3));
connectionsGeometry.setAttribute('endPoint', new THREE.Float32BufferAttribute(endPoints, 3));
connectionsGeometry.setAttribute('connectionStrength', new THREE.Float32BufferAttribute(connectionStrengths, 1));
connectionsGeometry.setAttribute('connectionColor', new THREE.Float32BufferAttribute(connectionColors, 3));
connectionsGeometry.setAttribute('pathIndex', new THREE.Float32BufferAttribute(pathIndices, 1));
const connectionsMaterial = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone(pulseUniforms),
vertexShader: connectionShader.vertexShader,
fragmentShader: connectionShader.fragmentShader,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending
});
connectionsMesh = new THREE.LineSegments(connectionsGeometry, connectionsMaterial);
scene.add(connectionsMesh);
const palette = colorPalettes[config.activePaletteIndex];
connectionsMaterial.uniforms.uPulseColors.value[0].copy(palette[0]);
connectionsMaterial.uniforms.uPulseColors.value[1].copy(palette[1]);
connectionsMaterial.uniforms.uPulseColors.value[2].copy(palette[2]);
nodesMaterial.uniforms.uPulseColors.value[0].copy(palette[0]);
nodesMaterial.uniforms.uPulseColors.value[1].copy(palette[1]);
nodesMaterial.uniforms.uPulseColors.value[2].copy(palette[2]);
nodesMaterial.uniforms.uActivePalette.value = config.activePaletteIndex;
}
function updateTheme(paletteIndex) {
config.activePaletteIndex = paletteIndex;
if (!nodesMesh || !connectionsMesh) return;
const palette = colorPalettes[paletteIndex];
const nodeColorsAttr = nodesMesh.geometry.attributes.nodeColor;
const nodeLevels = neuralNetwork.nodes.map(n => n.level);
for (let i = 0; i < nodeColorsAttr.count; i++) {
const node = neuralNetwork.nodes[i];
if (!node) continue;
const colorIndex = Math.min(node.level, palette.length - 1);
const baseColor = palette[colorIndex % palette.length].clone();
baseColor.offsetHSL(
THREE.MathUtils.randFloatSpread(0.05),
THREE.MathUtils.randFloatSpread(0.1),
THREE.MathUtils.randFloatSpread(0.1)
);
nodeColorsAttr.setXYZ(i, baseColor.r, baseColor.g, baseColor.b);
}
nodeColorsAttr.needsUpdate = true;
const connectionColors = [];
const processedConnections = new Set();
neuralNetwork.nodes.forEach((node, nodeIndex) => {
node.connections.forEach(connection => {
const connectedNode = connection.node;
const connectedIndex = neuralNetwork.nodes.indexOf(connectedNode);
if (connectedIndex === -1) return;
const key = [Math.min(nodeIndex, connectedIndex), Math.max(nodeIndex, connectedIndex)].join('-');
if (!processedConnections.has(key)) {
processedConnections.add(key);
const numSegments = 15;
for (let i = 0; i < numSegments; i++) {
const avgLevel = Math.min(Math.floor((node.level + connectedNode.level) / 2), palette.length - 1);
const baseColor = palette[avgLevel % palette.length].clone();
baseColor.offsetHSL(
THREE.MathUtils.randFloatSpread(0.05),
THREE.MathUtils.randFloatSpread(0.1),
THREE.MathUtils.randFloatSpread(0.1)
);
connectionColors.push(baseColor.r, baseColor.g, baseColor.b);
}
}
});
});
connectionsMesh.geometry.setAttribute('connectionColor', new THREE.Float32BufferAttribute(connectionColors, 3));
connectionsMesh.geometry.attributes.connectionColor.needsUpdate = true;
nodesMesh.material.uniforms.uPulseColors.value.forEach((c, i) => c.copy(palette[i % palette.length]));
connectionsMesh.material.uniforms.uPulseColors.value.forEach((c, i) => c.copy(palette[i % palette.length]));
nodesMesh.material.uniforms.uActivePalette.value = paletteIndex;
}
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
const interactionPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
const interactionPoint = new THREE.Vector3();
let lastPulseIndex = 0;
function triggerPulse(clientX, clientY) {
pointer.x = (clientX / window.innerWidth) * 2 - 1;
pointer.y = -(clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
interactionPlane.normal.copy(camera.position).normalize();
interactionPlane.constant = -interactionPlane.normal.dot(camera.position) + camera.position.length() * 0.5;
if (raycaster.ray.intersectPlane(interactionPlane, interactionPoint)) {
const time = clock.getElapsedTime();
if (nodesMesh && connectionsMesh) {
lastPulseIndex = (lastPulseIndex + 1) % 3;
nodesMesh.material.uniforms.uPulsePositions.value[lastPulseIndex].copy(interactionPoint);
nodesMesh.material.uniforms.uPulseTimes.value[lastPulseIndex] = time;
connectionsMesh.material.uniforms.uPulsePositions.value[lastPulseIndex].copy(interactionPoint);
connectionsMesh.material.uniforms.uPulseTimes.value[lastPulseIndex] = time;
const palette = colorPalettes[config.activePaletteIndex];
const randomColor = palette[Math.floor(Math.random() * palette.length)];
nodesMesh.material.uniforms.uPulseColors.value[lastPulseIndex].copy(randomColor);
connectionsMesh.material.uniforms.uPulseColors.value[lastPulseIndex].copy(randomColor);
}
}
}
renderer.domElement.addEventListener('click', (e) => {
if (e.target.closest('.ui-panel, #control-buttons')) return;
if (!config.paused) triggerPulse(e.clientX, e.clientY);
});
renderer.domElement.addEventListener('touchstart', (e) => {
if (e.target.closest('.ui-panel, #control-buttons')) return;
e.preventDefault();
if (e.touches.length > 0 && !config.paused) {
triggerPulse(e.touches[0].clientX, e.touches[0].clientY);
}
}, { passive: false });
const themeButtons = document.querySelectorAll('.theme-button');
themeButtons.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const idx = parseInt(btn.dataset.theme, 10);
updateTheme(idx);
themeButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
});
});
const densitySlider = document.getElementById('density-slider');
const densityValue = document.getElementById('density-value');
let densityTimeout;
densitySlider.addEventListener('input', (e) => {
e.stopPropagation();
const val = parseInt(densitySlider.value, 10);
config.densityFactor = val / 100;
densityValue.textContent = `${val}%`;
clearTimeout(densityTimeout);
densityTimeout = setTimeout(() => {
createNetworkVisualization(config.currentFormation, config.densityFactor);
}, 300);
});
const changeFormationBtn = document.getElementById('change-formation-btn');
const pausePlayBtn = document.getElementById('pause-play-btn');
const resetCameraBtn = document.getElementById('reset-camera-btn');
changeFormationBtn.addEventListener('click', (e) => {
e.stopPropagation();
config.currentFormation = (config.currentFormation + 1) % config.numFormations;
createNetworkVisualization(config.currentFormation, config.densityFactor);
controls.autoRotate = false;
setTimeout(() => { controls.autoRotate = true; }, 2000);
});
pausePlayBtn.addEventListener('click', (e) => {
e.stopPropagation();
config.paused = !config.paused;
pausePlayBtn.textContent = config.paused ? 'Play' : 'Pause';
controls.autoRotate = !config.paused;
});
resetCameraBtn.addEventListener('click', (e) => {
e.stopPropagation();
controls.reset();
controls.autoRotate = false;
setTimeout(() => { controls.autoRotate = true; }, 1500);
});
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const t = clock.getElapsedTime();
if (!config.paused) {
if (nodesMesh) {
nodesMesh.material.uniforms.uTime.value = t;
nodesMesh.rotation.y = Math.sin(t * 0.05) * 0.08;
}
if (connectionsMesh) {
connectionsMesh.material.uniforms.uTime.value = t;
connectionsMesh.rotation.y = Math.sin(t * 0.05) * 0.08;
}
}
starField.rotation.y += 0.0003;
controls.update();
composer.render();
}
function init() {
createNetworkVisualization(config.currentFormation, config.densityFactor);
document.querySelectorAll('.theme-button').forEach(b => b.classList.remove('active'));
document.querySelector(`.theme-button[data-theme="${config.activePaletteIndex}"]`).classList.add('active');
updateTheme(config.activePaletteIndex);
animate();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
composer.setSize(window.innerWidth, window.innerHeight);
bloomPass.resolution.set(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);
init();
</script>
</body>
</html>
效果如下
