一个WebGI的年终总结

Lixc
4,206 阅读9分钟

「时光不负，创作不停，本文正在参加2021年终总结征文大赛」

前言

又到了一年一度写年终总结的时候了,不过不同的是以前都是为了应付公司的年终总结大会，这次是想自己认真的总结一下（不是为了马克杯！！）

我的技术之路

这是我毕业以后的第二年，作为一个地理信息系统出身的WebGIS，一个半吊子前端，今年对我来说学到的很多，包括对cesium的一些api做了进一步封装（为了项目需要）、mapbox+threebox进行的轻量级城市模型展示、three园区内容展示、scensjs医疗模型与动画效果平台、基础的shader实现(为了实现一些后处理和模型材质定制化)，vue3.0学习，一些以前没有掌握的js语法，慢慢的把工作重心从WebGIS转移到WebGL。

2021.03－2021.04完成了一个web端项目移动端适配

新的一年的第一份任务就是公司想把以前在PC的web端展示的项目放到移动端展示，因为公司的移动端开发抽不出来人手，而且基于web端已经完成了一版开发，所以当时就想让移动端搭个架子，通关app内嵌网页的形式来实现这个项目（当时猜到会有问题但是没想到问题这么多😂）。主要遇到的问题包括

  1. 移动端对WebGL的支持情况。
  2. 网页占用内存过大直接导致苹果浏览器直接重刷网页（Flatter内嵌网页走的也是浏览器性能），相对来说安卓就宽容的多。
  3. 以前PC端项目是用Cesium写的，这个引擎太臃肿了，要放在手机浏览器加载效率肯定不行，需要换解决三维展示的解决方案。 当时对mapbox+threebox进行的相关调研，确定项目在cesium上完成的功能大多都能移植到mapbox上，然后就是项目的重构（我们WebGIS和前端是分离的，数据交互当时是通关vuex，所以项目只需要修改设计地图部分内容相对比较简单），对占用内存大的内容例如日照分析，噪声分析等展示效果进行阉割（手机端展示了还要啥自行车！！）。

日照分析（阉割了）

image.png image.png image.png

噪声分析、景观分析　　　　　　

image.png　　　　　　　　　 image.png

image.png　　　　　　　　　　 image.png

这个项目让我成长最多的是让我知道一个效果要多准备几个实现方案，实在实现不了就多和项目经理交流（砍需求！！）。

2021.05完成了一个大屏项目。

这个是一个基于mapbox的项目，然后实现了一些功能逻辑模块，例如绘制啊、光照、阴影、景观、查找数据联动、精模加载展示。（项目汇报完接口都关了，随便找了张图😂）

image.png

2021.06　动态效果封装

由于这个月公司准备新开了一个产品线还在调研，所以比较闲可以梳理一下以前做的效果顺便做一下封装。

  • 基于Cesium做了一个小工具，可以进行加载在线模型后可修改模型参数，包括位置，大小，旋转角度，模型对比度饱和度，模型颜色，方便数据部加载调整建筑模型参数。
  • 对Cesium进行上层封装，封装了流动线效果，后处理扩散效果（扩散可以加在建筑物上）

image.png

  • 对Three进行上层封装，封装了流动线样式，数字上升效果，后处理发光，模型轨迹模拟，南北回归线轨迹模拟，扩散圆效果，三角锥注记，小区日照分析模块。 image.png

这些例子都和以前封装的放到一起，方便后面调用（谁能想到从这开始后半年就没接触过地图）

2021.07　模型转换服务

当时公司想写一个在线进行模型转换的工具，用于在线转换各种不同的模型格式（嗯，这个也是个坑，当时还没有意识到）。

我开始调研了市面上常用的开源的模型转换插件，当时调研过blend的插件，C++的assimp，three的edit，最后确认用three进行转换，因为其他两个插件的语言是python和C++，而且转换完成后需要在网页上进行展示，另外两个插件转换出来的格式不一定支持。

当时的思路是用node调用three的库进行模型转换，然后生成模型，因为模型转换的插件都是写好的，当时感觉很简单直接调用就行。然后问题就来了。

  1. three是前端框架 有一些操作基于dom元素和Blob对象，可惜node没得。
  2. 转换出来的模型贴图位置错误。
  3. three的插件对多纹理贴图的支持不是很好，结构都好导出，纹理导出根据模型不同出的问题也不同。
  4. three不支持FBX格式模型的导出。 解决方案
  5. 找别人写的开源库，然后引进创建对应的dom，把Bolb改成buffers，对应用到的地方都改了。
let { DOMImplementation, XMLSerializer } = require("xmldom");
let document = new DOMImplementation().createDocument("html", "html", null);
  1. 经测试发现是贴图X轴进行了对称，然后反转了180度（贴图数据是通关base64格式储存的），然后通关引进sharp库对照片进行翻转。
  2. 引擎本身的问题，没法改，只能支持一部分模型材质。
  3. 做不了，砍需求！。

这个项目实现了对一部分模型格式（three支持的）转换成gltf格式，obj格式。但是复杂的模型经常出现问题，而且由于项目事件原因，后面的问题等有时间再解决把。（three都没有解决我感觉我应该是解决不了了）

通过这个项目我了解了three对模型请求数据加载顺序，对顶点数据position，排列数据indices，法向量数据normals，纹理信息数据uvs，和贴图数据请求，gltf模型格式有了进一步了解。

2021.08-2021.12医疗项目（折磨开始了）

本来我以为这个项目是简单的完成一版本，应付下项目验收，天真了，整个后半年工作全投入找了这个产品线，我的工作重心也从WebGIS转到了WebGL。

  1. 首先是第一版demo通过three实现了模型的加载重置切换，点击缩放透明高亮，扫描线效果,外边框发光效果，简易的实现了第一版医疗项目。

image.png 这里比较麻烦的点又three没有对模型的FlyTo功能，在网上也没找到对应的插件，需要自己写，然后是扫描线的后处理，外轮廓发光的后处理有现成的例子（这里就不展开说了，后面有时间写一下对应的专栏）。 然后迭代开始！

  • 模型在手机上锯齿感严重？ 加FXAA后处理抗锯齿！
  • 模型太大加载时间慢？ 模型采用draco压缩，第一次加载储存到浏览器数据库中，后面加载直接读！
  • 跳转动作僵硬？ 用tween做平滑动画效果！
  • 模型透明效果不好看，桌面端软件处理的效果和网页上显示不一样？自己写材质，用shader材质，进行替换！
  • 想要血脉流动效果？ 模拟点数据，用贝塞尔曲线生成管道，然后做材质流动！
  • 要模拟运动场景？找天空盒，运动模型，加！
  • 要在场景里面加模型介绍？css3d加到场景里面！
  • 器官模型展示不精细？每个器官点击单独做二级界面，单独展示！ 这些有用没用的需求做了两个月 然后模型变成下面这样

image.pngimage.png

然后 感觉做的不好看整个项目推到重来！！！！！，嗯 重新做，我不生气，我不生气。

  1. 换框架，用了一款以前的框架scene.js。因为数据是基于真个框架展示的，对精细医疗模型的动画效果个细节展示也比three的好（当然最主要的原因是我three有点菜，没法把scene对应的材质和动画效果般到three上），然后就是基于这个框架做模型编辑器，模型展示平台，模型转换服务（这个还在进行中，只能说效果好了不是一点半点）。

总结与展望

总结

  1. 工作重心转型，从WebGIS到WebGL，其实工作性质差不多，就是接触地图和Gis服务变少了。
  2. shader学习，敲写点光源，平行光，环境光对模型的影响，添加纯色贴图，透明贴图，法向量贴图，环境光贴图，并进行材质融合。（这里推荐一个网站可以进行学习wgld.org/d/webgl/）。
  3. three的源码解读（跟着别人写的注释文章看的），接口的进一步学习，熟悉了多通道后处理，自定义材质这些相对难一点的功能。
  4. es的一些语法，vue3.0框架的新内容学习。

展望

  1. 对WebGL进行更深度的学习，多看并理解别人写的shader，争取明年能自己写一些效果。
  2. 做一些WebGl的技术分析，例如一些效果封装和思路，一些简单的shader添加到cesium或者three中，少打会游戏争取两周一更新！
  3. 前端的知识不能落下(前端更新的太快了😭)。
  4. WebGPU的消息及时关注，把目前给的示例效果实现一遍。
  5. 关注 cesium和mapbox的更新。
  6. 考虑一下什么时候回老家，提前了解一下行业内公司。
  7. 养一只猫！！！

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊

  • 本文首发于掘金，未经许可禁止转载💌

avatar
文章
阅读
粉丝