WebGL之绘制三维地球

JavaScript012

WebGL之绘制三维地球,第1张

通过Three.js也许可以很方便的展示出3D模型,但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗?现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。

本节实现的效果: WebGL三维地球

内容大纲

首先我们要建立球体的三维模型,三维网格模型包括如下属性(不熟悉请复习webgl教程):

最后要构建出如下所示的经纬球模型

首先可以从xy平面构建圆形,接着再从xz平面将圆形转化为圆球,这其中只需使用到三角函数而已,是不是非常简单。

下面就是构建网格模型的基本逻辑:

和普通着色器相比,只是增加了uv坐标,uv直接通过顶点着色器差值透传到片段着色器即可,在片段着色器使用texture2D函数获取uv坐标对应的颜色,整体上也是比较基础。

最后实现部分就和之前的webgl基本逻辑一致,不过要准备好地球贴图

图片加载完将构建好的贴图sampler传入着色器即可,其他都是基础业务逻辑,不再详述,这样我们就将三维地球实现了

可以,例如三维地球

JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。

二者都是基于WebGL技术开发的js库

Threejs受众面比较广,是封装了webgl的一些底层用法,让初学者更容易上手;例如绘制一个立方体,使用webgl原生api可能要写50行代码,包括构建坐标点,顶点组织、着色器等信息;在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api),只是做了更大粒度的封装

Cesium受众面相对较小,是Gis相关的,也是基于WebGL开发的,它主要是三维地球相关的js库,可以展示二维地图服务(百度高德)、倾斜摄影模型;还可以在上面做一些三维分析,可以参考http://cesium.xin