3D可视化揭秘：LeNet-5如何识别手写数字

当经典CNN遇上3D可视化

深度学习模型长期以来都被视为"黑箱"——我们知道它能识别图像，却难以直观理解其内部到底发生了什么。这个"黑箱"问题是AI可解释性（Explainability/Interpretability）研究领域的核心议题。一个典型的CNN可能包含数百万个参数，这些参数通过反向传播算法自动学习得到，人类无法直接理解每个参数的具体含义。反向传播（Backpropagation）是深度学习训练的核心算法，由Rumelhart、Hinton和Williams在1986年的论文中推广。其基本思想是利用链式法则（Chain Rule）从输出层向输入层逐层计算损失函数相对于每个参数的梯度——网络首先进行前向传播计算预测值，然后计算预测值与真实标签之间的损失（如交叉熵损失），最后从输出层开始逐层将梯度信号反向传播，每个参数根据其梯度和学习率进行更新，这个过程在整个训练数据集上反复迭代直到模型收敛。

近年来，学术界发展出了多种可视化和解释方法，包括Grad-CAM（梯度加权类激活映射）、特征可视化、对抗样本分析等。其中，Grad-CAM通过计算最后一个卷积层输出相对于目标类别的梯度，生成热力图来高亮输入图像中对分类决策贡献最大的区域；特征可视化则通过优化输入图像使特定神经元的激活最大化，从而"逆向"揭示每个神经元学到了什么模式。除此之外，SHAP（SHapley Additive exPlanations）基于博弈论中的Shapley值来量化每个输入特征对预测结果的贡献，LIME（Local Interpretable Model-agnostic Explanations）则通过在局部邻域拟合可解释的线性模型来近似复杂模型的行为。然而，这些方法大多面向研究人员，需要较强的数学背景才能理解其输出含义，普通学习者仍然难以直观理解模型内部的运算流程。三维可视化提供了一种完全不同的路径——它不试图用数学来"解释"模型，而是让人"看见"模型。

近日，一位开发者在 Reddit 上分享了一个颇具创意的项目：使用 VRML + JavaScript + Python + HTML 技术栈，构建了一个 LeNet-5 模型进行 MNIST 手写数字识别的 3D 可视化演示。将推理过程映射到三维空间进行交互式展示，正是一种面向教育场景的创新尝试。

这个项目的核心价值不在于模型本身有多先进，而在于它用一种可视化、可交互的方式，将卷积神经网络（CNN）的推理过程完整地呈现在三维空间中，让抽象的张量运算变得触手可及。

LeNet-5：卷积神经网络的开山之作

为什么选择 LeNet-5 做可视化

LeNet-5 是由深度学习先驱 Yann LeCun 在 1998 年提出的经典卷积神经网络，发表于其里程碑论文《Gradient-Based Learning Applied to Document Recognition》，最初用于银行支票上的手写数字识别。这篇论文不仅定义了卷积神经网络的基本架构模式，还首次系统性地证明了端到端梯度学习在模式识别任务中的有效性。虽然按今天的标准来看它结构极其简单，但正是这个网络奠定了现代 CNN 的基本范式：卷积层 + 池化层 + 全连接层 的层叠组合。

具体而言，LeNet-5 的结构包括：C1层（6个5×5卷积核，输出6@28×28），S2层（2×2平均池化，输出6@14×14），C3层（16个5×5卷积核，输出16@10×10），S4层（2×2平均池化，输出16@5×5），C5层（120个5×5卷积核），F6全连接层（84个神经元），以及最终的输出层（10个节点）。该网络总参数量仅约6万个，而现代网络如ResNet-50拥有约2500万参数，GPT-3更是达到1750亿参数——这种量级差异恰恰说明了为何LeNet-5特别适合完整可视化。

从LeNet-5出发，卷积神经网络经历了长达十余年的沉寂期，直到2012年AlexNet在ImageNet竞赛中以压倒性优势获胜，才引爆了深度学习的革命。AlexNet本质上是LeNet-5的"放大版"——更深的层数（8层）、更多的卷积核、引入了ReLU激活函数和Dropout正则化，但核心的"卷积-池化-全连接"范式与LeNet-5一脉相承。ReLU（Rectified Linear Unit，修正线性单元）的引入是一个关键突破：相比LeNet-5时代使用的Sigmoid和Tanh激活函数，ReLU（f(x)=max(0,x)）的计算极为简单且不存在梯度消失问题，使得更深网络的训练成为可能。Dropout则是一种正则化技术，在训练过程中随机"关闭"一定比例的神经元，迫使网络学习更鲁棒的特征表示，有效缓解过拟合。此后，VGGNet（2014年）证明了简单堆叠3×3小卷积核的深层网络的有效性，GoogLeNet/Inception（2014年）引入了多尺度并行卷积的Inception模块，而ResNet（2015年）通过残差连接（Skip Connection）突破了网络深度的瓶颈，将网络扩展到152层乃至上千层。残差连接的核心思想是让网络学习残差映射F(x)=H(x)-x而非直接学习目标映射H(x)，通过添加跳跃连接使梯度可以直接回传到浅层，从根本上解决了深层网络的退化问题。这些架构创新都可以追溯到LeNet-5所确立的基本设计哲学：通过局部感受野（卷积核）提取特征，通过层级堆叠构建从低级到高级的特征表示。理解LeNet-5，就是理解这整条演进链的起点。

选择 LeNet-5 作为可视化对象是明智的。它的层数不多（约 7 层），参数量小，每一层的特征图（feature map）尺寸都便于在三维空间中直观展示。相比动辄上百层的现代深度网络，LeNet-5 在"完整可视化"和"结构复杂度"之间取得了理想平衡。

MNIST：机器学习的"果蝇"数据集

MNIST 数据集包含 6 万张训练图像和 1 万张测试图像，每张都是 28×28 像素的手写数字灰度图。它被称为机器学习领域的"果蝇"——就像生物学家用果蝇做实验一样，几乎每个入门者都会用 MNIST 来验证自己的第一个模型。MNIST由美国国家标准与技术研究院（NIST）的两个手写数字数据库合并而来，经过尺寸归一化和居中处理。尽管现代研究中MNIST已被认为"过于简单"（当前最优模型的错误率已低于0.2%），研究者们更倾向于使用Fashion-MNIST（服装图像分类）、CIFAR-10（彩色物体识别）等更具挑战性的数据集，但MNIST在教学和概念验证场景中的地位依然不可撼动。

Fashion-MNIST由Zalando Research于2017年发布，保持了与MNIST完全相同的数据格式（28×28灰度图、10个类别、60000+10000的训练/测试划分），但将数字替换为T恤、裤子、连衣裙、运动鞋等服装类别，基线错误率显著高于MNIST，更能区分不同算法的性能差异。CIFAR-10则包含32×32的彩色RGB图像（飞机、汽车、鸟、猫等10类），引入了颜色信息和更复杂的背景纹理。更高级的基准如ImageNet包含1400万张图像、2万多个类别，其224×224的分辨率和复杂的真实世界场景对模型提出了截然不同层次的挑战——正是在ImageNet上的竞赛推动了从AlexNet到ResNet的一系列架构突破。

然而，MNIST的图像尺寸小、类别清晰、人类可直观判别——这些特点使其成为3D可视化演示的理想素材，因为观众可以一眼看出模型的识别结果是否正确。

技术栈解析：老技术的新玩法

VRML 的复古选择

这个项目最令人意外的是采用了 VRML（Virtual Reality Modeling Language，虚拟现实建模语言）。VRML 是上世纪 90 年代用于在网页中描述三维交互场景的标准，如今已被 X3D、WebGL、Three.js 等现代技术大量取代。

VRML最初于1994年在第一届万维网大会上被提出，1997年发布了VRML97（ISO/IEC 14772）标准。它使用纯文本描述3D场景中的几何体、材质、光照、动画和交互行为，文件通常以.wrl为扩展名。VRML的设计理念是"Web上的3D"，早于WebGL（2011年）近15年。浏览器需要安装插件（如Cortona3D、FreeWRL）才能渲染VRML内容。2004年，VRML的继任者X3D成为ISO标准，支持XML编码并增强了与现代Web技术的兼容性。尽管VRML在商业应用中已几乎消亡，但其场景图（Scene Graph）的设计思想深刻影响了后来的Three.js、A-Frame等WebXR框架。

场景图是3D图形学中一种以树形或有向无环图结构组织渲染对象的经典设计模式。根节点代表整个场景，子节点可以是几何体、光源、相机、变换节点或分组节点。变换节点（Transform）的平移、旋转、缩放会级联应用于所有子节点，这使得复杂的层级运动和空间关系可以被自然表达。在CNN可视化的语境中，整个网络可以作为根节点，每一层作为子Transform节点，层内的每个特征图又作为更深层的子节点——这种从模型拓扑到场景层级的映射关系天然适合用场景图来表达，这也解释了VRML在此项目中的适用性。

从现代Web 3D技术的角度来看，VRML的选择确实显得非主流。当前Web端3D渲染的主流方案是WebGL——一个基于OpenGL ES的JavaScript API，它允许浏览器直接调用GPU进行硬件加速渲染，无需任何插件。Three.js是建立在WebGL之上最流行的高层框架，它封装了场景管理、相机控制、几何体创建、材质系统等复杂操作，开发者可以用数十行JavaScript代码创建复杂的3D场景。更新的WebGPU标准则提供了比WebGL更底层的GPU访问能力，支持计算着色器（Compute Shader），理论上可以直接在浏览器端执行通用GPU计算乃至模型推理。在WebXR领域，A-Frame框架采用声明式HTML标签来描述3D场景，理念上与VRML的声明式方法颇为相似——开发者通过<a-box>、<a-sphere>等自定义元素构建场景，框架内部将其转换为Three.js调用。然而，VRML的声明式语法在描述静态层级结构时有着独特的简洁优势——一个复杂的网络拓扑可以用嵌套的Transform和Shape节点清晰地表达，无需编写渲染循环或管理WebGL状态机，这对于快速原型开发而言反而是一种效率上的取巧。

开发者选择 VRML，或许是出于对经典技术的情怀，也可能是看中了它在描述静态三维几何结构上的简洁性——VRML的声明式语法非常适合描述层级化的网络结构。用一门"复古"技术去可视化另一个"经典"模型（LeNet-5），这种搭配本身就颇具趣味性。

四种技术的协作分工

从技术栈的组合可以推断出各部分的职责：

• Python：负责后端的模型推理，很可能使用 PyTorch 或 TensorFlow 加载训练好的 LeNet-5 权重，对输入的 MNIST 图像进行前向传播，输出每一层的激活值。
• VRML：定义三维场景，将卷积核、特征图、全连接层的神经元等抽象概念映射为立方体、平面、连线等三维几何体。
• JavaScript：处理前端交互逻辑，实现视角旋转、层级切换、数据动态更新等功能。
• HTML：作为整个演示的承载页面，将各部分整合到浏览器中。

在这种前后端分离的架构中，推理流水线的具体工作流程值得进一步拆解。Python后端在收到一张MNIST图像后，会执行完整的前向传播（Forward Pass）过程：输入张量（1×1×28×28）依次通过每一层，每层都会产生中间激活值（Intermediate Activations）。关键在于，后端不仅输出最终的分类结果，还需要"钩住"（hook）每一层的输出——在PyTorch中，这通常通过注册forward_hook回调函数来实现，可以在不修改模型代码的前提下捕获任意层的激活张量。具体而言，开发者调用model.conv1.register_forward_hook(hook_fn)后，每当数据流经conv1层时，hook_fn会被自动调用，接收该层的输入和输出张量作为参数。这种非侵入式的设计使得同一套模型代码既可用于正常推理，又可用于可视化目的的特征提取，无需维护两套不同的模型实现。

这些中间结果随后被序列化（通常转换为JSON格式的多维数组）并通过HTTP接口传递给前端。前端JavaScript接收到这些数值数据后，将其映射为VRML场景中几何体的颜色、透明度或尺寸属性——例如，特征图中的高激活值可能被渲染为亮色方块，低激活值则显示为暗色或透明，从而让用户直观地"看到"每个卷积核对输入图像的不同响应。这种数值到视觉属性的映射（即数据可视化中的"视觉编码"）是整个系统的关键设计决策：如何选择颜色映射方案（线性映射还是对数映射？单色渐变还是双色发散？）直接影响观众对网络行为的感知和理解。

这种前后端分离的架构，让计算密集的模型推理交由 Python 完成，而将可视化渲染的任务交给浏览器端，是相当合理的设计思路。

CNN推理过程可视化：让黑箱变透明

从像素到特征的逐层转换

通过 3D 演示，观众可以清晰地看到一张手写数字图像是如何一步步被网络"理解"的：

1. 输入层：原始的 28×28 像素图像作为起点；
2. 卷积层：多个卷积核在图像上滑动，提取边缘、笔画等低级特征，生成一组特征图；
3. 池化层：对特征图进行下采样，保留关键信息的同时降低数据维度；
4. 全连接层：将高级特征映射到 10 个输出节点，对应 0-9 十个数字；
5. 输出：概率最高的节点即为模型的识别结果。

为了更具体地理解上述每一步在数学上的含义，以卷积操作为例：一个5×5的卷积核（也称滤波器）本质上是一个5×5的权重矩阵。它在输入图像上以滑动窗口的方式移动，每移动到一个位置，就将卷积核覆盖区域内的像素值与对应权重逐元素相乘后求和，得到输出特征图上一个位置的值。步长（Stride）决定了窗口每次移动的像素数——LeNet-5的C1层使用步长1，意味着卷积核逐像素滑动。填充（Padding）则控制是否在输入边缘补零以保持输出尺寸。这个滑动求和的过程，在3D可视化中可以被表现为一个高亮方块在输入平面上移动、同时在输出平面上逐步"点亮"对应位置的动画。

池化操作则更为直观：以2×2平均池化为例，它将每个2×2区域的四个值取平均合并为一个值，使得特征图的宽高各缩小一半。现代网络更常使用最大池化（Max Pooling），即取2×2区域中的最大值而非平均值，这样做能更好地保留显著特征。这个操作在3D空间中可以被可视化为四个小方块"融合"为一个更大方块的过程，让观众直觉地理解信息压缩的含义。

最终的全连接层则将所有特征图展平（Flatten）为一维向量，再通过矩阵乘法映射到10个输出节点。每个输出节点经过Softmax函数后输出一个概率值，所有概率之和为1。Softmax的数学定义为：对于输出向量z中的每个元素zi，Softmax(zi) = exp(zi) / Σ exp(zj)。这个函数将任意实数值转换为(0,1)区间内的概率分布——例如，如果10个输出节点的原始值为[2.1, 0.3, -0.5, ...]，经过Softmax后可能变为[0.82, 0.05, 0.02, ...]，表示模型有82%的置信度认为输入是数字"0"。

这种层级特征学习机制揭示了CNN的核心工作原理：浅层卷积核通常学习到边缘、角点、纹理等低级视觉特征，而深层则逐步组合出更抽象的高级语义特征（如笔画组合、数字轮廓）。2013年Zeiler和Fergus在论文《Visualizing and Understanding Convolutional Networks》中系统地展示了这一层级特征学习现象，他们使用反卷积（Deconvolution）技术将高层特征映射回输入像素空间，揭示了每个卷积核具体"关注"的视觉模式。例如，第一层卷积核可能对水平边缘或垂直边缘有强烈响应，第二层可能识别角和简单曲线，更深层则能识别完整的数字轮廓或笔画交叉点。这一发现不仅验证了CNN学习到的特征具有可解释的语义含义，也为后来的迁移学习（Transfer Learning）提供了理论基础——既然浅层学到的是通用的视觉基元，那么在一个大数据集上预训练的模型的浅层特征就可以迁移到其他视觉任务中复用。

在3D可视化中，观众可以同时观察同一层的所有特征图以及不同层之间的空间关系，这种"上帝视角"的全局观察方式是传统2D平面图无法提供的体验。

当这一切在三维空间中以立体、可旋转的方式呈现时，学习者能够真正"看见"数据在网络中的流动，而不再依赖平面示意图去脑补。三维呈现的独特优势在于：卷积层的多个特征图可以沿深度方向排列，层与层之间的连接关系可以用三维空间中的线段自然表达，整个网络的"漏斗形"结构（空间分辨率逐层缩小、通道数逐层增加）在三维空间中一目了然。

教育价值大于实用价值

需要客观指出的是，这类项目的实际工程应用价值有限——生产环境中不会用 3D 演示来做推理。但它的教育意义和科普价值却相当突出。对于正在学习深度学习的学生、需要向非技术人员解释 CNN 原理的工程师，这样一个直观的交互式演示胜过千言万语。

类似的可视化项目在AI教育生态中并非孤例。Google的TensorFlow Playground允许用户在浏览器中交互式地调整神经网络结构（包括隐藏层数量、每层神经元数、激活函数类型等），实时观察决策边界在二维分类问题上的变化——用户可以直观看到增加层数如何使决策边界从线性变为高度非线性。CNN Explainer（Georgia Tech开发）提供了2D的卷积过程动画，用户可以逐步跟踪数据从输入到输出的变换，每个卷积核的权重和对应的输出特征图都可以交互查看。distill.pub则以交互式论文的形式解释复杂的机器学习概念，其对注意力机制、特征可视化等主题的阐释被广泛认为是学术传播的典范——该平台的论文不仅包含文字和静态图表，还嵌入了可交互的JavaScript可视化组件，读者可以通过拖拽、调参等方式亲身体验算法的行为。此外，Andrej Karpathy早期开发的ConvNetJS允许在浏览器中训练小型神经网络并实时查看学习过程中权重和损失的变化。

然而，真正的3D交互式CNN推理可视化仍然相当稀少，这主要是因为三维空间的信息密度管理和用户交互设计难度远高于2D方案——如何在不遮挡重要信息的前提下展示数十个特征图、如何设计直观的三维导航方式（旋转、平移、缩放的交互逻辑）、如何处理不同缩放级别下的视觉层次（Level of Detail），这些都是非平凡的设计挑战。该项目的独特价值正在于它突破了维度限制，让空间关系的表达更加自然。

结语：技术科普需要更多创意

这个 Reddit 上的小项目提醒我们：优秀的技术传播往往来自于跨领域的创意组合。将 90 年代的 VRML 与经典的 LeNet-5 结合，用三维可视化打开神经网络的"黑箱"，正是这种创意的体现。

随着 AI 越来越深入普通人的生活，如何用直观易懂的方式解释这些复杂模型的工作原理，将变得愈发重要。欧盟《人工智能法案》（AI Act）已经明确要求高风险AI系统必须具备足够的透明度和可解释性——该法案将AI系统分为不可接受风险、高风险、有限风险和最低风险四个等级，其中高风险系统（如用于招聘、信贷评估、司法判决的AI）必须提供足够的文档和解释机制，使受影响者能够理解和质疑AI的决策。美国NIST的AI风险管理框架（AI RMF 1.0）同样将可解释性列为核心原则之一，强调AI系统的决策逻辑应当能够被相关利益方理解。在这样的监管趋势下，能够让非专业人士理解AI决策过程的可视化工具，其价值已经超越了纯粹的教育范畴，正在成为AI治理和合规的重要基础设施。类似的可视化探索，无论技术栈是否"时髦"，都值得鼓励——因为它们让抽象的算法变得可感知、可理解，这本身就是一种珍贵的贡献。