上面这个视频，是我们参考国外创意大神作品的一个内部练习，观看视频后可以扫描视频结尾处二维码或点击这个链接3D House，进入作品中体验更多细节。

下面进入这次分享的正式内容。

-------------------------------------------------------------

美的标准虽然不一而同，但对美的需要是一致的。现实世界如此，虚拟世界也是如此。

如果线上虚拟空间的视觉体验，让人觉得丑陋、虚假、幼稚、粗制滥造，那么用户为什么要进入这个空间，为什么愿意留在里面体验、娱乐，甚至是工作、生活？

3D技术已经发展了很多年，目前有许多设计软件，都可以做出以假乱真的视觉效果，那为什么网络上还充斥着大量让人“难受”、一眼就觉得假的3D作品？

根本原因是渲染技术的不同，设计软件采用的是离线渲染，可以慢慢精雕细琢，在每一帧的渲染上甚至可以花费数小时，但想要在web端实现优质的3D交互体验，就需要高质量的实时渲染，必须达到每秒30到60之间的帧渲染速度，其中设计、技术、技美能力缺一不可，同时还要受到到网速、设备等硬件条件的制约，所以二者之间的难度差了好几个量级。

灵境至维价值观的第一条就是“做对的事情，难的事情，需要时间积累的事情”，我们愿意去挑战困难。要想给到用户好的视觉体验，必须具备网页端实时渲染的能力，那我们就按照最高的标准去学习这个能力。

经过一段艰难的扣头掉发之旅，我们最终做出了非常流畅的网页端视觉与交互体验，而且这种视觉风格，还可以在我们接下来智能家居、音乐会场景的虚拟空间产品中使用，提前为未来做好了准备。

向行业最高水平看齐，求其上得其中

在3D House这个精巧生动的房间里，用户可以通过控件调节环境的光效和色彩，得到自己想要的视觉效果。

在看到这个作品后，我们在欣赏和赞叹之余，视觉团队马上确定这个就是学习的目标，提出要复刻一个3D House的想法，说干就干！

我们视觉团队3个核心小伙伴一起，耗时3周，实现了近乎1:1的复刻，在保留原版所有互动功能的同时，还加入了3D数字虚拟人第三人称漫游体验，让用户体验变得更加有趣。

难点，是山峰但不是极限

3D House只是一个小场景，却也包含了许多巧思，比如日夜氛围的切换、书桌上咖啡杯冒着的热气、笔记本电脑中播放的视频，从效果和体验来看，国外大神的水准确实高出国内几个等级。

尽管我们的复刻取得了不错的效果，但过程中还是遇到了不少困难点，这些难点是我们过去没有遇到或者无法解决的，这次的学习过程中，都取得了突破。

回顾一下过程中几个主要的困难点：

1.模型面数处理

WebGL相比Unity或者UE，最突出的优点就是它的轻量化和多端兼容性，大部分端（例如微信、各种浏览器）都能在5s之内打开。

在满足轻量化和兼容性的前提下，3D模型的面数几乎就决定了用户在后期体验中的流畅度，面数越多，对性能的消耗越大，用户的体验就可能越不理想，所以在建模过程中，需要对模型进行精准的控制，既要保留结构，又要体现细节，这就对3D设计师的软件操作能力提出了极高的要求。

2.材质和灯光细节的重构

原作的房间在视觉体验上有着极强的真实感，这些真实感来自于作者对不同材质的精确还原以及对灯光效果的细腻营造。

要实现这种程度的还原，对材质和灯光的控制要求非常高，对技美同事的技术水品也是一次极大的挑战，最终我们完成了挑战，取得了满意的结果。

3.技美shader的编写

观看2D图形，无论如何移动视角，图形内容不会改变，而3D图形则不同，随着视角的变换，看到的内容也在变化，正面侧面、近大远小，与真实的人眼观看体验相似。

模型、材质和灯光的处理，都还是软件层面的视觉还原，要完成一个交互式3D体验项目，就要结合我们之前在《我们不是做“元宇宙”的公司》中介绍的“计算机图形学”的基础知识，精确还原出动态细节细节，获得更加逼真的视觉体验。

4.性能的优化

一个交互式3D体验项目，一半的工作是视觉设计，另一半则是交互体验。我们做的并不是一件只供用户观看的艺术作品，而是可以与客户发生真实交互的线上体验项目，实现交互体验的过程就需要在web端性能范围内，找到那个最理想的平衡点，还原视觉的质感与美感，同时给到用户流畅顺滑的交互体验。

通过这次3D House的学习过程，每个参与的人，专业能力都有了肉眼可见的进步，共同经历这样有难度的项目后，团队的配合协同能力和整体战斗力，也有了显著的提升，这也是“去做难的事情，需要时间积累的事情”的意义之一。

3D House的学习刚刚结束，下一个课题就已经开始了，期待我们《不学 · 无术》系列的下一期分享吧。