3D-network-vis

A pretty network visualization inspired by a codepen post I stumbled upon.

Drogon chatGPT recommended repo structure:

3D-network-vis/
│
├── index.html
├── README.md
├── package.json              (optional later)
│
├── assets/
│   ├── css/
│   │   └── styles.css
│   └── shaders/
│       ├── nodeVertex.glsl
│       ├── nodeFragment.glsl
│       ├── connectionVertex.glsl
│       └── connectionFragment.glsl
│
├── src/
│   ├── main.js               ← entry point
│   ├── scene/
│   │   ├── sceneSetup.js
│   │   ├── camera.js
│   │   └── renderer.js
│   │
│   ├── network/
│   │   ├── Node.js
│   │   ├── generator.js      ← YOUR math lives here
│   │   └── formations.js
│   │
│   ├── visualization/
│   │   ├── nodes.js
│   │   ├── connections.js
│   │   └── materials.js
│   │
│   ├── interaction/
│   │   ├── controls.js
│   │   └── pulses.js
│   │
│   └── utils/
│       ├── noise.js
│       └── math.js

This mirros you you'd structure:

• MATLAB projects
• Python scientific code

Additional Notes

Paste shader code in:

assets/shaders/nodeVertex.glsl
assets/shaders/nodeFragment.glsl

Paste shader code here. Then load them: javascript async function loadShader(path) { const res = await fetch(path); return await res.text(); } Why this matters for me: This separation lets me think in layers

Layer	Function
generator.js	math/physics
shaders	field dynamics
visualization	mapping
main.js	orchestration

Original Source Code:

@misc{3D_nn_visualization,
  author = {Techartist},
  title = {3D Quantum Neural Network},
  year = {2025},
  howpublished = {\url{https://codepen.io/VoXelo/pen/dPMeGze}},
  note = {One single HTML File}
}