preface

As an autonomous driving front end, we need to do some cool vehicle HMI, 3D visual monitoring and so on. Frequent exposure to GIS and WebGL frameworks is unavoidable. However, our company’s unmanned driving is different from tesla, Xiaopeng and NIO, which are well known in the market. Mainline technology most of the business is in the port, you know the general port, government and enterprise projects for network security, generally is not allowed to access the Internet. Therefore, it is very important for a common library to solve multiple business scenarios (public network and internal network) and to be deployed offline without relying on the external network.

At the beginning, we used OpenLayers, offline use, map loading, geoJSON graphics loading and editing, all of which had excellent performance in line with our business. But OpenLayers only has 2D display, which is far from enough if we want to make a cool 3D visualization map. Is there a solution that fits our business and has a cool 3D display? The answer is yes, and let’s move on.

Technology selection

Framework needs

  1. Open source
  2. It can be deployed offline.
  3. Support various map services loading.
  4. Support geojson.
  5. Support 3D display, GLB/GLTF model display, editing.
  6. Excellent performance and scalability.
  7. Smooth learning curve.
  8. Good community, issue repair speed.

Known WebGL && Gis frameworks

  1. Mapbox-gl.js
  2. Cesium.js
  3. Deck.gl
  4. MapTalks.js
  5. Three.js

It is worth mentioning that Three.js itself does not belong to GIS, but it can realize our business needs through some means. In addition, mapBox and MapTalks below 1.0.0 are all 3D displays implemented by add-on three.js. Based on our framework requirements, we finally chose MapTalks.

MapTalks

MapTalks profile

First of all, MapTalks is WebGL 3D map independently developed by Chinese people. In the foreign map frame top, domestic magic change open source to sell money under the environment, can make such a result is not easy, only with this courage is worth our praise.

MapTalks advantage

  1. Performance optimization: A separate underlying implementation ensures more means of performance optimization.
  2. Rendering effect: PBR based material system, so that 3d map rendering effect has unlimited possibilities.
  3. MapTalks is built on an open data format and does not restrict users to a particular data format or service.

MapTalks compares the old and new versions

V1.0.0, in addition to significant performance improvements, also adds a number of new features and features:

GeoJSONVectorTileLayer, for example, 3 dtitle etc, the most important thing is this time added to the 3 d model rendering itself, including the HDR global environment light, the sky boxes, weather effects, commonly used post-processing floodlight anti-aliasing space reflection animation and so on. The old version was implemented with three. Js by an enthusiastic community leader, and the performance and effects are quite good, of course, in the new version has been retained. For details, please refer to maptalks. Three: deyihu. Making. IO/maptalks. Th…

This brings up another advantage of MapTalks. This is a big upgrade, but the API is still compatible with the older version (@three.js learn!). This certainly reduces a lot of time for project upgrade iterations. The following is a simple comparison of the use of the old and new versions of our business. The new features and functions are far from this. For more details, please check the official document: maptalks.com/

MapTalks supporting tools

IDE MapTalks: Integrated design environment, 3d map scene design software

MapTalks Designer: Vector base map color matching software

Currently in public beta, you can try it for free. Later may have to charge, after all, the family is to eat. As you can understand, this is a low-code platform, and it’s easy to implement all kinds of effects at the flick of your finger, even if you don’t know the code!

Optimize two or three things

Even the best framework can cause your project to fail because it’s not used properly. Especially in projects like WebGL, performance optimization is a top priority. A careless, CPU, GPU consumption and temperature are up, the effect of the machine can not stand. Let me talk about our optimization strategy and some considerations.

  1. The first step is to turn on the developer options performance Monitor. Once CPU inflation occurs; The JS heap size, DOM contacts only grow, that must be careful, this will cause your page to crash. There may be a problem with your code. Check for breakpoints carefully

  1. Linux environment, if your production environment is Linux. Be sure to check whether the graphics card driver is working properly or specify the hardware configuration and system version for the production environment. When running a WebGL project, the browser will call the graphics card resources. When your graphics card driver is abnormal, the browser webGL will report an error, and the project is likely to fail to run and be stuck.

  2. Model performance optimization, as far as possible to reduce the model invisible or unnecessary points, lines and planes, the browser to draw more model points on the machine performance consumption.

  3. For model loading, considering network traffic factors, it is suggested to convert the model into binary model such as GLTF or FBX, and use promise. All and loading animation to improve user experience. If the LAN bandwidth is sufficient, it is not recommended to compress the model if the model is not very large, because decompression itself requires certain performance consumption.

  4. Event registration, setTimeout and setInterval, requestAnimationFrame, map instance in components such as destruction of must pay attention to the unbundling and destroyed.

  5. We can use requestAnimationFrame to animate models without using setInterval. When the browser doesn’t reach the specified call period, requestAnimationFrame skips certain frames to animate models. It’s going to get stuck but it’s not going to slow down, and setInterval will slow down the whole program, but every frame will be drawn. One more thing but requestAnimationFrame will sleep automatically if you are not in the current page, setInterval will always run, and the page will crash if your computer is not performing well. Here’s a quick example:

      let s = 0;
      let a = 0;
      setInterval(() = > {
        s++;
        console.log("setInterval", s);
      }, 16);

      function animation() {
        a++;
        requestAnimationFrame(animation);
        console.log("requestAnimationFrame", a);
      }
      animation();
Copy the code

  1. When it comes to data assembly calculation and multi-layer cycle processing, webworker should be reasonably used to share the pressure for the main rendering process.

  2. Use VUE and React to update data frequently, and make data comparisons during model animation operations to avoid repeated data triggering all the time. Because there’s no virtual DOM involved, the framework doesn’t do diff comparisons for you.

  3. If the data volume is large and requests are frequent, you are advised to use Websockt + Protobuf instead of HTTP + JSON to reduce the data volume of a single frame and improve the stability

There’s a lot more to add when I remember.

conclusion

In general, MapTalks is an excellent WEBGL 3D map framework in terms of ease of use, extensibility and effect. However, due to the current version of the public test, the introduction of packages is still a bit complicated, there are some bugs without TS support, and it is not stable enough. But the official team has been listening to people’s opinions and actively improving, and you may even get your own version of Zhen. It is understandable that we are willing to give more time to the excellent framework independently developed by Chinese people. I will not introduce the API in this article, because the official itself is very detailed and careful, there are a variety of examples and API for everyone to look up.

MapTalks official website: maptalks.com/

MapTalks core library: mapTalks.org/

MapTalks. Three plug-ins: deyihu. Making. IO/MapTalks. Th…

QQ group: 971657972