本节实现的效果: 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