你好,我是月影。

前几节课我们一起进行了简单图表和二维地图的实战,这节课,我们来实现更炫酷的3D地球可视化。

3D地球可视化主要是以3D的方式呈现整个地球的模型,视觉上看起来更炫酷。它是可视化应用里常见的一种形式,通常用来实现全球地理信息相关的可视化应用,例如全球黑客攻防示意图、全球航班信息示意图以及全球贸易活动示意图等等。

因为内容比较多,所以我会用两节课来讲解3D地球的实现效果。而且,由于我们的关注点在效果,因此为了简化实现过程和把重点聚焦在效果上,我就不刻意准备数据了,我们用一些随机数据来实现。不过,即使我们要实现的是包含真实数据的3D可视化应用项目,前面学过的数据处理方法仍然是适用的。这里,我就不多说了。

在学习之前,你可以先看一下我们最终要实现的3D地球可视化效果,先有一个直观的印象。

如上面动画图像所示,我们要做的3D可视化效果是一个悬浮于宇宙空间中的地球,它的背后是一些星空背景和浅色的光晕,并且地球在不停旋转的同时,会有一些不同的地点出现飞线动画。

接下来,我们就来一步步实现这样的效果。

如何实现一个3D地球

第一步,我们自然是要实现一个旋转的地球。通过前面课程的学习,我们知道直接用SpriteJS的3D扩展就可以方便地绘制3D图形。这里,我们再系统地说一下实现的方法。

1. 绘制一个3D球体

首先,我们加载SpriteJS和3D扩展,最简单的方式还是直接使用CDN上打包好的文件,代码如下:

<script src="http://unpkg.com/spritejs/dist/spritejs.js"></script>
<script src="http://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>

加载完成之后,我们创建场景对象,添加Layer,代码如下:

const {Scene} = spritejs;
const container = document.getElementById('container');
const scene = new Scene({
  container,
});
const layer = scene.layer3d('fglayer', {
  alpha: false,
  camera: {
    fov: 35,
    pos: [0, 0, 5],
  },
});

与2D的Layer不同,SpriteJS的3D扩展创建的Layer需要设置相机。这里,我们设置了一个透视相机,视角为35度,位置为 0, 0, 5

接着是创建WebGL的Program,我们通过Layer对象的createProgram来创建,代码如下:

const {Sphere, shaders} = spritejs.ext3d;


const program = layer.createProgram({
  ...shaders.GEOMETRY,
  cullFace: null,
});

SpriteJS的3D扩展内置了一些常用的Shader,比如shaders.GEOMETRY 就是一个符合Phong反射模型的几何体Shader,所以这次,我们直接使用它。

接着,我们创建一个球体,它在SpriteJS的3D扩展中对应Sphere对象。

const globe = new Sphere(program, {
  colors: '#333',
  widthSegments: 64,
  heightSegments: 32,
  radius: 1,
});


layer.append(globe);

我们给球体设置颜色、宽度、高度和半径这些默认的属性,然后将它添加到layer上,这样我们就能在画布上将这个球体显示出来了,效果如下所示。

现在,我们只在画布上显示了一个灰色的球体,它和我们要实现的地球还相差甚远。别着急,我们一步一步来。

2. 绘制地图

上节课,我们已经讲了绘制平面地图的方法,就是把表示地图的 JSON 数据利用墨卡托投影到平面上。接下来,我们也要先绘制一张平面地图,然后把它以纹理的方式添加到我们创建的3D球体上。

不过,与平面地图采用墨卡托投影不同,作为纹理的球面地图需要采用等角方位投影(Equirectangular Projection)。d3-geo模块中同样支持这种投影方式,我们可以直接加载d3-geo模块,然后使用对应的代码来创建投影。

从CDN加载d3-geo模块需要加载以下两个JS文件:

<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://d3js.org/d3-geo.v2.min.js"></script>

然后,我们创建对应的投影:

const mapWidth = 960;
const mapHeight = 480;
const mapScale = 4;
    
const projection = d3.geoEquirectangular();
projection.scale(projection.scale() * mapScale).translate([mapWidth * mapScale * 0.5, (mapHeight + 2) * mapScale * 0.5]);

这里,我们首先通过 d3.geoEquirectangular 方法来创建等角方位投影,再将它进行缩放。d3的地图投影默认宽高为960 * 480,我们将投影缩放为4倍,也就是将地图绘制为 3480 * 1920大小。这样一来,它就能在大屏上显示得更清晰。

然后,我们通过tanslate将中心点调整到画布中心,因为JSON的地图数据的0,0点在画布正中心。仔细看我上面的代码,你会注意到我们在Y方向上多调整一个像素,这是因为原始数据坐标有一点偏差。

通过我刚才说的这些步骤,我们就创建好了投影,接下来就可以开始绘制地图了。我们从topoJSON数据加载地图。

async function loadMap(src = topojsonData, {strokeColor, fillColor} = {}) {
  const data = await (await fetch(src)).json();
  const countries = topojson.feature(data, data.objects.countries);
  const canvas = new OffscreenCanvas(mapScale * mapWidth, mapScale * mapHeight);
  const context = canvas.getContext('2d');
  context.imageSmoothingEnabled = false;
  return drawMap({context, countries, strokeColor, fillColor});
}

这里我们创建一个离屏Canvas,用加载的数据来绘制地图到离屏Canvas上,对应的绘制地图的逻辑如下:

function drawMap({
  context,
  countries,
  strokeColor = '#666',
  fillColor = '#000',
  strokeWidth = 1.5,
} = {}) {
  const path = d3.geoPath(projection).context(context);


  context.save();
  context.strokeStyle = strokeColor;
  context.lineWidth = strokeWidth;
  context.fillStyle = fillColor;
  context.beginPath();
  path(countries);
  context.fill();
  context.stroke();
  context.restore();


  return context.canvas;

这样,我们就完成了地图加载和绘制的逻辑。当然,我们现在还看不到地图,因为我们只是将它绘制到了一个离屏的Canvas对象上,并没有将这个对象显示出来。

3. 将地图作为纹理

要显示地图为3D地球,我们需要将刚刚绘制的地图作为纹理添加到之前绘制的球体上。之前我们绘制球体时,使用的是SpriteJS中默认的shader,它是符合Phong光照模型的几何材质的。因为考虑到地球有特殊光照,我们现在自己实现一组自定义的shader。

const vertex = `
  precision highp float;
  precision highp int;

  attribute vec3 position;
  attribute vec3 normal;
  attribute vec4 color;
  attribute vec2 uv;

  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  uniform mat3 normalMatrix;

  varying vec3 vNormal;
  varying vec2 vUv;
  varying vec4 vColor;

  uniform vec3 pointLightPosition; //点光源位置

  void main() {
    vNormal = normalize(normalMatrix * normal);

    vUv = uv;
    vColor = color;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }    
`;


const fragment = `
  precision highp float;
  precision highp int;

  varying vec3 vNormal;
  varying vec4 vColor;

  uniform sampler2D tMap;
  varying vec2 vUv;

  uniform vec2 uResolution;

  void main() {
    vec4 color = vColor;
    vec4 texColor = texture2D(tMap, vUv);
    vec2 st = gl_FragCoord.xy / uResolution;

    float alpha = texColor.a;
    color.rgb = mix(color.rgb, texColor.rgb, alpha);
    color.rgb = mix(texColor.rgb, color.rgb, clamp(color.a / max(0.0001, texColor.a), 0.0, 1.0));
    color.a = texColor.a + (1.0 - texColor.a) * color.a;

    float d = distance(st, vec2(0.5));

    gl_FragColor.rgb = color.rgb + 0.3 * pow((1.0 - d), 3.0);
    gl_FragColor.a = color.a;
  } 
`;

我们用上面的Shader来创建Program。这组Shader并不复杂,原理我们在视觉篇都已经解释过了。如果你觉得理解起来依然有困难,可以复习一下视觉篇的内容。接着,我们创建一个Texture对象,将它赋给Program对象,代码如下。

const texture = layer.createTexture({});


const program = layer.createProgram({
  vertex,
  fragment,
  texture,
  cullFace: null,
});

现在,画布上就显示出了一个中心有些亮光的球体。

从中,我们还是看不出地球的样子。这是因为我们给的texture对象是一个空的纹理对象。接下来,我们只要执行loadMap方法,将地图加载出来,再添加给这个空的纹理对象,然后刷新画布就可以了。对应代码如下:

loadMap().then((map) => {
  texture.image = map;
  texture.needsUpdate = true;
  layer.forceUpdate();
});

最终,我们就显示出了地球的样子。

我们还可以给地球添加轨迹球控制,并让它自动旋转。在SpriteJS中非常简单,只需要一行代码即可完成。

layer.setOrbit({autoRotate: true}); // 开启旋转控制

这样我们就得到一个自动旋转的地球效果了。

如何实现星空背景

不过,这个孤零零的地球悬浮在黑色背景的空间里,看起来不是很吸引人,所以我们可以给地球添加一些背景,比如星空,让它真正悬浮在群星闪耀的太空中。

要实现星空的效果,第一步是要创建一个天空包围盒。天空包围盒也是一个球体(Sphere)对象,只不过它要比地球大很多,以此让摄像机处于整个球体内部。为了显示群星,天空包围盒有自己特殊的Shader。我们来看一下:

const skyVertex = `
  precision highp float;
  precision highp int;


  attribute vec3 position;
  attribute vec3 normal;
  attribute vec2 uv;


  uniform mat3 normalMatrix;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;


  varying vec2 vUv;


  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;


const skyFragment = `
  precision highp float;
  precision highp int;
  varying vec2 vUv;


  highp float random(vec2 co)
  {
    highp float a = 12.9898;
    highp float b = 78.233;
    highp float c = 43758.5453;
    highp float dt= dot(co.xy ,vec2(a,b));
    highp float sn= mod(dt,3.14);
    return fract(sin(sn) * c);
  }


  // Value Noise by Inigo Quilez - iq/2013
  // https://www.shadertoy.com/view/lsf3WH
  highp float noise(vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);
    vec2 u = f * f * (3.0 - 2.0 * f);
    return mix( mix( random( i + vec2(0.0,0.0) ),
                    random( i + vec2(1.0,0.0) ), u.x),
                mix( random( i + vec2(0.0,1.0) ),
                    random( i + vec2(1.0,1.0) ), u.x), u.y);
  }


  void main() {
    gl_FragColor.rgb = vec3(1.0);
    gl_FragColor.a = step(0.93, noise(vUv * 6000.0));

上面的代码是天空包围盒的Shader,实际上它是我们使用二维噪声的技巧来实现的。在第16节课中也有过类似的做法,当时我们是用它来模拟水滴滚过的效果。

但在这里,我们通过step函数和vUv的缩放,将它缩小之后,最终呈现出来星空效果。

对应的创建天空盒子的JavaScript代码如下:

function createSky(layer, skyProgram) {
  skyProgram = skyProgram || layer.createProgram({
    vertex: skyVertex,
    fragment: skyFragment,
    transparent: true,
    cullFace: null,
  });
  const skyBox = new Sphere(skyProgram);
  skyBox.attributes.scale = 100;
  layer.append(skyBox);
  return skyBox;
}


createSky(layer);

不过,光看这些代码,你可能还不能完全明白,为什么二维噪声技巧就能实现星空效果。那也不要紧,完整的示例代码在GitHub仓库中,最好的理解方式还是你自己试着手动修改一下skyFragment中的绘制参数,看看实现出来效果,你就能明白了。

要点总结

这节课,我们讲了实现3D地球可视化效果的方法,以及给3D地球添加天空背景的方法。

要实现3D地球效果,我们可以使用SpriteJS和它的3D扩展库。首先,我们绘制一个3D球体。然后,我们用topoJSON数据绘制地图,注意地图的投影方式必须选择等角方位投影。最后,我们把地图作为纹理添加到3D球体上,这样就绘制出了3D地球。

而要实现星空背景,我们需要创建一个天空盒子,它可以看成是一个放大很多倍的球体,包裹在地球的外面。具体的思路就是,我们创建一组特殊的Shader,通过二维噪声来实现星空的效果。

说的这里,你可能会有一些疑问,我们为什么要用topoJSON数据来绘制地图,而不采用现成的等角方位投影的平面地图图片,直接用它来作为纹理,那样不是能够更快绘制出3D地球吗?的确,这样确实也能够更简单地绘制出3D地球,但这么做也有代价,就是我们没有地图数据就不能进一步实现交互效果了,比如说,点击某个地理区域实现当前国家地区的高亮效果了。

那在下节课,我们就会进一步讲解怎么在3D地球上添加交互效果,以及根据地理位置来放置各种记号。你的疑问也都会一一解开。

小试牛刀

我们说,如果不考虑交互,可以直接使用更简单的等角方位投影地图作为纹理来直接绘制3D地球。你能试着在网上搜索类似的纹理图片来实现3D地球效果吗?

另外,你可以找类似的其他行星的图片,比如火星、木星图片来实现3D火星、木星的效果吗?

最后,你也可以想想,除了星空背景,如果我们还想在地球外部实现一层淡绿色的光晕,又该怎么做呢(提示:你可以使用距离场和颜色插值来实现)?

今天的3D地球可视化实战就到这里了。欢迎把你实现的效果分享到留言区,我们一起交流。也欢迎把这节课转发出去,我们下节课见!


源码

课程完整示例代码详

评论