大屏可视化视觉设计拆解 - 地球篇
以地球效果为例，从0到1详解可视化视觉设计的全流程。
在可视化大屏设计中，地球是十分常见的视觉元素。可用于表达全球视角下各个国家或者地区之间数据的对比以及关联关系。在当下国内各大公司急剧拓展海外业务的背景下，可视化地球视觉表现的全流程是我们每个设计师都应该了解的。以下是我最近在做的不同类型的可视化地球视觉表达探索。本文将对可视化地球视觉在工作流以及视觉渲染两个方向进行拆解。其中视觉渲染是工作流程的一部分，将在工作流程的模型渲染部分讨论。
可视化设计的工作流程
1、地图数据
地理信息类可视化大屏是可视化设计中非常重要的一个方向，其核心是表达不同地理要素之间的数据关系，那关键词就是“精确”。对精确的理解有两层，其一是对不同地理要素之间数据描述要精确，其二是对地理信息位置表达的精确。今天要聊的便是第二种如何对地理信息位置的准确表达。
1.1、准确的地理数据表达
地图的准确性需要是不言而喻的。那作为设计师，我们有责任保证我们的设计稿所呈现的地理信息数据的准确性。给大家推荐一个官方的地理数据源以及我们常用的地理数据下载网址。
1.1.1、天地图
首先是天地图。天地图是国家地理信息公共服务平台，是可以确保所提供的地理数据的准确性的。可以下载各种投影模式下的中国地图和世界地图。
1.1.2、DATAV地图选择器
DATAV的地图选择器是阿里云平台下的地理数据下载网站，可下载国内的所有行政边界数据，目前支持到县市级别的数据精度。暂无乡镇数据。
1.2、地图表达规范
国家自然资源部2023年2月6日发布的《公开地图内容表示规范》
https://www.fmprc.gov.cn/web/wjb_673085/zzjg_673183/bjhysws_674671/bhflfg/dtdmxgfl/202303/P020230313585504979937.pdf
该规范对中国全图、南海诸岛地图、钓鱼岛及附属岛屿地图、台湾省地图、特别行政区地图、世界各国（地区）边界、与中国接壤的克什米尔地区等均做出有详细规范。细节大家可以研读该规范。
1.3、地图投影形式
地图有非常多的投影形式。不知道大家是否有这样的疑问？同一个地图为什么在不同地方所显示的形状会有所区别？那是因为地图有非常多种投影形式。以河南地图为例在Miller、 Equirectangular 、Mercator投影下的形态。
下图列举了六种大家可能见过的投影形式，但是除了这几种之外，还有几十种地图投影形式，具体可以查看下边的链接。
ArcGIS
https://pro.arcgis.com/en/pro-app/latest/help/mapping/properties/mercator.htm
wikipedia
https://en.wikipedia.org/wiki/List_of_map_projections
根据不同投影形式的用途以及可视化地图视觉的使用习惯，推荐三种地图的投影形式供大家了解。分别是Miller、Equirectangular和Mercator。其中不同的投影形式有其常用的地方。比如Mercator通常我们称为墨卡托投影，常用在中国地图视觉中。
（由于本人非地图专业，以下内容来源于wikipedia以及自己基于可视化设计角度的解读）
1.3.1、Miller米勒圆柱投影
中文常常称为米勒投影，是一种修正的墨卡托投影，常用于平铺的世界地图展示
wikipedia：Miller米勒圆柱投影更适合绘制以标准纬线为中心的窄带。尽管对于比较相似纬度的区域很有用，但由于极度扭曲，它们不适合用于世界地图。不幸的是，圆柱形地图经常被用在教科书和其他流行出版物中，这可能是由于研究不足以及它们简单的形状恰好适合页面框架。
个人理解：基于wikipedia虽米勒圆柱投影不适用于世界地图展示，但由于其形状比例适合页面布局或者整体比例视觉看起来较为舒服因此多被用于世界地图展示。可以说是一个约定俗成的规矩了。从可视化设计角度来看，其主体长宽比例较为均匀，接近16:9，在大屏中方便被展示，因此也较多出现在可视化大屏作品中。
1.3.2、Mercator墨卡托投影
墨卡托投影常用于中国地图单独展示或者省份地图的展示
wikipedia：墨卡托地图的线性比例随着纬度的增加而增加，它扭曲了远离赤道的地理物体的大小，并传达了对地球整体几何形状的扭曲感知。在北纬或南纬 70° 以上的纬度，墨卡托投影实际上不可用。比如：格陵兰看起来和非洲一样大，而实际上非洲的面积是格林兰岛的 14 倍。
许多主要的在线街道地图服务（Bing 地图、谷歌地图、Mapbox、MapQuest、OpenStreetMap、Yahoo! 地图等）使用墨卡托投影的变体作为他们的地图图像 ，称为Web Mercator或 Google Web Mercator。尽管它在小比例尺上有明显的比例变化，但该投影非常适合作为交互式世界地图，可以无缝缩放到大比例尺（局部）地图，由于变体投影的近共形性，变形相对较小。
个人理解：基于wikipedia的解释，国内在线地图对中国地图的呈现也均采用Mercator投影，例如高德、百度等等，因此在可视化中引用在线地图服务对中国地图的呈现也均为Mercator。同样从视觉角度来看，在Mercator投影下对中国地图的呈现更加舒服，主体比例接近1:1，较为适合放置于16:9或者再宽一点的大屏中。
1.3.3、Equirectangular等距柱状投影
等距柱状投影常用于地球的贴图使用。
wikipedia：由于此投影引入的变形，它在导航或地籍制图中用处不大，主要用于专题制图。特别是，板方块已成为全球栅格数据集的标准，例如Celestia、NASA World Wind, the USGS Astrogeology Research Program , and Natural Earth，因为图像像素在地图上的位置与其在地球或其他球形太阳系天体上的相应地理位置之间的关系特别简单。此外，它经常用于全景摄影以表示球形全景图像。
个人理解：基于wikipedia的解释，该投影形变较大，不适合导航以及制图。同样，由于较大的投影形变，使得形变基线都为正方形，也成为了栅格数据集的标准。因此多用于专题制图，成为各类地理数据集的标准投影形式。实际使用中，各类地球的贴图也均采用Equirectangular等距柱状投影。
1.4、地球贴图
地球的设计制作中需要使用大量贴图。其中所有的贴图均为Equirectangular等距柱状投影
2、数据建模
通过Geojson生成地图模型和通过OpenStreetmap数据或者SHP数据生成城市模型等。由于可视化地球视觉较少涉及数据建模，本小节内容会在针对地图和城市视觉拆解中进行详解。请陆续关注后边的文章。
3、模型渲染
纵观网上所有对地球视觉的展示，无非以下三种。
1:以球体模型为基础，通过贴图实现各类效果。
此类可视化地球效果都是以球体模型为基础，添加不同的贴图效果。整体效果恢弘大气，可在写实风格的基础上做风格化调整。
2:以地球陆地为模型，通过材质和贴图实现各类效果。
此类可视化地球效果以地球陆地模型为基础，通过不同的材质进行可视化表达。常见的材质有金属、玻璃等。整体画面强调细节，更加精致。
3:粒子地球效果
粒子是表达科技感最为有效的方式之一。
3.1、贴图实现地球效果
使用C4D完成，未使用任何插件、渲染器。
https://www.bilibili.com/video/BV13s4y1A7tv/?spm_id_from=333.999.0.0
以球体为基础模型，通过贴图实现地球效果。在三维中，我们经常使用基于PBR的物理贴图系统，其中主要包括：
了解了基本的、常用的贴图通道后，我们在进行三维设计的时候其实就是对这些不同的贴图以及参数的调整。比如
完成以上流程即对贴图的编辑后，后期我们只需要更改不同的贴图以及调整贴图的部分参数，即可得到以下的不同视觉样式。该地球效果教程已经上传B站，可以搜索“DATART可视化设计“进行观看。
3.2、模型实现地球效果
此效果由AE + 插件完成
https://www.bilibili.com/video/BV1QM411V7SX/?spm_id_from=333.999.0.0
以地球的陆地模型为基础，通过材质实现地球效果
可以对画面进行调色。该地球效果教程已经上传B站，可以搜索“DATART可视化设计“进行观看。
3.3、粒子地球效果
第三类是粒子地球，粒子地球在可视化领域使用的还是比较多的。整体的设计制作流程以及思路就是通过AE插件的Form粒子来做。也是有比较完整的流程。由于不是使用真正的三维模型来做，在落地还原中设计侧无法提供模型资源给到研发人员，只能提供部分的贴图资源给到研发。下边可以详细解释一下粒子地球的图形逻辑
了解基础的粒子地球逻辑后，可制作出各种类型的粒子地球。同样该图形逻辑同样是研发实现粒子地球的逻辑。可通过该逻辑同研发人员一起还原粒子地球。
4、落地还原
我不认同“设计师只需要将可视化效果做出来，开发还原是研发人员的事情”的观点。
原因1：每一张图像都由不同的图层构成，在设计师视角中，可以通过图层对一张图像进行拆分，这是我们的工作也是我们的能力。而在研发人员的眼中，一张图就是一张图，鲜有图层概念。因此开发还原过程中如果没有设计师的参与，单纯靠研发人员，通常的结果是一个图层还原一个最基础的效果而已。
原因2：设计和研发是不同的岗位，就像两座大山有着双方互不理解的鸿沟。双方谁主动去架起沟通与理解的桥梁就是对技术真空地带的探索。这也是体现岗位价值与个人价值的关键点。尤其在这个AI绘图的时代里，专注于图像本身似乎意义不大，不如将目光更多的放在技术与行业的真空地带，与可视化设计师进行差异化竞争，形成自己的独特优势，将会有利于职业发展道路。
可视化设计落地还原主要有两个方向的技术选型，首先是基于BS的浏览器架构，大家通常了解的是Three.JS等。还有就是基于CS的客户端架构，被大家所熟知是Unity3D、Unreal Engine 4或者最新的Unreal Engine 5以及Ventuz等等。对大家来说还原难度较大的是使用前端来进行还原，也就是使用Three.JS的浏览器架构了。那这一小节主要讨论基于浏览器的可视化还原问题。
常言道：知彼知己方能百战不殆，我们要用Three.JS去还原可视化效果，那我们就应该知道Three.JS的特性。以及如何利用这些特性去还原我们的可视化视觉效果。以下是我用Three.js还原我可视化地球效果探索的结果。
4.1、Three.JS属性
在Three.JS中有三类属性对画面效果最终产生影响。分别是scene（场景）、Three.JS统一属性、Three.JS分类材质属性。
其中Scene场景和Three.JS统一材质属性在各个具体材质上都是一样的。
4.1.1、Scene场景
Ambient light： #000000
Three.fog： off \ on
scene.fog.color： #000000
释义：
Ambient light为环境光，可选具体颜色或者加载背景贴图。Three.fog为场景雾，开关控制下边的场景雾色值选择。
4.1.2、Three.JS 统一材质
transparent： off \ on
opacity： 0-1
depthTest： off \ on
depthWrite： off \ on
AlphaTest： 0-1
Visible： off \ on
side： Three.DoubleSide \ Three.FrontSide \ Three.BackSide
释义：
transparent为不透明度的开关，开启后可调整模型的不透明度，为0到1.
depthTest 和 depthWrite为深度相关选项，默认开启。关闭后模型反向呈现，即被遮挡的部分反而到前。off \on （下图示意）
ble控制模型是否被显示。side则可选模型被渲染的面，可选frontside、backside和doubleside.
depthTest 和 depthWrite相关图像释义
4.2、Three.JS分类材质属性
Three.JS将材质整合为几个大类，其中我们常用的是Standard Material、Physical Material以及Phone Material材质。其他材质对于我们只是做一个了解即可。接下来我将详细拆解这三个材质。
4.2.1、MeshStandardMaterial
常用材质中，首先是MeshStandardMaterial。一种标准的基于物理的材质。
4.2.2、MeshPhysicalMaterial
MeshStandardMaterial 的扩展，提供更高级的基于物理的渲染属性：透明涂层、基于物理的透明度、先进的反射率、光泽等。由于这些复杂的着色功能，MeshPhysicalMaterial 的每像素性能成本高于其他 three.js 材质。
4.2.3、MeshPhongMaterial
一种用于具有镜面高光的闪亮表面的材料， 它可以模拟具有镜面高光的闪亮表面（例如漆木）。MeshPhongMaterial 使用逐片段着色。在MeshStandardMaterial 或MeshPhysicalMaterial上使用此材质时，性能通常会更高 ，但会牺牲一些图形精度。
4.3、Three.JS实现效果
通过对Three.JS材质的拆解，使用常用的Standard Material、Physical Materical和Phone Materical多材质的结合使用，基本可还原设计效果。
下列效果均由Three.JS实现。由于我是一名设计师，并不会代码，因此只会使用Three.JS Editor进行简单的效果编辑。但可以看到我们预期的效果基本都是可以实现的。
写在最后
感谢你看到这里。
大屏可视化设计是整个商业设计领域对设计师要求比较高的设计门类。不仅对设计能力有较高的要求，包含UI、交互、用研、3D、动效等等。此外对硬件设备的了解、对地理信息数据的认识、对前端研发知识的储备、以及对数据统计学的认知等等都有要求。也就是说大屏可视化入门简单，但是想学好、想做好还是不太简单的。在数字经济爆发式增长的当下，我相信可视化设计方向会有越来越多的设计师加入。对于我自身而言，当下以及未来我也会将自己对可视化设计一些浅显的认知通过文章表达出来，不一定能教会大家什么，但希望能够共同进步。
