Ubuntu
228 lines
9.8 KiB
HTML
228 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>13 - NEURAL | 神经网络</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #000; overflow: hidden; font-family: 'Space Mono', monospace; }
|
|
#canvas-container { width: 100vw; height: 100vh; }
|
|
.info {
|
|
position: fixed; top: 20px; left: 20px; color: #a855f7;
|
|
font-size: 14px; pointer-events: none; z-index: 100;
|
|
text-shadow: 0 0 10px rgba(168,85,247,0.8);
|
|
}
|
|
.info h1 { font-size: 20px; margin-bottom: 8px; }
|
|
.info p { opacity: 0.8; font-size: 12px; margin: 4px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="canvas-container"></div>
|
|
<div class="info">
|
|
<h1>13 - NEURAL</h1>
|
|
<p>神经网络 - 脉冲传播可视化</p>
|
|
<p>粒子数: <span id="count">0</span></p>
|
|
<p>FPS: <span id="fps">0</span></p>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
|
|
|
|
<script>
|
|
const COUNT = 6000; // 节点: 800, 连接脉冲: 5200
|
|
const NODE_COUNT = 800;
|
|
const LAYERS = 5;
|
|
const NODES_PER_LAYER = NODE_COUNT / LAYERS;
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.fog = new THREE.FogExp2(0x000000, 0.006);
|
|
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
|
|
camera.position.set(60, 20, 60);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
document.getElementById('canvas-container').appendChild(renderer.domElement);
|
|
|
|
const controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true;
|
|
controls.autoRotate = true;
|
|
controls.autoRotateSpeed = 0.2;
|
|
|
|
const renderScene = new THREE.RenderPass(scene, camera);
|
|
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0);
|
|
bloomPass.strength = 1.8; bloomPass.radius = 0.5; bloomPass.threshold = 0;
|
|
const composer = new THREE.EffectComposer(renderer);
|
|
composer.addPass(renderScene);
|
|
composer.addPass(bloomPass);
|
|
|
|
const dummy = new THREE.Object3D();
|
|
const color = new THREE.Color();
|
|
const geometry = new THREE.SphereGeometry(0.3, 8, 8);
|
|
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
|
|
const instancedMesh = new THREE.InstancedMesh(geometry, material, COUNT);
|
|
instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
|
|
scene.add(instancedMesh);
|
|
|
|
// 神经网络结构
|
|
const nodes = [];
|
|
const connections = [];
|
|
const pulses = []; // 电脉冲
|
|
|
|
// 创建分层节点
|
|
for (let l = 0; l < LAYERS; l++) {
|
|
const layerX = (l - LAYERS/2) * 25;
|
|
for (let n = 0; n < NODES_PER_LAYER; n++) {
|
|
const angle = (n / NODES_PER_LAYER) * Math.PI * 2;
|
|
const radius = 12 + Math.sin(n * 0.5) * 3;
|
|
nodes.push({
|
|
x: layerX + (Math.random() - 0.5) * 3,
|
|
y: Math.sin(angle) * radius + (Math.random() - 0.5) * 2,
|
|
z: Math.cos(angle) * radius + (Math.random() - 0.5) * 2,
|
|
layer: l,
|
|
index: n,
|
|
activation: 0,
|
|
pulseTimer: Math.random() * 100
|
|
});
|
|
}
|
|
}
|
|
|
|
// 创建连接（仅相邻层）
|
|
for (let l = 0; l < LAYERS - 1; l++) {
|
|
for (let n1 = 0; n1 < NODES_PER_LAYER; n1++) {
|
|
const startNode = nodes[l * NODES_PER_LAYER + n1];
|
|
// 每个节点连接到下一层的一些节点
|
|
const connectionsCount = 3 + Math.floor(Math.random() * 4);
|
|
for (let c = 0; c < connectionsCount; c++) {
|
|
const targetN = Math.floor(Math.random() * NODES_PER_LAYER);
|
|
const endNode = nodes[(l + 1) * NODES_PER_LAYER + targetN];
|
|
connections.push({
|
|
start: startNode,
|
|
end: endNode,
|
|
weight: Math.random()
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// 初始化脉冲
|
|
for (let i = 0; i < COUNT - NODE_COUNT; i++) {
|
|
pulses.push({
|
|
connection: connections[Math.floor(Math.random() * connections.length)],
|
|
progress: Math.random(),
|
|
speed: 0.005 + Math.random() * 0.01,
|
|
active: false
|
|
});
|
|
}
|
|
|
|
document.getElementById('count').textContent = COUNT;
|
|
let lastTime = performance.now(), frameCount = 0;
|
|
const fpsEl = document.getElementById('fps');
|
|
const clock = new THREE.Clock();
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
const now = performance.now();
|
|
frameCount++;
|
|
if (now - lastTime >= 1000) { fpsEl.textContent = frameCount; frameCount = 0; lastTime = now; }
|
|
|
|
const time = clock.getElapsedTime();
|
|
|
|
// 渲染节点
|
|
for (let i = 0; i < NODE_COUNT; i++) {
|
|
const node = nodes[i];
|
|
|
|
// 随机激活
|
|
node.pulseTimer--;
|
|
if (node.pulseTimer <= 0) {
|
|
node.activation = 1;
|
|
node.pulseTimer = 50 + Math.random() * 100;
|
|
// 激活连接的脉冲
|
|
pulses.forEach(p => {
|
|
if (p.connection.start === node && Math.random() < 0.3) {
|
|
p.active = true;
|
|
p.progress = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
node.activation *= 0.95; // 衰减
|
|
|
|
dummy.position.set(node.x, node.y, node.z);
|
|
const scale = 1 + node.activation * 1.5;
|
|
dummy.scale.setScalar(scale);
|
|
dummy.updateMatrix();
|
|
instancedMesh.setMatrixAt(i, dummy.matrix);
|
|
|
|
// 颜色：激活时为亮紫，平时为暗紫
|
|
const hue = 0.75; // 紫色
|
|
const sat = 0.8;
|
|
const light = 0.2 + node.activation * 0.6;
|
|
color.setHSL(hue, sat, light);
|
|
instancedMesh.setColorAt(i, color);
|
|
}
|
|
|
|
// 渲染脉冲
|
|
for (let i = 0; i < pulses.length; i++) {
|
|
const p = pulses[i];
|
|
const idx = NODE_COUNT + i;
|
|
|
|
if (p.active) {
|
|
p.progress += p.speed;
|
|
if (p.progress >= 1) {
|
|
p.active = false;
|
|
p.progress = 0;
|
|
// 到达时激活终点
|
|
p.connection.end.activation = Math.min(p.connection.end.activation + 0.5, 1);
|
|
}
|
|
} else {
|
|
// 随机激活
|
|
if (Math.random() < 0.001) {
|
|
p.active = true;
|
|
p.progress = 0;
|
|
p.connection = connections[Math.floor(Math.random() * connections.length)];
|
|
}
|
|
}
|
|
|
|
// 在连接线上插值位置
|
|
const t = p.active ? p.progress : Math.random();
|
|
const x = p.connection.start.x + (p.connection.end.x - p.connection.start.x) * t;
|
|
const y = p.connection.start.y + (p.connection.end.y - p.connection.start.y) * t;
|
|
const z = p.connection.start.z + (p.connection.end.z - p.connection.start.z) * t;
|
|
|
|
dummy.position.set(x, y, z);
|
|
dummy.scale.setScalar(p.active ? 0.8 : 0.1);
|
|
dummy.updateMatrix();
|
|
instancedMesh.setMatrixAt(idx, dummy.matrix);
|
|
|
|
// 脉冲颜色：青色到紫色
|
|
const hue = p.active ? 0.5 + t * 0.25 : 0.75;
|
|
const light = p.active ? 0.8 : 0.1;
|
|
color.setHSL(hue, 0.9, light);
|
|
instancedMesh.setColorAt(idx, color);
|
|
}
|
|
|
|
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
instancedMesh.instanceColor.needsUpdate = true;
|
|
controls.update();
|
|
composer.render();
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
composer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|