Noesis: A 3D Visualization Tool for Real-Time Observation of Neural Network 'Thinking' Processes

Noesis is an open-source neural network visualization project. By combining a neural network engine implemented purely in TypeScript with Three.js 3D rendering, it allows users to observe the forward propagation process of feedforward neural networks in real time, providing an intuitive visual experience for understanding deep learning. It uses a multi-layer perceptron trained on the MNIST dataset, supporting users to select or hand-draw digits, observe signal transmission layer by layer, neuron activation, and the generation of prediction results. It has both technical demonstration and educational tool value.

Noesis (Greek for 'pure understanding') is maintained by Chemaclass and was released on GitHub on June 5, 2026 (link: https://github.com/Chemaclass/noesis). It transforms the abstract internal mechanisms of neural networks into dynamic 3D visualizations. Its core is an MNIST-based multi-layer perceptron that can real-time display the signal propagation process from the input layer to the output layer in the browser, helping developers and students 'see' how AI 'thinks'.

Engine Layer: Pure TypeScript implementation (src/core/), no external dependencies, unit-testable; network structure: 28×28 input layer → 64-neuron hidden layer →32-neuron hidden layer →10 output layers (0-9).

Visualization Layer: Three.js (src/viz/), uses instanced rendering to efficiently display neurons and connections; activated neurons glow, connection brightness reflects weight magnitude, Bloom effect enhances the tech feel.

Training: Offline Node.js training, AdamW optimizer + mini-batch gradient descent + mild data augmentation, MNIST test set accuracy ~98%; weights serialized to JSON for frontend loading.

1. Real-time Digit Recognition: Supports preset digit samples or hand-drawn input, inferred after MNIST preprocessing.

2. Signal Propagation Visualization: Play button triggers layer-by-layer signal propagation, activated neurons glow to show.

3. Training State Comparison: Can switch between trained model and random weight model, intuitively shows the impact of training on performance.

4. Interactive Info Panel: Right-side collapsible panel provides network architecture, real-time stats, legend, and mathematical principle explanations.

Teaching Demonstration: Helps educators turn abstract concepts (weights, activation functions, etc.) into visual experiences, lowering the threshold for understanding.

Self-learning Aid: Self-learners can observe the impact of input on activation patterns, understand the reasons for digit confusion and feature representation learning.

Technical Demonstration: Shows modern web app development methods combining TypeScript, Three.js, and Vite.

Zero-dependency Core Engine: Can run in browsers, Node.js, etc., with complete unit tests.

Separation of Concerns: Strictly separates business logic (neural network computation) from presentation layer (3D rendering), facilitating independent development and testing.

Performance Optimization: Three.js instanced rendering ensures smooth animations.

Open-source Friendly: MIT license, includes contribution guidelines, ESLint static checks + Vitest unit tests ensure code quality.

Future Plans: Real-time training in the browser, neuron-level inspection (weights and receptive fields), exploring interpretability (decision trees/symbolic patterns), supporting custom network architectures.

Summary: Noesis makes deep learning easier to understand through visualization, an excellent educational tool; its architectural design (separation of concerns, testable code) provides reference for developers. Visit the online demo (https://chemaclass.github.io/noesis/) to experience or clone the repository to run locally.