Webleb - UI Elements - 3D Neural Network Visualization (Three.js)

HTML

<!DOCTYPE html>

<head>

<title>3D Quantum Neural Network</title>

</head>

<body>

<title>Neural Network</title>

<style>

:root {

--glass-bg: rgba(255, 255, 255, 0.03);

--glass-border: rgba(255, 255, 255, 0.08);

--glass-highlight: rgba(255, 255, 255, 0.2);

--neon-accent: #667eea;

--text-main: rgba(255, 255, 255, 0.9);

--text-muted: rgba(255, 255, 255, 0.6);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

user-select: none;

-webkit-user-select: none;

}

body {

overflow: hidden;

background: #050508;

font-family: 'Outfit', sans-serif;

color: var(--text-main);

}

canvas {

display: block;

width: 100%;

height: 100%;

cursor: crosshair;

position: absolute;

top: 0;

left: 0;

z-index: 1;

}

.glass-panel {

backdrop-filter: blur(24px) saturate(120%);

-webkit-backdrop-filter: blur(24px) saturate(120%);

background: linear-gradient(

145deg,

rgba(255, 255, 255, 0.05) 0%,

rgba(255, 255, 255, 0.01) 100%

);

border: 1px solid var(--glass-border);

border-top: 1px solid var(--glass-highlight);

border-left: 1px solid var(--glass-highlight);

box-shadow:

0 20px 40px rgba(0, 0, 0, 0.4),

inset 0 0 20px rgba(255, 255, 255, 0.02);

border-radius: 24px;

color: var(--text-main);

transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

position: absolute;

z-index: 10;

overflow: hidden;

}

.glass-panel::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(

90deg,

transparent,

rgba(255, 255, 255, 0.05),

transparent

);

transform: skewX(-15deg);

transition: 0.5s;

pointer-events: none;

}

.glass-panel:hover {

background: linear-gradient(

145deg,

rgba(255, 255, 255, 0.08) 0%,

rgba(255, 255, 255, 0.02) 100%

);

box-shadow:

0 30px 60px rgba(0, 0, 0, 0.5),

inset 0 0 20px rgba(255, 255, 255, 0.05);

transform: translateY(-2px);

border-color: rgba(255, 255, 255, 0.15);

}

.glass-panel:hover::before {

left: 150%;

transition: 0.7s ease-in-out;

}

#instructions-container {

top: 32px;

left: 32px;

width: 280px;

padding: 24px;

}

#instruction-title {

font-weight: 500;

font-size: 18px;

margin-bottom: 8px;

letter-spacing: -0.02em;

background: linear-gradient(135deg, #fff 30%, #a5b4fc 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

text-shadow: 0 10px 20px rgba(0,0,0,0.2);

}

.instruction-text {

font-size: 14px;

line-height: 1.5;

color: var(--text-muted);

font-weight: 300;

}

#theme-selector {

top: 32px;

right: 32px;

padding: 24px;

display: flex;

flex-direction: column;

gap: 16px;

width: 220px;

}

#theme-selector-title {

font-size: 12px;

text-transform: uppercase;

letter-spacing: 2px;

color: var(--text-muted);

font-weight: 600;

margin-bottom: 4px;

}

.theme-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 12px;

justify-items: center;

}

.theme-button {

width: 44px;

height: 44px;

border-radius: 50%;

border: none;

cursor: pointer;

position: relative;

transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

box-shadow:

0 4px 10px rgba(0,0,0,0.3),

inset 0 2px 4px rgba(255,255,255,0.4),

inset 0 -2px 4px rgba(0,0,0,0.2);

}

#theme-1 { background: radial-gradient(circle at 30% 30%, #a78bfa, #4c1d95); }

#theme-2 { background: radial-gradient(circle at 30% 30%, #fb7185, #9f1239); }

#theme-3 { background: radial-gradient(circle at 30% 30%, #38bdf8, #0c4a6e); }

.theme-button::after {

content: '';

position: absolute;

top: -4px;

left: -4px;

right: -4px;

bottom: -4px;

border-radius: 50%;

border: 2px solid rgba(255,255,255,0.8);

opacity: 0;

transform: scale(1.1);

transition: all 0.3s ease;

}

.theme-button:hover {

transform: scale(1.15) translateY(-2px);

box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 2px 6px rgba(255,255,255,0.6);

}

.theme-button.active::after {

opacity: 1;

transform: scale(1);

border-color: rgba(255,255,255,0.9);

box-shadow: 0 0 15px rgba(255,255,255,0.3);

}

#density-controls {

display: flex;

flex-direction: column;

gap: 12px;

margin-top: 8px;

}

.density-label {

display: flex;

justify-content: space-between;

font-size: 13px;

color: var(--text-muted);

font-weight: 300;

}

#density-value {

color: white;

font-weight: 500;

text-shadow: 0 0 10px rgba(255,255,255,0.3);

}

.density-slider {

-webkit-appearance: none;

width: 100%;

height: 6px;

background: rgba(255,255,255,0.1);

border-radius: 10px;

outline: none;

box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);

}

.density-slider::-webkit-slider-thumb {

-webkit-appearance: none;

width: 18px;

height: 18px;

border-radius: 50%;

background: #fff;

cursor: pointer;

box-shadow:

0 0 15px rgba(255,255,255,0.8),

0 2px 5px rgba(0,0,0,0.3);

transition: all 0.2s ease;

margin-top: -6px;

position: relative;

z-index: 2;

}

.density-slider::-webkit-slider-runnable-track {

width: 100%;

height: 6px;

cursor: pointer;

background: linear-gradient(90deg, rgba(255,255,255,0.3) var(--val, 100%), rgba(255,255,255,0.05) var(--val, 100%));

border-radius: 3px;

}

.density-slider::-webkit-slider-thumb:hover {

transform: scale(1.2);

box-shadow: 0 0 20px rgba(255,255,255,1);

}

#control-buttons {

position: absolute;

bottom: 40px;

left: 50%;

transform: translateX(-50%);

display: flex;

gap: 16px;

z-index: 20;

padding: 8px;

background: rgba(0,0,0,0.1);

}

.control-button {

backdrop-filter: blur(20px) saturate(140%);

-webkit-backdrop-filter: blur(20px) saturate(140%);

background: rgba(255, 255, 255, 0.04);

border: 1px solid rgba(255, 255, 255, 0.1);

border-top: 1px solid rgba(255, 255, 255, 0.25);

color: var(--text-main);

padding: 12px 24px;

border-radius: 50px;

cursor: pointer;

font-family: 'Outfit', sans-serif;

font-size: 13px;

font-weight: 500;

letter-spacing: 0.5px;

text-transform: uppercase;

transition: all 0.3s ease;

box-shadow:

0 8px 20px rgba(0, 0, 0, 0.3),

inset 0 0 10px rgba(255,255,255,0.02);

overflow: hidden;

position: relative;

min-width: 100px;

text-align: center;

}

.control-button:hover {

background: rgba(255, 255, 255, 0.1);

border-color: rgba(255, 255, 255, 0.4);

transform: translateY(-4px);

box-shadow:

0 15px 30px rgba(0, 0, 0, 0.4),

0 0 20px rgba(255, 255, 255, 0.1);

text-shadow: 0 0 8px rgba(255,255,255,0.6);

}

.control-button:active {

transform: translateY(-1px);

}

.control-button span {

position: relative;

z-index: 2;

}

@media (max-width: 640px) {

#instructions-container {

top: 16px;

left: 16px;

right: 16px;

width: auto;

padding: 16px;

background: rgba(10, 10, 15, 0.6);

}

#theme-selector {

top: auto;

bottom: 100px;

left: 16px;

right: 16px;

width: auto;

padding: 16px;

flex-direction: row;

align-items: center;

justify-content: space-between;

}

.theme-grid {

margin-top: 0;

}

#control-buttons {

bottom: 24px;

width: 100%;

justify-content: center;

gap: 8px;

padding: 0 16px;

}

.control-button {

padding: 10px 16px;

min-width: auto;

font-size: 11px;

flex: 1;

}

</style>

<div id="instruction-title">Quantum Neural Network</div>

<div class="instruction-text">Click to send energy pulses. <br>Drag to explore the structure.</div>

</div>

<div id="theme-selector-title">Crystal Theme</div>

</div>

<div class="density-label"><span>Density</span><span id="density-value">100%</span></div>

<input type="range" min="30" max="100" value="100" class="density-slider" id="density-slider"

aria-label="Network Density" oninput="this.style.setProperty('--val', this.value + '%')">

</div>

<button id="change-formation-btn" class="control-button"><span>Morph</span></button>

<button id="pause-play-btn" class="control-button"><span>Freeze</span></button>

<button id="reset-camera-btn" class="control-button"><span>Reset</span></button>

</div>

{

"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>

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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';

const config = {

paused: false,

activePaletteIndex: 0,

currentFormation: 0,

numFormations: 3,

densityFactor: 1

};

const colorPalettes = [

[

new THREE.Color(0x667eea),

new THREE.Color(0x764ba2),

new THREE.Color(0xf093fb),

new THREE.Color(0x9d50bb),

new THREE.Color(0x6e48aa)

],

[

new THREE.Color(0xf857a6),

new THREE.Color(0xff5858),

new THREE.Color(0xfeca57),

new THREE.Color(0xff6348),

new THREE.Color(0xff9068)

],

[

new THREE.Color(0x4facfe),

new THREE.Color(0x00f2fe),

new THREE.Color(0x43e97b),

new THREE.Color(0x38f9d7),

new THREE.Color(0x4484ce)

]

];

const scene = new THREE.Scene();

scene.fog = new THREE.FogExp2(0x000000, 0.002);

const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 8, 28);

const canvasElement = document.getElementById('neural-network-canvas');

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 = 8000;

const positions = [];

const colors = [];

const sizes = [];

for (let i = 0; i < count; i++) {

const r = THREE.MathUtils.randFloat(50, 150);

const phi = Math.acos(THREE.MathUtils.randFloatSpread(2));

const theta = THREE.MathUtils.randFloat(0, Math.PI * 2);

positions.push(

r * Math.sin(phi) * Math.cos(theta),

r * Math.sin(phi) * Math.sin(theta),

r * Math.cos(phi)

);

const colorChoice = Math.random();

if (colorChoice < 0.7) {

colors.push(1, 1, 1);

} else if (colorChoice < 0.85) {

colors.push(0.7, 0.8, 1);

} else {

colors.push(1, 0.9, 0.8);

}

sizes.push(THREE.MathUtils.randFloat(0.1, 0.3));

}

const geo = new THREE.BufferGeometry();

geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

geo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

geo.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));

const mat = new THREE.ShaderMaterial({

uniforms: {

uTime: { value: 0 }

},

vertexShader: `

attribute float size;

attribute vec3 color;

varying vec3 vColor;

uniform float uTime;

void main() {

vColor = color;

vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

float twinkle = sin(uTime * 2.0 + position.x * 100.0) * 0.3 + 0.7;

gl_PointSize = size * twinkle * (300.0 / -mvPosition.z);

gl_Position = projectionMatrix * mvPosition;

}

`,

fragmentShader: `

varying vec3 vColor;

void main() {

vec2 center = gl_PointCoord - 0.5;

float dist = length(center);

if (dist > 0.5) discard;

float alpha = 1.0 - smoothstep(0.0, 0.5, dist);

gl_FragColor = vec4(vColor, alpha * 0.8);

}

`,

transparent: true,

depthWrite: false,

blending: THREE.AdditiveBlending

});

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.6;

controls.minDistance = 8;

controls.maxDistance = 80;

controls.autoRotate = true;

controls.autoRotateSpeed = 0.2;

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.8,

0.6,

0.7

);

composer.addPass(bloomPass);

composer.addPass(new OutputPass());

const pulseUniforms = {

uTime: { value: 0.0 },

uPulsePositions: { value: [

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)

]},

uPulseSpeed: { value: 18.0 },

uBaseNodeSize: { value: 0.6 }

};

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 * m;

return 42.0 * dot(m * m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));

}`;

const nodeShader = {

vertexShader: `${noiseFunctions}

attribute float nodeSize;

attribute float nodeType;

attribute vec3 nodeColor;

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;

varying float vGlow;

float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {

if (pulseTime < 0.0) return 0.0;

float timeSinceClick = uTime - pulseTime;

if (timeSinceClick < 0.0 || timeSinceClick > 4.0) return 0.0;

float pulseRadius = timeSinceClick * uPulseSpeed;

float distToClick = distance(worldPos, pulsePos);

float pulseThickness = 3.0;

float waveProximity = abs(distToClick - pulseRadius);

return smoothstep(pulseThickness, 0.0, waveProximity) * smoothstep(4.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 breathe = sin(uTime * 0.7 + distanceFromRoot * 0.15) * 0.15 + 0.85;

float baseSize = nodeSize * breathe;

float pulseSize = baseSize * (1.0 + vPulseIntensity * 2.5);

vGlow = 0.5 + 0.5 * sin(uTime * 0.5 + distanceFromRoot * 0.2);

vec3 modifiedPosition = position;

if (nodeType > 0.5) {

float noise = snoise(position * 0.08 + uTime * 0.08);

modifiedPosition += normal * noise * 0.15;

}

vec4 mvPosition = modelViewMatrix * vec4(modifiedPosition, 1.0);

gl_PointSize = pulseSize * uBaseNodeSize * (1000.0 / -mvPosition.z);

gl_Position = projectionMatrix * mvPosition;

}`,

fragmentShader: `

uniform float uTime;

uniform vec3 uPulseColors[3];

varying vec3 vColor;

varying float vNodeType;

varying vec3 vPosition;

varying float vPulseIntensity;

varying float vDistanceFromRoot;

varying float vGlow;

void main() {

vec2 center = 2.0 * gl_PointCoord - 1.0;

float dist = length(center);

if (dist > 1.0) discard;

float glow1 = 1.0 - smoothstep(0.0, 0.5, dist);

float glow2 = 1.0 - smoothstep(0.0, 1.0, dist);

float glowStrength = pow(glow1, 1.2) + glow2 * 0.3;

float breatheColor = 0.9 + 0.1 * sin(uTime * 0.6 + vDistanceFromRoot * 0.25);

vec3 baseColor = vColor * breatheColor;

vec3 finalColor = baseColor;

if (vPulseIntensity > 0.0) {

vec3 pulseColor = mix(vec3(1.0), uPulseColors[0], 0.4);

finalColor = mix(baseColor, pulseColor, vPulseIntensity * 0.8);

finalColor *= (1.0 + vPulseIntensity * 1.2);

glowStrength *= (1.0 + vPulseIntensity);

}

float coreBrightness = smoothstep(0.4, 0.0, dist);

finalColor += vec3(1.0) * coreBrightness * 0.3;

float alpha = glowStrength * (0.95 - 0.3 * dist);

float camDistance = length(vPosition - cameraPosition);

float distanceFade = smoothstep(100.0, 15.0, camDistance);

if (vNodeType > 0.5) {

finalColor *= 1.1;

alpha *= 0.9;

}

finalColor *= (1.0 + vGlow * 0.1);

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;

varying float vDistanceFromCamera;

float getPulseIntensity(vec3 worldPos, vec3 pulsePos, float pulseTime) {

if (pulseTime < 0.0) return 0.0;

float timeSinceClick = uTime - pulseTime;

if (timeSinceClick < 0.0 || timeSinceClick > 4.0) return 0.0;

float pulseRadius = timeSinceClick * uPulseSpeed;

float distToClick = distance(worldPos, pulsePos);

float pulseThickness = 3.0;

float waveProximity = abs(distToClick - pulseRadius);

return smoothstep(pulseThickness, 0.0, waveProximity) * smoothstep(4.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.15;

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.15;

float noise = snoise(vec3(pathIndex * 0.08, t * 0.6, noiseTime));

finalPos += perpendicular * noise * 0.12;

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;

vDistanceFromCamera = length(worldPos - cameraPosition);

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;

varying float vDistanceFromCamera;

void main() {

float flowPattern1 = sin(vPathPosition * 25.0 - uTime * 4.0) * 0.5 + 0.5;

float flowPattern2 = sin(vPathPosition * 15.0 - uTime * 2.5 + 1.57) * 0.5 + 0.5;

float combinedFlow = (flowPattern1 + flowPattern2 * 0.5) / 1.5;

vec3 baseColor = vColor * (0.8 + 0.2 * sin(uTime * 0.6 + vPathPosition * 12.0));

float flowIntensity = 0.4 * combinedFlow * vConnectionStrength;

vec3 finalColor = baseColor;

if (vPulseIntensity > 0.0) {

vec3 pulseColor = mix(vec3(1.0), uPulseColors[0], 0.3);

finalColor = mix(baseColor, pulseColor * 1.2, vPulseIntensity * 0.7);

flowIntensity += vPulseIntensity * 0.8;

}

finalColor *= (0.7 + flowIntensity + vConnectionStrength * 0.5);

float baseAlpha = 0.7 * vConnectionStrength;

float flowAlpha = combinedFlow * 0.3;

float alpha = baseAlpha + flowAlpha;

alpha = mix(alpha, min(1.0, alpha * 2.5), vPulseIntensity);

float distanceFade = smoothstep(100.0, 15.0, vDistanceFromCamera);

gl_FragColor = vec4(finalColor, alpha * distanceFade);

}`

};

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.8, 1.4) : THREE.MathUtils.randFloat(0.5, 1.0);

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 generateCrystallineSphere() {

rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0);

rootNode.size = 2.0;

nodes.push(rootNode);

const layers = 5;

const goldenRatio = (1 + Math.sqrt(5)) / 2;

for (let layer = 1; layer <= layers; layer++) {

const radius = layer * 4;

const numPoints = Math.floor(layer * 12 * densityFactor);

for (let i = 0; i < numPoints; i++) {

const phi = Math.acos(1 - 2 * (i + 0.5) / numPoints);

const theta = 2 * Math.PI * i / goldenRatio;

const pos = new THREE.Vector3(

radius * Math.sin(phi) * Math.cos(theta),

radius * Math.sin(phi) * Math.sin(theta),

radius * Math.cos(phi)

);

const isLeaf = layer === layers || Math.random() < 0.3;

const node = new Node(pos, layer, isLeaf ? 1 : 0);

node.distanceFromRoot = radius;

nodes.push(node);

if (layer > 1) {

const prevLayerNodes = nodes.filter(n => n.level === layer - 1 && n !== rootNode);

prevLayerNodes.sort((a, b) =>

pos.distanceTo(a.position) - pos.distanceTo(b.position)

);

for (let j = 0; j < Math.min(3, prevLayerNodes.length); j++) {

const dist = pos.distanceTo(prevLayerNodes[j].position);

const strength = 1.0 - (dist / (radius * 2));

node.addConnection(prevLayerNodes[j], Math.max(0.3, strength));

}

} else {

rootNode.addConnection(node, 0.9);

}

const layerNodes = nodes.filter(n => n.level === layer && n !== rootNode);

for (let i = 0; i < layerNodes.length; i++) {

const node = layerNodes[i];

const nearby = layerNodes.filter(n => n !== node)

.sort((a, b) =>

node.position.distanceTo(a.position) - node.position.distanceTo(b.position)

).slice(0, 5);

for (const nearNode of nearby) {

const dist = node.position.distanceTo(nearNode.position);

if (dist < radius * 0.8 && !node.isConnectedTo(nearNode)) {

node.addConnection(nearNode, 0.6);

}

const outerNodes = nodes.filter(n => n.level >= 3);

for (let i = 0; i < Math.min(20, outerNodes.length); i++) {

const n1 = outerNodes[Math.floor(Math.random() * outerNodes.length)];

const n2 = outerNodes[Math.floor(Math.random() * outerNodes.length)];

if (n1 !== n2 && !n1.isConnectedTo(n2) &&

Math.abs(n1.level - n2.level) > 1) {

n1.addConnection(n2, 0.4);

}

function generateHelixLattice() {

rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0);

rootNode.size = 1.8;

nodes.push(rootNode);

const numHelices = 4;

const height = 30;

const maxRadius = 12;

const nodesPerHelix = Math.floor(50 * densityFactor);

const helixArrays = [];

for (let h = 0; h < numHelices; h++) {

const helixPhase = (h / numHelices) * Math.PI * 2;

const helixNodes = [];

for (let i = 0; i < nodesPerHelix; i++) {

const t = i / (nodesPerHelix - 1);

const y = (t - 0.5) * height;

const radiusScale = Math.sin(t * Math.PI) * 0.7 + 0.3;

const radius = maxRadius * radiusScale;

const angle = helixPhase + t * Math.PI * 6;

const pos = new THREE.Vector3(

radius * Math.cos(angle),

y,

radius * Math.sin(angle)

);

const level = Math.ceil(t * 5);

const isLeaf = i > nodesPerHelix - 5 || Math.random() < 0.25;

const node = new Node(pos, level, isLeaf ? 1 : 0);

node.distanceFromRoot = Math.sqrt(radius * radius + y * y);

node.helixIndex = h;

node.helixT = t;

nodes.push(node);

helixNodes.push(node);

}

helixArrays.push(helixNodes);

rootNode.addConnection(helixNodes[0], 1.0);

for (let i = 0; i < helixNodes.length - 1; i++) {

helixNodes[i].addConnection(helixNodes[i + 1], 0.85);

}

for (let h = 0; h < numHelices; h++) {

const currentHelix = helixArrays[h];

const nextHelix = helixArrays[(h + 1) % numHelices];

for (let i = 0; i < currentHelix.length; i += 5) {

const t = currentHelix[i].helixT;

const targetIdx = Math.round(t * (nextHelix.length - 1));

if (targetIdx < nextHelix.length) {

currentHelix[i].addConnection(nextHelix[targetIdx], 0.7);

}

for (const helix of helixArrays) {

for (let i = 0; i < helix.length; i += 8) {

const node = helix[i];

const innerNodes = nodes.filter(n =>

n !== node &&

n !== rootNode &&

n.distanceFromRoot < node.distanceFromRoot * 0.5

);

if (innerNodes.length > 0) {

const nearest = innerNodes.sort((a, b) =>

node.position.distanceTo(a.position) - node.position.distanceTo(b.position)

)[0];

node.addConnection(nearest, 0.5);

}

const allHelixNodes = nodes.filter(n => n !== rootNode);

for (let i = 0; i < Math.floor(30 * densityFactor); i++) {

const n1 = allHelixNodes[Math.floor(Math.random() * allHelixNodes.length)];

const nearby = allHelixNodes.filter(n => {

const dist = n.position.distanceTo(n1.position);

return n !== n1 && dist < 8 && dist > 3 && !n1.isConnectedTo(n);

});

if (nearby.length > 0) {

const n2 = nearby[Math.floor(Math.random() * nearby.length)];

n1.addConnection(n2, 0.45);

}

function generateFractalWeb() {

rootNode = new Node(new THREE.Vector3(0, 0, 0), 0, 0);

rootNode.size = 1.6;

nodes.push(rootNode);

const branches = 6;

const maxDepth = 4;

function createBranch(startNode, direction, depth, strength, scale) {

if (depth > maxDepth) return;

const branchLength = 5 * scale;

const endPos = new THREE.Vector3()

.copy(startNode.position)

.add(direction.clone().multiplyScalar(branchLength));

const isLeaf = depth === maxDepth || Math.random() < 0.3;

const newNode = new Node(endPos, depth, isLeaf ? 1 : 0);

newNode.distanceFromRoot = rootNode.position.distanceTo(endPos);

nodes.push(newNode);

startNode.addConnection(newNode, strength);

if (depth < maxDepth) {

const subBranches = 3;

for (let i = 0; i < subBranches; i++) {

const angle = (i / subBranches) * Math.PI * 2;

const perpDir1 = new THREE.Vector3(-direction.y, direction.x, 0).normalize();

const perpDir2 = direction.clone().cross(perpDir1).normalize();

const newDir = new THREE.Vector3()

.copy(direction)

.add(perpDir1.clone().multiplyScalar(Math.cos(angle) * 0.7))

.add(perpDir2.clone().multiplyScalar(Math.sin(angle) * 0.7))

.normalize();

createBranch(newNode, newDir, depth + 1, strength * 0.7, scale * 0.75);

}

for (let i = 0; i < branches; i++) {

const phi = Math.acos(1 - 2 * (i + 0.5) / branches);

const theta = Math.PI * (1 + Math.sqrt(5)) * i;

const direction = new THREE.Vector3(

Math.sin(phi) * Math.cos(theta),

Math.sin(phi) * Math.sin(theta),

Math.cos(phi)

).normalize();

createBranch(rootNode, direction, 1, 0.9, 1.0);

}

const leafNodes = nodes.filter(n => n.level >= 2);

for (let i = 0; i < leafNodes.length; i++) {

const node = leafNodes[i];

const nearby = leafNodes.filter(n => {

const dist = n.position.distanceTo(node.position);

return n !== node && dist < 10 && !node.isConnectedTo(n);

}).sort((a, b) =>

node.position.distanceTo(a.position) - node.position.distanceTo(b.position)

).slice(0, 3);

for (const nearNode of nearby) {

if (Math.random() < 0.5 * densityFactor) {

node.addConnection(nearNode, 0.5);

}

const midLevelNodes = nodes.filter(n => n.level >= 2 && n.level <= 3);

for (const node of midLevelNodes) {

if (Math.random() < 0.3) {

const innerNodes = nodes.filter(n =>

n !== node &&

n.distanceFromRoot < node.distanceFromRoot * 0.6

);

if (innerNodes.length > 0) {

const target = innerNodes[Math.floor(Math.random() * innerNodes.length)];

if (!node.isConnectedTo(target)) {

node.addConnection(target, 0.4);

}

switch (formationIndex % 3) {

case 0: generateCrystallineSphere(); break;

case 1: generateHelixLattice(); break;

case 2: generateFractalWeb(); break;

}

if (densityFactor < 1.0) {

const targetCount = Math.ceil(nodes.length * Math.max(0.3, densityFactor));

const toKeep = new Set([rootNode]);

const sortedNodes = nodes.filter(n => n !== rootNode)

.sort((a, b) => {

const scoreA = a.connections.length * (1 / (a.distanceFromRoot + 1));

const scoreB = b.connections.length * (1 / (b.distanceFromRoot + 1));

return scoreB - scoreA;

});

for (let i = 0; i < Math.min(targetCount - 1, sortedNodes.length); i++) {

toKeep.add(sortedNodes[i]);

}

nodes = nodes.filter(n => toKeep.has(n));

nodes.forEach(node => {

node.connections = node.connections.filter(conn => toKeep.has(conn.node));

});

console.log(`Density: ${nodes.length} nodes`);

}

return { nodes, rootNode };

}

let neuralNetwork = null;

let nodesMesh = null;

let 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();

}

if (connectionsMesh) {

scene.remove(connectionsMesh);

connectionsMesh.geometry.dispose();

connectionsMesh.material.dispose();

}

neuralNetwork = generateNeuralNetwork(formationIndex, densityFactor);

if (!neuralNetwork || neuralNetwork.nodes.length === 0) {

console.error("Network generation failed");

return;

}

const nodesGeometry = new THREE.BufferGeometry();

const nodePositions = [];

const nodeTypes = [];

const nodeSizes = [];

const nodeColors = [];

const distancesFromRoot = [];

const palette = colorPalettes[config.activePaletteIndex];

neuralNetwork.nodes.forEach((node) => {

nodePositions.push(node.position.x, node.position.y, node.position.z);

nodeTypes.push(node.type);

nodeSizes.push(node.size);

distancesFromRoot.push(node.distanceFromRoot);

const colorIndex = Math.min(node.level, palette.length - 1);

const baseColor = palette[colorIndex % palette.length].clone();

baseColor.offsetHSL(

THREE.MathUtils.randFloatSpread(0.03),

THREE.MathUtils.randFloatSpread(0.08),

THREE.MathUtils.randFloatSpread(0.08)

);

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('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 = [];

const connectionStrengths = [];

const connectionPositions = [];

const startPoints = [];

const endPoints = [];

const 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 = 20;

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 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.03),

THREE.MathUtils.randFloatSpread(0.08),

THREE.MathUtils.randFloatSpread(0.08)

);

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);

palette.forEach((color, i) => {

if (i < 3) {

connectionsMaterial.uniforms.uPulseColors.value[i].copy(color);

nodesMaterial.uniforms.uPulseColors.value[i].copy(color);

}

});

}

function updateTheme(paletteIndex) {

config.activePaletteIndex = paletteIndex;

if (!nodesMesh || !connectionsMesh || !neuralNetwork) return;

const palette = colorPalettes[paletteIndex];

const nodeColorsAttr = nodesMesh.geometry.attributes.nodeColor;

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.03),

THREE.MathUtils.randFloatSpread(0.08),

THREE.MathUtils.randFloatSpread(0.08)

);

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 = 20;

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.03),

THREE.MathUtils.randFloatSpread(0.08),

THREE.MathUtils.randFloatSpread(0.08)

);

connectionColors.push(baseColor.r, baseColor.g, baseColor.b);

}

});

connectionsMesh.geometry.setAttribute('connectionColor', new THREE.Float32BufferAttribute(connectionColors, 3));

connectionsMesh.geometry.attributes.connectionColor.needsUpdate = true;

palette.forEach((color, i) => {

if (i < 3) {

nodesMesh.material.uniforms.uPulseColors.value[i].copy(color);

connectionsMesh.material.uniforms.uPulseColors.value[i].copy(color);

}

});

}

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('.glass-panel, #control-buttons')) return;

if (!config.paused) triggerPulse(e.clientX, e.clientY);

});

renderer.domElement.addEventListener('touchstart', (e) => {

if (e.target.closest('.glass-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);

}, 400);

});

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; }, 2500);

});

pausePlayBtn.addEventListener('click', (e) => {

e.stopPropagation();

config.paused = !config.paused;

pausePlayBtn.querySelector('span').textContent = config.paused ? 'Play' : 'Freeze';

controls.autoRotate = !config.paused;

});

resetCameraBtn.addEventListener('click', (e) => {

e.stopPropagation();

controls.reset();

controls.autoRotate = false;

setTimeout(() => { controls.autoRotate = true; }, 2000);

});

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.04) * 0.05;

}

if (connectionsMesh) {

connectionsMesh.material.uniforms.uTime.value = t;

connectionsMesh.rotation.y = Math.sin(t * 0.04) * 0.05;

}

starField.rotation.y += 0.0002;

starField.material.uniforms.uTime.value = t;

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');

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>

3D Neural Network Visualization (Three.js)

Recommended

3D Card Hover Effect

3D Smartwatch CSS HTML JavaScript Code

3d silder effect

HTML

CSS

JS

Recommended

3D Card Hover Effect

3D Smartwatch CSS HTML JavaScript Code

3d silder effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS