洛杉矶时报记者：如何用VR新闻向读者展现火星表面？

10月26日，《洛杉矶时报》发表了一篇非常有意思的“新闻”，而这个新闻更像是一个3D游戏，它是利用3D场景模拟火星上的盖尔陨坑表层，来进行科学探索。读者可以在网页上根据导引进行游览，也可以通过自主运动来进行探秘。

盖尔陨坑，也叫盖尔环形山，是火星上的一个古老撞击坑。形成于大约3.5至3.7亿年前。2011年7月，美国宇航局（NASA）将盖尔陨坑确定为“好奇号”火星车的着陆地点。

《洛杉矶时报》此次向读者介绍盖尔陨坑，想采用一种视觉化的虚拟现实，让读者置身其中，并如同身临其境般在非常自然的运动过程中探索陨坑奥秘。文章向读者说明：“你只需点击一下鼠标，就可以像美国宇航局一样在盖尔陨坑上着陆。”

Armand Emamdjomeh是洛杉矶时报的一位网页设计者和视觉记者，这个项目由他主创，利用计算机编程创建了虚拟3D空间，同时在设计细节上，也花费了制作团队很多的心血。在这篇VR新闻诞生的同一天，Armand Emamdjomeh同时发表了一篇幕后制作介绍，这个看起来超级炫酷的VR新闻到底是如何出炉的呢？

有兴趣的小伙伴可以先点这里看看这个神奇的VR新闻

▼

链接：http://graphics.latimes.com/mars-gale-crater-vr/

下面是Armand Emamdjomeh的揭秘：

我们如何是制作“探索盖尔陨坑”的？

ARMAND EMAMDJOMEH  LEN DEGROOT

2015年10月26日

还记得当虚拟现实第一次变成一件“物品”吗？我们都很爱《雪崩》 和《割草者》，当时的我们都精神紧绷血压升高，而后来我们足足等待了20年。

现在，我们终于可以在这个沙盒中游玩了。我们建造出了“盖尔陨坑之旅”来探索究竟新闻业如何在虚拟现实中运作成功，它展示了讲故事的新的可能性、也可能是未来消费和分配新闻的一个新平台。除此之外，这是一种在你自己的手机上畅游一个星球的惊喜体验。

在我们写代码之前，发展这个项目本身就具有很大的挑战。我们以一个问题开始：我们如何在一个用户可移动和接触的3D空间里面讲故事？

之后我们考虑了，也回答了其他一些问题：

·我们应该引导用户游览陨坑还是让他们自己探索？

最后我们两者都用了，因为我们两种都想要。我们觉得其他人也会这么做。

·我们是否要在游览中使用文本，如果用的话，用多少？

冗长的文本阅读起来很困难，而且在一个3D场景中加重了渲染的负担。最后我们使用了简短的文本。

·在所看到的场景中如何传递信息？

我们选择了讲述故事，使其感觉是一场更加自然的体验。NASA的Fred Calef，以火星科学实验室的“地图掌控者”闻名，我们觉得他是旁白声音的最佳选择。

·它是一个游戏吗？

我们决定不将其做成一个游戏，但是绝对需要一些游戏的元素。3D空间中的航行语言已经在游戏中存在了，所以适应这些概念是有意义的。如果一个项目看起来像一个游戏，相信人们会希望在某些方面表现得也很像游戏。

一、平台选择

一般来讲,多数建立虚拟现实体验的专有标准都是为了竞争优势，很多都有APP支持。我们在很多案例中都能看到，让用户下载安装一个APP其实是设置了一个进入的不必要障碍。建立一个浏览器支持型的APP可以让任何人用一个合理地支持现代WEBGL（一种3D绘图标准）的浏览器来完成一次旅行或是探索，不管他们是用台式机、Pad还是移动设备。同时，如果拥有一个谷歌盒子或是谷歌眼镜，他们就可以享受沉浸在其中的乐趣。

在洛杉矶时报的数据和数据可视化平台上，我们希望开放网页标准，能够使整个项目建立在开放的内容上。地势的数据和图像来自NASA，项目用HTML（超文本标记语言）、CSS（计算机系统模拟）和JavaScript（JAVA描述语言）来构建，包括开放资源 Three.js（用JavaScript编写的WebGL第三方库），用来在JavaScript中建立3D场景和 Boris Smus的WebVR Boilerplate（前端模板）。

接下来让我们说一些有趣的东西：

我们如何重新建造另外一个星球的表面？

二、构建地形：于无形中建立有形

刚开始，我们从NASA拿到了两组重要数据，一个电子地貌模型（DEM）和一张高分辨率的盖尔陨坑图像。DEM基本上是一个图像，在这种遥感图像格式（ GeoTIFF）中，地貌用颜色来表示，颜色越浅的地方，地势越高。

但是浏览器通常不能承载TIFF格式，如果转换成PNG格式会使每像素只能提供256种不同的高度值。就像编写代码时通常会遇到的情况，别人经常会遇到和你一样的困难。 Bjørn Sandvik提出了将DEM转成可以使用16比特无符整型的ENVI格式，这种格式可提供65536种可能的高度值。

我们使用了GDAL（开源栅格空间数据转换库）的GIS（全球资讯系统）文库将TIF转为ENVI格式。首先GDAL信息找到像素中的DEM尺寸和高度值的最小和最大值。我们将其输入GDAL转化指令，就输出了ENVI格式。

你会注意到我们特别注明了outsize 参数，这个参数注明了输出文件中的数据点数目和Three .js中的平面制高点数量。这可以使你随意掌控高低，但大量的数值会使得渲染场景时的制图进程非常麻烦。我们发现使用300 x 285 像素可以在不压迫GPU（图形处理器）的同时更好地提供图像细节。针对手机，我们使用更小的200 x 190，有的甚至是 100 x 95，保证交互使用的平稳运行。

三、用Three.js创建场景

初次使用Three.js有很多很好的向导，这里我将直接跳到我们如何将地势数据输入场景中。

Sandvik 对于如何将.bin文件输入Three.js 有一个很好的解释。主要来讲，我们想用相同数量的制高点来建造平地，来导入我们的地势数据。

以下是我们这个项目的编程的简要展示：

决定我们使用的是读者浏览页面使用的设备。台式机和笔记本使用“灵敏”控制，用键盘和鼠标来决定移动的方向，移动设备使用“VR”控制，根据设备移动方向来动作。

从这一点来说，我们又不得不考虑游戏开发商通常要考虑的事情，但对于数据新闻的碰撞侦查来说没有那么多。有一个能够穿行火星表面的观察器并没有什么用处，我们要能察觉的是照相机何时对地貌有了反应。为此，我们使用一种叫做光线投射器的技术，它能够画出一条射线（一条从一个端点出发无限延伸——你还记得高中几何学吗？），并标出射线是否与目标物体（陨坑表面）有交叉。在一个环境复杂的表面上进行光线投射在地理进程中非常昂贵，在这里，你在交互使用中看到的陨坑表面的射线是垂直发送帧率的。

为了代替它，我们设计了一个更加简单的只有40 x 38平面，作为我们用来进行碰撞侦查的表面和整个场景中不可见的目标对象。这就使得碰撞侦查变得更加可靠。

同时保证了在浏览器中帧率接近于不可思议的每秒60帧（现实中我们通常接近50—55帧），帧率越慢，对指令的反应就越慢。在头部运动时，就会引起用户迷失方向和发晕。

在以下的代码中，标记出visible: false，我们可以添加不可视的目标物体并与他们正常交互。

四、无处不在的曲线尺：游览规划

在这一部分我们创建了一个场景和可在其中移动的数条路径，但我们想将它做成一个完全的多媒体体验，用户可以在NASA认证过的地点选择他们感兴趣的进行探索。这就需要在游览时为照相机编程一条路径。为完成这个任务，我们使用了“贝塞尔曲线”（Three.js中此功能很方便）来在两点之间创建一条弯曲的“曲线尺”，但我们不能仅仅在A点和B点之间移动照相机，否则我们就不能看到我们本想看到的东西。所以在创建了贝塞尔曲线后，沿着曲线上的点后退，直到距离刚好能够看见目标点，你尽可以试试哪一种更管用。

继续看下去，因为这有一点点复杂。以下的功能是游览路线的主要方式，包含了很多游览中需要的方法和道具。

getBezierMidpoint 功能构建了两个向量的中间点（将这里的向量想象为3D空间中的点，用x,y,z值表示），其中曲线的高度决定了两点之间的距离，使得移动更加自然。

同时，在animate()指令中我们使照相机在曲线尺上以一个固定速度移动（同样取决于两点之间的距离，越远则越快，越近则越慢。）

以下是在交互中的一个可视的简单化编程，易于阅读。指令.ease()是一个简易化的功能，使得加速和减速的移动更加自然。

等一下，那么什么是四元数呢？我们不止要在两点之间移动，还要保证照相机正在拍摄我们要去的目的地。 Quaternion()指令是Three.js中四元数的用法， 可以实现3D空间中的旋转运动。

为了使照相机旋转拍摄我们感兴趣的地点，我们用曲线尺在相机四元数中“SLERP(插值)”（再一次想象为旋转），这可以使两个四元数之间的旋转更加平稳。如果你想知道的话，可以告诉你SLEP意义为“球形、线形、插入、数学！”

在每秒60帧的条件下，这使得两点之间的运动更加平稳。有了这些方法，我们可以在场景中任意地方设点，可以增加、重新移动和重新排列。帮助功能可以解决其他一些问题。

五、HTML5网页版软件的说明和缺陷

我们认为发展一款浏览器版软件可以为人们减少障碍，更多地享受这个体验，但是它本身还是有一些值得注意的缺陷。首先，谷歌浏览器会在屏幕上占据一部分可观的空间（首尾），至少在ios系统上无法隐藏它们。没办法，这就意味着除非用户将源网页保存下来在单机模式中打开。如果你使用了这个APP，绝对是一个很好的体验，我们不希望任何人需要跨越这些困难。

在移动设备中玩更会有一些问题，尤其是ios系统。由于没有用户输入就不能开启声音，我们只得偷偷在上一位用户点击时输入初始音频以便你在游览时能够听到解说。另外一个让人惊奇的限制是在发展类似谷歌盒子的设备时，用户只有一个输入路径。很多这方面的用户体验指标仍待发展，所以每当我们尝试是什么限制我们开始和结束的指令时，在一个目标地点上等待很长时间才能开启音频——这是我们希望未来能够更加精确的。

六、接下来做什么？

我们在其中学到了什么？这是新闻业的虚拟现实的未来吗？其实也不一定，现在仍有许多值得注意的限制。首先，使用中的设备数量有限，其中很多都会越来越贵，并不适合普通大众。谷歌盒子的一个优点是便宜且易操作，这些方法能否广泛应用值得关注。

至今为止一个很严重的限制是交互使用虽然很平稳，但对于很多人来说在一个VR设备中还是很容易迷惑，也很容易晕眩。这对于VR体验走向主流仍是个巨大挑战。

这是我们走向VR世界的第一步，也给了我们接下来想讲的故事可以有什么类型一些启示，我们也会尝试更多的办法。敬请关注。

《洛杉矶时报》这次尝试非常成功，也是VR新闻继续加入新闻产业大军的一个例证。未来新闻业究竟会如何发展，VR在新闻业中将得到怎样更多更新的应用，高仿真度的现实模拟是否会成为视觉主流？我们拭目以待。

本文由百度新闻实验室（baidunewslab）独家编译，版权归原作者所有，原文见http://graphics.latimes.com，转载请注明出处

翻译：赵丹

编辑：金雯思