three-tile: 从头编写一套三维瓦片地图框架,大家是否有兴趣?

提到web端三维地图,最火的非cesium莫属,逼真的三维地图渲染技术叹为观止,但复杂的代码也让大部分程序员望尘莫及。

其实市面上的三维Gis平台还有不少,包括GoogleEather、WorldWind、Virtual Earth、ArcGIS、Mapbox-gl、maplibre-gl-js、iTwons、procedural-gll、deck.gl等,国内高德、百度、腾讯等地图也有少量3d功能,还有大量公司基于cesium套壳推出自己产品。

基于业务需求,迫切需要一套轻量级、快速、易扩展的三维WEB地图框架,基于这个地图将前期基于threejs做的一些应用叠加到三维地图上。不需要cesium那么强大的功能,但三维地形需要逼真、对显卡等硬件资源需求要低,速度要快,以给其上的业务数据可视化留出发挥空间。没找到用着顺手的,只有重新发明一个轮子了。

 好了,不装了,做这个的真正原因是:不就是个动态LOD模型嘛,我也行。

个人写底层框架是个出力不讨好的活,功能上与主流成熟产品没法比,拿出来别人的反应是嗤之以鼻,抄的xxx的吧。其实我也想抄抄cesium,但无奈看不懂呀,作为从c++、delphi、c#过来的老年人,面向对象思想已根深蒂固,真不适应cesium所用的组合式代码模式。

从webgl底层开始工作量太大,比较了threejs、babylonjs 、untiy3d等三维引擎,最终还是选择了threejs,后两个基本上都是用于游戏开发。但不管用什么三维引擎,技术思路都一样,如果真有需求,我也不介意用这俩再写一遍。

代码全部使用typescript编写,打包使用vite,运行依赖目前只有threejs一个。代码风格遵循threejs,LOD模型+loader加载器。计划开源,但国内开源环境实在不行,没有人跟你讨论技术,白嫖不说,收到只有一片骂声。看情况再说吧,先把demo发出来看看。

 

demo:three-tile demo (sxguojf.github.io)icon-default.png?t=N7T8https://sxguojf.github.io/three-tile-example/

  

这是一个简单的使用OpenGL绘制三维瓦片地图的示例代码: ``` #include <GL/glut.h> // 地图大小 const int mapWidth = 10; const int mapHeight = 10; // 瓦片大小 const float tileSize = 1.0f; // 高度图数据 float heightMap[mapWidth][mapHeight] = { { 1.0f, 2.0f, 3.0f, 4.0f, 3.0f, 2.0f, 1.0f, 1.0f, 1.0f, 1.0f }, { 2.0f, 3.0f, 4.0f, 5.0f, 4.0f, 3.0f, 2.0f, 2.0f, 2.0f, 2.0f }, { 3.0f, 4.0f, 5.0f, 5.0f, 5.0f, 4.0f, 3.0f, 3.0f, 3.0f, 3.0f }, { 4.0f, 5.0f, 5.0f, 5.0f, 5.0f, 5.0f, 4.0f, 4.0f, 4.0f, 4.0f }, { 3.0f, 4.0f, 5.0f, 5.0f, 5.0f, 4.0f, 3.0f, 3.0f, 3.0f, 3.0f }, { 2.0f, 3.0f, 4.0f, 5.0f, 4.0f, 3.0f, 2.0f, 2.0f, 2.0f, 2.0f }, { 1.0f, 2.0f, 3.0f, 4.0f, 3.0f, 2.0f, 1.0f, 1.0f, 1.0f, 1.0f }, { 1.0f, 2.0f, 3.0f, 4.0f, 3.0f, 2.0f, 1.0f, 1.0f, 1.0f, 1.0f }, { 1.0f, 2.0f, 3.0f, 4.0f, 3.0f, 2.0f, 1.0f, 1.0f, 1.0f, 1.0f }, { 1.0f, 2.0f, 3.0f, 4.0f, 3.0f, 2.0f, 1.0f, 1.0f, 1.0f, 1.0f } }; void display() { // 清空屏幕 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // 设置相机位置 glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(-mapWidth / 2.0f, -mapHeight / 2.0f, -mapHeight * 2.0f); // 绘制地图 for (int x = 0; x < mapWidth - 1; x++) { glBegin(GL_TRIANGLE_STRIP); for (int y = 0; y < mapHeight; y++) { // 计算瓦片高度 float h1 = heightMap[x][y]; float h2 = heightMap[x+1][y]; // 绘制瓦片 glColor3f(h1 / 5.0f, h1 / 5.0f, h1 / 5.0f); glVertex3f(x * tileSize, y * tileSize, h1); glColor3f(h2 / 5.0f, h2 / 5.0f, h2 / 5.0f); glVertex3f((x + 1) * tileSize, y * tileSize, h2); } glEnd(); } // 刷新屏幕 glutSwapBuffers(); } void reshape(int width, int height) { // 设置视口大小 glViewport(0, 0, width, height); // 设置投影矩阵 glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0f, (float)width / (float)height, 0.1f, 100.0f); } int main(int argc, char** argv) { // 初始化GLUT glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH); glutInitWindowSize(640, 480); glutCreateWindow("OpenGL 3D Tile Map"); // 设置回调函数 glutDisplayFunc(display); glutReshapeFunc(reshape); // 启用深度测试 glEnable(GL_DEPTH_TEST); // 进入主循环 glutMainLoop(); return 0; } ``` 这个示例代码使用了OpenGL的三角形带(`GL_TRIANGLE_STRIP`)来绘制地图,高度图数据存储在二维数组`heightMap`中。在`display`函数中,使用`glBegin`和`glEnd`函数绘制瓦片,并使用`glColor3f`函数设置瓦片颜色。在`reshape`函数中,设置了投影矩阵来控制相机视角。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值