1. 项目缘起：从线下到线上的“数字存档”冲动
ChinaJoy刚结束，场馆里人潮退去，那些精心搭建的展台、炫酷的灯光和互动装置，仿佛一场盛大的数字梦境，醒来后只留下零星的记忆碎片和手机里杂乱的照片。作为一名常年混迹于各大科技展会的从业者，我每年都有这种强烈的“存档”冲动——这些凝聚了无数设计师、工程师心血的作品，难道只能在短短几天后就被拆除，然后消失在物理世界里吗？尤其是今年，第23届ChinaJoy的规模空前，近千个展台各具特色，从游戏巨头的沉浸式体验区到独立开发者的创意角落，信息密度极高。我意识到，仅仅靠照片和视频，根本无法完整记录和复现那种身临其境的氛围与空间关系。
于是，一个想法冒了出来：能不能用技术手段，把这些线下展台“搬”到线上，做一个永久性的、可交互的3D云展馆？这不仅仅是为了“留念”，更深层的需求在于，它能打破时空限制，让无法亲临现场的人也能“逛展”，让参展商的作品获得更长的展示周期，甚至为未来的展会策划、展台设计提供可量化的参考数据。说干就干，我决定以本届ChinaJoy的965个展台为样本，挑战这个看似庞大的“数字孪生”项目。
2. 核心挑战拆解：965个展台的数字化并非易事
把近千个形态各异、结构复杂的实体展台转化为线上3D模型，听起来很酷，但实际操作起来，每一步都充满了挑战。这绝不是一个简单的“拍照上传”过程，而是一个涉及数据采集、处理、重建和呈现的系统工程。
2.1 数据采集：在摩肩接踵中寻找最佳角度
第一步也是最基础的一步：获取每个展台的原始空间数据。在ChinaJoy现场，人山人海是最大的障碍。传统的激光扫描仪虽然精度高，但在这种动态、拥挤的环境下几乎无法施展。我采用的方案是多角度高清摄影测量法。具体来说，我使用了配备高像素全画幅相机和稳定器的设备，围绕每个展台进行系统性拍摄。
拍摄策略至关重要：
- 环绕拍摄：以展台为中心，每隔一定角度（通常15-20度）拍摄一张，确保覆盖360度全景。
- 分层拍摄：对于有高度的展台（如双层结构、大型雕塑），需要从低、中、高多个视平线进行拍摄，以捕捉顶部和侧面的细节。
- 细节补拍：对展台上的屏幕内容、纹理材质、Logo等关键信息进行特写拍摄。
- 空间关系记录：拍摄展台与周边通道、相邻展台的关系，用于后期在云展馆中精准定位。
平均每个展台需要拍摄80-120张原始照片。965个展台，总计拍摄了超过10万张高清照片。这不仅仅是个体力活，更考验耐心和规划，要避开人流高峰，抓住布展和清场时的“黄金时间”。
2.2 数据处理与3D重建：从照片到模型的“魔法”
海量照片只是原材料，如何将它们变成3D模型，是技术的核心。我使用的是基于运动恢复结构（Structure from Motion, SfM）和多视图立体（Multi-View Stereo, MVS）的自动化三维重建流程。
这个流程可以分解为几个关键步骤：
- 特征提取与匹配：软件（如RealityCapture、Metashape）会分析每张照片，找出如墙角、纹理拐角等独特的特征点，并计算不同照片中相同特征点的对应关系。这步决定了重建的精度和成功率。
- 稀疏点云生成：通过匹配的特征点，软件计算出相机的拍摄位置（运动恢复）和场景的初步三维结构，形成一个稀疏的点云。你可以把它理解为用一些稀疏的星星勾勒出展台的轮廓。
- 稠密点云生成：在已知相机位置的基础上，通过MVS算法，计算照片中每个像素的深度信息，生成一个极其密集的点云模型。这时，展台已经有了细腻的“毛坯”形态。
- 网格生成与纹理映射：将稠密点云转换成由三角面片构成的网格表面（Mesh）。最后，将拍摄的高清照片作为纹理，精准地贴附到网格模型上，还原出展台的颜色、图案和材质感。
这个过程对计算资源是巨大的考验。单个复杂展台的重建，就可能需要数小时甚至更长时间的高性能GPU运算。我搭建了一个本地的工作站集群来处理这批数据。
注意：现场光照的剧烈变化（如闪烁的LED屏、射灯）和大量反光材质（玻璃、亚克力）是重建的“天敌”，容易导致特征点匹配失败或模型表面出现扭曲。我的经验是，在拍摄时尽量使用小光圈保证景深，并适当调整曝光补偿，避免高光过曝。后期在软件中，可以对过亮或过暗的区域进行选区屏蔽处理。
2.3 模型优化与轻量化：让网页也能流畅加载
通过重建得到的原始模型，面数往往高达数百万甚至上千万，文件体积巨大，直接用于网页展示会导致加载缓慢甚至崩溃。因此，模型优化（Retopology）和轻量化是必不可少的一步。
我的优化策略包括：
- 减面：在保持主要外形轮廓的前提下，使用算法减少三角面片的数量。对于平坦区域，大幅减少面数；对于有弧线、雕刻细节的区域，则谨慎处理。
- 烘焙纹理：将高模的细节（如凹凸、划痕）通过法线贴图（Normal Map）和环境光遮蔽贴图（Ambient Occlusion Map）的形式“烘焙”到一张低模的纹理上。这样，低面数模型通过贴图也能呈现出丰富的细节，性能开销却小得多。
- 纹理压缩与图集合并：将多个零散的纹理图片合并成一张大图（纹理图集），并采用WebP等现代压缩格式，减少HTTP请求数量和文件体积。
经过优化后，一个原本500MB的展台模型，可以缩减到20MB以下，同时视觉保真度损失控制在可接受范围内，为网页端实时渲染奠定了基础。
3. 云展馆的构建：从散装模型到可逛的虚拟空间
拥有了965个独立的3D展台模型，就像有了965块积木。下一步，是如何把这些积木按照ChinaJoy现场的实际布局，搭建出一个可以让用户自由行走、探索的线上场馆。
3.1 空间布局与场景管理
我首先拿到了本届ChinaJoy的官方展位图（平面图）。在三维创作软件（如Blender）中，我以此图为蓝本，创建了一个巨大的平面作为展馆地面，并按照图纸上的坐标，将每个优化后的展台模型精准“摆放”到对应的位置。
这里的关键在于层级管理：
- 我将整个云展馆按实际展馆（如N1、N2、E1等）和展区（如游戏、硬件、动漫等）进行划分，建立清晰的父子层级关系。
- 为每个展台模型添加了元数据标签，如参展商名称、所属类别、主要展示内容等，为后续的搜索和筛选功能做准备。
3.2 交互与渲染引擎的选择
为了让用户能在浏览器中无需下载插件即可流畅体验，我选择了Three.js作为核心的3D渲染引擎。它是一个基于WebGL的JavaScript库，功能强大且社区活跃。
基于Three.js，我实现了以下核心功能：
- 第一人称漫游控制器：模拟人在场馆中行走的感觉。我使用了指针锁定（Pointer Lock）API来控制视角，用WASD键控制移动，并加入了简单的碰撞检测，防止用户“穿墙而过”。
- 场景加载与性能优化：一次性加载965个模型是不可能的。我采用了按需加载（LOD）和视锥体剔除技术。系统只加载用户当前视野范围内（以及即将进入的范围）的模型，并且根据模型与摄像机的距离，动态切换不同精度的模型版本（高模用于近看，低模用于远观）。
- 光照与氛围营造：线下展台的效果很大程度上依赖于灯光。在线上，我通过设置全局环境光、模拟展台自发光（如屏幕光效）以及添加轻微的辉光（Bloom）后处理效果，来复现那种炫酷、充满未来感的氛围，避免模型看起来像单调的“石膏像”。
- 交互热点：在重要的展台区域，如可播放视频的屏幕、可查看详情的产品旁，设置了可点击的交互热点。用户点击后，可以弹出信息面板，展示图文介绍、宣传视频或跳转到官网。
3.3 前端架构与用户体验
整个云展馆是一个单页应用（SPA）。前端框架我使用了Vue 3，因为它响应式系统能很好地管理复杂的UI状态（如当前所在展馆、激活的信息面板等）。
为了提升用户体验，我着重处理了以下几点：
- 加载体验：进入云展馆前，有一个加载进度条，并展示一些有趣的展台预览图，降低等待焦虑。采用异步加载和资源预取策略。
- 地图与导航：在界面一角常驻一个2D缩略图，实时显示用户当前位置和朝向。用户也可以直接点击缩略图上的展台图标进行快速传送。
- 搜索与筛选：顶部有一个搜索框，用户可以按参展商名称或关键词搜索展台。同时提供按展馆、行业类别进行筛选的侧边栏，方便有目的的参观。
- 移动端适配：虽然3D体验在桌面端更佳，但我也考虑了移动端的基本可访问性，将移动操作简化为触摸旋转视角和虚拟摇杆移动。
4. 踩坑实录：那些教科书上不会写的教训
这个项目从构想到实现，踩过的坑比ChinaJoy现场的人还多。分享几个最典型的，希望能帮到想做类似事情的朋友。
4.1 数据采集的“软”坑：权限与伦理
坑点：一开始我兴冲冲地去拍，但很快被一些展台工作人员制止。原因在于，很多展台的设计、未公开的游戏内容或硬件产品具有商业机密性质，未经允许拍摄细节可能涉及侵权。
解决方案：
- 事先沟通：对于特别想精细重建的头部厂商展台，我尝试通过邮件或现场与公关人员沟通，说明项目的非商业、存档性质，有时能获得特别许可甚至拿到官方提供的素材。
- 公共区域原则：将拍摄严格限制在面向公众开放的视角，不拍摄后台、封闭体验区内部。对于展台整体外形，这在大多数情况下属于在公共空间对建筑外观的合理记录。
- 后期处理：对于确实无法规避的敏感屏幕内容（如内部测试UI），在纹理贴图阶段进行模糊或替换处理。
4.2 重建失败与模型修复
坑点：不是所有展台都能完美重建。纯色、缺乏纹理的墙面（如纯白展板），镜面反射强烈的区域，以及被大量流动人群持续遮挡的角落，都会导致SfM算法无法匹配特征点，生成模型空洞或严重扭曲。
我的修复流水线：
- 人工干预匹配：在重建软件中，手动添加一些控制点，帮助软件建立不同照片间的联系。
- 几何修补：对于大的空洞，在三维软件中根据照片参考，手动使用多边形工具进行修补，重建大形。
- 纹理投影修补：对于扭曲的纹理，利用未扭曲的照片，通过投影的方式重新绘制该区域的贴图。
- “战略性放弃”：对于极少数重建质量实在太差、修复成本过高的展台，我会用一个简化的立方体或基础形状配合展台海报作为替代，并标注“模型仅供参考”，保证整体地图的完整性，而不是卡在这里。
4.3 性能瓶颈与优化拉锯战
坑点：当我在本地测试，加载了上百个模型后，浏览器帧率骤降，风扇狂转。主要的性能杀手是：Draw Call（绘制调用）过多、GPU内存溢出。
深度优化手段：
- 实例化渲染（Instanced Rendering）：对于大量结构相似、仅纹理不同的展台（如标准展位），我将它们合并成一个模型，通过实例化渲染技术，一次绘制调用就能画出成千上万个，极大降低了CPU向GPU发送指令的开销。这是本次项目性能提升最关键的一步。
- 纹理共享与压缩：分析所有模型的纹理，将颜色相近的材质纹理进行共享。同时，采用Basis Universal等超压缩纹理格式，在几乎不损失画质的情况下，将纹理体积再减少70%以上。
- Web Worker多线程：将模型解码、数据处理等耗时任务放到Web Worker线程中，避免阻塞主线程导致页面卡顿。
经过多轮优化，最终在主流台式机上，即使身处展台最密集的区域，也能保持60fps的流畅帧率。
5. 超越展示：云展馆的潜在价值延伸
项目做到这里，一个可逛可看的3D云展馆已经成型。但我觉得它的价值不应止步于“数字纪念册”。在和几位展会行业的朋友交流后，我们碰撞出一些更有趣的延伸方向。
5.1 数据分析与展会洞察
每一个用户在云展馆中的行为，都是数据。通过埋点，可以分析出：
- 热度地图：哪些展台、哪些区域停留时间最长、点击交互最多？这比线下人工观察更精确，能为下届展会的展位定价、通道规划提供直接依据。
- 参观动线分析：大多数用户的行走路径是怎样的？是否存在被忽略的“死角”区域？这可以帮助优化场馆内的指引标识和活动安排。
- 内容偏好：用户更关注哪些类型的产品介绍视频或图文？这反映了当下的市场兴趣点。
这些数据对于参展商和主办方而言，是从未获得过的、可量化的会后反馈。
5.2 可持续的线上营销阵地
对于参展商，这个云展馆可以成为一个长期的线上展示窗口。我可以为参展商提供后台，允许他们在会后：
- 更新展台信息，替换为最新产品。
- 上传更丰富的资料（白皮书、技术文档、案例视频）。
- 甚至集成简单的在线咨询或预约洽谈功能。
这样，一次线下参展的效力，得以在线上延续数月，ROI（投资回报率）显著提升。
5.3 快速布展预览与协作工具
对于展台设计公司和搭建商，这个基于真实数据的云展馆可以作为一个“沙盒”。在设计阶段，就可以将3D设计方案导入到这个统一的虚拟场馆中，查看与周边展台的视觉效果、人流模拟，提前发现潜在问题（如视线遮挡、灯光冲突）。这能减少现场返工，提升协作效率。
6. 技术栈总结与开源思考
最后，简单罗列一下这个项目用到的核心技术栈，给感兴趣的技术同仁参考：
- 数据采集：全画幅微单相机、稳定器、系统化拍摄方案。
- 三维重建：RealityCapture / Metashape（商业软件效率高），也可用开源的OpenMVG + OpenMVS。
- 模型处理：Blender（网格修复、减面、UV展开）、Substance Painter（纹理烘焙）。
- 前端开发：Vue 3 + TypeScript + Vite（构建）。
- 3D引擎：Three.js（核心渲染），辅以
@react-three/drei等生态库（虽用Vue但可借鉴其封装思路）。 - 性能优化：实例化渲染、纹理压缩、LOD、视锥体剔除。
- 部署：静态资源托管在对象存储（如AWS S3、Cloudflare R2），通过CDN加速分发。
这个项目花了我近一个月的业余时间，过程很累，但成就感十足。看着那些曾经存在于上海新国际博览中心某个角落的实体，如今以数字形态被永久保存，并能被世界任何角落的人访问，我觉得这件事本身就很有意义。它不只是技术演示，更像是一次对数字存档形式的探索。所有的模型数据和处理脚本，我正在整理，考虑将核心的非商业部分开源。因为我相信，用技术留存和复现那些美好的、转瞬即逝的线下体验，应该是一个值得更多人参与的方向。如果你也对摄影测量、Web3D或数字文化遗产感兴趣，欢迎一起交流，也许明年我们可以做得更完善，覆盖更多的展会。
