1背景介绍

三维可视化引擎是通图GIS的重要组成之一。其除了对颜值、特效有高要求外，在空间分析、性能优化、数据组织规范等内核研究上也下足了功夫。在三维的诸多技术点中，体展示技术因其在地质、气象、海洋、国土规划及城市管理中的大量应用而格外重要。

这里，我们将围绕体模型如何展示、内部信息如何表达、场景如何落地等问题，通过三种原理不同的体展示方案来为大家揭开其技术内幕，也让大家对通图GIS的技术积淀可以管窥一豹。接下来，让我们由“表”及“里”，一起探索“体展示”之道。

2 三角化构网方案：装扮模型的“外表”

2.1 三角化原理

了解WebGL知识的小伙伴都知道，其基本图元有点、线、三角形三种。其中，三角形作为构建面和立体模型的基础，在三维开发中最为常用。在WebGL中，一个三角形由3个顶点构成，每一个顶点包含了位置、颜色等基本属性信息。一个面状图形或体表模型实际上由一系列无缝相接的小三角形共同组成，这些小三角形的组合及其属性信息最终决定了模型的“骨骼”和“皮肤”。

构建体表模型的关键是进行三角化，包括三角网中每个顶点颜色、法线、纹理坐标等基本信息的计算。有了这些基本数据的支撑，再经过开发人员的精心“组装”，一个理想的表达模型才能最终被呈现。

2.2 优劣性与适用场景

优势：由于三角构网的技术手段只是对“体表”进行了“蒙皮”，所以在这种展示方案下，可以基于少量的数据，迅速生产出一个可视化产品。

劣势：也正因为这种“简单性”，让它存在一个很大的不足，无法挖掘模型内部的信息。

综合这种展示方案的优劣性，我们可以将它应用于一些注重表面形态或者轮廓的场景中。比如在构建山体、地表结构时，这种表现方式显得非常的贴合。下面是通图GIS基于这种方案做的一些展示示例。

(1)利用三角构网的方式，并融入光照计算，构建山体模型。

(2)经过颜色平滑处理后的一个地下岩层结构模型展示。

3 体栅格方案：挖掘模型的“内涵”

3.1 什么是“体栅格”

栅格数据是GIS中一种基本的数据表达模型，其基本原理是以规则的阵列来表示空间地物或现象分布，并通过“像素”体现每一个栅格单元的属性强度。体栅格则是平面栅格数据的立体化，通过行列号及“高号”表达栅格的位置，用“体素”表现栅格的属性强度。

我们可以想象一下“魔方”的结构，可以说它是最形象的一个体元栅格模型。

3.2 数据准备

体栅格模型由规则排列的小立方块“堆积”而成，需要以立体网格阵列数据为支撑。然而，在实际数据分析中，我们得到的原始数据往往是无规则分布的，所以构建体栅格模型的首要任务就是进行空间插值以获取立体网格数据。

这里的插值包括两方面：

(1)根据离散点的分布范围及每一个体网格的大小构建立方体网格阵列；

(2)根据附近点的属性值内插出每一个网格点的属性强度。

当然，如果拿到的原始数据已经是规则分布的体网格数据，则不需要经过插值的步骤，可直接进行栅格模型的绘制。

3.3 优劣性与适用场景

优势：在体栅格展示方案下，由于模型内每一个“角落”的属性值都计算了出来，所以内部信息非常丰富。这种方案最大的优势就是我们能尽情的“玩转”体数据，可以一层一层的进行分析与展示，也可以按照属性进行过滤展示，总之，你可以按照自己的需求随意进行“挖”与“填”操作。

劣势：由于要经过网格阵列和属性强度插值计算，导致前期数据处理量较大。

综合来看，体栅格的展示方案适用于一些关注“单元属性”的场景，比如日照分析，大气污染分析，信号强度衰减分析等，下面给出一些我们利用体栅格方式完成的示例。

(1)体栅格表达日照强度。

(2)基于一组模拟的5G信号强度，用透明方式构建的一个信号强度模型。

3.4 实例化绘制的优化方案

在非实例化的绘制中，对于每一个对象，都是“一笔一划”的绘制出来，或者说一个绘制对象就需要一个绘制命令。如果是海量小立方块的情况下，将会非常的耗性能。所以，必须进行实例化绘制的优化。

那么，什么是实例化绘制呢？

通俗来说，实例化绘制可以理解成一个“粘贴”的过程，就像我们盖印章那样，只需要构建一个“模子”，其他对象就能一起被绘制。从渲染角度来说，只需要一个绘制命令，便可以实现一次性渲染多个对象，避免相同属性之间的内存和显存的调度，可以大大提高渲染效率。

通图GIS在实例化方面也做了很多研究，目前已经实现了多种几何模型的实例化绘制，其中小立方块的实例化绘制便是其中之一。

4 体渲染方案：透过“表象”看“本质”

4.1 神奇的“体渲染”

看完“三角化构网”和“体栅格”这两种体展示方式后，在这里我们提一个大胆的设想：如果只绘制体表，却能在体表上“表达”出内部的情况，是不是很神奇？这种技术就是游戏引擎里一种常用的模型可视化技术——体渲染。

简单来说，体渲染是通过表面能看到内部的一种类似于透视展示的一种渲染方法。这里列出两个示例图以供我们理解。从示例上看，仿佛是构建了物体的整个三维模型，实际上是通过一定的的技术，在只绘制表面(比如下面两张图都是只绘制了一个正方体)的情况下，通过“体表”展现出内部信息。

4.2 渲染过程如何实现？

体渲染的表达离不开“体素”的概念，这一点很容易理解，想要在体表面展示出体内部的信息，必然要知道内部的属性强度。从这一点来说，体渲染与体栅格有一定的相似性，但是在绘制和渲染方式上是截然不同的。

那么问题来了，如何通过体表面展示出内部的信息成为解决这个问题的关键。

体渲染的实现可以借鉴光线投射算法的原理。想象一下，有一个立方体盒子，我们沿着视线方向发射一条光线穿过整个立方体，如下图所示，视线进入盒子的起点为P1,并从P2点出来，那么P1点的颜色应该是由这条光线穿过的所有“体素”共同决定的。从技术角度上来说，我们在屏幕上看到的每个像素都是光线穿过立方体并以固定间隔从体素获取强度样本，并进行颜色累加的结果。整个“追踪、采样、上色”的过程，都是在片元着色器中进行，一气呵成。

那么问题又来了，沿着光线采样时的“体素”数据从哪里来？假如我们已经计算出了内部每一个体元的坐标值和属性值，这些数据又该如何表现出来并传入片元着色器代码中以供我们连续采样呢？

假设我们有一张三维的立方纹理，这个问题将会变得简单。如果这个立方体盒子被我们进行了标准化，坐标位于[0,0,0]-[1,1,1],与这个立方体盒子对应的是一张刚好贴合的立方体纹理，坐标同样是[0,0,0]-[1,1,1]，那么我们进行采样时，直接能从纹理上获取当前点的颜色或者说强度。

但遗憾的是，WebGL中没有三维纹理的概念，但是这种通过纹理采样的方法为我们提供了一个不错的思路。于是，我们想到了用“二维纹理”的概念来存储三维信息。既然我们已经知道了模型整体的信息或者说颜色，那我们可以沿着高度或者XY任一方向形成一张张的切片，并按照一定的顺序规则将这些切片一个接一个地拼起来形成一张二维的纹理，如下图所示(原始数据是一个三维茶壶模型，沿着Y方向切了16*11张图片并拼接成一张纹理)。在沿着光线采样时，我们就能根据自己拼接切片的规则，映射出当前点的三维坐标在纹理上的二维坐标。至此，整个问题就迎刃而解了。

4.3 优劣性与适用场景

优势：体渲染方案最出彩的地方，就是能够能够清楚的看到模型内部的信息，具有非常震撼的可视化效果。

劣势：它的实现流程较繁琐，要提前计算体素并进行纹理拼接；实现的技术较复杂，比如要进行光线追踪，空间坐标到二维纹理的映射等。

结合体渲染自身的特征，体渲染方案可以用来展示3D分布图或者扫描图，同时也适用于火焰、烟雾、云朵、大气或温度场等效果。总之，如果需要一个比较震撼的可视化效果，体渲染方案是最佳的选择。

下图是我们通过体渲染方式构建的一个海洋温度场模型，我们在获取到海洋温度场基础数据后，用专门的软件进行了解析，获取到了每一个高度层的温度场分布图，并沿着高度值，将一层一层高度获取到的分布图按照一定规则进行了拼接，最后基于体渲染的方式进行了实现与展示。

5．总结

本文主要介绍了三角化构网、体栅格、体渲染三种体数据展示方式，并对适用的场景与关键技术进行了说明。在实际应用中，结合具体业务进行不同的展示，甚至一种场景多种展示方式。体展示的方式能够为业务分析提供更形象的可视化支持，为决策提供强有力的支撑。未来，我们依然会不断优化技术体系，不断探索更完善、更形象的体展示方式，更好的为各行业运用赋能。

End

往期回顾

城运大数据中心|智能检索的「道」与「术」

可视化技术|城市运行中心的“颜值担当”

微信小程序"智慧市民通"全面上云实践

记一次用户无感的云服务平滑迁移

一条优美轨迹线的诞生日记